fixed: 首次进入没有名称.

orion-ops-ui/src/components/menu/index.vue

@@ -78,7 +78,6 @@
        * 监听路由 设置打开的 key
        */
       listenerRouteChange((newRoute) => {
-        // TODO
         const { activeMenu, hideInMenu } = newRoute.meta;
         if (!hideInMenu || activeMenu) {
           const menuOpenKeys = findMenuOpenKeys(

orion-ops-ui/src/components/tab-bar/index.vue

@@ -21,6 +21,7 @@
 <script lang="ts" setup>
   import { computed, onUnmounted, ref, watch } from 'vue';
   import type { RouteLocationNormalized } from 'vue-router';
+  import { routerToTag } from '@/router/constants';
   import { listenerRouteChange, removeRouteListener, } from '@/utils/route-listener';
   import { useAppStore, useTabBarStore } from '@/store';
   import TabItem from './tab-item.vue';
@@ -46,16 +47,13 @@
   /**
    * 监听路由变化
    */
-  // TODO
   listenerRouteChange((route: RouteLocationNormalized) => {
-    console.log(route);
-    console.log(!route.meta.noAffix);
     if (
-      !route.meta.noAffix && // todo 改一下
+      !route.meta.noAffix &&
       !tagList.value.some((tag) => tag.fullPath === route.fullPath)
     ) {
-      console.log('updateTabList', route);
-      tabBarStore.updateTabList(route);
+      // 固定并且没有此 tab 则添加
+      tabBarStore.addTab(routerToTag(route), route.meta?.ignoreCache as unknown as any);
     }
   }, true);
 

orion-ops-ui/src/components/tab-bar/tab-item.vue

@@ -17,33 +17,33 @@
       </span>
     </span>
     <template #content>
-      <a-doption :disabled="disabledReload" :value="Eaction.reload">
+      <a-doption :disabled="disabledReload" :value="Option.reload">
         <icon-refresh />
         <span>重新加载</span>
       </a-doption>
       <a-doption
-        class="sperate-line"
+        class="group-line"
         :disabled="disabledCurrent"
-        :value="Eaction.current">
+        :value="Option.current">
         <icon-close />
         <span>关闭当前标签页</span>
       </a-doption>
-      <a-doption :disabled="disabledLeft" :value="Eaction.left">
+      <a-doption :disabled="disabledLeft" :value="Option.left">
         <icon-to-left />
         <span>关闭左侧标签页</span>
       </a-doption>
       <a-doption
-        class="sperate-line"
+        class="group-line"
         :disabled="disabledRight"
-        :value="Eaction.right">
+        :value="Option.right">
         <icon-to-right />
         <span>关闭右侧标签页</span>
       </a-doption>
-      <a-doption :value="Eaction.others">
+      <a-doption :value="Option.others">
         <icon-swap />
         <span>关闭其它标签页</span>
       </a-doption>
-      <a-doption :value="Eaction.all">
+      <a-doption :value="Option.all">
         <icon-folder-delete />
         <span>关闭全部标签页</span>
       </a-doption>
@@ -58,8 +58,7 @@
   import type { TagProps } from '@/store/modules/tab-bar/types';
   import { DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants';
 
-  // eslint-disable-next-line no-shadow
-  enum Eaction {
+  enum Option {
     reload = 'reload',
     current = 'current',
     left = 'left',
@@ -126,48 +125,46 @@
   const actionSelect = async (value: any) => {
     const { itemData, index } = props;
     const copyTagList = [...tagList.value];
-    if (value === Eaction.current) {
+    if (value === Option.current) {
       // 关闭当前
       tagClose(itemData, index);
-    } else if (value === Eaction.left) {
+    } else if (value === Option.left) {
       // 关闭左侧
       const currentRouteIdx = findCurrentRouteIndex();
       copyTagList.splice(1, props.index - 1);
 
       tabBarStore.freshTabList(copyTagList);
       if (currentRouteIdx < index) {
-        router.push({ name: itemData.name });
+        await router.push({ name: itemData.name });
       }
-    } else if (value === Eaction.right) {
+    } else if (value === Option.right) {
       // 关闭右侧
       const currentRouteIdx = findCurrentRouteIndex();
       copyTagList.splice(props.index + 1);
 
       tabBarStore.freshTabList(copyTagList);
       if (currentRouteIdx > index) {
-        router.push({ name: itemData.name });
+        await router.push({ name: itemData.name });
       }
-    } else if (value === Eaction.others) {
+    } else if (value === Option.others) {
       // 关闭其他
       const filterList = tagList.value.filter((el, idx) => {
         return idx === 0 || idx === props.index;
       });
       tabBarStore.freshTabList(filterList);
-      router.push({ name: itemData.name });
-    } else if (value === Eaction.reload) {
+      await router.push({ name: itemData.name });
+    } else if (value === Option.reload) {
       // 重新加载
       tabBarStore.deleteCache(itemData);
       await router.push({
         name: REDIRECT_ROUTE_NAME,
-        params: {
-          path: route.fullPath,
-        },
+        params: { path: route.fullPath },
       });
       tabBarStore.addCache(itemData.name);
     } else {
       // 关闭全部
       tabBarStore.resetTabList();
-      router.push({ name: DEFAULT_ROUTE_NAME });
+      await router.push({ name: DEFAULT_ROUTE_NAME });
     }
   };
 </script>
@@ -206,7 +203,7 @@
     }
   }
 
-  .sperate-line {
+  .group-line {
     border-bottom: 1px solid var(--color-neutral-3);
   }
 </style>

orion-ops-ui/src/hooks/permission.ts

@@ -1,15 +1,28 @@
-import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
-import { useUserStore } from '@/store';
+import { RouteLocationNormalized, RouteRecordNormalized, RouteRecordRaw } from 'vue-router';
+import { useAppStore, useUserStore } from '@/store';
+import { WHITE_ROUTER_LIST } from '@/router/constants';
 
 export default function usePermission() {
+  const appStore = useAppStore();
   const userStore = useUserStore();
   return {
     /**
      * 是否可访问路由
      */
     accessRouter(route: RouteLocationNormalized | RouteRecordRaw) {
-      // route.name
-      // TODO
+      // 检查路由是否存在于授权路由中
+      const menuConfig = [...appStore.appAsyncMenus, ...WHITE_ROUTER_LIST];
+      let exist = false;
+      while (menuConfig.length && !exist) {
+        const element = menuConfig.shift();
+        if (element?.name === route.name) exist = true;
+        if (element?.children) {
+          menuConfig.push(
+            ...(element.children as unknown as RouteRecordNormalized[])
+          );
+        }
+      }
+      return exist;
     },
 
     /**

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

@@ -35,13 +35,10 @@ export const DEFAULT_TAB = {
 /**
  * router 转 tag
  */
-// TODO 获取后端meta
 export const routerToTag = (route: RouteLocationNormalized): TagProps => {
-  console.log(route);
-  // TODO 还是得需要 name 和 meta 的映射
   const { name, meta, fullPath, query } = route;
   return {
-    title: meta.locale || 'me',
+    title: meta.locale || '',
     name: String(name),
     fullPath,
     query,

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

@@ -1,12 +1,12 @@
-import type { Router, RouteRecordNormalized } from 'vue-router';
+import type { Router } from 'vue-router';
 import NProgress from 'nprogress';
 import { useAppStore } from '@/store';
 import { NOT_FOUND_ROUTER_NAME, WHITE_ROUTER_LIST } from '../constants';
+import usePermission from '@/hooks/permission';
 
 export default function setupPermissionGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {
     const appStore = useAppStore();
-
     // 未加载菜单 并且 不在白名单内 则加载菜单
     if (
       !appStore.menuFetched &&
@@ -15,25 +15,20 @@ export default function setupPermissionGuard(router: Router) {
       // 加载菜单
       await appStore.fetchMenuConfig();
     }
-    // 检查路由是否存在于授权路由中
-    const menuConfig = [...appStore.appAsyncMenus, ...WHITE_ROUTER_LIST];
-    let exist = false;
-    while (menuConfig.length && !exist) {
-      const element = menuConfig.shift();
-      if (element?.name === to.name) exist = true;
-
-      if (element?.children) {
-        menuConfig.push(
-          ...(element.children as unknown as RouteRecordNormalized[])
-        );
-      }
+    // 检测是否可以访问
+    const permission = usePermission();
+    const access = permission.accessRouter(to);
+    // 刚进入页面时 重定向的 meta 是空的
+    if (access && to.meta.locale === undefined && appStore.menuFetched) {
+      to.meta = to.matched[to.matched.length - 1].meta;
     }
-    if (!exist) {
-      // 页面不存在
-      next({ name: NOT_FOUND_ROUTER_NAME });
-    } else {
+
+    if (access) {
       // 正常跳转
       next();
+    } else {
+      // 页面不存在
+      next({ name: NOT_FOUND_ROUTER_NAME });
     }
     NProgress.done();
   });

orion-ops-ui/src/router/routes/modules/user.ts

@@ -15,9 +15,6 @@ const USER: AppRouteRecordRaw = {
       path: '/user/userChild2',
       name: 'userChild2',
       component: () => import('@/views/user/child2/index.vue'),
-      meta: {
-        noAffix: true
-      }
     },
   ],
 };

orion-ops-ui/src/store/modules/tab-bar/index.ts

@@ -1,6 +1,5 @@
-import type { RouteLocationNormalized } from 'vue-router';
 import { defineStore } from 'pinia';
-import { DEFAULT_TAB, DEFAULT_ROUTE_NAME, routerToTag } from '@/router/constants';
+import { DEFAULT_ROUTE_NAME, DEFAULT_TAB } from '@/router/constants';
 import { isString } from '@/utils/is';
 import { TabBarState, TagProps } from './types';
 
@@ -23,10 +22,10 @@ const useTabBarStore = defineStore('tabBar', {
     /**
      * 添加 tab
      */
-    updateTabList(route: RouteLocationNormalized) {
-      this.tagList.push(routerToTag(route));
-      if (!route.meta.ignoreCache) {
-        this.cacheTabList.add(route.name as string);
+    addTab(tag: TagProps, ignoreCache: boolean) {
+      this.tagList.push(tag);
+      if (!ignoreCache) {
+        this.cacheTabList.add(tag.name as string);
       }
     },
 

orion-ops-ui/src/utils/route-listener.ts

@@ -9,9 +9,7 @@ let latestRoute: RouteLocationNormalized;
 
 export function setRouteEmitter(to: RouteLocationNormalized) {
   emitter.emit(key, to);
-  // TODO 这里寻找
   latestRoute = to;
-  console.log('change', to);
 }
 
 /**