f

src/composables/useMetaLayoutsMenuOptions.tsx

@@ -1,5 +1,6 @@
+import { createGetRoutes } from '@/plugins/00.router-plugin';
 import type { MenuInst, MenuOption } from 'naive-ui';
-import { createGetRoutes } from 'virtual:meta-layouts';
+
 import type { Ref } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
 import { RouterLink } from 'vue-router';

src/locales-utils/i18n-auto-imports.ts

@@ -4,8 +4,7 @@
  */
 import messages from '@intlify/unplugin-vue-i18n/messages';
 
-import { router } from '@/plugins/00.router-plugin';
+import { createGetRoutes, router } from '@/plugins/00.router-plugin';
-import { createGetRoutes } from 'virtual:meta-layouts';
 import { createI18n } from 'vue-i18n';
 import { START_LOCATION } from 'vue-router';
 

src/pages-with-layout/(layout-group).page.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+definePage({
+  // name: false,
+  meta: {
+    _file: '(layout-group).page.vue',
+  },
+});
+</script>
+
+<template>
+  <div>
+    <div>⬇️ b:</div>
+    <RouterView />
+  </div>
+</template>

src/pages-with-layout/(layout-group)/a.page.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+definePage({
+  alias: '/',
+  meta: {
+    _file: '(layout)/a.page.vue',
+  },
+});
+</script>
+
+<template>
+  <div>a.page.vue</div>
+</template>

src/pages-with-layout/(layout-group)/b.page.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    _file: '(layout)/b.page.vue',
+  },
+});
+</script>
+
+<template>
+  <div>b.page.vue</div>
+</template>

src/pages/(ccc)/c.page.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    _file: '(ccc)/c.page.vue',
+  },
+});
+</script>
+
+<template>
+  <div>c.page.vue</div>
+</template>

src/pages/(home).page.vue.off

@@ -1,4 +1,10 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+definePage({
+  meta: {
+    _file: '(home).page.vue',
+  },
+});
+</script>
 
 <template>
   <div>

src/pages/demos.page.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import TheBaseLayout from '@/layouts/base-layout/the-base-layout.vue';
+</script>
+
+<template>
+  <TheBaseLayout></TheBaseLayout>
+</template>

src/pages/demos/create.page.vue

@@ -8,5 +8,5 @@ definePage({
 </script>
 
 <template>
-  <div></div>
+  <div>create.page.vue</div>
 </template>

src/plugins/00.router-plugin.ts

@@ -1,14 +1,13 @@
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
-import { setupLayouts } from 'virtual:meta-layouts';
+// import { setupLayouts } from 'virtual:meta-layouts';
-// import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
 import { createRouter, createWebHistory } from 'vue-router';
 import type { Router } from 'vue-router';
 import { handleHotUpdate, routes } from 'vue-router/auto-routes';
 
-const setupLayoutsResult = setupLayouts(routes);
+// const setupLayoutsResult = setupLayouts(routes);
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: /* routes ?? */ setupLayoutsResult,
+  routes: routes /* ?? setupLayoutsResult */,
   scrollBehavior: (_to, _from, savedPosition) => {
     return savedPosition ?? { left: 0, top: 0 };
   },
@@ -50,6 +49,11 @@ export function install({ app }: { app: import('vue').App<Element> }) {
   // <<<
 }
 
+export function createGetRoutes(router: Router) {
+  const routes = router.getRoutes();
+  return () => routes.filter((route) => !route.meta.isLayout);
+}
+
 if (__DEV__) Object.assign(window, { router });
 
 // This will update routes at runtime without reloading the page
@@ -57,4 +61,4 @@ if (import.meta.hot) {
   handleHotUpdate(router);
 }
 
-export { router, setupLayoutsResult };
+export { router };

tsconfig.app.json

@@ -17,5 +17,11 @@
       "@/*": ["./src/*"],
       "~/*": ["./src/*"]
     }
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "unplugin-vue-router/volar/sfc-route-blocks",
+      "unplugin-vue-router/volar/sfc-typed-router"
+    ]
   }
 }

typed-router.d.ts

