feat

src/components/menu/index.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import type { RouteMeta } from 'vue-router'
 import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
 import useMenuTree from './use-menu-tree'
+import { COMMON_ICONS } from '@/views/ops/pages/system-settings/menu-management/menuIcons'
 
 export default defineComponent({
   emit: ['collapse'],
@@ -85,12 +86,28 @@ export default defineComponent({
       if (appStore.device === 'desktop') appStore.updateSettings({ menuCollapse: val })
     }
 
+    // 获取图标组件 - 支持 Arco Design 图标和 @tabler/icons-vue
+    const getIconComponent = (iconName: string) => {
+      if (!iconName) return null
+      
+      // 检查是否是 Tabler 图标（不以 'icon-' 开头）
+      if (!iconName.startsWith('icon-')) {
+        const IconComponent = COMMON_ICONS[iconName]
+        if (IconComponent) {
+          return () => h(IconComponent, { size: 18 })
+        }
+      }
+      
+      // 回退到 Arco Design 图标
+      return () => h(compile(`<${iconName}/>`))
+    }
+
     const renderSubMenu = () => {
       function travel(_route: RouteRecordRaw[], nodes = []) {
         if (_route) {
           _route.forEach((element) => {
             // This is demo, modify nodes as needed
-            const icon = element?.meta?.icon ? () => h(compile(`<${element?.meta?.icon}/>`)) : null
+            const icon = element?.meta?.icon ? getIconComponent(element?.meta?.icon as string) : null
             const node =
               element?.children && element?.children.length !== 0 ? (
                 <a-sub-menu