fix: 对未解绑的公共事件，在页面销毁时解绑

src/layout/components/panel/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
 import { emitter } from "@/utils/mitt";
 import { onClickOutside } from "@vueuse/core";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import Close from "@iconify-icons/ep/close";
 
 const target = ref(null);
@@ -27,8 +27,15 @@ onClickOutside(target, (event: any) => {
   show.value = false;
 });
 
-emitter.on("openPanel", () => {
+onMounted(() => {
-  show.value = true;
+  emitter.on("openPanel", () => {
+    show.value = true;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`openPanel`公共事件，防止多次触发
+  emitter.off("openPanel");
 });
 </script>
 

src/layout/components/sidebar/vertical.vue

@@ -7,9 +7,9 @@ import leftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { storageLocal } from "@pureadmin/utils";
 import { responsiveStorageNameSpace } from "@/config";
-import { ref, computed, watch, onBeforeMount } from "vue";
 import { findRouteByPath, getParentPaths } from "@/router/utils";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 
 const route = useRoute();
 const showLogo = ref(
@@ -51,12 +51,6 @@ function getSubMenuData(path: string) {
 
 getSubMenuData(route.path);
 
-onBeforeMount(() => {
-  emitter.on("logoChange", key => {
-    showLogo.value = key;
-  });
-});
-
 watch(
   () => [route.path, usePermissionStoreHook().wholeMenus],
   () => {
@@ -65,6 +59,17 @@ watch(
     menuSelect(route.path, routers);
   }
 );
+
+onMounted(() => {
+  emitter.on("logoChange", key => {
+    showLogo.value = key;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`logoChange`公共事件，防止多次触发
+  emitter.off("logoChange");
+});
 </script>
 
 <template>

src/layout/components/tag/index.vue

@@ -8,7 +8,7 @@ import { isEqual, isAllEmpty } from "@pureadmin/utils";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
+import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
 import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
 
 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
@@ -465,7 +465,17 @@ function tagOnClick(item) {
   // showMenuModel(item?.path, item?.query);
 }
 
-onBeforeMount(() => {
+watch([route], () => {
+  activeIndex.value = -1;
+  dynamicTagView();
+});
+
+watch(isFullscreen, () => {
+  tagsViews[6].icon = Fullscreen;
+  tagsViews[6].text = $t("buttons.hswholeFullScreen");
+});
+
+onMounted(() => {
   if (!instance) return;
 
   // 根据当前路由初始化操作标签页的禁用状态
@@ -489,19 +499,7 @@ onBeforeMount(() => {
       showMenuModel(indexPath);
     });
   });
-});
 
-watch([route], () => {
-  activeIndex.value = -1;
-  dynamicTagView();
-});
-
-watch(isFullscreen, () => {
-  tagsViews[6].icon = Fullscreen;
-  tagsViews[6].text = $t("buttons.hswholeFullScreen");
-});
-
-onMounted(() => {
   useResizeObserver(
     scrollbarDom,
     useDebounceFn(() => {
@@ -509,6 +507,13 @@ onMounted(() => {
     }, 200)
   );
 });
+
+onBeforeUnmount(() => {
+  // 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
+  emitter.off("tagViewsChange");
+  emitter.off("tagViewsShowModel");
+  emitter.off("changLayoutRoute");
+});
 </script>
 
 <template>

src/utils/mitt.ts

@@ -16,7 +16,6 @@ type Events = {
     indexPath: string;
     parentPath: string;
   };
-  setAdaptive: string;
 };
 
 export const emitter: Emitter<Events> = mitt<Events>();

src/views/pure-table/high.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { list } from "./high/list";
-import { ref, nextTick } from "vue";
-import { emitter } from "@/utils/mitt";
 
 defineOptions({
   name: "PureTableHigh"
@@ -10,11 +9,6 @@ defineOptions({
 const selected = ref(0);
 
 function tabClick({ index }) {
-  if (index == 0) {
-    nextTick(() => {
-      emitter.emit("setAdaptive");
-    });
-  }
   selected.value = index;
 }
 </script>

src/views/pure-table/high/adaptive/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { useColumns } from "./columns";
-import { emitter } from "@/utils/mitt";
-import { ref, onMounted, onBeforeUnmount } from "vue";
 
 const tableRef = ref();
 
@@ -15,18 +14,6 @@ const {
   onSizeChange,
   onCurrentChange
 } = useColumns();
-
-onMounted(() => {
-  emitter.on("setAdaptive", () => {
-    // 设置表格自适应高度（用于表格外的元素高度改变或者元素隐藏时主动对表格进行自适应高度调整）
-    tableRef.value.setAdaptive();
-  });
-});
-
-onBeforeUnmount(() => {
-  // 解绑`setAdaptive`公共事件，防止多次触发
-  emitter.off("setAdaptive");
-});
 </script>
 
 <template>