feat: 重构sidebar菜单块逻辑

src/App.vue

@@ -7,8 +7,12 @@
 
 <script setup lang="ts">
 import { useUserStore } from '@/stores';
+import { useEnterpriseStore } from '@/stores/modules/enterprise';
+
 import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
+
 const userStore = useUserStore();
+const enterpriseStore = useEnterpriseStore();
 
 const redTheme = {
   token: {
@@ -17,10 +21,13 @@ const redTheme = {
   },
 };
 
-const init = () => {
+const init = async () => {
   const { isLogin, fetchUserInfo } = userStore;
+  const { updateEnterpriseInfo } = enterpriseStore;
+
   if (isLogin) {
-    fetchUserInfo();
+    await fetchUserInfo();
+    await updateEnterpriseInfo();
   }
 };
 

src/components/_base/menu/use-menu-tree.ts

@@ -12,7 +12,7 @@ export default function useMenuTree() {
   // const appStore = useAppStore();
   const sidebarStore = useSidebarStore();
   const appRoute = computed(() => {
-    const _filterRoutes = appRoutes.filter((v) => v.meta.id === sidebarStore.activeMenuId);
+    const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuId);
     return _filterRoutes;
   });
   const menuTree = computed(() => {

src/components/_base/navbar/index.vue

@@ -1,88 +1,43 @@
-<script lang="ts" setup>
+<script setup>
-import { useAppStore } from '@/stores';
+// import { useAppStore } from '@/stores';
-import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
+// import { useEnterpriseStore } from '@/stores/modules/enterprise';
-import { fetchMenusTree } from '@/api/all';
+// import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
-import { handleUserLogout } from '@/utils/user';
+// import { handleUserLogout } from '@/utils/user';
-import { fetchLogOut } from '@/api/all/login';
+// import { fetchLogOut } from '@/api/all/login';
 import { useSidebarStore } from '@/stores/modules/side-bar';
-import { MENU_GROUP_IDS } from '@/router/constants';
+// import { MENU_GROUP_IDS } from '@/router/constants';
 import router from '@/router';
-import { useRoute } from 'vue-router';
+// import { useRoute } from 'vue-router';
 import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
-import { appRoutes } from '@/router/routes';
+// import { appRoutes } from '@/router/routes';
+// import { MENU_LIST } from './constants';
 
-interface MenuItem {
-  name: string;
-  id: number;
-  children: Array<{
-    name: string;
-  }>;
-}
-
-const lists = ref<MenuItem[]>([]);
 const sidebarStore = useSidebarStore();
-const route = useRoute();
+// const enterpriseStore = useEnterpriseStore();
+// const route = useRoute();
 const exitAccountModalRef = ref(null);
+// const selectedKey = ref([]);
+
+// const enterpriseInfo = enterpriseStore.getEnterpriseInfo();
 const selectedKey = computed(() => {
-  // 判断是否为工作台页面（假设路由名为 'Home' 或 path 为 '/'）
-  if (route.name === 'Home' || route.path === '/') {
-    return [`${MENU_GROUP_IDS.WORK_BENCH_ID}`];
-  }
-  // 其他页面，activeMenuId 作为 key
   return [String(sidebarStore.activeMenuId)];
 });
+const menuList = computed(() => {
+  return sidebarStore.menuList;
+});
 
 const clickExit = async () => {
   exitAccountModalRef.value?.open();
 };
-const getMenus = async () => {
+
-  const res = await fetchMenusTree();
+// const appStore = useAppStore();
-  if (res.code === 200) {
-    lists.value = res.data;
-  }
-};
-onMounted(() => {
-  getMenus();
-});
-const appStore = useAppStore();
 
 const setServerMenu = () => {
   router.push('/management/person');
 };
-const handleSelect = (index: any) => {
-  if (index === 0) {
-    router.push('/');
-  } else {
-    router.push('/dataEngine/hotTranslation');
-  }
-};
 
-const flattenRoutes = (routes: any, parentPath = ''): any[] => {
+const handleDopdownClick = (item) => {
-  let result: any[] = [];
+  router.push({ name: item.pathName });
-  for (const route of routes) {
-    const fullPath = route.path.startsWith('/') ? route.path : parentPath.replace(/\/$/, '') + '/' + route.path;
-    if (route.children && route.children.length) {
-      result = result.concat(flattenRoutes(route.children, fullPath));
-    } else {
-      result.push({ ...route, fullPath });
-    }
-  }
-  return result;
-};
-
-const handleDopdownClick = (index: any, ind: any) => {
-  const { children } = lists.value[index];
-  const indPath = children[ind];
-
-  const allChildren = flattenRoutes(appRoutes);
-
-  const target = allChildren.find((item) => item.meta && item.meta.menuId === indPath.id);
-
-  if (target) {
-    router.push(target.fullPath);
-  } else {
-    console.warn('未找到对应的菜单路由', indPath.id);
-  }
 };
 </script>
 
@@ -95,26 +50,26 @@ const handleDopdownClick = (index: any, ind: any) => {
     </div>
     <div class="center-side">
       <div class="menu-demo h-100%">
-        <a-menu
+        <a-menu mode="horizontal" :selected-keys="selectedKey">
-          mode="horizontal"
+          <a-menu-item v-for="item in menuList" :key="String(item.id)">
-          :selected-keys="selectedKey"
+            <template v-if="item.children">
-          :default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
-        >
-          <a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
-            <span class="menu-item-text">工作台</span>
-          </a-menu-item>
-          <a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
               <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
                 <a-button>
                   <span class="menu-item-text mr-2px"> {{ item.name }}</span>
                   <icon-caret-down size="16" class="arco-icon-down !mr-0" />
                 </a-button>
                 <template #content>
-                <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
+                  <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(child)">
                     <span class="menu-item-text"> {{ child.name }}</span>
                   </a-doption>
                 </template>
               </a-dropdown>
+            </template>
+            <template v-else>
+              <a-menu-item :key="String(item.id)" @click="handleDopdownClick(item)">
+                <span class="menu-item-text"> {{ item.name }}</span>
+              </a-menu-item>
+            </template>
           </a-menu-item>
         </a-menu>
       </div>

src/router/index.ts

@@ -7,12 +7,12 @@ import { appRoutes } from './routes';
 import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './routes/base';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
-
+import { MENU_GROUP_IDS } from './constants';
 import createRouteGuard from './guard';
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration
-// console.log({ appRoutes });
+
-const router = createRouter({
+export const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
@@ -30,6 +30,7 @@ const router = createRouter({
       meta: {
         hideSidebar: true,
         requiresAuth: true,
+        id: MENU_GROUP_IDS.WORK_BENCH_ID,
       },
     },
     {

src/router/routes/index.ts

@@ -1,4 +1,6 @@
 import type { RouteRecordNormalized } from 'vue-router';
+import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './base';
+import { MENU_GROUP_IDS } from '@/router/constants';
 
 const modules = import.meta.glob('./modules/*.ts', { eager: true });
 // const externalModules = import.meta.glob('./externalModules/*.ts', {
@@ -15,6 +17,6 @@ function formatModules(_modules: any, result: RouteRecordNormalized[]) {
   return result;
 }
 
-export const appRoutes: RouteRecordNormalized[] = formatModules(modules, []);
+export const appRoutes: any[] = formatModules(modules, []);
 
 // export const appExternalRoutes: RouteRecordNormalized[] = formatModules(externalModules, []);

src/router/routes/modules/dataEngine.ts

@@ -27,7 +27,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '行业热门话题洞察',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 2,
         },
         component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
       },
@@ -38,7 +37,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '行业词云',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 3,
         },
         component: () => import('@/views/components/dataEngine/hotCloud.vue'),
       },
@@ -49,7 +47,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '行业关键词动向',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 4,
         },
         component: () => import('@/views/components/dataEngine/keyWord.vue'),
       },
@@ -60,7 +57,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '用户痛点观察',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 5,
         },
         component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
       },
@@ -71,7 +67,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '重点品牌动向',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 6,
         },
         component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
       },
