feat(projects): antd menu

packages/hooks/src/index.ts

@@ -1,5 +1,6 @@
 import useBoolean from './use-boolean';
 import useLoading from './use-loading';
 import useContext from './use-context';
+import useSvgIconRender from './use-svg-icon-render';
 
-export { useBoolean, useLoading, useContext };
+export { useBoolean, useLoading, useContext, useSvgIconRender };

packages/hooks/src/use-svg-icon-render.ts

@@ -0,0 +1,56 @@
+import { h } from 'vue';
+import type { Component } from 'vue';
+
+/**
+ * svg icon render hook
+ * @param SvgIcon svg icon component
+ */
+export default function useSvgIconRender(SvgIcon: Component) {
+  interface IconConfig {
+    /**
+     * iconify icon name
+     */
+    icon?: string;
+    /**
+     * local icon name
+     */
+    localIcon?: string;
+    /**
+     * icon color
+     */
+    color?: string;
+    /**
+     * icon size
+     */
+    fontSize?: number;
+  }
+
+  type IconStyle = Partial<Pick<CSSStyleDeclaration, 'color' | 'fontSize'>>;
+
+  /**
+   * svg icon VNode
+   * @param config
+   */
+  const SvgIconVNode = (config: IconConfig) => {
+    const { color, fontSize, icon, localIcon } = config;
+
+    const style: IconStyle = {};
+
+    if (color) {
+      style.color = color;
+    }
+    if (fontSize) {
+      style.fontSize = `${fontSize}px`;
+    }
+
+    if (!icon && !localIcon) {
+      return undefined;
+    }
+
+    return () => h(SvgIcon, { icon, localIcon, style });
+  };
+
+  return {
+    SvgIconVNode
+  };
+}

src/layouts/modules/global-sider/index.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import { useRouteStore } from '@/store/modules/route';
 import GlobalLogo from '../../components/global-logo.vue';
 
 defineOptions({
   name: 'GlobalSider'
 });
+
+const route = useRouteStore();
 </script>
 
 <template>
   <DarkModeContainer class="flex-vertical-stretch wh-full shadow-sider">
     <GlobalLogo :show-title="true" class="h-48px" />
-    <div class="flex-1-hidden"></div>
+    <div class="flex-1-hidden">
+      <AMenu mode="inline" :items="route.antdMenus" />
+    </div>
   </DarkModeContainer>
 </template>
 

src/store/modules/route/index.ts

@@ -6,7 +6,7 @@ import type { RouteKey } from '@elegant-router/types';
 import { SetupStoreId } from '@/enum';
 import { router } from '@/router';
 import { createRoutes } from '@/router/routes';
-import { getGlobalMenusByAuthRoutes, getCacheRouteNames } from './shared';
+import { getGlobalMenusByAuthRoutes, getAntdMenuByGlobalMenus, getCacheRouteNames } from './shared';
 
 export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
@@ -26,14 +26,20 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   /**
    * global menus
    */
-  const menus = ref<App.Global.Menu[]>([]);
+  const globalMenus = ref<App.Global.Menu[]>([]);
+
+  /**
+   * antd menus
+   */
+  const antdMenus = ref<App.Global.AntdMenu[]>([]);
 
   /**
    * get global menus
    */
-  function getMenus() {
+  function getGlobalMenus() {
     const { treeRoutes } = createRoutes();
-    menus.value = getGlobalMenusByAuthRoutes(treeRoutes);
+    globalMenus.value = getGlobalMenusByAuthRoutes(treeRoutes);
+    antdMenus.value = getAntdMenuByGlobalMenus(globalMenus.value);
   }
 
   /**
@@ -75,7 +81,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
    */
   function handleRoutes(routes: RouteRecordRaw[]) {
     addRoutesToVueRouter(routes);
-    getMenus();
+    getGlobalMenus();
     getCacheRoutes();
   }
 
@@ -90,6 +96,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   }
 
   return {
+    antdMenus,
+    cacheRoutes,
     routeHome,
     initAuthRoute,
     isInitAuthRoute,

src/store/modules/route/shared.ts

@@ -1,3 +1,6 @@
+import { useSvgIconRender } from '@sa/hooks';
+import { $t } from '@/locales';
+import SvgIcon from '@/components/custom/svg-icon.vue';
 import type {
   ElegantRoute,
   RouteKey,
@@ -78,6 +81,33 @@ export function getCacheRouteNames(routes: ElegantRoute[]) {
   return cacheNames;
 }
 
+export function getAntdMenuByGlobalMenus(globalMenus: App.Global.Menu[]) {
+  const { SvgIconVNode } = useSvgIconRender(SvgIcon);
+
+  const menus: App.Global.AntdMenu[] = [];
+
+  globalMenus.forEach(menu => {
+    const { key, title, i18nKey, icon, localIcon, children } = menu;
+
+    const label = i18nKey ? $t(i18nKey) : title;
+
+    const antdMenu: App.Global.AntdMenu = {
+      key,
+      label,
+      title: label,
+      icon: SvgIconVNode({ icon, localIcon })
+    };
+
+    if (children?.length) {
+      (antdMenu as any).children = getAntdMenuByGlobalMenus(children);
+    }
+
+    menus.push(antdMenu);
+  });
+
+  return menus;
+}
+
 type FirstLevelRoute = SingleLevelRoute | CustomSingleLevelRoute;
 
 function isFirstLevelRoute(route: ElegantRoute): route is FirstLevelRoute {

src/typings/app.d.ts

@@ -69,6 +69,7 @@ declare namespace App {
   }
 
   namespace Global {
+    type AntdMenu = NonNullable<import('ant-design-vue').ItemType>;
     type RouteKey = import('@elegant-router/types').RouteKey;
     type RouteMap = import('@elegant-router/types').RouteMap;