refactor: 使用vueuse的useResizeObserver函数替换v-resize自定义指令，从测试后的表现来看，性能会更好

build/optimize.ts

@@ -33,7 +33,6 @@ const include = [
   "@howdyjs/mouse-menu",
   "@logicflow/extension",
   "vue-virtual-scroller",
-  "element-resize-detector",
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
   "vue-waterfall-plugin-next",

package.json

@@ -48,7 +48,6 @@
     "echarts": "^5.4.2",
     "el-table-infinite-scroll": "^3.0.1",
     "element-plus": "^2.3.5",
-    "element-resize-detector": "^1.2.4",
     "intro.js": "^7.0.1",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.5",
@@ -88,7 +87,6 @@
     "@iconify/vue": "^4.1.1",
     "@intlify/unplugin-vue-i18n": "^0.10.0",
     "@pureadmin/theme": "^3.0.0",
-    "@types/element-resize-detector": "1.1.3",
     "@types/intro.js": "^5.1.1",
     "@types/js-cookie": "^3.0.3",
     "@types/mockjs": "^1.0.7",

pnpm-lock.yaml

@@ -15,7 +15,6 @@ specifiers:
   '@pureadmin/table': ^2.3.2
   '@pureadmin/theme': ^3.0.0
   '@pureadmin/utils': ^1.9.2
-  '@types/element-resize-detector': 1.1.3
   '@types/intro.js': ^5.1.1
   '@types/js-cookie': ^3.0.3
   '@types/mockjs': ^1.0.7
@@ -45,7 +44,6 @@ specifiers:
   echarts: ^5.4.2
   el-table-infinite-scroll: ^3.0.1
   element-plus: ^2.3.5
-  element-resize-detector: ^1.2.4
   eslint: ^8.42.0
   eslint-plugin-prettier: ^4.2.1
   eslint-plugin-vue: ^9.14.1
@@ -136,7 +134,6 @@ dependencies:
   echarts: 5.4.2
   el-table-infinite-scroll: 3.0.1
   element-plus: 2.3.6_vue@3.3.4
-  element-resize-detector: 1.2.4
   intro.js: 7.0.1
   js-cookie: 3.0.5
   jsbarcode: 3.11.5
@@ -176,7 +173,6 @@ devDependencies:
   '@iconify/vue': 4.1.1_vue@3.3.4
   '@intlify/unplugin-vue-i18n': 0.10.1_vue-i18n@9.2.2
   '@pureadmin/theme': 3.0.0
-  '@types/element-resize-detector': 1.1.3
   '@types/intro.js': 5.1.1
   '@types/js-cookie': 3.0.3
   '@types/mockjs': 1.0.7
@@ -1787,10 +1783,6 @@ packages:
       '@babel/types': 7.22.4
     dev: false
 
-  /@types/element-resize-detector/1.1.3:
-    resolution: {integrity: sha512-rqmeHxzNMPar/3IbdQRm+mydv8KlEXUtcp5M47rbZUEjslTjg+bT5+OXCknTCIy1AfvNR0Kio44iMY2zUH65CQ==}
-    dev: true
-
   /@types/estree/1.0.1:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
 
@@ -2874,10 +2866,6 @@ packages:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
     dev: true
 
-  /batch-processor/1.0.0:
-    resolution: {integrity: sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==}
-    dev: false
-
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -3840,12 +3828,6 @@ packages:
       - '@vue/composition-api'
     dev: false
 
-  /element-resize-detector/1.2.4:
-    resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==}
-    dependencies:
-      batch-processor: 1.0.0
-    dev: false
-
   /emittery/0.8.1:
     resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==}
     engines: {node: '>=10'}

src/directives/elResizeDetector/index.ts

@@ -1,27 +0,0 @@
-import { Directive, type DirectiveBinding, type VNode } from "vue";
-import elementResizeDetectorMaker from "element-resize-detector";
-import type { Erd } from "element-resize-detector";
-import { emitter } from "@/utils/mitt";
-
-const erd: Erd = elementResizeDetectorMaker({
-  strategy: "scroll"
-});
-
-export const resize: Directive = {
-  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
-    erd.listenTo(el, elem => {
-      const width = elem.offsetWidth;
-      const height = elem.offsetHeight;
-      if (binding?.instance) {
-        emitter.emit("resize", { detail: { width, height } });
-      } else {
-        vnode.el.dispatchEvent(
-          new CustomEvent("resize", { detail: { width, height } })
-        );
-      }
-    });
-  },
-  unmounted(el: HTMLElement) {
-    erd.uninstall(el);
-  }
-};

src/directives/index.ts

@@ -1,2 +1 @@
 export * from "./auth";
-export * from "./elResizeDetector";

src/layout/index.vue

@@ -3,14 +3,15 @@ import "animate.css";
 // 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
 import "@/components/ReIcon/src/offlineIcon";
 import { setType } from "./types";
-import { emitter } from "@/utils/mitt";
 import { useLayout } from "./hooks/useLayout";
+import { useResizeObserver } from "@vueuse/core";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import {
   h,
+  ref,
   reactive,
   computed,
   onMounted,
@@ -26,6 +27,7 @@ import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 
+const appWrapperRef = ref();
 const { isDark } = useDark();
 const { layout } = useLayout();
 const isMobile = deviceDetection();
@@ -78,10 +80,10 @@ function toggle(device: string, bool: boolean) {
 // 判断是否可自动关闭菜单栏
 let isAutoCloseSidebar = true;
 
-// 监听容器
-emitter.on("resize", ({ detail }) => {
+useResizeObserver(appWrapperRef, entries => {
   if (isMobile) return;
-  const { width } = detail;
+  const entry = entries[0];
+  const { width } = entry.contentRect;
   width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
   /** width app-wrapper类容器宽度
    * 0 < width <= 760 隐藏侧边栏
@@ -147,7 +149,7 @@ const layoutHeader = defineComponent({
 </script>
 
 <template>
-  <div :class="['app-wrapper', set.classes]" v-resize>
+  <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
     <div
       v-show="
         set.device === 'mobile' &&