From 74567f17c229c3814bb5681cc4d40550b2398650 Mon Sep 17 00:00:00 2001
From: renxiaodong <1344903914@qq.com>
Date: Mon, 23 Jun 2025 23:59:08 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20layout=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  4 +-
 src/components/_base/menu/index.vue           | 16 ++++--
 src/components/_base/menu/use-menu-tree.ts    | 15 +++--
 src/components/_base/navbar/index.vue         | 55 +++++++++++++-----
 src/router/app-menus/index.ts                 |  8 ++-
 src/router/constants.ts                       |  6 ++
 src/router/index.ts                           |  7 +--
 src/router/routes/index.ts                    |  8 +--
 src/router/routes/modules/dataEngine.ts       |  7 +++
 src/router/routes/modules/management.ts       |  3 +
 src/router/routes/types.ts                    |  5 ++
 src/stores/modules/side-bar/index.ts          | 56 +++++++++++++++++++
 src/utils/user.ts                             |  7 ++-
 .../components/workplace/modules/product.vue  | 22 ++++----
 14 files changed, 167 insertions(+), 52 deletions(-)
 create mode 100644 src/stores/modules/side-bar/index.ts

diff --git a/src/App.vue b/src/App.vue
index 7cc6e89..674532c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import { useUserStore } from '@/stores';
 import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
