feat(projects): 增加i18n支持翻译菜单,tab,title

src/App.vue

@@ -13,14 +13,26 @@
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { dateZhCN, zhCN } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 import { subscribeStore, useThemeStore } from '@/store';
 import { useGlobalEvents } from '@/composables';
 
 const theme = useThemeStore();
+const { locale, t } = useI18n();
+const route = useRoute();
 
 subscribeStore();
 useGlobalEvents();
+
+watch(
+  () => locale.value,
+  () => {
+    document.title = route.meta.i18nTitle ? t(route.meta.i18nTitle) : route.meta.title;
+  }
+);
 </script>
 
 <style scoped></style>

src/layouts/common/global-header/components/global-breadcrumb.vue

@@ -9,7 +9,7 @@
               v-if="theme.header.crumb.showIcon"
               class="inline-block align-text-bottom mr-4px text-16px"
             />
-            <span>{{ breadcrumb.label }}</span>
+            <span>{{ breadcrumb.i18nTitle ? t(breadcrumb.i18nTitle) : breadcrumb.label }}</span>
           </span>
         </n-dropdown>
         <template v-else>
@@ -19,7 +19,9 @@
             class="inline-block align-text-bottom mr-4px text-16px"
             :class="{ 'text-#BBBBBB': theme.header.inverted }"
           />
-          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{ breadcrumb.label }}</span>
+          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{
+            breadcrumb.i18nTitle ? t(breadcrumb.i18nTitle) : breadcrumb.label
+          }}</span>
         </template>
       </n-breadcrumb-item>
     </template>
@@ -33,6 +35,7 @@ import { routePath } from '@/router';
 import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { getBreadcrumbByRouteKey } from '@/utils';
+import { t } from '@/locales';
 
 defineOptions({ name: 'GlobalBreadcrumb' });
 

src/layouts/common/global-header/components/header-menu.vue

@@ -20,6 +20,7 @@ import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
+import { translateMenuLabel } from '@/utils';
 
 defineOptions({ name: 'HeaderMenu' });
 
@@ -28,7 +29,7 @@ const routeStore = useRouteStore();
 const theme = useThemeStore();
 const { routerPush } = useRouterPush();
 
