From ef5f96934013f45e1533a115ecacd9995c430679 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Mon, 6 May 2024 12:55:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A2=98=E8=89=B2=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml                                |  8 +++----
 src/App.vue                                   |  7 +++---
 src/hooks/useThemeMethods.ts                  | 24 ++++++++++++++++---
 .../Header/components/header-right/index.vue  | 10 +++-----
 .../components/theme-settings/index.vue       | 13 ++++------
 5 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88e5db5..45c156b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@arco-design/color':
     specifier: ^0.4.0
@@ -5302,3 +5298,7 @@ packages:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
     engines: {node: '>=12.20'}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/src/App.vue b/src/App.vue
index 61f911b..8578f1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,12 +6,13 @@
 
 <script setup lang="ts">
 import { loadingPage } from "@/utils/loading-page";
-import { useRoutingMethod } from "@/hooks/useThemeMethods";
+import { useThemeMethods } from "@/hooks/useThemeMethods";
 
 // 初始化主题
 const onTheme = () => {
-  let { darkMode } = useRoutingMethod();
-  darkMode();
+  let { setDarkMode, setThemeColor } = useThemeMethods();
+  setDarkMode();
+  setThemeColor();
 };
 onTheme();
 
diff --git a/src/hooks/useThemeMethods.ts b/src/hooks/useThemeMethods.ts
index c5ab8b1..408c094 100644
--- a/src/hooks/useThemeMethods.ts
+++ b/src/hooks/useThemeMethods.ts
@@ -1,11 +1,12 @@
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { generate, getRgbStr } from "@arco-design/color";
 /* 主题处理hooks */
-export const useRoutingMethod = () => {
+export const useThemeMethods = () => {
   /**
    * @description: 暗黑模式
    */
-  const darkMode = () => {
+  const setDarkMode = () => {
     const themeStore = useThemeConfig();
     const { darkMode } = storeToRefs(themeStore);
     if (darkMode.value) {
@@ -16,7 +17,24 @@ export const useRoutingMethod = () => {
       document.body.removeAttribute("arco-theme");
     }
   };
+
+  /**
+   * @description: 主题色设置
+   */
+  const setThemeColor = () => {
+    const themeStore = useThemeConfig();
+    const { themeColor, darkMode } = storeToRefs(themeStore);
+    // 对于给定的颜色，使用算法生成包含10种颜色的渐变样本。这适用于光模式和暗模式。
+    let list = generate(themeColor.value, { list: true, dark: darkMode.value });
+    list.forEach((color: string, index: number) => {
+      // https://arco.design/palette/list
+      // arco的颜色等级为1-10，这里需要index+1
+      document.body.style.setProperty(`--primary-${index + 1}`, getRgbStr(color));
+    });
+  };
+
   return {
-    darkMode
+    setDarkMode,
+    setThemeColor
   };
 };
diff --git a/src/layout/components/Header/components/header-right/index.vue b/src/layout/components/Header/components/header-right/index.vue
index dffd99d..7798c2d 100644
--- a/src/layout/components/Header/components/header-right/index.vue
+++ b/src/layout/components/Header/components/header-right/index.vue
@@ -114,6 +114,7 @@ import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useUserInfoStore } from "@/store/modules/user-info";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { useThemeMethods } from "@/hooks/useThemeMethods";
 const i18n = useI18n();
 const router = useRouter();
 const themeStore = useThemeConfig();
@@ -147,13 +148,8 @@ const onFullScreen = () => {
 // 黑暗模式
 const onNightMode = () => {
   darkMode.value = !darkMode.value;
-  if (darkMode.value) {
-    // 设置为暗黑主题
-    document.body.setAttribute("arco-theme", "dark");
-  } else {
-    // 恢复亮色主题
-    document.body.removeAttribute("arco-theme");
-  }
+  let { setDarkMode } = useThemeMethods();
+  setDarkMode();
 };
 
 // 语言
diff --git a/src/layout/components/Header/components/theme-settings/index.vue b/src/layout/components/Header/components/theme-settings/index.vue
index b87c011..5cec11f 100644
--- a/src/layout/components/Header/components/theme-settings/index.vue
+++ b/src/layout/components/Header/components/theme-settings/index.vue
@@ -49,10 +49,10 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
-import { generate, getRgbStr } from "@arco-design/color";
+import { useThemeMethods } from "@/hooks/useThemeMethods";
 
 const themeStore = useThemeConfig();
-const { layoutType, themeColor, darkMode } = storeToRefs(themeStore);
+const { layoutType, themeColor } = storeToRefs(themeStore);
 
 const layoutList = reactive({
   layoutDefaults: {
@@ -75,13 +75,8 @@ const layoutList = reactive({
 // 主题色设置
 const themeColorChange = (value: string) => {
   themeColor.value = value;
-  // 对于给定的颜色，使用算法生成包含10种颜色的渐变样本。这适用于光模式和暗模式。
-  let list = generate(themeColor.value, { list: true, dark: darkMode.value });
-  list.forEach((color: string, index: number) => {
-    // https://arco.design/palette/list
-    // arco的颜色等级为1-10，这里需要index+1
-    document.body.style.setProperty(`--primary-${index + 1}`, getRgbStr(color));
-  });
+  const { setThemeColor } = useThemeMethods();
+  setThemeColor();
 };
 
 // 布局变化