feat: 添加 vite-plugin-vue-meta-layouts 插件，优化路由菜单项生成逻辑

package.json

@@ -116,6 +116,7 @@
     "vite-plugin-fake-server": "^2.1.4",
     "vite-plugin-vue-devtools": "^7.6.8",
     "vite-plugin-vue-layouts": "^0.11.0",
+    "vite-plugin-vue-meta-layouts": "^0.5.1",
     "vue-tsc": "^2.2.0"
   }
 }

pnpm-lock.yaml

@@ -255,6 +255,9 @@ importers:
       vite-plugin-vue-layouts:
         specifier: ^0.11.0
         version: 0.11.0(vite@6.0.6(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
+      vite-plugin-vue-meta-layouts:
+        specifier: ^0.5.1
+        version: 0.5.1(vite@6.0.6(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))
       vue-tsc:
         specifier: ^2.2.0
         version: 2.2.0(typescript@5.7.2)
@@ -5082,6 +5085,12 @@ packages:
       vue: ^3.2.4
       vue-router: ^4.0.11
 
+  vite-plugin-vue-meta-layouts@0.5.1:
+    resolution: {integrity: sha512-iqy11j2oBIflxwBh4CCqbK3jl03hXO4RYYuj5/IvIe4m86zy7v2xwLOpyGZwP4RVRtJJTkXIiqTKQhR81ucVsg==}
+    peerDependencies:
+      vite: ^6.0.6
+      vue-router: '>=4.0.14'
+
   vite-plugin-webfont-dl@3.10.3:
     resolution: {integrity: sha512-9rRla7tYeDPRAApWWUdv0lGnU/rc2heyeH6EWj8PvGOuyLkbZo8mHo0QJpBBGKrwPyhadhN08iQhTKoFqQPIfA==}
     peerDependencies:
@@ -10638,6 +10647,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vite-plugin-vue-meta-layouts@0.5.1(vite@6.0.6(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2))):
+    dependencies:
+      local-pkg: 0.5.1
+      vite: 6.0.6(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.2))
+
   vite-plugin-webfont-dl@3.10.3(vite@6.0.6(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)):
     dependencies:
       axios: 1.7.9

src/layouts/sakai-vue/AppMenu.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
 import type { MenuItem } from 'primevue/menuitem';
 import type { PanelMenuProps } from 'primevue/panelmenu';
+import { createGetRoutes } from 'virtual:meta-layouts';
 import type { RouteRecordRaw } from 'vue-router/auto';
 import { routes } from 'vue-router/auto-routes';
 
 const router = useRouter();
 
+const getRoutes = createGetRoutes(router);
+
 // 递归处理路由生成菜单项
-const generateMenuItems = (routes: RouteRecordRaw[]): PanelMenuProps['model'] => {
-  return routes.map((route, index) => {
-    const menuItem: MenuItem = {
-      label: `${index + 1}. ${(route.name as string) || route.path}`,
+const _generateMenuItems = (routes: RouteRecordRaw[]): PanelMenuProps['model'] => {
+  return [];
+};
+
+const cmptItems = computed(() => {
+  return getRoutes()
+    .filter((route) => !route.path.includes('/:'))
+    .map((route, index) => {
+      return {
+        label: `${index}. ${(route.name as string) || route.path}`,
         icon: (route.meta?.icon as string) || 'pi pi-fw pi-home',
         // url: route.path,
         command: route.children?.length
@@ -19,18 +28,8 @@ const generateMenuItems = (routes: RouteRecordRaw[]): PanelMenuProps['model'] =>
               console.debug(`route :>> `, route);
               router.push(route);
             },
-      // _route_info_: JSON.parse(JSON.stringify(route)),
-    };
-
-    if (route.children && route.children.length > 0) {
-      menuItem.items = generateMenuItems(route.children);
-    }
-    return menuItem;
+      } satisfies MenuItem;
     });
-};
-
-const cmptItems = computed(() => {
-  return generateMenuItems(routes);
 });
 </script>
 

src/plugins/router.ts

@@ -1,5 +1,6 @@
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
-import { setupLayouts, createGetRoutes } from 'virtual:generated-layouts';
+import { createGetRoutes, setupLayouts } from 'virtual:meta-layouts';
+// import { setupLayouts, createGetRoutes } from 'virtual:generated-layouts';
 import { createRouter, createWebHistory } from 'vue-router/auto';
 import { handleHotUpdate, routes } from 'vue-router/auto-routes';
 

tsconfig.app.json

@@ -18,6 +18,7 @@
       // "vite-plugin-pwa/client",
       "unplugin-vue-macros/macros-global",
       "unplugin-vue-router/client",
+      "vite-plugin-vue-meta-layouts/client",
       "unplugin-icons/types/vue",
       "@intlify/unplugin-vue-i18n/messages"
     ],

vite.config.plugins.ts

@@ -26,6 +26,7 @@ import cdnImport from 'vite-plugin-cdn-import';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
 import VueDevTools from 'vite-plugin-vue-devtools';
 import Layouts from 'vite-plugin-vue-layouts';
+import MetaLayouts from 'vite-plugin-vue-meta-layouts';
 import { ViteWebfontDownload as WebfontDownload } from 'vite-plugin-webfont-dl';
 
 export function Plugins() {
@@ -51,6 +52,12 @@ export function Plugins() {
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts?tab=readme-ov-file#configuration
     Layouts({ pagesDirs: [], defaultLayout: 'sakai-vue/AppLayout' }),
 
+    // https://github.com/dishait/vite-plugin-vue-meta-layouts
+    MetaLayouts({
+      /* skipTopLevelRouteLayout: true  */
+      defaultLayout: 'sakai-vue/AppLayout',
+    }),
+
     // https://github.com/antfu/unocss
     // see uno.config.ts for config
     UnoCSS(),