1. init 侧边栏功能初始化，交互优化

src/views/pages/aside-panels/aside-panels.vue

@@ -3,6 +3,9 @@
         <el-menu
             class="aside-menu"
             @select="changeMenu"
+            @open="onOpenSub"
+            @close="onCloseSub"
+            :default-openeds="defaultOpeneds"
             :default-active="defaultActive"
         >
             <components
@@ -33,16 +36,28 @@
 </template>
 
 <script lang="ts">
-    import logger from "@/api/logger";
     import { Direction } from "@/router";
+    import { RouterEventer } from "@/router/event-bus";
     import { MetaHeader } from "@/router/meta-header";
     import { Component, Vue } from "vue-property-decorator";
 
+    const SEEEION_SUBMENUS_CACHE = "session-submenus-cache";
+
+    interface Menus {
+        key: Direction | MetaHeader;
+        title: MetaHeader;
+        icon?: string;
+        direction?: Direction;
+        content?: Menus[];
+        matchUrl?: Direction[];
+    }
+
     @Component({ components: {} })
     export default class Asidepanels extends Vue {
         private defaultActive = MetaHeader.home;
+        private defaultOpeneds: string[] = [];
         private linkLine = "-";
-        private items = [
+        private items: Menus[] = [
             {
                 key: Direction.Home,
                 title: MetaHeader.home,
@@ -107,11 +122,67 @@
             },
         ];
 
+        created() {
+            RouterEventer.registerOnRouterChanged(this, () => {
+                this.onRouterChange();
+            }).raiseOnRouterChanged();
+            this.defaultOpeneds = this.getCacheSubMenus();
+        }
+
+        private onRouterChange() {
+            const curDirection = this.getCurrentDirection();
+            this.matchUrl(this.items, "", curDirection);
+        }
+
+        private onOpenSub(key: string) {
+            const v = this.getCacheSubMenus();
+            v.push(key);
+            this.setCacheSubMenus(v);
+        }
+
+        private onCloseSub(key: string) {
+            let v = this.getCacheSubMenus();
+            v = v.filter((i: string) => i !== key);
+            this.setCacheSubMenus(v);
+        }
+
+        private matchUrl(items: Menus[], parent: MetaHeader, direction: Direction) {
+            for (let i = 0; i < items.length; i++) {
+                const t = items[i];
+                if (
+                    (t.direction && t.direction === direction) ||
+                    (t.matchUrl && t.matchUrl.includes(direction))
+                ) {
+                    this.defaultActive = `${parent}${t.direction}`;
+                    return;
+                }
+                if (t.content && t.content.length) {
+                    this.matchUrl(
+                        t.content,
+                        `${parent}${t.key}${this.linkLine}`,
+                        direction
+                    );
+                }
+            }
+        }
+
         private changeMenu(key: string) {
             const arr = key.split(this.linkLine);
             const direction = +arr[arr.length - 1] as Direction;
             this.go(direction);
         }
+
+        private getCacheSubMenus() {
+            const t = sessionStorage.getItem(SEEEION_SUBMENUS_CACHE);
+            if (t) {
+                return JSON.parse(t) as string[];
+            }
+            return [];
+        }
+
+        private setCacheSubMenus(v: string[]) {
+            sessionStorage.setItem(SEEEION_SUBMENUS_CACHE, JSON.stringify(v));
+        }
     }
 </script>