From 281a7bebbfe4b43dba185eedd73c861aa9afda62 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Mon, 17 Oct 2022 15:04:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E5=A4=9A=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=8A=9F=E8=83=BD=E4=BB=8E=20pinia=20=E6=8A=BD?=
 =?UTF-8?q?=E7=A6=BB=E4=B8=BA=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |  6 ++--
 src/components/ThemeSwitch/index.vue | 13 +++-----
 src/config/theme.ts                  | 20 -------------
 src/hooks/useTheme.ts                | 44 ++++++++++++++++++++++++++++
 src/store/modules/app.ts             | 22 ++------------
 src/utils/cache/localStorage.ts      |  2 +-
 6 files changed, 54 insertions(+), 53 deletions(-)
 delete mode 100644 src/config/theme.ts
 create mode 100644 src/hooks/useTheme.ts

diff --git a/src/App.vue b/src/App.vue
index 9a7afdb..6bff00e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { useAppStore } from "@/store/modules/app"
+import { useTheme } from "@/hooks/useTheme"
 import zhCn from "element-plus/lib/locale/lang/zh-cn"
 
-const appStore = useAppStore()
+const { initTheme } = useTheme()
 
 /** 初始化主题 */
-appStore.initTheme()
+initTheme()
 /** 将 Element-Plus 的语言设置为中文 */
 const locale = zhCn
 </script>
diff --git a/src/components/ThemeSwitch/index.vue b/src/components/ThemeSwitch/index.vue
index fd3e1cc..7b4d676 100644
--- a/src/components/ThemeSwitch/index.vue
+++ b/src/components/ThemeSwitch/index.vue
@@ -1,17 +1,12 @@
 <script lang="ts" setup>
-import { computed } from "vue"
-import { useAppStore } from "@/store/modules/app"
-import themeList from "@/config/theme"
-import type { ThemeName } from "@/config/theme"
+import { useTheme } from "@/hooks/useTheme"
+import type { ThemeName } from "@/hooks/useTheme"
 import { MagicStick } from "@element-plus/icons-vue"
 
-const appStore = useAppStore()
+const { themeList, activeThemeName, setTheme } = useTheme()
 
-const activeThemeName = computed(() => {
-  return appStore.activeThemeName
-})
 const handleSetTheme = (name: ThemeName) => {
-  appStore.setTheme(name)
+  setTheme(name)
 }
 </script>
 
diff --git a/src/config/theme.ts b/src/config/theme.ts
deleted file mode 100644
index 8705017..0000000
--- a/src/config/theme.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/** 注册的主题, 其中 normal 是必须的, dark 是内置的, 如需更多主题，可自行注册 */
-export type ThemeName = "normal" | "dark"
-
-interface IThemeList {
-  title: string
-  name: ThemeName
-}
-
-const themeList: IThemeList[] = [
-  {
-    title: "默认",
-    name: "normal"
-  },
-  {
-    title: "黑暗",
-    name: "dark"
-  }
-]
-
-export default themeList
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..90154bd
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,44 @@
+import { ref } from "vue"
+import { getActiveThemeName, setActiveThemeName } from "@/utils/cache/localStorage"
+
+interface IThemeList {
+  title: string
+  name: ThemeName
+}
+
+/** 注册的主题名称, 其中 normal 是必填的 */
+export type ThemeName = "normal" | "dark"
+
+/** 主题 hook */
+export function useTheme() {
+  /** 主题列表 */
+  const themeList: IThemeList[] = [
+    {
+      title: "默认",
+      name: "normal"
+    },
+    {
+      title: "黑暗",
+      name: "dark"
+    }
+  ]
+  /** 正在应用的主题名称 */
+  const activeThemeName = ref<ThemeName>(getActiveThemeName() || "normal")
+
+  const initTheme = () => {
+    setHtmlClassName(activeThemeName.value)
+  }
+
+  const setTheme = (value: ThemeName) => {
+    activeThemeName.value = value
+    setHtmlClassName(activeThemeName.value)
+    setActiveThemeName(activeThemeName.value)
+  }
+
+  /** 在 html 根元素上挂载 class */
+  const setHtmlClassName = (value: ThemeName) => {
+    document.documentElement.className = value
+  }
+
+  return { themeList, activeThemeName, initTheme, setTheme }
+}
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 417e86e..a1602d7 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,7 +1,6 @@
 import { reactive, ref } from "vue"
 import { defineStore } from "pinia"
-import { getSidebarStatus, getActiveThemeName, setSidebarStatus, setActiveThemeName } from "@/utils/cache/localStorage"
-import type { ThemeName } from "@/config/theme"
+import { getSidebarStatus, setSidebarStatus } from "@/utils/cache/localStorage"
 
 export enum DeviceType {
   Mobile,
@@ -13,18 +12,12 @@ interface ISidebar {
   withoutAnimation: boolean
 }
 
-const setClassName = (value: ThemeName) => {
-  document.documentElement.className = value
-}
-
 export const useAppStore = defineStore("app", () => {
   const sidebar: ISidebar = reactive({
     opened: getSidebarStatus() !== "closed",
     withoutAnimation: false
   })
   const device = ref<DeviceType>(DeviceType.Desktop)
-  /** 正在应用的主题的名字 */
-  const activeThemeName = ref<ThemeName>(getActiveThemeName() || "normal")
 
   const toggleSidebar = (withoutAnimation: boolean) => {
     sidebar.opened = !sidebar.opened
@@ -43,17 +36,6 @@ export const useAppStore = defineStore("app", () => {
   const toggleDevice = (value: DeviceType) => {
     device.value = value
   }
-  const setTheme = (value: ThemeName) => {
-    activeThemeName.value = value
-    // 应用到 Dom
-    setClassName(activeThemeName.value)
-    // 持久化
-    setActiveThemeName(activeThemeName.value)
-  }
-  const initTheme = () => {
-    // 初始化
-    setClassName(activeThemeName.value)
-  }
 
-  return { device, sidebar, activeThemeName, toggleSidebar, closeSidebar, toggleDevice, setTheme, initTheme }
+  return { device, sidebar, toggleSidebar, closeSidebar, toggleDevice }
 })
diff --git a/src/utils/cache/localStorage.ts b/src/utils/cache/localStorage.ts
index 36af5aa..a34b102 100644
--- a/src/utils/cache/localStorage.ts
+++ b/src/utils/cache/localStorage.ts
@@ -1,7 +1,7 @@
 /** 统一处理 localStorage */
 
 import CacheKey from "@/constants/cacheKey"
-import type { ThemeName } from "@/config/theme"
+import type { ThemeName } from "@/hooks/useTheme"
 
 export const getSidebarStatus = () => {
   return localStorage.getItem(CacheKey.SIDEBAR_STATUS)