🔨 自定义标签名称.

orion-visor-ui/src/components/app/navbar/index.vue

@@ -215,8 +215,8 @@
   import { triggerMouseEvent } from '@/utils/event';
   import { openAppSettingKey, toggleDrawerMenuKey } from '@/types/symbol';
   import { preferenceTipsKey } from './const';
-  import { REDIRECT_ROUTE_NAME, routerToTag } from '@/router/constants';
-  import { openNewRoute } from '@/router';
+  import { getRouteTag, openNewRoute } from '@/router';
+  import { REDIRECT_ROUTE_NAME } from '@/router/constants';
   import { checkHasUnreadMessage } from '@/api/system/message';
   import SystemMenuTree from '@/components/system/menu/tree/index.vue';
   import MessageBox from '@/components/system/message-box/index.vue';
@@ -291,13 +291,13 @@
   const reloadCurrent = async () => {
     if (appStore.tabBar) {
       // 重新加载 tab
-      const itemData = routerToTag(route);
-      tabBarStore.deleteCache(itemData);
+      const tag = getRouteTag(route);
+      tabBarStore.deleteCache(tag);
       await router.push({
         name: REDIRECT_ROUTE_NAME,
         params: { path: route.fullPath },
       });
-      tabBarStore.addCache(itemData.name);
+      tabBarStore.addCache(tag.name);
     } else {
       // 刷新页面
       router.go(0);

orion-visor-ui/src/components/app/tab-bar/index.vue

@@ -18,12 +18,16 @@
 
 <script lang="ts" setup>
   import type { RouteLocationNormalized } from 'vue-router';
+  import { useRouter } from 'vue-router';
   import { computed, onUnmounted, ref, watch } from 'vue';
-  import { routerToTag } from '@/router/constants';
-  import { listenerRouteChange, removeRouteListener, } from '@/utils/route-listener';
+  import { getRouteTag, getRouteTitle } from '@/router';
+  import { listenerRouteChange, removeRouteListener } from '@/utils/route-listener';
   import { useAppStore, useTabBarStore } from '@/store';
+  import qs from 'query-string';
   import TabItem from './tab-item.vue';
 
+  const router = useRouter();
+
   const appStore = useAppStore();
   const tabBarStore = useTabBarStore();
 
@@ -35,27 +39,33 @@
     return appStore.navbar ? 60 : 0;
   });
 
-  watch(
-    () => appStore.navbar,
-    () => {
-      affixRef.value.updatePosition();
-    }
-  );
+  // 监听修改位置
+  watch(() => appStore.navbar, () => {
+    affixRef.value.updatePosition();
+  });
 
   // 监听路由变化
   listenerRouteChange((route: RouteLocationNormalized) => {
-    if (
-      !route.meta.noAffix &&
-      !tagList.value.some((tag) => tag.path === route.path)
-    ) {
-      // 固定并且没有此 tab 则添加
-      tabBarStore.addTab(routerToTag(route), route.meta?.ignoreCache as unknown as boolean);
+    // 不固定
+    if (route.meta.noAffix) {
+      return;
+    }
+    const tag = tagList.value.find((tag) => tag.path === route.path);
+    if (tag) {
+      // 找到 更新信息
+      tag.fullPath = route.fullPath;
+      tag.query = qs.parseUrl(route.fullPath).query;
+      tag.title = getRouteTitle(route);
+    } else {
+      // 未找到 添加标签
+      tabBarStore.addTab(getRouteTag(route), route.meta?.ignoreCache as unknown as boolean);
     }
   }, true);
 
   onUnmounted(() => {
     removeRouteListener();
   });
+
 </script>
 
 <style lang="less" scoped>

orion-visor-ui/src/router/constants.ts

@@ -1,6 +1,3 @@
-import type { RouteLocationNormalized } from 'vue-router';
-import type { TagProps } from '@/store/modules/tab-bar/types';
-
 export const LOGIN_ROUTE_NAME = 'login';
 
 export const REDIRECT_ROUTE_NAME = 'redirect';
@@ -36,18 +33,3 @@ export const STATUS_ROUTER_LIST = [
   { name: NOT_FOUND_ROUTER_NAME, children: [] },
   { name: FORBIDDEN_ROUTER_NAME, children: [] },
 ];
-
-/**
- * router 转 tag
- */
-export const routerToTag = (route: RouteLocationNormalized): TagProps => {
-  const { name, meta, path, fullPath, query } = route;
-  return {
-    title: meta.locale || String(name),
-    name: String(name),
-    path,
-    fullPath,
-    query,
-    ignoreCache: meta.ignoreCache,
-  };
-};

orion-visor-ui/src/router/guard/router-permission.ts

@@ -1,5 +1,6 @@
 import type { Router } from 'vue-router';
 import { useMenuStore } from '@/store';
+import { getRouteTitle } from '@/router';
 import { NOT_FOUND_ROUTER_NAME, WHITE_ROUTER_LIST } from '../constants';
 import NProgress from 'nprogress';
 import usePermission from '@/hooks/permission';
@@ -30,10 +31,7 @@ export default function setupPermissionGuard(router: Router) {
       next({ name: NOT_FOUND_ROUTER_NAME });
     }
     // 修改页面标题
-    const locale = to.meta?.locale;
-    if (locale) {
-      document.title = locale;
-    }
+    document.title = getRouteTitle(to);
     NProgress.done();
   });
 }

orion-visor-ui/src/router/index.ts

@@ -1,4 +1,5 @@
-import type { RouteLocationRaw } from 'vue-router';
+import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router';
+import type { TagProps } from '@/store/modules/tab-bar/types';
 import { createRouter, createWebHistory } from 'vue-router';
 import { appRoutes } from './routes';
 import { openWindow } from '@/utils';
@@ -37,4 +38,27 @@ export const openNewRoute = (route: RouteLocationRaw) => {
   }
 };
 
+// route 转 tag
+export const getRouteTag = (route: RouteLocationNormalized): TagProps => {
+  const { name, meta, path, fullPath, query } = route;
+  return {
+    title: getRouteTitle(route),
+    name: String(name),
+    path,
+    fullPath,
+    query,
+    ignoreCache: meta.ignoreCache,
+  };
+};
+
+// 获取 router title
+export const getRouteTitle = (route: RouteLocationNormalized) => {
+  const { meta } = route;
+  // 如果 meta.localeTemplate 则根据路由生成
+  if (meta.localeTemplate) {
+    return meta?.localeTemplate(route) || meta.locale || '';
+  }
+  return meta.locale || '';
+};
+
 export default router;

orion-visor-ui/src/router/typings.d.ts

@@ -1,3 +1,4 @@
+import type { RouteLocationNormalized } from 'vue-router';
 import 'vue-router';
 
 /**
@@ -21,5 +22,7 @@ declare module 'vue-router' {
     newWindow?: boolean;
     // 是否活跃
     activeMenu?: string;
+    // 名称模板
+    localeTemplate?: (key: RouteLocationNormalized) => string;
   }
 }