Kaynağa Gözat

feat(架构): 菜单、tab国际化功能完善

shizhongming 2 yıl önce
ebeveyn
işleme
e54d91891e

+ 14 - 4
src/components/SimpleMenu/src/SimpleSubMenu.vue

@@ -45,10 +45,9 @@
   </SubMenu>
 </template>
 <script lang="ts" setup>
-  import type { PropType } from 'vue';
+  import { PropType, unref, computed } from 'vue';
   import type { Menu } from '@/router/types';
 
-  import { computed } from 'vue';
   import { useDesign } from '@/hooks/web/useDesign';
   import Icon from '@/components/Icon/Icon.vue';
 
@@ -73,13 +72,24 @@
     theme: propTypes.oneOf(['dark', 'light']),
   });
 
-  const { t } = useI18n();
+  const { locale } = useI18n();
   const { prefixCls } = useDesign('simple-menu');
 
   const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
   const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
   const getImg = computed(() => props.item?.img);
-  const getI18nName = computed(() => t(props.item?.name));
+  // const getI18nName = computed(() => t(props.item?.name));
+  const getI18nName = computed(() => {
+    const locales = props.item.meta && props.item.meta.locales;
+    const title = props.item.meta && props.item.meta.title;
+    if (locales) {
+      const i18nTitle = locales[unref(locale)];
+      if (i18nTitle) {
+        return i18nTitle;
+      }
+    }
+    return title;
+  });
   const getShowSubTitle = computed(() => !props.collapse || !props.parent);
   const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
   const getLevelClass = computed(() => {

+ 1 - 0
src/hooks/web/useI18n.ts

@@ -23,6 +23,7 @@ function getKey(namespace: string | undefined, key: string) {
 
 export function useI18n(namespace?: string): {
   t: I18nGlobalTranslation;
+  locale?: any;
 } {
   const normalFn = {
     t: (key: string) => {

+ 15 - 2
src/layouts/default/tabs/components/TabContent.vue

@@ -39,11 +39,24 @@
   });
 
   const { prefixCls } = useDesign('multiple-tabs-content');
-  const { t } = useI18n();
+  const { locale } = useI18n();
+
+  // const getTitle = computed(() => {
+  //   const { tabItem: { meta } = {} } = props;
+  //   return meta && t(meta.title as string);
+  // });
 
   const getTitle = computed(() => {
     const { tabItem: { meta } = {} } = props;
-    return meta && t(meta.title as string);
+    const { title, locales } = meta as any;
+    if (locales) {
+      const localeTitle = locales[unref(locale)];
+      if (!localeTitle || localeTitle.trim() === '') {
+        return title;
+      }
+      return locales[unref(locale)];
+    }
+    return title;
   });
 
   const getIsTabs = computed(() => !props.isExtra);

+ 0 - 0
src/locales/lang/en.ts → src/locales/lang/en_US.ts


+ 1 - 0
src/modules/system/views/user/lang/en_US.ts

@@ -20,6 +20,7 @@ export default {
           email: 'Email',
           mobile: 'Mobile',
           userType: 'User type',
+          accountStatus: 'Status',
         },
         button: {
           createAccount: 'Create account',

+ 1 - 1
src/settings/localeSetting.ts

@@ -3,7 +3,7 @@ import type { LocaleSetting, LocaleType } from '#/config';
 
 export const LOCALE: { [key: string]: LocaleType } = {
   ZH_CN: 'zh_CN',
-  EN_US: 'en',
+  EN_US: 'en_US',
 };
 
 export const localeSetting: LocaleSetting = {

+ 1 - 1
types/config.d.ts

@@ -11,7 +11,7 @@ import {
 
 import { CacheTypeEnum } from '@/enums/cacheEnum';
 
-export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko';
+export type LocaleType = 'zh_CN' | 'en_US' | 'ru' | 'ja' | 'ko';
 
 export interface MenuSetting {
   bgColor: string;