From c58605de54f7033857288b2432d31e3392210a7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Mon, 30 Jan 2023 15:37:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E6=9A=97?=
 =?UTF-8?q?=E9=BB=91=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/AppProvider.vue          | 18 ++++++++----------
 src/components/page/AppPage.vue                |  2 +-
 .../components/header/components/ThemeMode.vue | 10 ++++++++--
 src/layout/components/header/index.vue         |  2 +-
 src/layout/components/tags/index.vue           |  2 +-
 src/layout/index.vue                           | 10 +++++++---
 src/store/modules/app/index.js                 | 12 +++++++-----
 src/styles/global.scss                         |  8 --------
 unocss.config.js                               |  1 +
 9 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/common/AppProvider.vue b/src/components/common/AppProvider.vue
index 03a3ec4..47359fc 100644
--- a/src/components/common/AppProvider.vue
+++ b/src/components/common/AppProvider.vue
@@ -1,5 +1,11 @@
 <template>
-  <n-config-provider wh-full :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="naiveThemeOverrides">
+  <n-config-provider
+    wh-full
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme="appStore.isDark ? darkTheme : undefined"
+    :theme-overrides="naiveThemeOverrides"
+  >
     <n-loading-bar-provider>
       <n-dialog-provider>
         <n-notification-provider>
@@ -15,7 +21,7 @@
 
 <script setup>
 import { defineComponent, h } from 'vue'
-import { zhCN, dateZhCN, useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
+import { zhCN, dateZhCN, darkTheme, useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
 import { useCssVar } from '@vueuse/core'
 import { kebabCase } from 'lodash-es'
 import { setupMessage, setupDialog } from '@/utils'
@@ -50,12 +56,4 @@ const NaiveProviderContent = defineComponent({
     return h('div')
   },
 })
-
-watch(
-  () => appStore.darkMode,
-  (v) => {
-    if (v) document.documentElement.classList.add('dark')
-    else document.documentElement.classList.remove('dark')
-  }
-)
 </script>
diff --git a/src/components/page/AppPage.vue b/src/components/page/AppPage.vue
index 9cf4aa4..3e6ccc3 100644
--- a/src/components/page/AppPage.vue
+++ b/src/components/page/AppPage.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="fade-slide" mode="out-in" appear>
-    <section class="cus-scroll-y wh-full p-15 flex-col bg-[#f5f6fb]">
+    <section class="cus-scroll-y wh-full p-15 flex-col bg-[#f5f6fb] dark:bg-hex-121212">
       <slot />
       <AppFooter v-if="showFooter" mt-15 />
       <n-back-top :bottom="20" />
diff --git a/src/layout/components/header/components/ThemeMode.vue b/src/layout/components/header/components/ThemeMode.vue
index 39e95d7..01ce41e 100644
--- a/src/layout/components/header/components/ThemeMode.vue
+++ b/src/layout/components/header/components/ThemeMode.vue
@@ -1,12 +1,18 @@
 <script setup>
 import { useAppStore } from '@/store'
+import { useDark, useToggle } from '@vueuse/core'
 
 const appStore = useAppStore()
+const isDark = useDark()
+const toggleDark = () => {
+  appStore.toggleDark()
+  useToggle(isDark)()
+}
 </script>
 
 <template>
-  <n-icon mr-20 cursor-pointer size="18" @click="appStore.toggleDarkMode">
-    <icon-mdi-moon-waning-crescent v-if="appStore.darkMode" />
+  <n-icon mr-20 cursor-pointer size="18" @click="toggleDark">
+    <icon-mdi-moon-waning-crescent v-if="isDark" />
     <icon-mdi-white-balance-sunny v-else />
   </n-icon>
 </template>
diff --git a/src/layout/components/header/index.vue b/src/layout/components/header/index.vue
index 5bc15b6..0c0cec8 100644
--- a/src/layout/components/header/index.vue
+++ b/src/layout/components/header/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div flex items-center>
     <MenuCollapse />
-    <BreadCrumb ml-15 />
+    <BreadCrumb ml-15 hidden sm:block />
   </div>
   <div ml-auto flex items-center>
     <ThemeMode />
diff --git a/src/layout/components/tags/index.vue b/src/layout/components/tags/index.vue
index f71ba3e..7385fe8 100644
--- a/src/layout/components/tags/index.vue
+++ b/src/layout/components/tags/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ScrollX ref="scrollXRef">
+  <ScrollX ref="scrollXRef" class="bg-white dark:bg-dark!">
     <n-tag
       v-for="tag in tagsStore.tags"
       ref="tabRefs"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3d8ab80..3ecec8d 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -12,13 +12,17 @@
     </n-layout-sider>
 
     <article flex-1 flex-col overflow-hidden>
-      <header bg-white px-15 border-b bc-eee flex items-center :style="`height: ${header.height}px`">
+      <header
+        class="bg-white px-15 border-b bc-eee flex items-center"
+        dark="bg-dark border-0"
+        :style="`height: ${header.height}px`"
+      >
         <AppHeader />
       </header>
-      <section v-if="tags.visible" border-b bc-eee>
+      <section v-if="tags.visible" border-b bc-eee dark:border-0 hidden sm:block>
         <AppTags :style="{ height: `${tags.height}px` }" />
       </section>
-      <section flex-1 overflow-hidden>
+      <section flex-1 overflow-hidden bg-hex-f5f6fb dark:bg-hex-101014>
         <AppMain />
       </section>
     </article>
diff --git a/src/store/modules/app/index.js b/src/store/modules/app/index.js
index 793b672..f2194cc 100644
--- a/src/store/modules/app/index.js
+++ b/src/store/modules/app/index.js
@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia'
+import { useDark } from '@vueuse/core'
 
+const isDark = useDark()
 export const useAppStore = defineStore('app', {
   state() {
     return {
@@ -7,7 +9,7 @@ export const useAppStore = defineStore('app', {
       collapsed: false,
       /** keepAlive路由的key，重新赋值可重置keepAlive */
       aliveKeys: {},
-      darkMode: false,
+      isDark,
     }
   },
   actions: {
@@ -32,12 +34,12 @@ export const useAppStore = defineStore('app', {
       this.aliveKeys[key] = val
     },
     /** 设置暗黑模式 */
-    setDarkMode(darkMode) {
-      this.darkMode = darkMode
+    setDark(isDark) {
+      this.isDark = isDark
     },
     /** 切换/关闭 暗黑模式 */
-    toggleDarkMode() {
-      this.darkMode = !this.darkMode
+    toggleDark() {
+      this.isDark = !this.isDark
     },
   },
 })
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 2076616..4cbdda3 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -7,14 +7,6 @@ body {
 
 html {
   font-size: 4px; // * 1rem = 4px  方便unocss计算：在unocss中 1字体单位 = 0.25rem，相当于 1等份 = 1px
-
-  &.dark {
-    filter: invert(1);
-    img,
-    video {
-      filter: invert(1);
-    }
-  }
 }
 
 body {
diff --git a/unocss.config.js b/unocss.config.js
index 8e36882..685fcbf 100644
--- a/unocss.config.js
+++ b/unocss.config.js
@@ -40,6 +40,7 @@ export default defineConfig({
       error_hover: 'var(--error-color-hover)',
       error_pressed: 'var(--error-color-pressed)',
       error_active: 'var(--error-color-active)',
+      dark: '#18181c',
     },
   },
 })