From 83ba0e45d27e4d6ccd3deebb14fa9d37d92073b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=83=E5=B9=B4=E5=A4=8F?= <2098833867@qq.com>
Date: Tue, 6 Jun 2023 09:02:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0AppPage=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E4=B8=80=E4=BA=9B=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eslintrc/.eslintrc-auto-import.json |  1 +
 package.json                        |  2 ++
 src/components/AppPage.vue          | 53 +++++++++++------------------
 src/layout/app-main/Navbar.vue      | 26 ++++++++++++--
 src/store/basic.ts                  |  7 ++--
 typings/auto-imports.d.ts           |  1 +
 6 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/eslintrc/.eslintrc-auto-import.json b/eslintrc/.eslintrc-auto-import.json
index d09f22a..c2ef2ee 100644
--- a/eslintrc/.eslintrc-auto-import.json
+++ b/eslintrc/.eslintrc-auto-import.json
@@ -96,6 +96,7 @@
     "useRoute": true,
     "useRouter": true,
     "useSlots": true,
+    "useSystemStore": true,
     "useTable": true,
     "useTagsViewStore": true,
     "userRouteStore": true,
diff --git a/package.json b/package.json
index 4f54304..be536ee 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/AppPage.vue b/src/components/AppPage.vue
index 693b2c3..b51531f 100644
--- a/src/components/AppPage.vue
+++ b/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++;
+      });
     }
   },
 })
diff --git a/src/layout/app-main/Navbar.vue b/src/layout/app-main/Navbar.vue
index 905b69d..6b87f05 100644
--- a/src/layout/app-main/Navbar.vue
+++ b/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>
diff --git a/src/store/basic.ts b/src/store/basic.ts
index 4d71686..4b17e19 100644
--- a/src/store/basic.ts
+++ b/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[]>()
       }
     }
   },
diff --git a/typings/auto-imports.d.ts b/typings/auto-imports.d.ts
index c0cadb0..4b6df22 100644
--- a/typings/auto-imports.d.ts
+++ b/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']