feat: 整合动态路由

.env

@@ -12,7 +12,7 @@ VITE_ICON_PREFIX=icon
 VITE_ICON_LOCAL_PREFIX=icon-local
 
 # auth route mode: static ｜ dynamic
-VITE_AUTH_ROUTE_MODE=static
+VITE_AUTH_ROUTE_MODE=dynamic
 
 # static auth route home
 VITE_ROUTE_HOME=home

src/router/elegant/routes.ts

@@ -82,7 +82,7 @@ export const generatedRoutes: GeneratedRoute[] = [
     meta: {
       title: 'system',
       i18nKey: 'route.system',
-      localIcon: 'system',
+      localIcon: 'menu-system',
       order: 1
     },
     children: [
@@ -93,7 +93,7 @@ export const generatedRoutes: GeneratedRoute[] = [
         meta: {
           title: 'system_menu',
           i18nKey: 'route.system_menu',
-          localIcon: 'tree-table',
+          localIcon: 'menu-tree-table',
           order: 3
         }
       }

src/router/routes/index.ts

@@ -39,7 +39,7 @@ const dynamicConstantRoutes: ElegantRoute[] = [
       title: 'home',
       i18nKey: 'route.home',
       icon: 'mdi:monitor-dashboard',
-      order: 1
+      order: -1
     }
   },
   {

src/store/modules/route/index.ts

@@ -9,6 +9,7 @@ import { createDynamicRoutes, createStaticRoutes, getAuthVueRoutes } from '@/rou
 import { ROOT_ROUTE } from '@/router/routes/builtin';
 import { getRouteName, getRoutePath } from '@/router/elegant/transform';
 import { fetchGetRoutes } from '@/service/api';
+import { humpToLine } from '@/utils/common';
 import { useAppStore } from '../app';
 import { useAuthStore } from '../auth';
 import { useTabStore } from '../tab';
@@ -72,6 +73,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     const authRoutesMap = new Map<string, ElegantConstRoute>([]);
 
     routes.forEach(route => {
+      parseRouter(route);
       authRoutesMap.set(route.name, route);
     });
 
@@ -89,6 +91,50 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     authRoutes.value = Array.from(authRoutesMap.values());
   }
 
+  function parseRouter(route: ElegantConstRoute, parent?: ElegantConstRoute) {
+    if (authRouteMode.value === 'dynamic') {
+      route.path = route.path.substring(1);
+      const name = humpToLine(route.path.substring(1).replace('/', '_'));
+      route.name = parent ? `${parent.name}_${name}` : name;
+
+      route.meta = route.meta ? route.meta : { title: route.name };
+
+      if (route.meta.icon) {
+        if (route.meta.icon.startsWith('icon-')) {
+          route.meta.localIcon = route.meta.icon.replace('icon-', 'menu-');
+          delete route.meta.icon;
+        }
+      }
+
+      // @ts-expect-error no hidden field
+      route.meta.hideInMenu = Boolean(route.hidden) || false;
+
+      route.meta.keepAlive = Boolean(route.meta.noCache) || false;
+
+      if (route.component !== 'layout.base') {
+        route.component = parent ? `view.${route.component}` : `layout.base$view.${route.component}`;
+      }
+
+      if (route.component.endsWith('iframe-page')) {
+        route.meta.href = String(route.meta.link);
+        route.path = '/iframe-page/123';
+        route.name = 'iframe_page';
+        route.component = 'view.iframe-page';
+      }
+
+      delete route.meta.link;
+      delete route.meta.noCache;
+      // @ts-expect-error no query field
+      delete route.query;
+      // @ts-expect-error no hidden field
+      delete route.hidden;
+    }
+
+    if (route.children) {
+      route.children.forEach(child => parseRouter(child, route));
+    }
+  }
+
   const removeRouteFns: (() => void)[] = [];
 
   /** Global menus */

src/views/system/menu/index.vue

@@ -49,14 +49,15 @@ const getMeunTree = async () => {
 
 getMeunTree();
 
-async function handleSubmitted() {
-  getMeunTree();
+async function handleSubmitted(menuType?: Api.System.MenuType) {
+  if (menuType === 'F') {
+    await getBtnMenuList();
+    return;
+  }
+  await getMeunTree();
   if (operateType.value === 'edit') {
     currentMenu.value = menuTreeRef.value?.getCheckedData().options[0] as Api.System.Menu;
   }
-  if (createType.value === 'F') {
-    getBtnMenuList();
-  }
 }
 
 function handleAddMenu(pid: CommonType.IdType) {
@@ -83,7 +84,7 @@ async function handleDeleteMenu(id?: CommonType.IdType) {
   expandedKeys.value.filter(item => !checkedKeys.value.includes(item));
   currentMenu.value = undefined;
   checkedKeys.value = [];
-  getBtnMenuList();
+  getMeunTree();
 }
 
 function renderPrefix({ option }: { option: TreeOption }) {
@@ -339,7 +340,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
               </NButton>
               <NPopconfirm @positive-click="() => handleDeleteMenu()">
                 <template #trigger>
-                  <NButton size="small" ghost type="error">
+                  <NButton size="small" ghost type="error" :disabled="btnData.length > 0 || btnLoading">
                     <template #icon>
                       <icon-ic-round-delete />
                     </template>

src/views/system/menu/modules/menu-operate-drawer.vue

@@ -30,7 +30,7 @@ interface Props {
 const props = defineProps<Props>();
 
 interface Emits {
-  (e: 'submitted'): void;
+  (e: 'submitted', menuType?: Api.System.MenuType): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -136,7 +136,10 @@ async function handleSubmit() {
     remark
   } = model;
 
-  const path = !model.path?.startsWith('/') ? `/${model.path}` : model.path;
+  let path = model.path;
+  if (model.isFrame === '1') {
+    path = !model.path?.startsWith('/') ? `/${model.path}` : model.path;
+  }
 
   let icon;
   if (model.icon) {
@@ -206,7 +209,7 @@ async function handleSubmit() {
   }
 
   closeDrawer();
-  emit('submitted');
+  emit('submitted', menuType);
 }
 
 watch(visible, () => {
@@ -265,7 +268,13 @@ const FormTipComponent = defineComponent({
           </NFormItemGi>
           <NFormItemGi v-if="menuType !== 'F'" :span="24" label="菜单类型" path="menuType">
             <NRadioGroup v-model:value="model.menuType">
-              <NRadioButton v-for="item in menuTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+              <NRadioButton
+                v-for="item in menuTypeOptions"
+                v-show="item.value !== 'F'"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              />
             </NRadioGroup>
           </NFormItemGi>
           <NFormItemGi :span="24" label="菜单名称" path="menuName">