@@ -82,7 +77,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '用户画像',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 7,
         },
         component: () => import('@/views/components/dataEngine/userPersona.vue'),
       },

src/router/routes/modules/propertyMarketing.ts

@@ -31,7 +31,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '品牌信息',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 11,
         },
         component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'),
       },
@@ -57,7 +56,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '账号管理',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 12,
         },
         component: () => import('@/views/property-marketing/media-account/account-manage'),
       },
@@ -105,7 +103,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '账户管理',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 13,
         },
         component: () => import('@/views/property-marketing/put-account/account-manage'),
       },
@@ -161,7 +158,6 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '业务洞察报告',
           requiresAuth: true,
           roles: ['*'],
-          menuId: 14,
         },
         component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'),
       },

src/stores/modules/enterprise/index.ts

@@ -1,4 +1,5 @@
 import { fetchEnterpriseInfo } from '@/api/all/login';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 interface EnterpriseInfo {
   id: number;
@@ -7,6 +8,7 @@ interface EnterpriseInfo {
   used_update_name_count: number;
   sub_account_quota: number;
   used_sub_account_count: number;
+  permissions: string[];
 }
 
 interface EnterpriseState {
@@ -55,10 +57,13 @@ export const useEnterpriseStore = defineStore('enterprise', {
       return this.enterpriseInfo;
     },
     async updateEnterpriseInfo() {
+      const sidebarStore = useSidebarStore();
+
       const res = await fetchEnterpriseInfo(this.enterpriseInfo!.id);
       const { code, data } = res;
       if (code === 200) {
         this.setEnterpriseInfo(data);
+        sidebarStore.getNavbarMenuList();
       }
     },
   },

src/stores/modules/side-bar/constants.ts

@@ -0,0 +1,63 @@
+import { MENU_GROUP_IDS } from '@/router/constants';
+export const MENU_LIST = [
+  {
+    id: MENU_GROUP_IDS.WORK_BENCH_ID,
+    name: '工作台',
+    pathName: 'Home',
+    permissionKey: '', // 权限key，如果为空，则表示该菜单不需要权限，与后端约定
+  },
+  {
+    id: MENU_GROUP_IDS.DATA_ENGINE_ID,
+    name: '全域数据分析',
+    permissionKey: 'data_analysis',
+    children: [
+      {
+        name: '行业热门话题洞察',
+        pathName: 'DataEngineHotTranslation',
+      },
+      {
+        name: '行业词云',
+        pathName: 'DataEngineHotCloud',
+      },
+      {
+        name: '行业关键词动向',
+        pathName: 'DataEngineKeyWord',
+      },
+      {
+        name: '用户痛点观察',
+        pathName: 'DataEngineUserPainPoints',
+      },
+      {
+        name: '重点品牌动向',
+        pathName: 'DataEngineKeyBrandMovement',
+      },
+      {
+        name: '用户画像',
+        pathName: 'DataEngineUserPersona',
+      },
+    ],
+  },
+  {
+    id: MENU_GROUP_IDS.PROPERTY_ID,
+    name: '营销资产中台',
+    permissionKey: 'marketing_asset',
+    children: [
+      {
+        name: '品牌资产管理',
+        pathName: 'RepositoryBrandMaterials',
+      },
+      {
+        name: '账号资源中心',
+        pathName: 'MediaAccountAccountManagement',
+      },
+      {
+        name: '投放资源中心',
+        pathName: 'PutAccountAccountManagement',
+      },
+      {
+        name: '智能方案管理',
+        pathName: 'IntelligentSolutionBusinessAnalysisReport',
+      },
+    ],
+  },
+];

src/stores/modules/side-bar/index.ts

@@ -3,19 +3,20 @@
  * @Date: 2025-06-23 22:13:30
  */
 import { defineStore } from 'pinia';
-import { MENU_GROUP_IDS } from '@/router/constants';
+import router from '@/router';
-import { appRoutes } from '@/router/routes';
 import type { RouteLocationNormalized } from 'vue-router';
-
+import { MENU_LIST } from './constants';
-const { DATA_ENGINE_ID, MANAGEMENT_ID } = MENU_GROUP_IDS;
+import { useEnterpriseStore } from '@/stores/modules/enterprise';
 
 interface sidebarState {
   activeMenuId: number | null;
+  menuList: any[];
 }
 
 export const useSidebarStore = defineStore('sidebar', {
   state: (): sidebarState => ({
     activeMenuId: null,
+    menuList: [],
   }),
   actions: {
     clearActiveMenuId() {
@@ -24,14 +25,23 @@ export const useSidebarStore = defineStore('sidebar', {
     setActiveMenuId(id: number) {
       this.activeMenuId = id;
     },
+    // navbar菜单列表由企业对应权限决定
+    getNavbarMenuList() {
+      const enterpriseStore = useEnterpriseStore();
+      const enterpriseInfo = enterpriseStore.getEnterpriseInfo();
+      this.menuList = MENU_LIST.filter(
+        (item) => !item.permissionKey || enterpriseInfo?.permissions?.includes(item.permissionKey),
+      );
+    },
     // 根据当前路由自动设置 activeMenuId
     setActiveMenuIdByRoute(route: RouteLocationNormalized) {
-      // console.log('setActiveMenuIdByRoute ');
+      const appRoutes = router.options?.routes ?? [];
+
       // 查找当前路由所属的菜单组
       const findMenuGroup = (routes: any[]): number | null => {
         for (const routeItem of routes) {
           // 检查子路由
-          if (routeItem.children && routeItem.children.length > 0) {
+          if (routeItem.children?.length > 0) {
             // 检查当前路由是否是这个父路由的子路由
             const isChildRoute = routeItem.children.some((child: any) => child.name === route.name);
             if (isChildRoute) {
@@ -42,6 +52,10 @@ export const useSidebarStore = defineStore('sidebar', {
             if (childResult !== null) {
               return routeItem.meta?.id || childResult;
             }
+          } else {
+            if (routeItem.name === route.name) {
+              return routeItem.meta?.id || null;
+            }
           }
         }
         return null;

src/views/components/workplace/modules/product.vue

@@ -26,7 +26,7 @@
         v-if="props.product.status === Status.Enable || props.product.status === Status.ON_TRIAL"
         class="primary-button"
         type="primary"
-        @click="gotoModule(props.product.menu_id)"
+        @click="gotoModule(props.product.id)"
       >
         进入模块
       </a-button>
@@ -71,12 +71,12 @@ import { useRouter } from 'vue-router';
 import CustomerServiceModal from '@/components/customer-service-modal.vue';
 import { appRoutes } from '@/router/routes';
 import { useSidebarStore } from '@/stores/modules/side-bar';
+import { useEnterpriseStore } from '@/stores/modules/enterprise';
 
 const props = defineProps<{
   product: Product;
 }>();
 const emit = defineEmits(['refresh']);
-const sidebarStore = useSidebarStore();
 
 enum Status {
   Disable = 0, // 禁用
@@ -87,30 +87,34 @@ enum Status {
 }
 
 interface Product {
-  id: number;
   status: Status;
   name: string;
   image: string;
   desc: string;
-  menu_id: number;
+  id: number;
   expired_at?: number;
 }
 
 const visible = ref(false);
 const router = useRouter();
+const enterpriseStore = useEnterpriseStore();
 
 const handleTrial = async (id: any) => {
-  await trialProduct(id);
+  const { code } = await trialProduct(id);
+  if (code === 200) {
+    enterpriseStore.updateEnterpriseInfo();
     AMessage.success('试用成功！');
     emit('refresh');
+  }
 };
 
 const gotoModule = (menuId: number) => {
-  const _target = appRoutes.find((v) => v.meta.id === menuId);
+  const routeMap: Record<number, string> = {
-  if (_target) {
+    '1': 'DataEngineHotTranslation',
-    console.log({ _target });
+    '2': 'RepositoryBrandMaterials',
-    router.push({ name: _target.name });
+  };
-  }
+  console.log(routeMap[menuId]);
+  router.push({ name: routeMap[menuId] });
 };
 </script>
 <style scoped lang="less">