-const menus = computed(() => routeStore.menus as App.GlobalMenuOption[]);
+const menus = computed(() => translateMenuLabel(routeStore.menus as App.GlobalMenuOption[]));
 const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 
 function handleUpdateMenu(_key: string, item: MenuOption) {

src/layouts/common/global-header/components/index.ts

@@ -7,6 +7,7 @@ import ThemeMode from './theme-mode.vue';
 import UserAvatar from './user-avatar.vue';
 import SystemMessage from './system-message.vue';
 import SettingButton from './setting-button.vue';
+import ToggleLang from './toggle-lang.vue';
 
 export {
   MenuCollapse,
@@ -17,5 +18,6 @@ export {
   ThemeMode,
   UserAvatar,
   SystemMessage,
-  SettingButton
+  SettingButton,
+  ToggleLang
 };

src/layouts/common/global-header/components/toggle-lang.vue

@@ -0,0 +1,33 @@
+<template>
+  <hover-container class="w-40px h-full">
+    <n-dropdown :options="options" trigger="hover" :value="language" @select="handleSelect">
+      <icon-cil:language class="text-18px outline-transparent" />
+    </n-dropdown>
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { localStg } from '@/utils';
+
+const { locale } = useI18n();
+
+const language = ref<I18nType.langType>(localStg.get('lang') || 'zh-CN');
+const options = [
+  {
+    label: '中文',
+    key: 'zh-CN'
+  },
+  {
+    label: 'English',
+    key: 'en'
+  }
+];
+const handleSelect = (key: string) => {
+  language.value = key as I18nType.langType;
+  locale.value = key;
+  localStg.set('lang', key as I18nType.langType);
+};
+</script>
+<style scoped></style>

src/layouts/common/global-header/index.vue

@@ -11,6 +11,7 @@
       <github-site />
       <full-screen />
       <theme-mode />
+      <toggle-lang />
       <system-message />
       <setting-button v-if="showButton" />
       <user-avatar />
@@ -32,7 +33,8 @@ import {
   SettingButton,
   SystemMessage,
   ThemeMode,
-  UserAvatar
+  UserAvatar,
+  ToggleLang
 } from './components';
 
 defineOptions({ name: 'GlobalHeader' });

src/layouts/common/global-logo/index.vue

@@ -1,11 +1,7 @@
 <template>
   <router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
     <system-logo class="text-32px text-primary" />
-    <h2
-      v-show="showTitle"
-      class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out"
-      @click="toggleLocal"
-    >
+    <h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
       {{ t('message.system.title') }}
     </h2>
   </router-link>
@@ -13,7 +9,7 @@
 
 <script setup lang="ts">
 import { routePath } from '@/router';
-import { t, setLocale } from '@/locales';
+import { t } from '@/locales';
 
 defineOptions({ name: 'GlobalLogo' });
 
@@ -25,12 +21,6 @@ interface Props {
 defineProps<Props>();
 
 const routeHomePath = routePath('root');
-
-let flag = true;
-function toggleLocal() {
-  flag = !flag;
-  setLocale(flag ? 'en' : 'zh-CN');
-}
 </script>
 
 <style scoped></style>

src/layouts/common/global-sider/components/vertical-mix-sider/index.vue

@@ -26,7 +26,9 @@ import { useRoute } from 'vue-router';
 import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { useBoolean } from '@/hooks';
+import { translateMenuLabel } from '@/utils';
 import { GlobalLogo } from '@/layouts/common';
+import { t } from '@/locales';
 import { MixMenuCollapse, MixMenuDetail, MixMenuDrawer } from './components';
 
 defineOptions({ name: 'VerticalMixSider' });
@@ -45,13 +47,13 @@ function setActiveParentRouteName(routeName: string) {
 
 const firstDegreeMenus = computed(() =>
   routeStore.menus.map(item => {
-    const { routeName, label } = item;
+    const { routeName, label, i18nTitle } = item;
     const icon = item?.icon;
     const hasChildren = Boolean(item.children && item.children.length);
 
     return {
       routeName,
-      label,
+      label: i18nTitle ? t(i18nTitle) : label,
       icon,
       hasChildren
     };
@@ -88,7 +90,7 @@ const activeChildMenus = computed(() => {
   routeStore.menus.some(item => {
     const flag = item.routeName === activeParentRouteName.value && Boolean(item.children?.length);
     if (flag) {
-      menus.push(...(item.children || []));
+      menus.push(...translateMenuLabel((item.children || []) as App.GlobalMenuOption[]));
     }
     return flag;
   });

src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue

@@ -21,7 +21,7 @@ import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
-import { getActiveKeyPathsOfMenus } from '@/utils';
+import { getActiveKeyPathsOfMenus, translateMenuLabel } from '@/utils';
 
 defineOptions({ name: 'VerticalMenu' });
 
@@ -31,7 +31,7 @@ const theme = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPush } = useRouterPush();
 
-const menus = computed(() => routeStore.menus as App.GlobalMenuOption[]);
+const menus = computed(() => translateMenuLabel(routeStore.menus as App.GlobalMenuOption[]));
 
 const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 const expandedKeys = ref<string[]>([]);

src/layouts/common/global-tab/components/tab-detail/index.vue

@@ -19,7 +19,7 @@
           class="inline-block align-text-bottom text-16px"
         />
       </template>
-      {{ item.meta.title }}
+      {{ item.meta.i18nTitle ? t(item.meta.i18nTitle) : item.meta.title }}
     </AdminTab>
   </div>
   <context-menu
@@ -36,6 +36,7 @@
 import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { AdminTab } from '@soybeanjs/vue-materials';
 import { useTabStore, useThemeStore } from '@/store';
+import { t } from '@/locales';
 import { ContextMenu } from './components';
 
 defineOptions({ name: 'TabDetail' });

src/locales/i18n.ts

@@ -1,12 +1,14 @@
 import type { App } from 'vue';
 import { createI18n } from 'vue-i18n';
+import { localStg } from '@/utils';
 import messages from './lang';
 import type { LocaleKey } from './lang';
 
 const i18n = createI18n({
-  locale: 'zh-CN',
+  locale: localStg.get('lang') || 'zh-CN',
   fallbackLocale: 'en',
-  messages
+  messages,
+  legacy: false
 });
 
 export function setupI18n(app: App) {
@@ -18,5 +20,5 @@ export function t(key: string) {
 }
 
 export function setLocale(locale: LocaleKey) {
-  i18n.global.locale = locale;
+  i18n.global.locale.value = locale;
 }

src/router/guard/index.ts

@@ -1,5 +1,6 @@
 import type { Router } from 'vue-router';
 import { useTitle } from '@vueuse/core';
+import { t } from '@/locales';
 import { createPermissionGuard } from './permission';
 
 /**
@@ -15,7 +16,7 @@ export function createRouterGuard(router: Router) {
   });
   router.afterEach(to => {
     // 设置document title
-    useTitle(to.meta.title);
+    useTitle(to.meta.i18nTitle ? t(to.meta.i18nTitle) : to.meta.title);
     // 结束 loadingBar
     window.$loadingBar?.finish();
   });

src/router/modules/dashboard.ts

@@ -10,7 +10,8 @@ const dashboard: AuthRoute.Route = {
       meta: {
         title: '分析页',
         requiresAuth: true,
-        icon: 'icon-park-outline:analysis'
+        icon: 'icon-park-outline:analysis',
+        i18nTitle: 'message.routes.dashboard.analysis'
       }
     },
     {
@@ -20,14 +21,16 @@ const dashboard: AuthRoute.Route = {
       meta: {
         title: '工作台',
         requiresAuth: true,
-        icon: 'icon-park-outline:workbench'
+        icon: 'icon-park-outline:workbench',
+        i18nTitle: 'message.routes.dashboard.workbench'
       }
     }
   ],
   meta: {
     title: '仪表盘',
     icon: 'mdi:monitor-dashboard',
-    order: 1
+    order: 1,
+    i18nTitle: 'message.routes.dashboard.dashboard'
   }
 };
 

src/store/modules/tab/helpers.ts

@@ -7,7 +7,6 @@ import { localStg } from '@/utils';
  */
 export function getTabRouteByVueRoute(route: RouteRecordNormalized | RouteLocationNormalizedLoaded) {
   const fullPath = hasFullPath(route) ? route.fullPath : route.path;
-
   const tabRoute: App.GlobalTabRoute = {
     name: route.name,
     fullPath,

src/typings/route.d.ts

@@ -31,6 +31,8 @@ declare namespace AuthRoute {
   interface RouteMeta<K extends AuthRoute.RoutePath> {
     /** 路由标题(可用来作document.title或者菜单的名称) */
     title: string;
+    /** 用来支持多国语言 如果i18nTitle和title同时存在优先使用i18nTitle */
+    i18nTitle?: string;
     /** 路由的动态路径(需要动态路径的页面需要将path添加进范型参数) */
     dynamicPath?: AuthRouteUtils.GetDynamicPath<K>;
     /** 作为单级路由的父级路由布局组件 */

src/typings/storage.d.ts

@@ -18,5 +18,7 @@ declare namespace StorageInterface {
     themeSettings: Theme.Setting;
     /** 多页签路由信息 */
     multiTabRoutes: App.GlobalTabRoute[];
+    /** 本地语言缓存 */
+    lang: I18nType.langType;
   }
 }

src/typings/system.d.ts

@@ -242,6 +242,7 @@ declare namespace App {
     routePath: string;
     icon?: () => import('vue').VNodeChild;
     children?: GlobalMenuOption[];
+    i18nTitle?: string;
   };
 
   /** 面包屑 */
@@ -252,6 +253,7 @@ declare namespace App {
     routeName: string;
     hasChildren: boolean;
     icon?: import('vue').Component;
+    i18nTitle?: string;
     options?: import('naive-ui/es/dropdown/src/interface').DropdownMixedOption[];
   };
 
@@ -300,6 +302,7 @@ declare namespace App {
 }
 
 declare namespace I18nType {
+  type langType = 'en' | 'zh-CN';
   interface Schema {
     system: {
       title: string;

src/utils/router/breadcrumb.ts

@@ -59,7 +59,8 @@ function transformBreadcrumbMenuToBreadcrumb(menu: App.GlobalMenuOption, rootPat
     label: menu.label as string,
     routeName: menu.routeName,
     disabled: menu.routePath === rootPath,
-    hasChildren
+    hasChildren,
+    i18nTitle: menu.i18nTitle
   };
   if (menu.icon) {
     breadcrumb.icon = menu.icon;

src/utils/router/menu.ts

@@ -1,4 +1,5 @@
 import { useIconRender } from '@/composables';
+import { t } from '@/locales';
 
 /**
  * 将权限路由转换成菜单
@@ -18,7 +19,8 @@ export function transformAuthRouteToMenu(routes: AuthRoute.Route[]): App.GlobalM
         key: routeName,
         label: meta.title,
         routeName,
-        routePath: path
+        routePath: path,
+        i18nTitle: meta.i18nTitle
       },
       icon: meta.icon,
       localIcon: meta.localIcon,
@@ -33,6 +35,28 @@ export function transformAuthRouteToMenu(routes: AuthRoute.Route[]): App.GlobalM
   return globalMenu;
 }
 
+/**
+ * 翻译菜单
+ * @param menus
+ * @returns
+ */
+export function translateMenuLabel(menus: App.GlobalMenuOption[]): App.GlobalMenuOption[] {
+  const globalMenu: App.GlobalMenuOption[] = [];
+  menus.forEach(menu => {
+    let menuChildren: App.GlobalMenuOption[] | undefined;
+    if (menu.children && menu.children.length > 0) {
+      menuChildren = translateMenuLabel(menu.children);
+    }
+    const menuItem: App.GlobalMenuOption = {
+      ...menu,
+      children: menuChildren,
+      label: menu.i18nTitle ? t(menu.i18nTitle) : menu.label
+    };
+    globalMenu.push(menuItem);
+  });
+  return globalMenu;
+}
+
 /**
  * 获取当前路由所在菜单数据的paths
  * @param activeKey - 当前路由的key