feat(components): 增加黑白模式切换功能、完善appstore类型

src/App.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-// import { darkTheme } from 'naive-ui';
+import { useAppStore } from './store';
 import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
 import json from './theme.json';
 
 const locale = zhCN;
 const dateLocale = dateZhCN;
+const appStore = useAppStore();
 
 const themeOverrides: GlobalThemeOverrides = {} || json;
 </script>
@@ -12,7 +13,7 @@ const themeOverrides: GlobalThemeOverrides = {} || json;
 <template>
   <n-config-provider
     class="wh-full"
-    :theme="null"
+    :theme="appStore.darkTheme"
     :locale="locale"
     :date-locale="dateLocale"
     :theme-overrides="themeOverrides"

src/store/modules/app.ts

@@ -1,11 +1,22 @@
 import { defineStore } from 'pinia';
+import { darkTheme, GlobalTheme } from 'naive-ui';
+
+interface AppStatus {
+  collapsed: boolean;
+  fullScreen: boolean;
+  darkMode: boolean;
+  darkTheme: GlobalTheme | null;
+  title: string;
+  footerText: string;
+}
 
 export const useAppStore = defineStore('app-store', {
-  state: () => {
+  state: (): AppStatus => {
     return {
       collapsed: false,
       fullScreen: false,
       darkMode: false,
+      darkTheme: null,
       title: import.meta.env.VITE_APP_TITLE,
       footerText: '哲学的基本问题是思维和存在的关系问题',
     };
@@ -28,6 +39,11 @@ export const useAppStore = defineStore('app-store', {
     /* 切换主题 亮/深色 */
     toggleDarkMode() {
       this.darkMode = !this.darkMode;
+      if (this.darkMode) {
+        this.darkTheme = darkTheme;
+      } else {
+        this.darkTheme = null;
+      }
     },
   },
 });