更新AppPage组件，修复一些问题

eslintrc/.eslintrc-auto-import.json

@@ -96,6 +96,7 @@
     "useRoute": true,
     "useRouter": true,
     "useSlots": true,
+    "useSystemStore": true,
     "useTable": true,
     "useTagsViewStore": true,
     "userRouteStore": true,

package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.4",
+    "@types/uuid": "^9.0.1",
     "axios": "^1.1.3",
     "bootstrap-icons": "^1.10.3",
     "d3": "7.2.1",
@@ -41,6 +42,7 @@
     "sortablejs": "1.15.0",
     "splitpanes": "^3.1.1",
     "tinymce": "^6.1.0",
+    "uuid": "^9.0.0",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.2.37",
     "vue-clipboard3": "^2.0.0",

src/components/AppPage.vue

@@ -11,6 +11,7 @@
 
 import type { VNode } from 'vue'
 import { useBasicStore } from '@/store/basic'
+import { v4 } from "uuid";
 export default defineComponent({
   name: 'AppPage',
   data() {
@@ -18,7 +19,8 @@ export default defineComponent({
       left: [] as VNode[],
       right: [] as VNode[],
       center: [] as VNode[],
-      default: [] as VNode[]
+      default: [] as VNode[],
+      id: v4()
     }
   },
   mounted() {
@@ -34,43 +36,28 @@ export default defineComponent({
     this.onHide()
   },
   created() {
-    const { navbar } = useBasicStore()
-    const { left, right, center, default: d } = this.$slots
-    this.left = left?.() ?? []
-    this.right = right?.() ?? []
-    this.center = center?.() ?? []
-    this.default = d?.() ?? []
-    navbar.left.push(...this.left)
-    navbar.right.push(...this.right)
-    navbar.center.push(...this.center)
+    const { left, right, center, default: d } = this.$slots;
+    this.left = left?.() ?? [];
+    this.right = right?.() ?? [];
+    this.center = center?.() ?? [];
+    this.default = d?.() ?? [];
   },
   methods: {
     onShowing() {
-      const { left, right, center } = useBasicStore().navbar
-      const pair = [
-        [left, this.left],
-        [right, this.right],
-        [center, this.center]
-      ]
-      for (const [s, l] of pair) {
-        for (const item of s) {
-          if (!l.includes(item)) l.push(item)
-        }
-      }
+      useBasicStore().$patch(({ navbar }) => {
+        navbar.left.set(this.id, this.left);
+        navbar.right.set(this.id, this.right);
+        navbar.center.set(this.id, this.center);
+        navbar.cursor++;
+      });
     },
     onHide() {
-      const { left, right, center } = useBasicStore().navbar
-      const pair = [
-        [left, this.left],
-        [right, this.right],
-        [center, this.center]
-      ]
-      for (const [s, l] of pair) {
-        for (const item of l) {
-          const index = s.indexOf(item)
-          if (index > -1) s.splice(index, 1)
-        }
-      }
+      useBasicStore().$patch(({ navbar }) => {
+        navbar.left.delete(this.id);
+        navbar.right.delete(this.id);
+        navbar.center.delete(this.id);
+        navbar.cursor++;
+      });
     }
   },
 })

src/layout/app-main/Navbar.vue

@@ -29,7 +29,7 @@
         <!--        <ThemeSelect />-->
         <!--        <SizeSelect />-->
         <!--        <LangSelect />-->
-        <el-dropdown trigger="click" size="medium">
+        <el-dropdown trigger="click" size="default">
           <div class="avatar-wrapper" :title="(userInfo?.realName || userInfo?.username) + ' - 在线'">
             <img :src="userInfo.avatar ?? userImage" alt="用户头像" class="user-avatar" />
             <div class="user-avatar-status" />
@@ -55,6 +55,7 @@
 </template>
 
 <script setup lang="ts">
+import type { VNode } from "vue";
 import { nextTick } from "vue";
 import { useRouter } from "vue-router";
 import Breadcrumb from "./Breadcrumb.vue";
@@ -72,7 +73,7 @@ import userImage from "@/assets/layout/user.png";
 import Debugger from "@/layout/app-main/component/Debugger.vue";
 
 const basicStore = useBasicStore();
-const { settings, sidebar, setToggleSideBar, navbar, userInfo } = basicStore;
+const { settings, sidebar, setToggleSideBar, userInfo } = basicStore;
 
 const toggleSideBar = () => {
   setToggleSideBar();
@@ -98,6 +99,27 @@ const time = computed(() => {
   return "凌晨";
 });
 
+const navbar = reactive({
+  left: [] as VNode[],
+  center: [] as VNode[],
+  right: [] as VNode[]
+});
+
+watch(() => basicStore.navbar.cursor, () => {
+  const left = navbar.left = [] as VNode[];
+  for (const value of basicStore.navbar.left.values()) {
+    left.push(...value);
+  }
+  const center = navbar.center = [] as VNode[];
+  for (const value of basicStore.navbar.center.values()) {
+    center.push(...value);
+  }
+  const right = navbar.right = [] as VNode[];
+  for (const value of basicStore.navbar.right.values()) {
+    right.push(...value);
+  }
+});
+
 </script>
 
 <style lang="scss" scoped>

src/store/basic.ts

@@ -33,9 +33,10 @@ export const useBasicStore = defineStore('basic', {
       axiosPromiseArr: [] as Array<ObjKeys>,
       settings: defaultSettings,
       navbar: {
-        left: [] as VNode[],
-        right: [] as VNode[],
-        center: [] as VNode[]
+        cursor: 0,
+        left: new Map<string, VNode[]>(),
+        right: new Map<string, VNode[]>(),
+        center: new Map<string, VNode[]>()
       }
     }
   },

typings/auto-imports.d.ts

@@ -97,6 +97,7 @@ declare global {
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
+  const useSystemStore: typeof import('../src/store/system')['useSystemStore']
   const useTable: typeof import('../src/hooks/use-table')['useTable']
   const useTagsViewStore: typeof import('../src/store/tags-view')['useTagsViewStore']
   const userRouteStore: typeof import('../src/store/routes')['userRouteStore']