perf: 降低整体页面持续拖拉时的性能损耗

src/components/ReCropper/src/index.tsx

@@ -3,9 +3,7 @@ import Cropper from "cropperjs";
 import { useTippy } from "vue-tippy";
 import { ElUpload } from "element-plus";
 import type { CSSProperties } from "vue";
-import { useResizeObserver } from "@vueuse/core";
 import { longpress } from "@/directives/longpress";
-import { delay, debounce, isArray, downloadByBase64 } from "@pureadmin/utils";
 import {
   ref,
   unref,
@@ -15,6 +13,13 @@ import {
   onUnmounted,
   defineComponent
 } from "vue";
+import {
+  delay,
+  debounce,
+  isArray,
+  downloadByBase64,
+  useResizeObserver
+} from "@pureadmin/utils";
 import {
   Reload,
   Upload,
@@ -126,9 +131,7 @@ export default defineComponent({
       cropper.value?.destroy();
     });
 
-    useResizeObserver(tippyElRef, () => {
+    useResizeObserver(tippyElRef, () => handCropper("reset"));
-      handCropper("reset");
-    });
 
     async function init() {
       const imgEl = unref(imgElRef);

src/layout/components/search/components/SearchResult.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { transformI18n } from "@/plugins/i18n";
-import { useResizeObserver } from "@vueuse/core";
+import { useResizeObserver } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { ref, computed, getCurrentInstance, onMounted } from "vue";
@@ -65,9 +65,7 @@ function resizeResult() {
   innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
 }
 
-useResizeObserver(resultRef, () => {
+useResizeObserver(resultRef, resizeResult);
-  resizeResult();
-});
 
 function handleScroll(index: number) {
   const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];

src/layout/components/tag/index.vue

@@ -4,12 +4,12 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
+import { useFullscreen, onClickOutside } from "@vueuse/core";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
-import { isEqual, isAllEmpty, debounce } from "@pureadmin/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
-import { useResizeObserver, useFullscreen, onClickOutside } from "@vueuse/core";
+import { isEqual, isAllEmpty, useResizeObserver } from "@pureadmin/utils";
 
 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
@@ -503,10 +503,7 @@ onMounted(() => {
     });
   });
 
-  useResizeObserver(
+  useResizeObserver(scrollbarDom, dynamicTagView);
-    scrollbarDom,
-    debounce(() => dynamicTagView())
-  );
 });
 
 onBeforeUnmount(() => {

src/layout/index.vue

@@ -4,10 +4,8 @@ import "animate.css";
 import "@/components/ReIcon/src/offlineIcon";
 import { setType } from "./types";
 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,
@@ -18,6 +16,12 @@ import {
   onBeforeMount,
   defineComponent
 } from "vue";
+import {
+  useDark,
+  useGlobal,
+  deviceDetection,
+  useResizeObserver
+} from "@pureadmin/utils";
 
 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
@@ -84,7 +88,7 @@ let isAutoCloseSidebar = true;
 useResizeObserver(appWrapperRef, entries => {
   if (isMobile) return;
   const entry = entries[0];
-  const { width } = entry.contentRect;
+  const [{ inlineSize: width }] = entry.borderBoxSize;
   width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
   /** width app-wrapper类容器宽度
    * 0 < width <= 760 隐藏侧边栏