@@ -28,6 +28,28 @@ declare module 'vue-router/auto-routes' {
       '/',
       Record<never, never>,
       Record<never, never>,
+      | 'RootA'
+      | 'RootB'
+    >,
+    'RootA': RouteRecordInfo<
+      'RootA',
+      '/a',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    'RootB': RouteRecordInfo<
+      'RootB',
+      '/b',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    'RootC': RouteRecordInfo<
+      'RootC',
+      '/c',
+      Record<never, never>,
+      Record<never, never>,
       | never
     >,
     '$Path': RouteRecordInfo<
@@ -37,6 +59,20 @@ declare module 'vue-router/auto-routes' {
       { path: ParamValue<false> },
       | never
     >,
+    'DemosParent': RouteRecordInfo<
+      'DemosParent',
+      '/demos',
+      Record<never, never>,
+      Record<never, never>,
+      | 'Demos'
+      | 'DemosApiDemo'
+      | 'DemosCounterDemo'
+      | 'DemosCreate'
+      | 'DemosI18nDemo'
+      | 'DemosNaiveUiDemo'
+      | 'DemosPrimevueDemo'
+      | 'DemosWebsocketDemo'
+    >,
     'Demos': RouteRecordInfo<
       'Demos',
       '/demos',
@@ -120,9 +156,29 @@ declare module 'vue-router/auto-routes' {
    * @internal
    */
   export interface _RouteFileInfoMap {
-    'src/pages/index.page.vue': {
+    'src/pages-with-layout/(layout-group).page.vue': {
       routes:
         | 'Root'
+        | 'RootA'
+        | 'RootB'
+      views:
+        | 'default'
+    }
+    'src/pages-with-layout/(layout-group)/a.page.vue': {
+      routes:
+        | 'RootA'
+      views:
+        | never
+    }
+    'src/pages-with-layout/(layout-group)/b.page.vue': {
+      routes:
+        | 'RootB'
+      views:
+        | never
+    }
+    'src/pages/(ccc)/c.page.vue': {
+      routes:
+        | 'RootC'
       views:
         | never
     }
@@ -132,6 +188,20 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/demos.page.vue': {
+      routes:
+        | 'Demos'
+        | 'DemosApiDemo'
+        | 'DemosCounterDemo'
+        | 'DemosCreate'
+        | 'DemosI18nDemo'
+        | 'DemosNaiveUiDemo'
+        | 'DemosParent'
+        | 'DemosPrimevueDemo'
+        | 'DemosWebsocketDemo'
+      views:
+        | 'default'
+    }
     'src/pages/demos/index.page.vue': {
       routes:
         | 'Demos'

vite-plugins/00.vue-macros.ts

@@ -1,5 +1,6 @@
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
+import consola from 'consola';
 import { getPascalCaseRouteName } from 'unplugin-vue-router';
 import vueRouter from 'unplugin-vue-router/vite';
 import type { PluginOption } from 'vite';
@@ -18,8 +19,13 @@ export default [
         exclude: ['**/__*', '**/__*/**/*'],
         extensions: ['.page.vue', '.page.md'],
         getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
-        logs: false,
+        logs: true,
-        routesFolder: 'src/pages',
+        routesFolder: ['src/pages', 'src/pages-with-layout'],
+        extendRoute(route) {
+          consola.info(`route.name :>> `, route.name);
+          console.debug(`route.meta :>> `, route.meta);
+          console.debug(`route.path :>> `, route.path);
+        },
       }),
     },
   }),

vite-plugins/_loadPlugins.ts

@@ -17,6 +17,8 @@ export async function loadPlugins(configEnv: ConfigEnv): Promise<PluginOption[]>
     ignore: [
       '**/*.d.ts',
       '**/*.disabled.ts',
+      '**/*.x.ts',
+      '**/*.X.ts',
       '**/x-*.ts', // 禁用以 x- 开头的插件文件
       '**/_*',
     ],

vite.config.ts

@@ -3,7 +3,7 @@ import { createViteProxy } from 'utils4u/vite';
 import { defineConfig, loadEnv } from 'vite';
 import { loadPlugins } from './vite-plugins/_loadPlugins';
 import { optimizeDeps } from './vite.config.optimizeDeps';
-import { viteConfigRollupOptions } from './vite.config.rollup';
+// import { viteConfigRollupOptions } from './vite.config.rollup';
 import consola from 'consola';
 
 // https://vite.dev/config/
@@ -24,7 +24,7 @@ export default defineConfig(async (configEnv) => {
     build: {
       minify: env.VITE_BUILD_MINIFY === 'true' ? undefined /* 即默认 */ : false, // 默认：	'terser'
       sourcemap: env.VITE_BUILD_SOURCE_MAP === 'true',
-      rollupOptions: viteConfigRollupOptions,
+      // rollupOptions: viteConfigRollupOptions,
     },
     css: {
       devSourcemap: true,