fixbug: 修复自定义添加tabs翻译问题

.eslintrc.js

@@ -28,7 +28,7 @@ module.exports = {
   },
   // plugins: ['vue'],
   rules: {
-    // 'prettier/prettier': 'error',
+    'prettier/prettier': 'error',
     // 是否禁止使用any类型
     '@typescript-eslint/no-explicit-any': 'off',
     // 是否开启函数必须要指定类型

src/hooks/web/useI18n.ts

@@ -19,3 +19,19 @@ export const deffElementLocale = () => {
 
   return { tolocale };
 };
+
+// 转换国际化，适用于不在i18n配置的国际化语言
+export function translateI18n(message: any = '') {
+  if (!message) {
+    return '';
+  }
+  const locale = i18n.global.locale.value;
+  if (typeof message === 'object') {
+    return message[locale];
+  }
+  const key = message.split('.')[0];
+  if (key && Object.keys(i18n.global.messages.value[locale]).includes(key)) {
+    return i18n.global.t(message);
+  }
+  return message;
+}

src/layouts/pageLayouts/components/AppTabs/hooks/useTabsChange.ts

@@ -25,41 +25,42 @@ export const useTabsChange = (multiTabs: Ref<MultiTabsType[]>) => {
 
   // 关闭标签
   const closeTabsRoute = (e: string, type: 'other' | 'left' | 'right') => {
-    const valueIndex = multiTabs.value.findIndex((i) => i.path === e);
+    const item = multiTabs.value.findIndex((i) => i.path === e);
     const mapList = multiTabs.value.filter((i, index) => {
       if (i.path !== e && type === 'other') return true;
-      else if (index < valueIndex && type === 'left') return true;
-      else if (index > valueIndex && type === 'right') return true;
+      else if (index < item && type === 'left') return true;
+      else if (index > item && type === 'right') return true;
       return false;
     });
+    if (mapList.find((i) => i.path === route.path)) {
+      router.push({
+        path: multiTabs.value[item].path,
+        query: multiTabs.value[item].query,
+      });
+    }
     mapList.forEach((i) => {
       usePermissionStoreHook().cacheOperate({
         mode: 'delete',
         name: i.name || '',
       });
       usePermissionStoreHook().handleMultiTabs('delete', i);
     });
-    // console.log(multiTabs.value[valueIndex], valueIndex, multiTabs.value);
-    // router.push({
-    //   path: multiTabs.value[valueIndex].path,
-    //   query: multiTabs.value[valueIndex].query,
-    // });
   };
 
   // 关闭当前导航
   const removeTab = (e: string) => {
-    const valueIndex = multiTabs.value.findIndex((i) => setTabPaneKey(i) === e);
+    const item = multiTabs.value.findIndex((i) => setTabPaneKey(i) === e);
     const tabsLength = multiTabs.value.length;
-    if (multiTabs.value[valueIndex].name === route.name) {
+    if (multiTabs.value[item].name === route.name) {
       let value, toRoute;
-      if (valueIndex === tabsLength - 1) {
-        value = multiTabs.value[valueIndex - 1];
+      if (item === tabsLength - 1) {
+        value = multiTabs.value[item - 1];
         toRoute = {
           path: value.path,
           query: value.query,
         };
       } else {
-        console.log(valueIndex, tabsLength, multiTabs.value[valueIndex].name, route.name);
+        console.log(item, tabsLength, multiTabs.value[item].name, route.name);
 
         value = multiTabs.value[tabsLength - 1];
         toRoute = {
@@ -71,9 +72,9 @@ export const useTabsChange = (multiTabs: Ref<MultiTabsType[]>) => {
     }
     usePermissionStoreHook().cacheOperate({
       mode: 'delete',
-      name: multiTabs.value[valueIndex].name || '',
+      name: multiTabs.value[item].name || '',
     });
-    usePermissionStoreHook().handleMultiTabs('delete', multiTabs.value[valueIndex]);
+    usePermissionStoreHook().handleMultiTabs('delete', multiTabs.value[item]);
   };
 
   // 重新加载

src/layouts/pageLayouts/components/AppTabs/index.vue

@@ -7,19 +7,14 @@
       :closable="multiTabs.length > 1"
       @tab-remove="tabRemoveChange"
     >
-      <el-tab-pane
-        v-for="item in multiTabs"
-        :key="setTabPaneKey(item)"
-        :label="t(item.meta.title as string)"
-        :name="setTabPaneKey(item)"
-      >
+      <el-tab-pane v-for="item in multiTabs" :key="setTabPaneKey(item)" :name="setTabPaneKey(item)">
         <template #label>
           <div
             class="tabs-view-item"
             @click="changeTab(item)"
             @contextmenu.prevent="contextmenu(item.path, $event)"
           ></div>
-          <span>{{t(item.meta.title as string)}}</span>
+          <span>{{ translateI18n(item.meta.title) }}</span>
         </template>
       </el-tab-pane>
     </el-tabs>
@@ -67,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-  import { useI18n } from '@/hooks/web/useI18n';
+  import { translateI18n } from '@/hooks/web/useI18n';
   import { usePermissionStoreHook } from '@/store/modules/permission';
   import type { MultiTabsType } from '@/store/types';
   import { ref, computed, watch, onBeforeMount } from 'vue';
@@ -77,7 +72,6 @@
   import { useTabsChange } from './hooks/useTabsChange';
   import { emitter } from '@/utils/mitt';
 
-  const { t } = useI18n();
   const route = useRoute();
   const router = useRouter();
 
@@ -100,9 +94,9 @@
   onBeforeMount(() => {
     addRouteTabs(route);
     contextmenu(route.path);
-    emitter.on('siteBarChange', ({ routeRow }) => {
-      addRouteTabs(routeRow as unknown as MultiTabsType);
-      contextmenu(routeRow.path);
+    emitter.on('siteBarChange', ({ routeRaw }) => {
+      addRouteTabs(routeRaw as unknown as MultiTabsType);
+      contextmenu(routeRaw.path);
     });
   });
 

src/layouts/pageLayouts/components/Breadcrumb/index.vue

@@ -17,10 +17,10 @@
           <span
             v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
             class="no-redirect"
-            >{{ t(`${item.meta?.title}`) }}</span
+            >{{ translateI18n(item.meta?.title) }}</span
           >
           <a v-else class="redirect" @click.prevent="handleLink(item)">
-            {{ t(`${item.meta?.title}`) }}
+            {{ translateI18n(item.meta?.title) }}
           </a>
         </el-breadcrumb-item>
       </transition-group>
@@ -33,7 +33,7 @@
   import { ref, watch } from 'vue';
   import { getAppCollapseMenu } from '@/hooks/userAppWindow';
   import { useRoute, useRouter } from 'vue-router';
-  import { useI18n } from '@/hooks/web/useI18n';
+  import { translateI18n } from '@/hooks/web/useI18n';
   import { useAppStoreHook } from '@/store/modules/app';
   import { AppRouteRecordRaw } from '#/route';
   import { getParentPaths, findRouteByPath } from '@/router/utils';
@@ -42,8 +42,6 @@
 
   const { multiTabs } = usePermissionStoreHook();
 
-  const { t } = useI18n();
-
   const levelList = ref<Array<AppRouteRecordRaw>>([]);
   // 获取路由配置
   const router = useRouter();

src/layouts/pageLayouts/components/Sidebar/MinSidebar.vue

@@ -2,16 +2,16 @@
   <el-menu
     ref="menu"
     :default-active="activeMenyu"
-    :active="activeMenyu"
     class="horizontal-header-menu"
     mode="horizontal"
+    @select="(indexPath) => selectMenu(indexPath)"
   >
     <app-link
       v-for="menusRoute in usePermissionStoreHook().wholeMenus"
       :key="menusRoute.path"
-      :to="menusRoute.path"
+      :to="resolvePath(menusRoute)"
     >
-      <el-menu-item :index="menusRoute.path">
+      <el-menu-item :index="resolvePath(menusRoute)">
         <item
           class-name="menu-item-svg"
           :icon="menusRoute.meta && menusRoute.meta.icon"
@@ -27,11 +27,31 @@
   import { usePermissionStoreHook } from '@/store/modules/permission';
   import { computed } from 'vue';
   import { useRoute } from 'vue-router';
+  import { useSelectMenu } from './hooks/useSelectMenu';
+  import { AppRouteRecordRaw } from '#/route';
+  import { getParentPaths, findRouteByPath } from '@/router/utils';
+
+  const { selectMenu } = useSelectMenu();
 
   const route = useRoute();
 
+  const resolvePath = (routeRaw: AppRouteRecordRaw): string => {
+    let path = routeRaw.path;
+    if (routeRaw.children && routeRaw.children.length) {
+      path = routeRaw.children[0].path;
+    }
+    return path;
+  };
+
   const activeMenyu = computed<string>(() => {
     const { path } = route;
-    return '/' + path.split('/')[1];
+    const wholeMenus = usePermissionStoreHook().wholeMenus;
+    // 当前路由的父级路径
+    const parentRoutes = getParentPaths(path, wholeMenus)[0];
+    const routeByPath = findRouteByPath(parentRoutes, wholeMenus);
+    if (routeByPath?.children && routeByPath.children.length) {
+      return routeByPath.children[0].path;
+    }
+    return path;
   });
 </script>

src/layouts/pageLayouts/components/Sidebar/hooks/useSelectMenu.ts

@@ -6,8 +6,12 @@ export const useSelectMenu = () => {
   const selectMenu = (path: string) => {
     const findRoute = findRouteByPath(path, sidebarRouteList);
     if (findRoute) {
+      if (findRoute.redirect && findRoute.children && findRoute.children.length) {
+        selectMenu(findRoute.children[0].path);
+        return;
+      }
       emitter.emit('siteBarChange', {
-        routeRow: findRoute,
+        routeRaw: findRoute,
       });
     }
   };

src/layouts/pageLayouts/components/Sidebar/index.vue

@@ -48,9 +48,9 @@
   });
 
   function getSubMenuData(path: string) {
-    // path的上级路由组成的数组
+    // path的父级路由组成的数组
     const parentPathArr = getParentPaths(path, usePermissionStoreHook().wholeMenus);
-    // 当前路由的父级路由信息
+    // 当前路由的信息
     const parenetRoute = findRouteByPath(parentPathArr[0], usePermissionStoreHook().wholeMenus);
     if (parenetRoute) {
       if (parenetRoute.children) subMenuData.value = parenetRoute.children;

src/router/utils.ts

@@ -7,6 +7,7 @@ import { AppRouteRecordRaw, Menu } from '#/route';
 import { sidebarRouteList } from './index';
 import { isExternal } from '@/utils/validate';
 
+// 初始化权限路由
 async function initAsyncRoute(power: string) {
   resetRouter();
   const res = await getRouteApi({ name: power });

src/utils/mitt.ts

@@ -4,7 +4,7 @@ import mitt from 'mitt';
 
 type Events = {
   siteBarChange: {
-    routeRow: AppRouteRecordRaw;
+    routeRaw: AppRouteRecordRaw;
   };
 };
 

src/views/details-page/index.vue

@@ -16,7 +16,7 @@
       name: 'RtDetailsInfo',
       query,
       meta: {
-        title: `详情页-${item}`,
+        title: { 'zh-ch': `详情页-${item}`, en: `pageDatails-${item}` },
       },
     });
     router.push({ name: 'RtDetailsInfo', query });