feat: 重构sidebar菜单块逻辑

2025-07-07 18:17:31 +08:00
parent 0fe45bb2b3
commit bd4c338f35
11 changed files with 163 additions and 122 deletions
--- a/src/App.vue
+++ b/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();
  }
 };

--- a/src/components/_base/menu/use-menu-tree.ts
+++ b/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(() => {
--- a/src/components/_base/navbar/index.vue
+++ b/src/components/_base/navbar/index.vue
@ -1,88 +1,43 @@
-<script lang="ts" setup>
-import { useAppStore } from '@/stores';
-import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
-import { fetchMenusTree } from '@/api/all';
-import { handleUserLogout } from '@/utils/user';
-import { fetchLogOut } from '@/api/all/login';
+<script setup>
+// import { useAppStore } from '@/stores';
+// import { useEnterpriseStore } from '@/stores/modules/enterprise';
+// import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
+// import { handleUserLogout } from '@/utils/user';
+// 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();
-  if (res.code === 200) {
-    lists.value = res.data;
-  }
-};
-onMounted(() => {
-  getMenus();
-});
-const appStore = useAppStore();
+
+// 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[] => {
-  let result: any[] = [];
-  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);
-  }
+const handleDopdownClick = (item) => {
+  router.push({ name: item.pathName });
 };
 </script>

@ -95,26 +50,26 @@ const handleDopdownClick = (index: any, ind: any) => {
    </div>
    <div class="center-side">
      <div class="menu-demo h-100%">
-        <a-menu
-          mode="horizontal"
-          :selected-keys="selectedKey"
-          :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)">
-                  <span class="menu-item-text"> {{ child.name }}</span>
-                </a-doption>
-              </template>
-            </a-dropdown>
+        <a-menu mode="horizontal" :selected-keys="selectedKey">
+          <a-menu-item v-for="item in menuList" :key="String(item.id)">
+            <template v-if="item.children">
+              <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(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>
--- a/src/router/index.ts
+++ b/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,
      },
    },
    {
--- a/src/router/routes/index.ts
+++ b/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, []);
--- a/src/router/routes/modules/dataEngine.ts
+++ b/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'),
      },
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/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'),
      },
--- a/src/stores/modules/enterprise/index.ts
+++ b/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();
      }
    },
  },
--- a/src/stores/modules/side-bar/constants.ts
+++ b/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',
+      },
+    ],
+  },
+];
--- a/src/stores/modules/side-bar/index.ts
+++ b/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 { appRoutes } from '@/router/routes';
+import router from '@/router';
 import type { RouteLocationNormalized } from 'vue-router';
-
-const { DATA_ENGINE_ID, MANAGEMENT_ID } = MENU_GROUP_IDS;
+import { MENU_LIST } from './constants';
+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;
--- a/src/views/components/workplace/modules/product.vue
+++ b/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);
-  AMessage.success('试用成功！');
-  emit('refresh');
+  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);
-  if (_target) {
-    console.log({ _target });
-    router.push({ name: _target.name });
-  }
+  const routeMap: Record<number, string> = {
+    '1': 'DataEngineHotTranslation',
+    '2': 'RepositoryBrandMaterials',
+  };
+  console.log(routeMap[menuId]);
+  router.push({ name: routeMap[menuId] });
 };
 </script>
 <style scoped lang="less">