大屏页面初始化

screen-vue/src/views/system/icon/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="icon-demo-container">
+    <div class="header">
+      <div class="search-wrapper">
+        <el-input
+          v-model="searchKey"
+          placeholder="输入图标名称搜索"
+          class="search-input"
+        >
+          <template #suffix>
+            <el-icon class="search-icon"><Search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+    </div>
+
+    <div class="icon-list-wrapper">
+      <div class="icon-list">
+        <div v-if="Object.keys(filteredIcons).length === 0" class="empty-tip">
+          未找到匹配的图标，请更换关键词重试
+        </div>
+        <div 
+          v-for="(icon, key) in filteredIcons" 
+          :key="key" 
+          class="icon-item"
+          @click="copyIconName(key)"
+        >
+          <div class="icon-wrapper">
+            <el-icon :size="32">
+              <component :is="key" />
+            </el-icon>
+          </div>
+          <div class="icon-name">{{ key }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { Search } from '@element-plus/icons-vue'
+
+const searchKey = ref('')
+const filteredIcons = computed(() => {
+  if (!searchKey.value) {
+    return ElementPlusIconsVue 
+  }
+  const lowerKey = searchKey.value.toLowerCase()
+  return Object.fromEntries(
+    Object.entries(ElementPlusIconsVue).filter(([key]) => 
+      key.toLowerCase().includes(lowerKey)
+    )
+  )
+})
+
+const copyIconName = (key) => {
+  navigator.clipboard.writeText(key)
+    .then(() => {
+      ElMessage.success(`已复制图标名称：${key}`)
+    })
+    .catch(() => {
+      ElMessage.error('复制失败，请手动复制')
+    })
+}
+</script>
+
+<style scoped>
+.icon-demo-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  font-family: sans-serif;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  flex-direction: column; 
+  align-items: flex-start;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e6e6e6;
+  flex-shrink: 0; 
+  width: 100%;
+}
+
+.header h2 {
+  color: #333;
+  margin: 0 0 12px 0; 
+  font-size: 18px;
+}
+
+.search-wrapper {
+  width: 100%;
+}
+
+.search-input {
+  width: 100% !important;
+}
+
+.search-icon {
+  color: #999;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.search-icon:hover {
+  color: #409eff;
+}
+
+.icon-list-wrapper {
+  flex: 1;
+  overflow-y: auto; 
+  overflow-x: hidden;
+  padding-right: 4px;
+}
+
+.icon-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 12px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.empty-tip {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 40px;
+  color: #999;
+  font-size: 14px;
+}
+
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 8px;
+  border-radius: 6px;
+  background: #f5f7fa;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.icon-item:hover {
+  background: #e8eaed;
+  transform: translateY(-1px); 
+}
+
+.icon-wrapper {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #409eff;
+  margin-bottom: 6px;
+}
+
+.icon-name {
+  font-size: 12px; 
+  color: #333;
+  font-weight: 500;
+  text-align: center;
+  word-break: keep-all;
+  line-height: 1.2;
+}
+
+.icon-list-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+.icon-list-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+.icon-list-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+.icon-list-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+@media (max-width: 768px) {
+  .icon-list {
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  }
+  .header h2 {
+    font-size: 16px;
+  }
+}
+</style>