perf: 走查问题调整

2025-08-29 12:03:04 +08:00
parent 83d11f1f53
commit 98d7adc550
23 changed files with 289 additions and 156 deletions
--- a/src/layouts/components/navbar/components/right-side/index.vue
+++ b/src/layouts/components/navbar/components/right-side/index.vue
@ -1,16 +1,8 @@
 <template>
  <div class="right-wrap">
    <!-- 任务中心 -->
-    <div
-      class="relative p-6px rounded-30px flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
-      @click="setUnread"
-    >
-      <SvgIcon
-        name="svg-taskCenter"
-        size="20"
-        class="cursor-pointer color-#737478 hover:color-#6D4CFE"
-        @click="openDownloadCenter"
-      />
+    <div class="relative p-6px rounded-30px flex items-center justify-center task-icon" @click="setUnread">
+      <SvgIcon name="svg-taskCenter" size="20" class="color-#737478" @click="openDownloadCenter" />
      <div class="w-6px h-6px rounded-50% bg-#F64B31 absolute top-6px right-6px" v-if="hasUnreadInfo"></div>
    </div>

--- a/src/layouts/components/navbar/components/right-side/style.scss
+++ b/src/layouts/components/navbar/components/right-side/style.scss
@ -23,4 +23,12 @@
      }
    }
  }
+  .task-icon {
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.6);
+    transition: background 0.2s;
+    &:hover {
+      background: #fff;
+    }
+  }
 }
