feat: 架构调整

src/layouts/BasicLayout.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, h, ref } from 'vue';
 import { useRouter, useRoute, RouterView } from 'vue-router';
 import { Layout, Menu } from 'ant-design-vue';
 import type { MenuProps } from 'ant-design-vue';
@@ -7,13 +7,50 @@ import {
   InfoCircleOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
+  SettingOutlined,
 } from '@ant-design/icons-vue';
+import { useMenuStore } from '@/stores/menuStore';
 import styles from './BasicLayout.module.less';
 
 const { Header, Sider, Content, Footer } = Layout;
 
 /**
- * 基础布局:左侧导航 + 顶部栏 + 内容区 + 页脚
+ * 图标名 → 组件映射
+ * 后端下发的 icon 字符串在此映射为 antd icon 组件
+ * 扩展新图标只需在此添加一行
+ */
+const ICON_MAP: Record<string, any> = {
+  DashboardOutlined,
+  InfoCircleOutlined,
+  SettingOutlined,
+};
+
+/**
+ * 将 menuStore 中的 menuItems 转为 antd Menu 的 items 格式
+ * 递归处理 iconName → icon VNode
+ */
+function resolveMenuItems(items: any[]): MenuProps['items'] {
+  return items.map((item) => {
+    const resolved: any = {
+      key: item.key,
+      label: item.label,
+    };
+
+    // iconName 字符串转为 VNode
+    if (item.iconName && ICON_MAP[item.iconName]) {
+      resolved.icon = () => h(ICON_MAP[item.iconName]);
+    }
+
+    if (item.children?.length) {
+      resolved.children = resolveMenuItems(item.children);
+    }
+
+    return resolved;
+  });
+}
+
+/**
+ * 基础布局:左侧导航(后端菜单驱动) + 顶部栏 + 内容区 + 页脚
  */
 export default defineComponent({
   name: 'BasicLayout',
@@ -22,12 +59,11 @@ export default defineComponent({
     const router = useRouter();
     const collapsed = ref(false);
 
+    const { menuItems } = useMenuStore();
+
     const selectedKeys = computed<string[]>(() => [route.path]);
 
-    const menuItems: MenuProps['items'] = [
-      { key: '/dashboard', icon: () => <DashboardOutlined />, label: '工作台' },
-      { key: '/about', icon: () => <InfoCircleOutlined />, label: '关于' },
-    ];
+    const resolvedItems = computed(() => resolveMenuItems(menuItems.value));
 
     const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
       router.push(key as string);
@@ -47,7 +83,7 @@ export default defineComponent({
             theme="dark"
             mode="inline"
             selectedKeys={selectedKeys.value}
-            items={menuItems}
+            items={resolvedItems.value}
             onClick={handleMenuClick}
           />
         </Sider>