From ba07b695dd9dc5d3f8ebf57d0f2e69d624994962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=B8=E6=80=9D?= <admin@toolv.cn>
Date: Fri, 29 Apr 2022 15:02:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=B7=BB=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E8=B7=9F=E9=9A=8F=E7=B3=BB=E7=BB=9F=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DarkMode/index.vue             | 37 +++++++++++++------
 src/settings/theme.json                       |  1 +
 src/settings/theme.ts                         |  1 +
 src/store/modules/theme/index.ts              | 10 +++++
 src/store/subscribe/theme.ts                  |  2 +-
 src/typings/system.d.ts                       |  2 +
 6 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
index 0721a94a..7171f30e 100644
--- a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
+++ b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
@@ -1,19 +1,34 @@
 <template>
-  <n-divider title-placement="center">深色主题</n-divider>
-  <div class="flex-center">
-    <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
-      <template #checked>
-        <icon-mdi-white-balance-sunny class="text-14px text-primary" />
-      </template>
-      <template #unchecked>
-        <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
-      </template>
-    </n-switch>
-  </div>
+  <n-divider title-placement="center">主题</n-divider>
+  <n-space vertical size="large">
+    <setting-menu label="深色主题">
+      <div class="flex-center">
+        <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
+          <template #checked>
+            <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+          </template>
+          <template #unchecked>
+            <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+          </template>
+        </n-switch>
+      </div>
+    </setting-menu>
+    <setting-menu label="跟随系统">
+      <n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme">
+        <template #checked>
+          <icon-ic:baseline-do-not-disturb class="text-14px text-primary" />
+        </template>
+        <template #unchecked>
+          <icon-ic:round-hdr-auto class="text-14px text-primary" />
+        </template>
+      </n-switch>
+    </setting-menu>
+  </n-space>
 </template>
 
 <script lang="ts" setup>
 import { useThemeStore } from '@/store';
+import SettingMenu from '../SettingMenu/index.vue';
 
 const theme = useThemeStore();
 </script>
diff --git a/src/settings/theme.json b/src/settings/theme.json
index 624db62f..bb8bfe74 100644
--- a/src/settings/theme.json
+++ b/src/settings/theme.json
@@ -1,4 +1,5 @@
 {
+	"followSystemTheme": true,
 	"darkMode": false,
 	"layout": {
 		"minWidth": 900,
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index 225d41f4..503ed69e 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -29,6 +29,7 @@ const themeColorList = [
 ];
 
 const defaultThemeSetting: Theme.Setting = {
+  followSystemTheme: true,
   darkMode: false,
   layout: {
     minWidth: 900,
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 970d4f04..786901ce 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -26,6 +26,16 @@ export const useThemeStore = defineStore('theme-store', {
     setDarkMode(darkMode: boolean) {
       this.darkMode = darkMode;
     },
+    /** 设置自动跟随系统主题 */
+    setFollowSystemTheme(visible: boolean) {
+      this.followSystemTheme = visible;
+    },
+    /** 自动跟随系统主题 */
+    autoFollowSystemMode(darkMode: boolean) {
+      if (this.followSystemTheme) {
+        this.darkMode = darkMode;
+      }
+    },
     /** 切换/关闭 暗黑模式 */
     toggleDarkMode() {
       this.darkMode = !this.darkMode;
diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts
index c6459c95..412c30c4 100644
--- a/src/store/subscribe/theme.ts
+++ b/src/store/subscribe/theme.ts
@@ -53,7 +53,7 @@ export default function subscribeThemeStore() {
     osTheme,
     newValue => {
       const isDark = newValue === 'dark';
-      theme.setDarkMode(isDark);
+      theme.autoFollowSystemMode(isDark);
     },
     { immediate: true }
   );
diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts
index bbb4ef74..b0a29851 100644
--- a/src/typings/system.d.ts
+++ b/src/typings/system.d.ts
@@ -98,6 +98,8 @@ declare namespace Service {
 declare namespace Theme {
   /** 主题配置 */
   interface Setting {
+    /** 是否自动跟随系统主题 */
+    followSystemTheme: boolean;
     /** 暗黑模式 */
     darkMode: boolean;
     /** 布局样式 */