--- a/src/layouts/components/siderBar/index.vue
+++ b/src/layouts/components/siderBar/index.vue
@ -26,6 +26,8 @@ export default defineComponent({

    const currentRouteName = computed(() => route.name as string);
    const currentRouteGroup = computed(() => route.meta?.group ?? 'GroupMain');
+    const isHomeRoute = computed(() => currentRouteName.value === 'Home');
+    const showAiSearch = computed(() => !route.meta?.hideAiSearch);

    const getCollapseMenuKey = (routeName: string): string => {
      let _key: string;
@ -58,15 +60,27 @@ export default defineComponent({
    };
    const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
      const getMenuItemClass = () => {
-        if (item.children?.length) {
-          return getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
+        const hasChildren = item.children?.length;
+        let target = !hasChildren ? 'sub-menu-item ' : '';
+        if (hasChildren) {
+          target += getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
+        } else {
+          target += item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
        }
-        return item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
+        return target;
      };

      return (
        <Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item.routeName)}>
-          <SvgIcon size="18" name={item.icon} alt="状态图标" class="color-#55585F flex-shrink-0" />
+          {(() => {
+            const isActive = getMenuItemClass() === 'active';
+            const iconName = Array.isArray(item.icon)
+              ? isActive
+                ? item.icon[1] ?? item.icon[0]
+                : item.icon[0]
+              : item.icon;
+            return <SvgIcon size="18" name={iconName as any} alt="状态图标" class="color-#55585F flex-shrink-0" />;
+          })()}
          {!hideLabel && <span class="cts label">{item.label}</span>}
        </Menu.Item>
      );
@ -117,20 +131,31 @@ export default defineComponent({
      initCollapse();
    };

+    watch(
+      () => currentRouteGroup.value,
+      () => {
+        init();
+      },
+      { immediate: false, deep: true },
+    );
+
    onMounted(() => {
      init();
    });

    return () => (
      <Menu class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? 'menu-fold' : ''}`}>
-        <Menu.Item
-          class={`menu-item !mb-0 ${currentRouteName.value === 'Home' ? 'active' : ''}`}
-          onClick={handleUserHome}
-        >
-          <img src={icon1} width={18} height={18} />
-          {!sidebarStore.menuCollapse && <span class="cts label">智能搜索</span>}
-        </Menu.Item>
-        <div class="line w-full h-1px bg-#211F24 my-12px"></div>
+        {showAiSearch.value && (
+          <>
+            <Menu.Item class={`menu-item !mb-0 ${isHomeRoute.value ? 'active' : ''}`} onClick={handleUserHome}>
+              <img src={icon1} width={18} height={18} />
+              {!sidebarStore.menuCollapse && (
+                <span class="cts label">{isHomeRoute.value ? '开始工作' : '智能搜索'}</span>
+              )}
+            </Menu.Item>
+            <div class="line w-full h-1px bg-#211F24 my-12px"></div>
+          </>
+        )}
        <div class="flex flex-col flex-1">
          <div class="menu-list flex-1">{renderMenuList()}</div>
          <div class="flex justify-end items-center">
@ -175,13 +200,14 @@ export default defineComponent({
          color: #6d4cfe;
        }
      }
-      &.active {
-        background-color: #fff !important;
-        .label,
-        .svg-icon {
-          color: #6d4cfe;
-        }
-      }
+      // &.active {
+      //   background-color: rgba(109, 76, 254, 0.08);
+      //   color: #6d4cfe;
+      //   .label,
+      //   .svg-icon {
+      //     color: #6d4cfe;
+      //   }
+      // }
    }
  }
 }
--- a/src/layouts/components/siderBar/menu-list.ts
+++ b/src/layouts/components/siderBar/menu-list.ts
@ -1,9 +1,11 @@
-import { GROUP_WRITER_NAME } from '@/router/routes/modules/materialCenter-writer';
+export const GROUP_WRITER_NAME = 'GroupWriterMaterialCenter';
+export const GROUP_MANAGEMENT_NAME = 'GroupManagement';
+export const GROUP_MAIN_NAME = 'GroupMain';

 export interface typeMenuItem {
  key?: string | number; // 菜单组key
  label?: string; // 菜单组标题
-  icon?: string; // 菜单组图标
+  icon?: string | [string, string]; // 菜单组图标
  routeName?: string; // 路由名称
  requireLogin?: boolean; // 是否需要登录
  requireAuth?: boolean; // 是否需要权限验证
@ -12,11 +14,11 @@ export interface typeMenuItem {
 }

 export const MENU_LIST = <Record<string, typeMenuItem[]>>{
-  GroupMain: [
+  [GROUP_MAIN_NAME]: [
    {
      key: 'ModAccountManage',
      label: '账号管理',
-      icon: 'svg-accountManage',
+      icon: ['svg-accountManage', 'svg-accountManage-active'],
      children: [
        {
          key: 'ModMediaAccountManage',
@ -34,44 +36,44 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
          requireLogin: true,
          activeMatch: ['MediaAccountAccountDashboard', 'MediaAccountAccountDetails'],
        },
-        {
-          key: 'ModPutAccountManage',
-          icon: 'svg-putAccountManage',
-          label: '账户管理',
-          routeName: 'PutAccountAccountManagement',
-          requireLogin: true,
-          activeMatch: ['PutAccountAccountManagement'],
-        },
-        {
-          key: 'ModPutAccountData',
-          icon: 'svg-putAccountData',
-          label: '账户数据',
-          routeName: 'PutAccountAccountData',
-          requireLogin: true,
-          activeMatch: ['PutAccountAccountData'],
-        },
-        {
-          key: 'ModPutAccountAccountDashboard',
-          icon: 'svg-putAccountAccountDashboard',
-          label: '投放表现分析',
-          routeName: 'PutAccountAccountDashboard',
-          requireLogin: true,
-          activeMatch: ['PutAccountAccountDashboard'],
-        },
-        {
-          key: 'ModInvestmentGuidelines',
-          icon: 'svg-putAccountInvestmentGuidelines',
-          label: '投放指南',
-          routeName: 'PutAccountInvestmentGuidelines',
-          requireLogin: true,
-          activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
-        },
+        // {
+        //   key: 'ModPutAccountManage',
+        //   icon: 'svg-putAccountManage',
+        //   label: '账户管理',
+        //   routeName: 'PutAccountAccountManagement',
+        //   requireLogin: true,
+        //   activeMatch: ['PutAccountAccountManagement'],
+        // },
+        // {
+        //   key: 'ModPutAccountData',
+        //   icon: 'svg-putAccountData',
+        //   label: '账户数据',
+        //   routeName: 'PutAccountAccountData',
+        //   requireLogin: true,
+        //   activeMatch: ['PutAccountAccountData'],
+        // },
+        // {
+        //   key: 'ModPutAccountAccountDashboard',
+        //   icon: 'svg-putAccountAccountDashboard',
+        //   label: '投放表现分析',
+        //   routeName: 'PutAccountAccountDashboard',
+        //   requireLogin: true,
+        //   activeMatch: ['PutAccountAccountDashboard'],
+        // },
+        // {
+        //   key: 'ModInvestmentGuidelines',
+        //   icon: 'svg-putAccountInvestmentGuidelines',
+        //   label: '投放指南',
+        //   routeName: 'PutAccountInvestmentGuidelines',
+        //   requireLogin: true,
+        //   activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
+        // },
      ],
    },
    {
      key: 'ModMaterialCenter',
      label: '素材中心',
-      icon: 'svg-materialCenter',
+      icon: ['svg-materialCenter', 'svg-materialCenter-active'],
      children: [
        {
          key: 'ModMaterialCenterFinishedProductsWareHouse',
@ -101,7 +103,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
    {
      key: 'ModTaskManage',
      label: '任务管理',
-      icon: 'svg-taskManage',
+      icon: ['svg-taskManage', 'svg-taskManage-active'],
      routeName: 'TaskManagement',
    },
  ],
@ -137,4 +139,39 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
      ],
    },
  ],
+  [GROUP_MANAGEMENT_NAME]:[ 
+    {
+      key: 'ModManagement',
+      label: '管理中心',
+      icon: ['svg-management', 'svg-management-active'],
+      children: [
+        {
+          key: 'ModManagementPerson',
+          icon: 'svg-managementPerson',
+          label: '个人信息',
+          routeName: 'ManagementPerson',
+          requireLogin: true,
+          activeMatch: [
+            'ManagementPerson',
+          ],
+        },
+        {
+          key: 'ModManagementEnterprise',
+          icon: 'svg-managementEnterprise',
+          label: '企业信息',
+          routeName: 'ManagementEnterprise',
+          requireLogin: true,
+          activeMatch: ['ManagementEnterprise'],
+        },
+        {
+          key: 'ModManagementAccount',
+          icon: 'svg-managementAccount',
+          label: '账号管理',
+          routeName: 'ManagementAccount',
+          requireLogin: true,
+          activeMatch: ['ManagementAccount'],
+        },
+      ],
+    }
+  ]
 };
--- a/src/layouts/components/siderBar/style.scss
+++ b/src/layouts/components/siderBar/style.scss
@ -28,11 +28,13 @@
      color: #6d4cfe;
    }
  }
-  &.active {
-    background-color: #fff !important;
-    .label,
-    .svg-icon {
-      color: #6d4cfe !important;
+  &:not(.sub-menu-item) {
+    &.active {
+      background-color: #fff !important;
+      .label,
+      .svg-icon {
+        color: #6d4cfe !important;
+      }
    }
  }
  &:not(:last-child) {