修改菜单逻辑.

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

@@ -30,6 +30,9 @@
       const openKeys = ref<string[]>([]);
       const selectedKey = ref<string[]>([]);
 
+      /**
+       * 跳转
+       */
       const goto = (item: RouteRecordRaw) => {
         // 打开外链
         if (regexUrl.test(item.path)) {
@@ -48,6 +51,7 @@
           name: item.name,
         });
       };
+
       const findMenuOpenKeys = (target: string) => {
         const result: string[] = [];
         let isFind = false;
@@ -69,9 +73,14 @@
         });
         return result;
       };
+
+      /**
+       * 监听路由 设置打开的 key
+       */
       listenerRouteChange((newRoute) => {
-        const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
-        if (requiresAuth && (!hideInMenu || activeMenu)) {
+        // TODO
+        const { activeMenu, hideInMenu } = newRoute.meta;
+        if (!hideInMenu || activeMenu) {
           const menuOpenKeys = findMenuOpenKeys(
             (activeMenu || newRoute.name) as string
           );
@@ -84,11 +93,14 @@
           ];
         }
       }, true);
+
+      // 展开菜单
       const setCollapse = (val: boolean) => {
         if (appStore.device === 'desktop')
           appStore.updateSettings({ menuCollapse: val });
       };
 
+      // 渲染菜单
       const renderSubMenu = () => {
         function travel(_route: RouteRecordRaw[], nodes = []) {
           if (_route) {
@@ -103,7 +115,8 @@
                     key={element?.name}
                     v-slots={{
                       icon,
-                      title: () => h(compile(t(element?.meta?.locale || ''))),
+                      // 去除国际化 title: () => h(compile(t(element?.meta?.locale || ''))),
+                      title: () => h(compile(element?.meta?.locale || '')),
                     }}
                   >
                     {travel(element?.children)}
@@ -114,7 +127,7 @@
                     v-slots={{ icon }}
                     onClick={() => goto(element)}
                   >
-                    {t(element?.meta?.locale || '')}
+                    {element?.meta?.locale || ''}
                   </a-menu-item>
                 );
               nodes.push(node as never);
@@ -158,5 +171,14 @@
         font-size: 18px;
       }
     }
+
+    .arco-menu-icon {
+      margin-right: 10px !important;
+    }
+
+    .arco-menu-indent-list {
+      width: 28px;
+      display: inline-block;
+    }
   }
 </style>

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

@@ -4,7 +4,7 @@
       <div class="tab-bar-box">
         <div class="tab-bar-scroll">
           <div class="tags-wrap">
-            <tab-item
+            <TabItem
               v-for="(tag, index) in tagList"
               :key="tag.fullPath"
               :index="index"
@@ -19,14 +19,11 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, watch, onUnmounted } from 'vue';
+  import { computed, onUnmounted, ref, watch } from 'vue';
   import type { RouteLocationNormalized } from 'vue-router';
-  import {
-    listenerRouteChange,
-    removeRouteListener,
-  } from '@/utils/route-listener';
+  import { listenerRouteChange, removeRouteListener, } from '@/utils/route-listener';
   import { useAppStore, useTabBarStore } from '@/store';
-  import tabItem from './tab-item.vue';
+  import TabItem from './tab-item.vue';
 
   const appStore = useAppStore();
   const tabBarStore = useTabBarStore();
@@ -45,11 +42,19 @@
       affixRef.value.updatePosition();
     }
   );
+
+  /**
+   * 监听路由变化
+   */
+  // TODO
   listenerRouteChange((route: RouteLocationNormalized) => {
+    console.log(route);
+    console.log(!route.meta.noAffix);
     if (
-      !route.meta.noAffix &&
+      !route.meta.noAffix && // todo 改一下
       !tagList.value.some((tag) => tag.fullPath === route.fullPath)
     ) {
+      console.log('updateTabList', route);
       tabBarStore.updateTabList(route);
     }
   }, true);
@@ -66,7 +71,7 @@
 
     .tab-bar-box {
       display: flex;
-      padding: 0 0 0 20px;
+      padding: 0 0 0 6px;
       background-color: var(--color-bg-2);
       border-bottom: 1px solid var(--color-border);
 

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

@@ -2,20 +2,17 @@
   <a-dropdown
     trigger="contextMenu"
     :popup-max-height="false"
-    @select="actionSelect"
-  >
+    @select="actionSelect">
     <span
       class="arco-tag arco-tag-size-medium arco-tag-checked"
       :class="{ 'link-activated': itemData.fullPath === $route.fullPath }"
-      @click="goto(itemData)"
-    >
+      @click="goto(itemData)">
       <span class="tag-link">
-        {{ $t(itemData.title) }}
+        {{ itemData.title }}
       </span>
       <span
         class="arco-icon-hover arco-tag-icon-hover arco-icon-hover-size-medium arco-tag-close-btn"
-        @click.stop="tagClose(itemData, index)"
-      >
+        @click.stop="tagClose(itemData, index)">
         <icon-close />
       </span>
     </span>
@@ -27,8 +24,7 @@
       <a-doption
         class="sperate-line"
         :disabled="disabledCurrent"
-        :value="Eaction.current"
-      >
+        :value="Eaction.current">
         <icon-close />
         <span>关闭当前标签页</span>
       </a-doption>
@@ -39,8 +35,7 @@
       <a-doption
         class="sperate-line"
         :disabled="disabledRight"
-        :value="Eaction.right"
-      >
+        :value="Eaction.right">
         <icon-to-right />
         <span>关闭右侧标签页</span>
       </a-doption>
@@ -113,6 +108,9 @@
     return props.index === tagList.value.length - 1;
   });
 
+  /**
+   * 关闭 tag
+   */
   const tagClose = (tag: TagProps, idx: number) => {
     tabBarStore.deleteTab(idx, tag);
     if (props.itemData.fullPath === route.fullPath) {
@@ -124,12 +122,15 @@
   const findCurrentRouteIndex = () => {
     return tagList.value.findIndex((el) => el.fullPath === route.fullPath);
   };
+
   const actionSelect = async (value: any) => {
     const { itemData, index } = props;
     const copyTagList = [...tagList.value];
     if (value === Eaction.current) {
+      // 关闭当前
       tagClose(itemData, index);
     } else if (value === Eaction.left) {
+      // 关闭左侧
       const currentRouteIdx = findCurrentRouteIndex();
       copyTagList.splice(1, props.index - 1);
 
@@ -138,6 +139,7 @@
         router.push({ name: itemData.name });
       }
     } else if (value === Eaction.right) {
+      // 关闭右侧
       const currentRouteIdx = findCurrentRouteIndex();
       copyTagList.splice(props.index + 1);
 
@@ -146,14 +148,15 @@
         router.push({ name: itemData.name });
       }
     } else if (value === Eaction.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) {
+      // 重新加载
       tabBarStore.deleteCache(itemData);
-      console.log(route.fullPath);
       await router.push({
         name: REDIRECT_ROUTE_NAME,
         params: {
@@ -162,6 +165,7 @@
       });
       tabBarStore.addCache(itemData.name);
     } else {
+      // 关闭全部
       tabBarStore.resetTabList();
       router.push({ name: DEFAULT_ROUTE_NAME });
     }