feat: 增加菜单管理

2026-04-18 16:24:57 +08:00
parent 2916c04ba5
commit 8b2251ef97
10 changed files with 2005 additions and 200 deletions
@@ -0,0 +1,131 @@
+<template>
+  <div class="icon-selector">
+    <el-input
+      :model-value="modelValue"
+      placeholder="点击选择图标"
+      readonly
+      @click="popoverVisible = true"
+    >
+      <template #prefix>
+        <el-icon v-if="modelValue" :size="18">
+          <component :is="modelValue" />
+        </el-icon>
+      </template>
+      <template #suffix>
+        <el-icon v-if="modelValue" class="clear-btn" @click.stop="handleClear"><CircleClose /></el-icon>
+      </template>
+    </el-input>
+
+    <el-dialog v-model="popoverVisible" title="选择图标" width="680px" append-to-body>
+      <el-input v-model="searchKey" placeholder="搜索图标名称" clearable class="icon-search">
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+      <div class="icon-grid">
+        <div
+          v-for="name in filteredIcons"
+          :key="name"
+          class="icon-item"
+          :class="{ active: modelValue === name }"
+          @click="handleSelect(name)"
+        >
+          <el-icon :size="22"><component :is="name" /></el-icon>
+          <span class="icon-name">{{ name }}</span>
+        </div>
+      </div>
+      <div v-if="filteredIcons.length === 0" class="icon-empty">
+        未找到匹配的图标
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { Search, CircleClose } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const popoverVisible = ref(false)
+const searchKey = ref('')
+
+const allIcons = Object.keys(ElementPlusIconsVue).sort()
+
+const filteredIcons = computed(() => {
+  if (!searchKey.value) return allIcons
+  const key = searchKey.value.toLowerCase()
+  return allIcons.filter(name => name.toLowerCase().includes(key))
+})
+
+const handleSelect = (name) => {
+  emit('update:modelValue', name)
+  popoverVisible.value = false
+  searchKey.value = ''
+}
+
+const handleClear = () => {
+  emit('update:modelValue', '')
+}
+</script>
+
+<style scoped>
+.icon-selector { width: 100%; }
+.icon-search { margin-bottom: 12px; }
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 10px 4px;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.icon-item:hover {
+  border-color: #409eff;
+  background: #ecf5ff;
+  color: #409eff;
+}
+.icon-item.active {
+  border-color: #409eff;
+  background: #409eff;
+  color: #fff;
+}
+.icon-name {
+  font-size: 11px;
+  text-align: center;
+  line-height: 1.2;
+  word-break: break-all;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icon-empty {
+  text-align: center;
+  color: #909399;
+  padding: 40px 0;
+  font-size: 14px;
+}
+.clear-btn {
+  cursor: pointer;
+  color: #c0c4cc;
+  transition: color 0.2s;
+}
+.clear-btn:hover { color: #f56c6c; }
+</style>