From 2c2a7284f9038fa9a842e484a74abffa50544b3d Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 12 Jan 2024 09:33:07 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=99=8D=E4=BD=8E=E6=95=B4=E4=BD=93?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8C=81=E7=BB=AD=E6=8B=96=E6=8B=89=E6=97=B6?=
 =?UTF-8?q?=E7=9A=84=E6=80=A7=E8=83=BD=E6=8D=9F=E8=80=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReCropper/src/index.tsx              | 13 ++++++++-----
 .../components/search/components/SearchResult.vue   |  6 ++----
 src/layout/components/tag/index.vue                 |  9 +++------
 src/layout/index.vue                                | 10 +++++++---
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/ReCropper/src/index.tsx b/src/components/ReCropper/src/index.tsx
index bd57e142c4..5f03f7081f 100644
--- a/src/components/ReCropper/src/index.tsx
+++ b/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, () => {
-      handCropper("reset");
-    });
+    useResizeObserver(tippyElRef, () => handCropper("reset"));
 
     async function init() {
       const imgEl = unref(imgElRef);
diff --git a/src/layout/components/search/components/SearchResult.vue b/src/layout/components/search/components/SearchResult.vue
index 22d0d76a75..fd63c1a9c5 100644
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/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, () => {
-  resizeResult();
-});
+useResizeObserver(resultRef, resizeResult);
 
 function handleScroll(index: number) {
   const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 87f6c72ba9..66fc7b32d4 100644
--- a/src/layout/components/tag/index.vue
+++ b/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(
-    scrollbarDom,
-    debounce(() => dynamicTagView())
-  );
+  useResizeObserver(scrollbarDom, dynamicTagView);
 });
 
 onBeforeUnmount(() => {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index b18f4fe191..727168b1a4 100644
--- a/src/layout/index.vue
+++ b/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 隐藏侧边栏