From 4d2d06a46b05e1b1e0efb37afc74d40a5d400a89 Mon Sep 17 00:00:00 2001
From: wangjunjie <873143256@qq.com>
Date: Mon, 8 Dec 2025 17:39:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/a-frame/AAside.tsx | 186 ++++++++++++++++++++---------------
 src/pages/a-frame/AFrame.vue |  62 ++++++------
 2 files changed, 137 insertions(+), 111 deletions(-)

diff --git a/src/pages/a-frame/AAside.tsx b/src/pages/a-frame/AAside.tsx
index e6c7a54..4df0617 100644
--- a/src/pages/a-frame/AAside.tsx
+++ b/src/pages/a-frame/AAside.tsx
@@ -1,104 +1,126 @@
-import {
-  ElButton,
-  ElIcon,
-  ElMenu,
-  ElMenuItem,
-  ElMenuItemGroup,
-  ElSubMenu,
-  type MenuItemRegistered,
-} from 'element-plus'
-import { elIcons } from '@/common/element/element.ts'
-import AIcon from '@/components/a-icon/AIcon.tsx'
-import type { IconName } from '@/components/a-icon/iconfont.ts'
-import styles from '@/pages/a-frame/aaside.module.styl'
+import { ElButton, ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, ElSubMenu, type MenuItemRegistered } from "element-plus";
+import { elIcons } from "@/common/element/element.ts";
+import AIcon from "@/components/a-icon/AIcon.tsx";
+import type { IconName } from "@/components/a-icon/iconfont.ts";
+import styles from "@/pages/a-frame/aaside.module.styl";
 
 export interface Menu extends G.TreeNode {
   // Id
-  id: string
+  id: string;
   // 编码
-  sn: string
+  sn: string;
   // 上级 Id; 层级为 1 的节点值为 0
-  pid: string
+  pid: string;
   // 菜单名称
-  title: string
+  title: string;
   // 图标
-  icon: string
+  icon: string;
   // 层级; >= 1
-  tier: number
+  tier: number;
   // 排序
-  sort: number
+  sort: number;
   // 路由名称
-  routeName: string
+  routeName: string;
   // 面包路径
-  breadcrumb: string[]
+  breadcrumb: string[];
   // 类型
-  menuCategory: 'Catalog' | 'Group' | 'Page' | 'SubPage' | 'Btn'
+  menuCategory: "Catalog" | "Group" | "Page" | "SubPage" | "Btn";
   // 子菜单
-  children?: Menu[]
+  children?: Menu[];
 }
 
 export default defineComponent(
-  (props, {emit}) => {
-    const onMenuClick = (it: MenuItemRegistered) => emit('menuClick', it.index)
-    const renderMenu = (it: Menu) => {
-      let renderChildNode: (() => VNode[] | undefined) | undefined = undefined
-      if (it.children != null && it.children.length > 0) {
-        renderChildNode = () => (it.children?.map(renderMenu))
+  (props, { emit }) => {
+    let defaultId = "";
+    let path: any = props.defaultPath.split("/");
+    path = path[path.length - 1];
+    props.menus.forEach((item) => {
+      if (item.routeName == path) {
+        defaultId = item.id;
+      } else if (item.children && item.children.length) {
+        item.children.forEach((item2) => {
+          if (item2.routeName == path) {
+            defaultId = item2.id;
+          } else if (item2.children && item2.children.length) {
+            item2.children.forEach((item3) => {
+              if (item3.routeName == path) {
+                defaultId = item3.id;
+              }
+            });
+          }
+        });
       }
-      let currentNode: VNode
+    });
+
+    const onMenuClick = (it: MenuItemRegistered) => emit("menuClick", it.index);
+    const renderMenu = (it: Menu) => {
+      let renderChildNode: (() => VNode[] | undefined) | undefined = undefined;
+      if (it.children != null && it.children.length > 0) {
+        renderChildNode = () => it.children?.map(renderMenu);
+      }
+      let currentNode: VNode;
       switch (it.menuCategory) {
-        case 'Catalog': {
-          currentNode = (<ElSubMenu index={it.id}>
-            {{
-              title: () => (<>
-                <AIcon class={styles.aIcon} name={it.icon as IconName}/>
-                <span>{it.title}</span>
-              </>),
-              default: renderChildNode,
-            }}
-          </ElSubMenu>)
-          break
+        case "Catalog": {
+          currentNode = (
+            <ElSubMenu index={it.id}>
+              {{
+                title: () => (
+                  <>
+                    <AIcon class={styles.aIcon} name={it.icon as IconName} />
+                    <span>{it.title}</span>
+                  </>
+                ),
+                default: renderChildNode,
+              }}
+            </ElSubMenu>
+          );
+          break;
         }
-        case 'Group': {
-          currentNode = (<ElMenuItemGroup title={it.title}>
-            {{
-              default: renderChildNode,
-            }}
-          </ElMenuItemGroup>)
-          break
+        case "Group": {
+          currentNode = (
+            <ElMenuItemGroup title={it.title}>
+              {{
+                default: renderChildNode,
+              }}
+            </ElMenuItemGroup>
+          );
+          break;
         }
-        case 'Page': {
-          currentNode = (<ElMenuItem index={it.id} onClick={onMenuClick}>
-            {{
-              title: () => <span>{it.title}</span>,
-              default: () => <AIcon class={styles.aIcon} name={it.icon as IconName}/>,
-            }}
-          </ElMenuItem>)
-          break
+        case "Page": {
+          currentNode = (
+            <ElMenuItem index={it.id} onClick={onMenuClick}>
+              {{
+                title: () => <span>{it.title}</span>,
+                default: () => <AIcon class={styles.aIcon} name={it.icon as IconName} />,
+              }}
+            </ElMenuItem>
+          );
+          break;
         }
         default:
-          currentNode = (<></>)
+          currentNode = <></>;
       }
-      return currentNode
-    }
-    const isCollapse = ref(false)
+      return currentNode;
+    };
+    const isCollapse = ref(false);
 
-    return () => (<>
-      <ElMenu collapse={isCollapse.value} style={{height: '100%', overflow: 'auto', '--el-menu-base-level-padding': '10px'}} class={[ styles.aMenus, 'menus' ]}>
-        {{
-          default: () => props.menus.map(renderMenu),
-        }}
-      </ElMenu>
-      <ElButton style={{position: 'absolute', right: '6px', bottom: '6px', width: '32px', height: '32px'}} onClick={() => {
-        isCollapse.value = !isCollapse.value
-      }}>
-        <ElIcon style={{cursor: 'pointer'}}>
-          {
-            isCollapse.value ? <elIcons.Fold/> : <elIcons.Expand/>
-          }
-        </ElIcon>
-      </ElButton>
-    </>)
+    return () => (
+      <>
+        <ElMenu default-active={defaultId} collapse={isCollapse.value} style={{ height: "100%", overflow: "auto", "--el-menu-base-level-padding": "10px" }} class={[styles.aMenus, "menus"]}>
+          {{
+            default: () => props.menus.map(renderMenu),
+          }}
+        </ElMenu>
+        <ElButton
+          style={{ position: "absolute", right: "6px", bottom: "6px", width: "32px", height: "32px" }}
+          onClick={() => {
+            isCollapse.value = !isCollapse.value;
+          }}
+        >
+          <ElIcon style={{ cursor: "pointer" }}>{isCollapse.value ? <elIcons.Fold /> : <elIcons.Expand />}</ElIcon>
+        </ElButton>
+      </>
+    );
   },
   {
     props: {
@@ -107,10 +129,14 @@ export default defineComponent(
         required: true,
         validator: (value: Menu[]) => value != null && value.length > 0,
       },
+      defaultPath: {
+        type: String,
+        required: true,
+      },
     },
     emits: {
       menuClick: (id: string) => id != null,
     },
-    name: 'AAside',
-  })
-
+    name: "AAside",
+  }
+);
diff --git a/src/pages/a-frame/AFrame.vue b/src/pages/a-frame/AFrame.vue
index 085eabc..3158a33 100644
--- a/src/pages/a-frame/AFrame.vue
+++ b/src/pages/a-frame/AFrame.vue
@@ -1,63 +1,64 @@
 <script lang="ts" setup>
-import AAside from '@/pages/a-frame/AAside.tsx'
-import AAvatar from '@/pages/a-frame/AAvatar.vue'
-import { appName } from '@/common'
-import Colls from '@/common/utils/colls.ts'
-import { MenuCategory } from '@/common/app/constants.ts'
-import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
-import Nav from '@/common/router/nav.ts'
-import Evt from '@/common/utils/evt.ts'
+import AAside from "@/pages/a-frame/AAside.tsx";
+import AAvatar from "@/pages/a-frame/AAvatar.vue";
+import { appName } from "@/common";
+import Colls from "@/common/utils/colls.ts";
+import { MenuCategory } from "@/common/app/constants.ts";
+import { useAppSettingStore } from "@/common/app/app-setting-store.ts";
+import Nav from "@/common/router/nav.ts";
+import Evt from "@/common/utils/evt.ts";
+import { useRouter } from "vue-router";
 
-const appSettingStore = useAppSettingStore()
+const appSettingStore = useAppSettingStore();
 const id_menu_map = computed(() => {
   return Colls.keyObj(
     appSettingStore.menus.filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog),
     (it) => it.id,
-    (it) => it,
-  )
-})
+    (it) => it
+  );
+});
 
 function onMenuClick(id: string) {
-  const menu = id_menu_map.value[id]
+  const menu = id_menu_map.value[id];
   Nav.open({
-    insId: menu?.routeName ?? '',
-    routeName: menu?.routeName ?? '',
-  })
+    insId: menu?.routeName ?? "",
+    routeName: menu?.routeName ?? "",
+  });
 }
 
 const menuTree = computed(() => {
-  return Colls.toTree(
-    appSettingStore.menus
-      .filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog)
-      .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)),
-  )
-})
+  return Colls.toTree(appSettingStore.menus.filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog).sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)));
+});
+
+const router = useRouter();
+const defaultPath= ref<string>(router.currentRoute.value.path);
+
 onMounted(() => {
-  Evt.emit('connect_ws')
-})
+  Evt.emit("connect_ws");
+});
 
 onUnmounted(() => {
-  Evt.emit('disconnect_ws')
-})
+  Evt.emit("disconnect_ws");
+});
 </script>
 
 <template>
   <ElContainer class="a-frame">
     <ElHeader>
       <div>
-        <img alt="" src="@/assets/images/循环.svg"/>
+        <img alt="" src="@/assets/images/循环.svg" />
         <div>{{ appName }}</div>
       </div>
-      <AAvatar/>
+      <AAvatar />
     </ElHeader>
     <ElContainer>
       <ElAside>
-        <AAside :menus="menuTree" @menu-click="onMenuClick"/>
+        <AAside :defaultPath="defaultPath" :menus="menuTree" @menu-click="onMenuClick" />
       </ElAside>
       <ElMain>
         <RouterView #="{ Component }">
           <Transition name="el-fade-in-linear">
-            <component :is="Component"/>
+            <component :is="Component" />
           </Transition>
         </RouterView>
       </ElMain>
@@ -118,7 +119,6 @@ onUnmounted(() => {
     }
   }
 }
-
 </style>
 <style>
 .menus:not(.el-menu--collapse) {