refactor: 重写 getCssVar、setCssVar 工具函数

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 v3SidebarMenuBgColor = getCssVar("--v3-sidebar-menu-bg-color")
-const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
+const v3SidebarMenuTextColor = getCssVar("--v3-sidebar-menu-text-color")
-const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
+const v3SidebarMenuActiveTextColor = getCssVar("--v3-sidebar-menu-active-text-color")
 
 const { isMobile } = useDevice()
 const { isLeft, isTop } = useLayoutMode()

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 cssVarName = "--v3-tagsview-height"
-const v3TagsviewHeight = getCssVariableValue(cssVariableName)
+const v3TagsviewHeight = getCssVar(cssVarName)
 watchEffect(() => {
-  showTagsView.value
+  showTagsView.value ? setCssVar(cssVarName, v3TagsviewHeight) : setCssVar(cssVarName, "0px")
-    ? setCssVariableValue(cssVariableName, v3TagsviewHeight)
-    : setCssVariableValue(cssVariableName, "0px")
 })
 //#endregion
 

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)
+}

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()