From 93ecda76172ba4022709686a222f2b4427672bd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Thu, 23 Oct 2025 18:15:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E8=8F=9C=E5=8D=95=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/base-layout/base-layout-sider.vue | 28 ++++++++++++++++---
 src/layouts/base-layout/base-layout.vue       | 16 +++++++----
 src/pages/_page-title-locales/en-US.ts        | 12 ++++++++
 src/pages/_page-title-locales/zh-CN.ts        | 12 ++++++++
 src/pages/demos/api-demo.page.vue             |  4 +--
 src/pages/demos/counter-demo.page.vue         |  4 +--
 src/pages/demos/i18n-demo.page.vue            |  4 +--
 src/pages/demos/index.page.vue                |  2 +-
 src/pages/demos/websocket-demo.page.vue       |  4 +--
 src/plugins/router-plugin.ts                  |  2 ++
 src/plugins/vueI18n-plugin.ts                 |  8 ++++++
 ...font-dl.ts => x-vite-plugin-webfont-dl.ts} |  0
 vite.config.ts                                |  3 ++
 13 files changed, 76 insertions(+), 23 deletions(-)
 create mode 100644 src/pages/_page-title-locales/en-US.ts
 create mode 100644 src/pages/_page-title-locales/zh-CN.ts
 rename vite-plugins/{vite-plugin-webfont-dl.ts => x-vite-plugin-webfont-dl.ts} (100%)

diff --git a/src/layouts/base-layout/base-layout-sider.vue b/src/layouts/base-layout/base-layout-sider.vue
index 3d9734e..6a8c033 100644
--- a/src/layouts/base-layout/base-layout-sider.vue
+++ b/src/layouts/base-layout/base-layout-sider.vue
@@ -3,7 +3,25 @@ import { createGetRoutes, router } from '@/plugins/router-plugin';
 import type { MenuOption } from 'naive-ui';
 import { RouterLink, type RouteRecordRaw } from 'vue-router';
 import IconMenuRounded from '~icons/material-symbols/menu-rounded';
