perf: 优化菜单

packages/ui/certd-client/src/layout/components/menu/index.tsx

@@ -4,6 +4,7 @@ import _ from "lodash-es";
 import BScroll from "better-scroll";
 import "./index.less";
 import { utils } from "@fast-crud/fast-crud";
+import { routerUtils } from "/@/utils/util.router";
 
 function useBetterScroll(enabled = true) {
   const bsRef = ref(null);
@@ -70,27 +71,8 @@ export default defineComponent({
     scroll: {}
   },
   setup(props, ctx) {
-    async function open(path: any) {
-      if (path == null) {
-        return;
-      }
-      if (path.startsWith("http://") || path.startsWith("https://")) {
-        window.open(path);
-        return;
-      }
-      try {
-        const navigationResult = await router.push(path);
-        if (navigationResult) {
-          // 导航被阻止
-        } else {
-          // 导航成功 (包括重新导航的情况)
-        }
-      } catch (e) {
-        console.error("导航失败", e);
-      }
-    }
-    function onSelect(item: any) {
-      open(item.key);
+    async function onSelect(item: any) {
+      await routerUtils.open(item.key);
     }
 
     const fsIcon = resolveComponent("FsIcon");

packages/ui/certd-client/src/layout/layout-framework.vue

@@ -17,7 +17,17 @@
             <MenuUnfoldOutlined v-if="asideCollapsed" />
             <MenuFoldOutlined v-else />
           </div>
-          <fs-menu class="header-menu" mode="horizontal" :expand-selected="false" :selectable="false" :menus="frameworkMenus" />
+          <!--          <fs-menu class="header-menu" mode="horizontal" :expand-selected="false" :selectable="false" :menus="frameworkMenus" />-->
+          <div
+            v-for="menu of resourceStore.authedTopMenus"
+            class="top-menu flex-center header-btn"
+            :class="{ current: resourceStore.currentTopMenu === menu }"
+            :style="{ color: resourceStore.currentTopMenu === menu ? token.colorPrimary : '' }"
+            @click="menuClick(menu)"
+          >
+            <fs-icon :icon="menu.meta.icon"></fs-icon>
+            <span class="ml-5">{{ menu.title }} </span>
+          </div>
           <tutorial-button class="flex-center header-btn" />
           <vip-button class="flex-center header-btn" mode="nav" />
         </div>
@@ -32,7 +42,7 @@
           <!--            Button-->
           <!--          </button>-->
           <fs-menu
-            v-if="settingStore?.siteEnv?.agent?.enabled === false && !settingStore.isComm"
+            v-if="!settingStore?.isAgent && !settingStore.isComm"
             class="header-menu"
             mode="horizontal"
             :expand-selected="false"
@@ -107,6 +117,8 @@ import VipButton from "/@/components/vip-button/index.vue";
 import TutorialButton from "/@/components/tutorial/index.vue";
 import { useUserStore } from "/@/store/modules/user";
 import { useSettingStore } from "/@/store/modules/settings";
+import { routerUtils } from "/@/utils/util.router";
+import { theme } from "ant-design-vue";
 
 const resourceStore = useResourceStore();
 const frameworkMenus = computed(() => {
@@ -150,6 +162,13 @@ const siteInfo = computed(() => {
 onMounted(async () => {
   await settingStore.checkUrlBound();
 });
+
+function menuClick(menu) {
+  routerUtils.open(menu.path);
+}
+
+const { useToken } = theme;
+const { token } = useToken();
 </script>
 <style lang="less">
 @import "../style/theme/index.less";
@@ -208,7 +227,7 @@ onMounted(async () => {
       align-items: center;
       & > * {
         cursor: pointer;
-        padding: 0 10px;
+        padding: 0 15px;
       }
       height: 100%;
 
@@ -219,7 +238,11 @@ onMounted(async () => {
         height: 100%;
         //border-bottom: 1px solid rgba(255, 255, 255, 0);
         &:hover {
-          background-color: #fff;
+          background-color: rgba(0, 0, 0, 0.06);
+        }
+        &.current {
+          //color: #1890ff;
+          //background-color: hsla(0, 0%, 100%, 0.5) !important;
         }
       }
     }

packages/ui/certd-client/src/router/source/framework.ts

@@ -27,7 +27,8 @@ export const frameworkResource = [
         }
       },
       //...crudResources,
-      ...certdResources
+      ...certdResources,
+      ...sysResources
     ]
   }
 ];

packages/ui/certd-client/src/router/source/modules/certd.ts

@@ -78,8 +78,7 @@ export const certdResources = [
           auth: true,
           isMenu: false
         }
-      },
-      ...sysResources
+      }
     ]
   }
 ];

packages/ui/certd-client/src/store/modules/resource.ts

@@ -4,11 +4,10 @@ import { frameworkMenus, headerMenus, filterMenus, findMenus } from "/src/router
 import _ from "lodash-es";
 import { mitter } from "/src/utils/util.mitt";
 //监听注销事件
-// mitter.on("app.logout", () => {
-//   debugger;
-//   const resourceStore = useResourceStore();
-//   resourceStore.clear();
-// });
+mitter.on("app.logout", () => {
+  const resourceStore = useResourceStore();
+  resourceStore.clear();
+});
 //
 // mitter.on("app.login", () => {
 //   const resourceStore = useResourceStore();
@@ -54,11 +53,17 @@ export const useResourceStore = defineStore({
     },
     getFrameworkMenus() {
       return this.authedTopMenus;
+      // const menus = _.cloneDeep(this.authedTopMenus);
+      // for (const menu of menus) {
+      //   delete menu.children;
+      // }
+      // return menus;
     }
   } as any,
   actions: {
     clear() {
       this.inited = false;
+      this.currentTopMenu = undefined;
     },
     /**
      * 初始化资源
@@ -80,21 +85,22 @@ export const useResourceStore = defineStore({
       this.headerMenus = headerMenus;
     },
     setCurrentTopMenu(topMenu?: any) {
-      if (this.frameworkMenus.length === 0) {
+      if (this.topMenus.length === 0) {
         return;
       }
       if (topMenu == null) {
-        topMenu = this.frameworkMenus[0];
+        topMenu = this.topMenus[0];
       }
       this.currentTopMenu = topMenu;
     },
     setCurrentTopMenuByCurrentRoute(matched: any) {
-      const menuHeader = this.frameworkMenus;
+      const menuHeader = this.authedTopMenus;
       if (matched?.length <= 1) {
         return;
       }
 
       function findFromTree(tree: any, find: any) {
+        tree = tree || [];
         const results: Array<any> = [];
         for (const item of tree) {
           if (find(item)) {

packages/ui/certd-client/src/utils/index.ts

@@ -3,10 +3,12 @@ import * as sites from "./util.site";
 import * as storages from "./util.storage";
 import commons from "./util.common";
 import * as mitt from "./util.mitt";
+import router from "/util.router";
 export const util = {
   ...envs,
   ...sites,
   ...storages,
   ...commons,
-  ...mitt
+  ...mitt,
+  ...router
 };

packages/ui/certd-client/src/utils/util.router.ts

@@ -0,0 +1,25 @@
+import router from "/@/router";
+
+async function open(path: any) {
+  if (path == null) {
+    return;
+  }
+  if (path.startsWith("http://") || path.startsWith("https://")) {
+    window.open(path);
+    return;
+  }
+  try {
+    const navigationResult = await router.push(path);
+    if (navigationResult) {
+      // 导航被阻止
+    } else {
+      // 导航成功 (包括重新导航的情况)
+    }
+  } catch (e) {
+    console.error("导航失败", e);
+  }
+}
+
+export const routerUtils = {
+  open
+};