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

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' });