From 6af1ba94ffad02b2c3e30b08a00339a6fa1f271c Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Tue, 12 Nov 2024 13:06:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E5=86=99=20getCssVar?=
 =?UTF-8?q?=E3=80=81setCssVar=20=E5=B7=A5=E5=85=B7=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Sidebar/index.vue |  8 ++++----
 src/layouts/index.vue                    | 10 ++++------
 src/utils/css.ts                         | 18 ++++++++++++++++++
 src/utils/index.ts                       | 21 ---------------------
 4 files changed, 26 insertions(+), 31 deletions(-)
 create mode 100644 src/utils/css.ts

diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index 29f6a56..efde7c1 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -8,11 +8,11 @@ import SidebarItem from "./SidebarItem.vue"
 import Logo from "../Logo/index.vue"
 import { useDevice } from "@/hooks/useDevice"
 import { useLayoutMode } from "@/hooks/useLayoutMode"
-import { getCssVariableValue } from "@/utils"
+import { getCssVar } from "@/utils/css"
 
-const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
-const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
-const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
+const v3SidebarMenuBgColor = getCssVar("--v3-sidebar-menu-bg-color")
+const v3SidebarMenuTextColor = getCssVar("--v3-sidebar-menu-text-color")
+const v3SidebarMenuActiveTextColor = getCssVar("--v3-sidebar-menu-active-text-color")
 
 const { isMobile } = useDevice()
 const { isLeft, isTop } = useLayoutMode()
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index fb2712d..4774fef 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -10,7 +10,7 @@ import LeftMode from "./LeftMode.vue"
 import TopMode from "./TopMode.vue"
 import LeftTopMode from "./LeftTopMode.vue"
 import { Settings, RightPanel } from "./components"
-import { getCssVariableValue, setCssVariableValue } from "@/utils"
+import { getCssVar, setCssVar } from "@/utils/css"
 
 /** Layout 布局响应式 */
 useResize()
@@ -29,12 +29,10 @@ const classes = computed(() => {
 })
 
 //#region 隐藏标签栏时删除其高度，是为了让 Logo 组件高度和 Header 区域高度始终一致
-const cssVariableName = "--v3-tagsview-height"
-const v3TagsviewHeight = getCssVariableValue(cssVariableName)
+const cssVarName = "--v3-tagsview-height"
+const v3TagsviewHeight = getCssVar(cssVarName)
 watchEffect(() => {
-  showTagsView.value
-    ? setCssVariableValue(cssVariableName, v3TagsviewHeight)
-    : setCssVariableValue(cssVariableName, "0px")
+  showTagsView.value ? setCssVar(cssVarName, v3TagsviewHeight) : setCssVar(cssVarName, "0px")
 })
 //#endregion
 
diff --git a/src/utils/css.ts b/src/utils/css.ts
new file mode 100644
index 0000000..647dc07
--- /dev/null
+++ b/src/utils/css.ts
@@ -0,0 +1,18 @@
+/** 获取指定元素（默认全局）上的 CSS 变量的值 */
+export const getCssVar = (varName: string, element: HTMLElement = document.documentElement) => {
+  if (!varName?.startsWith("--")) {
+    console.warn("CSS 变量名应以 '--' 开头")
+    return ""
+  }
+  // 没有拿到值时，会返回空串
+  return getComputedStyle(element).getPropertyValue(varName)
+}
+
+/** 设置指定元素（默认全局）上的 CSS 变量的值 */
+export const setCssVar = (varName: string, value: string, element: HTMLElement = document.documentElement) => {
+  if (!varName?.startsWith("--")) {
+    console.warn("CSS 变量名应以 '--' 开头")
+    return
+  }
+  element.style.setProperty(varName, value)
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index dfd7a5e..0bb339f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,26 +1,5 @@
 import { removeConfigLayout } from "@/utils/cache/local-storage"
 
-/** 用 JS 获取全局 css 变量 */
-export const getCssVariableValue = (cssVariableName: string) => {
-  let cssVariableValue = ""
-  try {
-    // 没有拿到值时，会返回空串
-    cssVariableValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariableName)
-  } catch (error) {
-    console.error(error)
-  }
-  return cssVariableValue
-}
-
-/** 用 JS 设置全局 CSS 变量 */
-export const setCssVariableValue = (cssVariableName: string, cssVariableValue: string) => {
-  try {
-    document.documentElement.style.setProperty(cssVariableName, cssVariableValue)
-  } catch (error) {
-    console.error(error)
-  }
-}
-
 /** 重置项目配置 */
 export const resetConfigLayout = () => {
   removeConfigLayout()