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>
@@ -0,0 +1,148 @@
+<template>
+  <div class="menu-path-selector">
+    <el-input
+      :model-value="modelValue"
+      placeholder="点击从菜单中选择路径，或手动输入"
+      clearable
+      @input="$emit('update:modelValue', $event)"
+    >
+      <template #append>
+        <el-button @click="dialogVisible = true">
+          <el-icon><FolderOpened /></el-icon>
+        </el-button>
+      </template>
+    </el-input>
+
+    <el-dialog v-model="dialogVisible" title="选择菜单路径" width="550px" append-to-body>
+      <el-input v-model="searchKey" placeholder="搜索菜单名称或路径" clearable class="path-search">
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+      <div class="menu-tree">
+        <el-tree
+          :data="filteredMenuTree"
+          :props="{ label: 'label', children: 'children' }"
+          node-key="path"
+          :default-expand-all="!!searchKey"
+          :expand-on-click-node="false"
+          highlight-current
+          @node-click="handleNodeClick"
+        >
+          <template #default="{ data }">
+            <div class="tree-node" :class="{ 'is-selected': modelValue === data.path, 'no-path': !data.path }">
+              <el-icon v-if="data.icon" :size="16" style="margin-right: 6px; flex-shrink: 0;">
+                <component :is="data.icon" />
+              </el-icon>
+              <span class="node-title">{{ data.title }}</span>
+              <el-tag v-if="data.path" size="small" type="info" class="node-path">{{ data.path }}</el-tag>
+            </div>
+          </template>
+        </el-tree>
+      </div>
+      <div v-if="filteredMenuTree.length === 0" class="tree-empty">
+        未找到匹配的菜单
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Search, FolderOpened } from '@element-plus/icons-vue'
+import { menus } from '@/config/menus'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const dialogVisible = ref(false)
+const searchKey = ref('')
+
+const buildTreeData = (menuList) => {
+  return menuList.map(item => {
+    const node = {
+      path: item.path || '',
+      title: item.title,
+      icon: item.icon || '',
+      label: item.title
+    }
+    if (item.children?.length) {
+      node.children = buildTreeData(item.children)
+    }
+    return node
+  })
+}
+
+const menuTree = computed(() => buildTreeData(menus))
+
+const filterTree = (nodes, keyword) => {
+  const key = keyword.toLowerCase()
+  const result = []
+  for (const node of nodes) {
+    const titleMatch = node.title?.toLowerCase().includes(key)
+    const pathMatch = node.path?.toLowerCase().includes(key)
+    let filteredChildren = []
+    if (node.children?.length) {
+      filteredChildren = filterTree(node.children, keyword)
+    }
+    if (titleMatch || pathMatch || filteredChildren.length > 0) {
+      result.push({
+        ...node,
+        children: filteredChildren.length > 0 ? filteredChildren : node.children
+      })
+    }
+  }
+  return result
+}
+
+const filteredMenuTree = computed(() => {
+  if (!searchKey.value) return menuTree.value
+  return filterTree(menuTree.value, searchKey.value)
+})
+
+const handleNodeClick = (data) => {
+  if (!data.path) return
+  emit('update:modelValue', data.path)
+  dialogVisible.value = false
+  searchKey.value = ''
+}
+</script>
+
+<style scoped>
+.menu-path-selector { width: 100%; }
+.path-search { margin-bottom: 12px; }
+.menu-tree {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 8px 0;
+}
+.tree-node {
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  width: 100%;
+  border-radius: 4px;
+}
+.tree-node.is-selected {
+  background: #ecf5ff;
+  color: #409eff;
+}
+.tree-node.no-path {
+  color: #909399;
+  cursor: default;
+}
+.node-title { margin-right: 8px; font-size: 13px; }
+.node-path { flex-shrink: 0; }
+.tree-empty {
+  text-align: center;
+  color: #909399;
+  padding: 40px 0;
+  font-size: 14px;
+}
+:deep(.el-tree-node__content) { height: 36px; }
+:deep(.el-tree-node__content:hover) { background-color: #f5f7fa; }
+</style>