From bd4c338f353e4a3d5f264fae80bfd16f54aae5a3 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Mon, 7 Jul 2025 18:17:31 +0800 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84sidebar?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=9D=97=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 11 +- src/components/_base/menu/use-menu-tree.ts | 2 +- src/components/_base/navbar/index.vue | 129 ++++++------------ src/router/index.ts | 7 +- src/router/routes/index.ts | 4 +- src/router/routes/modules/dataEngine.ts | 6 - .../routes/modules/propertyMarketing.ts | 4 - src/stores/modules/enterprise/index.ts | 5 + src/stores/modules/side-bar/constants.ts | 63 +++++++++ src/stores/modules/side-bar/index.ts | 26 +++- .../components/workplace/modules/product.vue | 28 ++-- 11 files changed, 163 insertions(+), 122 deletions(-) create mode 100644 src/stores/modules/side-bar/constants.ts diff --git a/src/App.vue b/src/App.vue index 674532c..a360a3f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,8 +7,12 @@ @@ -95,26 +50,26 @@ const handleDopdownClick = (index: any, ind: any) => {
- - - 工作台 - - - - - {{ item.name }} - - - - + + + +
diff --git a/src/router/index.ts b/src/router/index.ts index ea87ab5..999556e 100644 --- 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, }, }, { diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts index 4b5aa03..aaa1cac 100644 --- 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, []); diff --git a/src/router/routes/modules/dataEngine.ts b/src/router/routes/modules/dataEngine.ts index 9a06af3..3c3859d 100644 --- 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'), }, diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts index 45451af..d9a982a 100644 --- 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'), }, diff --git a/src/stores/modules/enterprise/index.ts b/src/stores/modules/enterprise/index.ts index 9257e2d..3bc98ad 100644 --- 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(); } }, }, diff --git a/src/stores/modules/side-bar/constants.ts b/src/stores/modules/side-bar/constants.ts new file mode 100644 index 0000000..18bdc2b --- /dev/null +++ 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', + }, + ], + }, +]; diff --git a/src/stores/modules/side-bar/index.ts b/src/stores/modules/side-bar/index.ts index 2b52e25..e54b809 100644 --- 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; diff --git a/src/views/components/workplace/modules/product.vue b/src/views/components/workplace/modules/product.vue index c59c429..3466f6b 100644 --- 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)" > 进入模块 @@ -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 = { + '1': 'DataEngineHotTranslation', + '2': 'RepositoryBrandMaterials', + }; + console.log(routeMap[menuId]); + router.push({ name: routeMap[menuId] }); };