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

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