feat: multi-language support

src/layouts/default/header/LayoutBreadcrumb.tsx

@@ -15,6 +15,7 @@ import { compile } from 'path-to-regexp';
 import router from '/@/router';
 
 import { PageEnum } from '/@/enums/pageEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
 
 export default defineComponent({
   name: 'BasicBreadcrumb',
@@ -28,7 +29,7 @@ export default defineComponent({
     const itemList = ref<AppRouteRecordRaw[]>([]);
 
     const { currentRoute, push } = useRouter();
-
+    const { t } = useI18n();
     watch(
       () => currentRoute.value,
       () => {
@@ -88,7 +89,7 @@ export default defineComponent({
               }}
             />
           )}
-          {item.meta.title}
+          {t(item.meta.title)}
         </>
       );
     }

src/layouts/default/menu/useLayoutMenu.ts

@@ -17,7 +17,10 @@ import {
   getShallowMenus,
 } from '/@/router/menus';
 import { permissionStore } from '/@/store/modules/permission';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { cloneDeep } from 'lodash-es';
 
+const { t } = useI18n();
 export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
   // Menu array
   const menusRef = ref<Menu[]>([]);
@@ -42,6 +45,14 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     return unref(splitType) === MenuSplitTyeEnum.NONE || !unref(getSplit);
   });
 
+  const getI18nFlatMenus = computed(() => {
+    return setI18nName(flatMenusRef.value, true, false);
+  });
+
+  const getI18nMenus = computed(() => {
+    return setI18nName(menusRef.value, true, true);
+  });
+
   watch(
     [() => unref(currentRoute).path, () => unref(splitType)],
     async ([path]: [string, MenuSplitTyeEnum]) => {
@@ -72,6 +83,18 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     genMenus();
   });
 
+  function setI18nName(list: Menu[], clone = false, deep = true) {
+    const menus = clone ? cloneDeep(list) : list;
+    menus.forEach((item) => {
+      if (!item.name.includes('.')) return;
+      item.name = t(item.name);
+      if (item.children && deep) {
+        setI18nName(item.children, false, deep);
+      }
+    });
+    return menus;
+  }
+
   // Handle left menu split
   async function handleSplitLeftMenu(parentPath: string) {
     if (unref(splitLeft)) return;
@@ -109,5 +132,6 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
       return;
     }
   }
-  return { flatMenusRef, menusRef };
+
+  return { flatMenusRef: getI18nFlatMenus, menusRef: getI18nMenus };
 }

src/layouts/default/multitabs/TabContent.tsx

@@ -15,6 +15,8 @@ import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 import { useI18n } from '/@/hooks/web/useI18n';
 
+const { t: titleT } = useI18n();
+
 const ExtraContent: FunctionalComponent = () => {
   return (
     <span class={`multiple-tabs-content__extra `}>
@@ -38,7 +40,7 @@ const TabContent: FunctionalComponent<{ tabItem: TabItem }> = (props) => {
 
   return (
     <div class={`multiple-tabs-content__content `} onContextmenu={handleContextMenu}>
-      <span class="ml-1">{meta && meta.title}</span>
+      <span class="ml-1">{meta && titleT(meta.title)}</span>
     </div>
   );
 };