feat(projects): 菜单数据及组件接入

src/router/index.ts

@@ -21,3 +21,4 @@ export async function setupRouter(app: App) {
 }
 
 export { RouteNameMap };
+export { menus } from './menus';

src/router/menus.ts

@@ -1,5 +1,49 @@
-import { CustomRoute } from '@/interface';
+import type { Component } from 'vue';
+import { customRoutes } from './routes';
+import { CustomRoute, GlobalMenuOption } from '@/interface';
+import { dynamicIconRender } from '@/utils';
 
 export function transformRouteToMenu(routes: CustomRoute[]) {
-  return routes;
+  const globalMenu: GlobalMenuOption[] = [];
+  routes.forEach(route => {
+    if (asMenu(route)) {
+      const { name, path, meta } = route;
+      const routeName = name as string;
+      let menuChildren: GlobalMenuOption[] | undefined;
+      if (route.children) {
+        menuChildren = transformRouteToMenu(route.children as CustomRoute[]);
+      }
+      const menuItem: GlobalMenuOption = addPartialProps(
+        {
+          key: routeName,
+          label: meta?.title ?? routeName,
+          routeName,
+          routePath: path
+        },
+        meta?.icon,
+        menuChildren
+      );
+      globalMenu.push(menuItem);
+    }
+  });
+  return globalMenu;
 }
+
+/** 判断路由是否作为菜单 */
+function asMenu(route: CustomRoute) {
+  return Boolean(route.meta?.asMenu);
+}
+
+/** 给菜单添加可选属性 */
+function addPartialProps(menuItem: GlobalMenuOption, icon?: Component, children?: GlobalMenuOption[]) {
+  const item = { ...menuItem };
+  if (icon) {
+    Object.assign(item, { icon: dynamicIconRender(icon) });
+  }
+  if (children) {
+    Object.assign(item, { children });
+  }
+  return item;
+}
+
+export const menus = transformRouteToMenu(customRoutes);

src/router/routes.ts

@@ -1,4 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
+import { Dashboard } from '@vicons/carbon';
+import { ExceptionOutlined } from '@vicons/antd';
 import { BasicLayout, BlankLayout } from '@/layouts';
 import { EnumRoutePath, EnumRouteTitle } from '@/enum';
 import type { CustomRoute, RoutePathKey, LoginModuleType } from '@/interface';
@@ -100,7 +102,7 @@ export const customRoutes: CustomRoute[] = [
     meta: {
       title: EnumRouteTitle.dashboard,
       asMenu: true,
-      icon: 'mdi:view-dashboard'
+      icon: Dashboard
     },
     children: [
       {
@@ -130,7 +132,7 @@ export const customRoutes: CustomRoute[] = [
     meta: {
       title: EnumRouteTitle.exception,
       asMenu: true,
-      icon: 'ant-design:exception-outlined'
+      icon: ExceptionOutlined
     },
     children: [
       {
@@ -157,7 +159,7 @@ export const customRoutes: CustomRoute[] = [
         component: () => import('@/views/system/exception/500.vue'),
         meta: {
           title: EnumRouteTitle['exception-500'],
-          asMenu: true
+          asMenu: false
         }
       }
     ]