-const store = useUserStore();
+const userStore = useUserStore();
 
 const redTheme = {
   token: {
@@ -18,7 +18,7 @@ const redTheme = {
 };
 
 const init = () => {
-  const { isLogin, fetchUserInfo } = store;
+  const { isLogin, fetchUserInfo } = userStore;
   if (isLogin) {
     fetchUserInfo();
   }
diff --git a/src/components/_base/menu/index.vue b/src/components/_base/menu/index.vue
index 13c344e..aaa8d94 100644
--- a/src/components/_base/menu/index.vue
+++ b/src/components/_base/menu/index.vue
@@ -2,6 +2,7 @@
 import type { RouteMeta, RouteRecordRaw } from 'vue-router';
 
 import { useAppStore } from '@/stores';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 import { listenerRouteChange } from '@/utils/route-listener';
 import { openWindow, regexUrl } from '@/utils';
 import useMenuTree from './use-menu-tree';
@@ -25,8 +26,8 @@ export default defineComponent({
     const topMenu = computed(() => appStore.topMenu);
     const openKeys = ref<string[]>([]);
     const selectedKey = ref<string[]>([]);
-    const goto = (item: RouteRecordRaw) => {
-      // Open external link
+    const sidebarStore = useSidebarStore();
+    const onMenuItemClick = (item: RouteRecordRaw) => {
       if (regexUrl.test(item.path)) {
         openWindow(item.path);
         selectedKey.value = [item.name as string];
@@ -71,6 +72,9 @@ export default defineComponent({
         const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
         openKeys.value = [...keySet];
         selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]];
+
+        // 自动设置 activeMenuId
+        sidebarStore.setActiveMenuIdByRoute(newRoute);
       }
     }, true);
     const setCollapse = (val: boolean) => {
@@ -83,14 +87,14 @@ export default defineComponent({
           // 跳过没有 name 的菜单项，防止 key 报错
           if (!element?.name) return;
 
-          const icon = element?.meta?.icon ? () => h(element.meta.icon as object) : null;
+          const icon = element?.meta?.icon ? () => h(element?.meta?.icon as object) : null;
           if (element.children && element.children.length > 0) {
             nodes.push(
               <a-sub-menu
                 key={String(element.name)}
                 v-slots={{
                   icon,
-                  title: () => element.meta?.locale || '',
+                  title: () => element?.meta?.locale || '',
                 }}
               >
                 {travel(element.children)}
@@ -98,8 +102,8 @@ export default defineComponent({
             );
           } else {
             nodes.push(
-              <a-menu-item key={String(element.name)} v-slots={{ icon }} onClick={() => goto(element)}>
-                {element.meta?.locale || ''}
+              <a-menu-item key={String(element.name)} v-slots={{ icon }} onClick={() => onMenuItemClick(element)}>
+                {element?.meta?.locale || ''}
               </a-menu-item>,
             );
           }
diff --git a/src/components/_base/menu/use-menu-tree.ts b/src/components/_base/menu/use-menu-tree.ts
index 72b5d9d..7702a55 100644
--- a/src/components/_base/menu/use-menu-tree.ts
+++ b/src/components/_base/menu/use-menu-tree.ts
@@ -4,17 +4,16 @@
  */
 import type { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
 
-import { useAppStore } from '@/stores';
-import appClientMenus from '@/router/app-menus';
+// import { useAppStore } from '@/stores';
+import { appRoutes } from '@/router/routes';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 export default function useMenuTree() {
-  const appStore = useAppStore();
+  // const appStore = useAppStore();
+  const sidebarStore = useSidebarStore();
   const appRoute = computed(() => {
-    if (appStore.menuFromServer) {
-      // return appClientMenus.concat(toRaw(appStore.appAsyncMenus));
-      return toRaw(appStore.appAsyncMenus);
-    }
-    return appClientMenus;
+    const _filterRoutes = appRoutes.filter((v) => v.meta.id === sidebarStore.activeMenuId);
+    return _filterRoutes;
   });
   const menuTree = computed(() => {
     const copyRouter = cloneDeep(appRoute.value) as RouteRecordNormalized[];
diff --git a/src/components/_base/navbar/index.vue b/src/components/_base/navbar/index.vue
index 486c585..cf7be89 100644
--- a/src/components/_base/navbar/index.vue
+++ b/src/components/_base/navbar/index.vue
@@ -4,9 +4,32 @@ import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/ico
 import { fetchMenusTree } from '@/api/all';
 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 router from '@/router';
+import { useRoute } from 'vue-router';
+
+interface MenuItem {
+  name: string;
+  id: number;
+  children: Array<{
+    name: string;
+  }>;
+}
+
+const lists = ref<MenuItem[]>([]);
+const sidebarStore = useSidebarStore();
+const route = useRoute();
+
+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 lists = ref([]);
-const router = useRouter();
 const clickExit = async () => {
   const { code } = await fetchLogOut();
   if (code === 200) {
@@ -29,26 +52,26 @@ const setServerMenu = () => {
 };
 const handleSelect = (index: any) => {
   if (index === 0) {
-    router.push('/workplace');
+    router.push('/');
   } else {
     router.push('/dataEngine/hotTranslation');
   }
 };
 
 const handleDopdownClick = (index: any, ind: any) => {
-  let children = lists.value[index].children;
-  let indPath = children[ind];
-  if (indPath.name == '行业热门话题洞察') {
+  const { children } = lists.value[index];
+  const indPath = children[ind] as any;
+  if (indPath.name === '行业热门话题洞察') {
     router.push('/dataEngine/hotTranslation');
-  } else if (indPath.name == '行业词云') {
+  } else if (indPath.name === '行业词云') {
     router.push('/dataEngine/hotCloud');
-  } else if (indPath.name == '行业关键词动向') {
+  } else if (indPath.name === '行业关键词动向') {
     router.push('/dataEngine/keyWord');
-  } else if (indPath.name == '用户痛点观察') {
+  } else if (indPath.name === '用户痛点观察') {
     router.push('/dataEngine/userPainPoints');
-  } else if (indPath.name == '重点品牌动向') {
+  } else if (indPath.name === '重点品牌动向') {
     router.push('/dataEngine/keyBrandMovement');
-  } else if (indPath.name == '用户画像') {
+  } else if (indPath.name === '用户画像') {
     router.push('/dataEngine/userPersona');
   }
 };
@@ -63,11 +86,15 @@ const handleDopdownClick = (index: any, ind: any) => {
     </div>
     <div class="center-side">
       <div class="menu-demo">
-        <a-menu mode="horizontal" :default-selected-keys="['1']">
-          <a-menu-item key="1" @click="handleSelect(0)">
+        <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)">
             <view>工作台</view>
           </a-menu-item>
-          <a-menu-item v-for="(item, index) in lists" :key="index + 2">
+          <a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
             <a-dropdown :popup-max-height="false">
               <a-button>{{ item.name }}<icon-caret-down /></a-button>
               <template #content>
diff --git a/src/router/app-menus/index.ts b/src/router/app-menus/index.ts
index 75748fc..9a8a4f0 100644
--- a/src/router/app-menus/index.ts
+++ b/src/router/app-menus/index.ts
@@ -1,6 +1,10 @@
-import { appRoutes, appExternalRoutes } from '../routes';
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-19 01:45:53
+ */
+import { appRoutes } from '../routes';
 
-const mixinRoutes = [...appRoutes, ...appExternalRoutes];
+const mixinRoutes = [...appRoutes];
 
 const appClientMenus = mixinRoutes.map((el) => {
   const { name, path, meta, redirect, children } = el;
diff --git a/src/router/constants.ts b/src/router/constants.ts
index 9e45aef..1110fe7 100644
--- a/src/router/constants.ts
+++ b/src/router/constants.ts
@@ -16,3 +16,9 @@ export const DEFAULT_ROUTE = {
   name: DEFAULT_ROUTE_NAME,
   fullPath: '/',
 };
+
+export const MENU_GROUP_IDS = {
+  DATA_ENGINE_ID: 1,
+  MANAGEMENT_ID: -1,
+  WORK_BENCH_ID: -99,
+};
diff --git a/src/router/index.ts b/src/router/index.ts
index 3df1196..600ddfb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,8 +24,8 @@ const router = createRouter({
       },
     },
     {
-      path: '/workplace',
-      name: 'workplace',
+      path: '/',
+      name: 'Home',
       component: () => import('@/views/components/workplace'),
       meta: {
         hideSidebar: true,
@@ -50,8 +50,7 @@ const router = createRouter({
     },
     {
       path: '/',
-      name: 'Home',
-      redirect: '/dataEngine/hotTranslation',
+      name: '',
       children: [...appRoutes, REDIRECT_MAIN, NOT_FOUND_ROUTE],
       meta: {
         requiresAuth: true,
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index 266d6aa..4b5aa03 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -1,9 +1,9 @@
 import type { RouteRecordNormalized } from 'vue-router';
 
 const modules = import.meta.glob('./modules/*.ts', { eager: true });
-const externalModules = import.meta.glob('./externalModules/*.ts', {
-  eager: true,
-});
+// const externalModules = import.meta.glob('./externalModules/*.ts', {
+//   eager: true,
+// });
 
 function formatModules(_modules: any, result: RouteRecordNormalized[]) {
   Object.keys(_modules).forEach((key) => {
@@ -17,4 +17,4 @@ function formatModules(_modules: any, result: RouteRecordNormalized[]) {
 
 export const appRoutes: RouteRecordNormalized[] = formatModules(modules, []);
 
-export const appExternalRoutes: RouteRecordNormalized[] = formatModules(externalModules, []);
+// export const appExternalRoutes: RouteRecordNormalized[] = formatModules(externalModules, []);
diff --git a/src/router/routes/modules/dataEngine.ts b/src/router/routes/modules/dataEngine.ts
index 3afc2ed..d190af5 100644
--- a/src/router/routes/modules/dataEngine.ts
+++ b/src/router/routes/modules/dataEngine.ts
@@ -1,15 +1,22 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-23 06:39:28
+ */
 import { IconBookmark } from '@arco-design/web-vue/es/icon';
 import type { AppRouteRecordRaw } from '../types';
+import { MENU_GROUP_IDS } from '@/router/constants';
 
 const COMPONENTS: AppRouteRecordRaw = {
   path: 'dataEngine',
   name: 'dataEngine',
+  redirect: 'dataEngine/hotTranslation',
   meta: {
     locale: '全域数据引擎',
     icon: IconBookmark,
     requiresAuth: true,
     roles: ['*'],
     requiresSidebar: true,
+    id: MENU_GROUP_IDS.DATA_ENGINE_ID,
   },
   children: [
     {
diff --git a/src/router/routes/modules/management.ts b/src/router/routes/modules/management.ts
index c7ddc7f..cd1c644 100644
--- a/src/router/routes/modules/management.ts
+++ b/src/router/routes/modules/management.ts
@@ -4,16 +4,19 @@
  */
 import { IconBookmark } from '@arco-design/web-vue/es/icon';
 import type { AppRouteRecordRaw } from '../types';
+import { MENU_GROUP_IDS } from '@/router/constants';
 
 const COMPONENTS: AppRouteRecordRaw = {
   path: 'management',
   name: 'management',
+  redirect: 'management/person',
   meta: {
     locale: '管理中心',
     icon: IconBookmark,
     requiresAuth: true,
     roles: ['*'],
     requiresSidebar: true,
+    id: MENU_GROUP_IDS.MANAGEMENT_ID,
   },
   children: [
     {
diff --git a/src/router/routes/types.ts b/src/router/routes/types.ts
index 06965aa..ab069b8 100644
--- a/src/router/routes/types.ts
+++ b/src/router/routes/types.ts
@@ -1,6 +1,11 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-19 01:45:53
+ */
 import type { RouteMeta, NavigationGuard, RouteComponent } from 'vue-router';
 
 export interface AppRouteRecordRaw {
+  id?: number;
   path: string;
   name?: string | symbol;
   meta?: RouteMeta;
diff --git a/src/stores/modules/side-bar/index.ts b/src/stores/modules/side-bar/index.ts
new file mode 100644
index 0000000..7fa1ad2
--- /dev/null
+++ b/src/stores/modules/side-bar/index.ts
@@ -0,0 +1,56 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-23 22:13:30
+ */
+import { defineStore } from 'pinia';
+import { MENU_GROUP_IDS } from '@/router/constants';
+import { appRoutes } from '@/router/routes';
+import type { RouteLocationNormalized } from 'vue-router';
+
+const { DATA_ENGINE_ID, MANAGEMENT_ID } = MENU_GROUP_IDS;
+
+interface sidebarState {
+  activeMenuId: number | null;
+}
+
+export const useSidebarStore = defineStore('sidebar', {
+  state: (): sidebarState => ({
+    activeMenuId: null,
+  }),
+  actions: {
+    clearActiveMenuId() {
+      this.activeMenuId = DATA_ENGINE_ID;
+    },
+    setActiveMenuId(id: number) {
+      this.activeMenuId = id;
+    },
+    // 根据当前路由自动设置 activeMenuId
+    setActiveMenuIdByRoute(route: RouteLocationNormalized) {
+      // console.log('setActiveMenuIdByRoute ');
+      // 查找当前路由所属的菜单组
+      const findMenuGroup = (routes: any[]): number | null => {
+        for (const routeItem of routes) {
+          // 检查子路由
+          if (routeItem.children && routeItem.children.length > 0) {
+            // 检查当前路由是否是这个父路由的子路由
+            const isChildRoute = routeItem.children.some((child: any) => child.name === route.name);
+            if (isChildRoute) {
+              return routeItem.meta?.id || null;
+            }
+            // 递归检查更深层的子路由
+            const childResult = findMenuGroup(routeItem.children);
+            if (childResult !== null) {
+              return routeItem.meta?.id || childResult;
+            }
+          }
+        }
+        return null;
+      };
+
+      const menuId = findMenuGroup(appRoutes);
+      if (menuId !== null) {
+        this.activeMenuId = menuId;
+      }
+    },
+  },
+});
diff --git a/src/utils/user.ts b/src/utils/user.ts
index 31478cf..2ebb9b1 100644
--- a/src/utils/user.ts
+++ b/src/utils/user.ts
@@ -6,6 +6,7 @@ import router from '@/router';
 
 import { useUserStore } from '@/stores';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 // 登录
 export function goUserLogin(query?: any) {
@@ -24,10 +25,12 @@ export function handleUserHome() {
 
 export function handleUserLogout() {
   const userStore = useUserStore();
-  const store = useEnterpriseStore();
+  const enterpriseStore = useEnterpriseStore();
+  const sidebarStore = useSidebarStore();
 
   userStore.deleteToken();
-  store.clearEnterpriseInfo();
+  enterpriseStore.clearEnterpriseInfo();
+  sidebarStore.clearActiveMenuId();
 
   goUserLogin();
 }
diff --git a/src/views/components/workplace/modules/product.vue b/src/views/components/workplace/modules/product.vue
index 4123de3..affaeda 100644
--- a/src/views/components/workplace/modules/product.vue
+++ b/src/views/components/workplace/modules/product.vue
@@ -54,12 +54,7 @@
       >
         联系客服
       </a-button>
-      <a-popconfirm
-        focusLock
-        title="试用产品"
-        content="确定试用该产品吗？"
-        @ok="handleTrial(props.product.id)"
-      >
+      <a-popconfirm focusLock title="试用产品" content="确定试用该产品吗？" @ok="handleTrial(props.product.id)">
         <a-button v-if="props.product.status === Status.Disable" class="outline-button" type="outline">
           免费试用7天
         </a-button>
@@ -74,14 +69,14 @@ import { now } from '@vueuse/core';
 import { trialProduct } from '@/api/all';
 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';
 
 const props = defineProps<{
   product: Product;
 }>();
-
 const emit = defineEmits(['refresh']);
-const visible = ref(false);
-const router = useRouter();
+const sidebarStore = useSidebarStore();
 
 enum Status {
   Disable = 0, // 禁用
@@ -101,6 +96,9 @@ interface Product {
   expired_at?: number;
 }
 
+const visible = ref(false);
+const router = useRouter();
+
 const handleTrial = async (id: any) => {
   await trialProduct(id);
   AMessage.success('试用成功！');
@@ -108,7 +106,11 @@ const handleTrial = async (id: any) => {
 };
 
 const gotoModule = (menuId: number) => {
-  router.push({ name: 'dataEngine' });
+  const _target = appRoutes.find((v) => v.meta.id === menuId);
+  if (_target) {
+    console.log({ _target });
+    router.push({ name: _target.name });
+  }
 };
 </script>
 <style scoped lang="less">