-import { useAppStore } from '../../stores/app-store';
+import { useAppStore } from '@/stores/app-store';
+
+import zhCN from '@/pages/_page-title-locales/zh-CN';
+import enUS from '@/pages/_page-title-locales/en-US';
+
+const { t, te } = useI18n({
+  inheritLocale: true,
+  useScope: 'local',
+  missing: (locale, key) => {
+    consola.warn(`菜单翻译缺失: locale=${locale}, key=${key}`);
+    return key;
+  },
+  fallbackRoot: true,
+  messages: {
+    'zh-CN': zhCN,
+    'en-US': enUS,
+  },
+});
+
 // 路由转换为菜单树的辅助函数
 function convertRoutesToMenuOptions(routes: Readonly<RouteRecordRaw[]>): MenuOption[] {
   const menuMap = new Map<string, MenuOption>();
@@ -31,7 +49,9 @@ function convertRoutesToMenuOptions(routes: Readonly<RouteRecordRaw[]>): MenuOpt
   // 构建菜单树
   for (const route of validRoutes) {
     const pathSegments = route.path.split('/').filter(Boolean);
-    const text = route.meta?.title || route.name;
+    const routeName = route.name as string;
+    const text = te(routeName) ? t(routeName) : route.meta?.title || routeName;
+
     const menuOption: MenuOption = {
       label: () => (route.meta?.link === false ? text : <RouterLink to={route}>{text}</RouterLink>),
       key: route.path,
@@ -72,8 +92,8 @@ function convertRoutesToMenuOptions(routes: Readonly<RouteRecordRaw[]>): MenuOpt
 const routes = createGetRoutes(router)();
 const menuOptions = computed(() => convertRoutesToMenuOptions(routes));
 
-console.debug('原始路由:', JSON.stringify(routes, null, 0));
-console.debug('转换后的菜单:', JSON.stringify(menuOptions.value, null, 0));
+// console.debug('原始路由:', JSON.stringify(routes, null, 0));
+// console.debug('转换后的菜单:', JSON.stringify(menuOptions.value, null, 0));
 
 const menuInstRef = useTemplateRef('menuInstRef');
 const selectedKey = ref('');
diff --git a/src/layouts/base-layout/base-layout.vue b/src/layouts/base-layout/base-layout.vue
index 07470e6..12836ad 100644
--- a/src/layouts/base-layout/base-layout.vue
+++ b/src/layouts/base-layout/base-layout.vue
@@ -7,7 +7,12 @@ const appStore = useAppStore();
 </script>
 
 <template>
-  <AdminLayout :is-mobile="appStore.isMobile" v-model:sider-collapse="appStore.sidebarCollapsed">
+  <AdminLayout
+    :footer-visible="!false"
+    :tab-visible="false"
+    :is-mobile="appStore.isMobile"
+    v-model:sider-collapse="appStore.sidebarCollapsed"
+  >
     <template #header>
       <BaseLayoutHeader />
     </template>
@@ -19,9 +24,6 @@ const appStore = useAppStore();
     <template #sider>
       <BaseLayoutSider />
     </template>
-    <div class="bg-yellow-100/28 dark:bg-yellow-900/28 text-yellow-900 dark:text-yellow-100 p-4">
-      4#GlobalMenu
-    </div>
     <!-- <div>GlobalContent</div> -->
     <router-view v-slot="{ Component }">
       <transition name="fade" mode="out-in">
@@ -30,8 +32,10 @@ const appStore = useAppStore();
     </router-view>
     <!-- <div>ThemeDrawer</div> -->
     <template #footer>
-      <div class="bg-red-100/28 dark:bg-red-900/28 text-red-900 dark:text-red-100 h-full">
-        5#GlobalFooter
+      <div
+        class="bg-red-100/28 dark:bg-red-900/28 text-red-900 dark:text-red-100 h-full flex items-center justify-center"
+      >
+        GlobalFooter
       </div>
     </template>
   </AdminLayout>
diff --git a/src/pages/_page-title-locales/en-US.ts b/src/pages/_page-title-locales/en-US.ts
new file mode 100644
index 0000000..2c3436b
--- /dev/null
+++ b/src/pages/_page-title-locales/en-US.ts
@@ -0,0 +1,12 @@
+import type { RouteLocalizationFlags } from '@/plugins/router-plugin';
+
+export default {
+  Root: 'Root',
+  $Path: '$Path',
+  Demos: 'Demos',
+  DemosApiDemo: 'API Demo',
+  DemosCounterDemo: 'Counter Demo',
+  DemosI18nDemo: 'i18n Demo',
+  DemosWebsocketDemo: 'WebSocket Demo',
+  Home: 'Home',
+} satisfies RouteLocalizationFlags;
diff --git a/src/pages/_page-title-locales/zh-CN.ts b/src/pages/_page-title-locales/zh-CN.ts
new file mode 100644
index 0000000..34248b2
--- /dev/null
+++ b/src/pages/_page-title-locales/zh-CN.ts
@@ -0,0 +1,12 @@
+import type { RouteLocalizationFlags } from '@/plugins/router-plugin';
+
+export default {
+  Root: '根 (Gēn)',
+  $Path: '$Path',
+  Demos: '示例演示',
+  DemosApiDemo: 'API 调用示例',
+  DemosCounterDemo: '点击计数器',
+  DemosI18nDemo: '国际化示例',
+  DemosWebsocketDemo: 'WebSocket 示例',
+  Home: '首页',
+} satisfies RouteLocalizationFlags;
diff --git a/src/pages/demos/api-demo.page.vue b/src/pages/demos/api-demo.page.vue
index 4b538b7..0a0f549 100644
--- a/src/pages/demos/api-demo.page.vue
+++ b/src/pages/demos/api-demo.page.vue
@@ -2,9 +2,7 @@
 import { ref } from 'vue';
 
 definePage({
-  meta: {
-    title: 'API 调用示例',
-  },
+  meta: {},
 });
 
 // ========== API 模块 ==========
diff --git a/src/pages/demos/counter-demo.page.vue b/src/pages/demos/counter-demo.page.vue
index 498f48c..60b2bd3 100644
--- a/src/pages/demos/counter-demo.page.vue
+++ b/src/pages/demos/counter-demo.page.vue
@@ -3,9 +3,7 @@ import { ref } from 'vue';
 import { NButton } from 'naive-ui';
 
 definePage({
-  meta: {
-    title: '点击计数器',
-  },
+  meta: {},
 });
 
 // ========== 计数器模块 ==========
diff --git a/src/pages/demos/i18n-demo.page.vue b/src/pages/demos/i18n-demo.page.vue
index d7594ea..77ed5ae 100644
--- a/src/pages/demos/i18n-demo.page.vue
+++ b/src/pages/demos/i18n-demo.page.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 definePage({
-  meta: {
-    title: '国际化示例',
-  },
+  meta: {},
 });
 const { t, locale } = useI18n();
 
diff --git a/src/pages/demos/index.page.vue b/src/pages/demos/index.page.vue
index e44f913..3e2eadc 100644
--- a/src/pages/demos/index.page.vue
+++ b/src/pages/demos/index.page.vue
@@ -1,4 +1,4 @@
 <script setup lang="ts">
-definePage({ meta: { title: '示例演示', link: false } });
+definePage({ meta: { link: false } });
 </script>
 <template><div>此页面文件仅用于在侧边栏菜单中显示示例演示分组标题</div></template>
diff --git a/src/pages/demos/websocket-demo.page.vue b/src/pages/demos/websocket-demo.page.vue
index 85b4d63..5e8f6ff 100644
--- a/src/pages/demos/websocket-demo.page.vue
+++ b/src/pages/demos/websocket-demo.page.vue
@@ -2,9 +2,7 @@
 import { ref, onUnmounted, computed, nextTick } from 'vue';
 
 definePage({
-  meta: {
-    title: 'WebSocket 示例',
-  },
+  meta: {},
 });
 
 // ========== WebSocket 模块 ==========
diff --git a/src/plugins/router-plugin.ts b/src/plugins/router-plugin.ts
index bd3df87..fd29570 100644
--- a/src/plugins/router-plugin.ts
+++ b/src/plugins/router-plugin.ts
@@ -2,6 +2,7 @@ import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 import { setupLayouts } from 'virtual:meta-layouts';
 // import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
 import { createRouter, createWebHistory } from 'vue-router';
+import type { RouteNamedMap } from 'vue-router/auto-routes';
 import { routes, handleHotUpdate } from 'vue-router/auto-routes';
 
 const setupLayoutsResult = setupLayouts(routes);
@@ -63,6 +64,7 @@ declare module 'vue-router' {
 
 export { router, setupLayoutsResult };
 export { createGetRoutes } from 'virtual:meta-layouts';
+export type RouteLocalizationFlags = Record<keyof RouteNamedMap, string>;
 
 if (__DEV__) Object.assign(globalThis, { router });
 // This will update routes at runtime without reloading the page
diff --git a/src/plugins/vueI18n-plugin.ts b/src/plugins/vueI18n-plugin.ts
index 94abbf8..d959f35 100644
--- a/src/plugins/vueI18n-plugin.ts
+++ b/src/plugins/vueI18n-plugin.ts
@@ -11,6 +11,14 @@ export function install({ app }: { app: import('vue').App<Element> }) {
     createI18n({
       legacy: false, // you must set `false`, to use Composition API
       locale: navigator.language,
+      fallbackRoot: false,
+      // flatJson: true,
+      missing: (locale, key /* , instance, type */) => {
+        consola.warn(`缺少国际化内容: locale='${locale}', key='${key}'`);
+        return `[${key}]`;
+      },
+      missingWarn: !true,
+      fallbackWarn: !true,
       messages,
     }),
   );
diff --git a/vite-plugins/vite-plugin-webfont-dl.ts b/vite-plugins/x-vite-plugin-webfont-dl.ts
similarity index 100%
rename from vite-plugins/vite-plugin-webfont-dl.ts
rename to vite-plugins/x-vite-plugin-webfont-dl.ts
diff --git a/vite.config.ts b/vite.config.ts
index e5e8054..9f1ed0c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -138,6 +138,9 @@ export default defineConfig(async (configEnv) => {
 
               if (packageName) {
                 // 根据包名分组
+                if (packageName.includes('consola')) {
+                  return 'consola';
+                }
                 if (packageName.includes('naive-ui')) {
                   return 'naive-ui';
                 }