From 394f6e16dc4e99d173fdb077bffab7a476738cbd Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Thu, 14 Nov 2024 20:07:24 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20api=20=E4=BC=98=E5=8C=96,=20=E5=B0=86?=
 =?UTF-8?q?=20className=20=E4=BC=98=E5=8C=96=E4=B8=BA=20classList?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Screenfull/index.vue  | 44 +++++++++++++---------------
 src/hooks/useGreyAndColorWeakness.ts |  4 +--
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 1744e28..10db521 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -21,51 +21,49 @@ const props = withDefaults(defineProps<Props>(), {
   content: false
 })
 
+const CONTENT_LARGE = "content-large"
+const CONTENT_FULL = "content-full"
+const classList = document.body.classList
+
 //#region 全屏
+const isEnabled = screenfull.isEnabled
 const isFullscreen = ref<boolean>(false)
-const fullscreenTips = computed(() => {
-  return isFullscreen.value ? props.exitTips : props.openTips
-})
-const fullscreenSvgName = computed(() => {
-  return isFullscreen.value ? "fullscreen-exit" : "fullscreen"
-})
+const fullscreenTips = computed(() => (isFullscreen.value ? props.exitTips : props.openTips))
+const fullscreenSvgName = computed(() => (isFullscreen.value ? "fullscreen-exit" : "fullscreen"))
+
 const handleFullscreenClick = () => {
   const dom = document.querySelector(props.element) || undefined
-  screenfull.isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
+  isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
 }
 const handleFullscreenChange = () => {
   isFullscreen.value = screenfull.isFullscreen
-  // 退出全屏时清除所有的 class
-  isFullscreen.value || (document.body.className = "")
+  // 退出全屏时清除相关的 class
+  isFullscreen.value || classList.remove(CONTENT_LARGE, CONTENT_FULL)
 }
 watchEffect((onCleanup) => {
-  // 挂载组件时自动执行
-  screenfull.isEnabled && screenfull.on("change", handleFullscreenChange)
-  // 卸载组件时自动执行
-  onCleanup(() => {
-    screenfull.isEnabled && screenfull.off("change", handleFullscreenChange)
-  })
+  if (isEnabled) {
+    // 挂载组件时自动执行
+    screenfull.on("change", handleFullscreenChange)
+    // 卸载组件时自动执行
+    onCleanup(() => screenfull.off("change", handleFullscreenChange))
+  }
 })
 //#endregion
 
 //#region 内容区
 const isContentLarge = ref<boolean>(false)
-const contentLargeTips = computed(() => {
-  return isContentLarge.value ? "内容区复原" : "内容区放大"
-})
-const contentLargeSvgName = computed(() => {
-  return isContentLarge.value ? "fullscreen-exit" : "fullscreen"
-})
+const contentLargeTips = computed(() => (isContentLarge.value ? "内容区复原" : "内容区放大"))
+const contentLargeSvgName = computed(() => (isContentLarge.value ? "fullscreen-exit" : "fullscreen"))
 const handleContentLargeClick = () => {
   isContentLarge.value = !isContentLarge.value
   // 内容区放大时，将不需要的组件隐藏
-  document.body.className = isContentLarge.value ? "content-large" : ""
+  classList.toggle(CONTENT_LARGE, isContentLarge.value)
 }
 const handleContentFullClick = () => {
   // 取消内容区放大
   isContentLarge.value && handleContentLargeClick()
   // 内容区全屏时，将不需要的组件隐藏
-  document.body.className = "content-full"
+  classList.add(CONTENT_FULL)
   // 开启全屏
   handleFullscreenClick()
 }
diff --git a/src/hooks/useGreyAndColorWeakness.ts b/src/hooks/useGreyAndColorWeakness.ts
index 6347439..1d73bd6 100644
--- a/src/hooks/useGreyAndColorWeakness.ts
+++ b/src/hooks/useGreyAndColorWeakness.ts
@@ -9,8 +9,8 @@ const classList = document.documentElement.classList
 const initGreyAndColorWeakness = () => {
   const settingsStore = useSettingsStore()
   watchEffect(() => {
-    settingsStore.showGreyMode ? classList.add(GREY_MODE) : classList.remove(GREY_MODE)
-    settingsStore.showColorWeakness ? classList.add(COLOR_WEAKNESS) : classList.remove(COLOR_WEAKNESS)
+    classList.toggle(GREY_MODE, settingsStore.showGreyMode)
+    classList.toggle(COLOR_WEAKNESS, settingsStore.showColorWeakness)
   })
 }