refactor(projects): 系统暗黑主题模式抽离成composables

src/AppProvider.vue

@@ -3,7 +3,7 @@
     class="h-full"
     :locale="zhCN"
     :date-locale="dateZhCN"
-    :theme="dark"
+    :theme="naiveTheme"
     :theme-overrides="theme.themeOverrids"
   >
     <n-element class="h-full">
@@ -22,7 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
 import {
   NConfigProvider,
   NElement,
@@ -30,30 +29,14 @@ import {
   NDialogProvider,
   NNotificationProvider,
   NMessageProvider,
-  darkTheme,
   zhCN,
   dateZhCN
 } from 'naive-ui';
-import { useDark } from '@vueuse/core';
 import { AppProviderContent } from '@/components';
 import { useThemeStore } from '@/store';
+import { useDarkMode } from '@/composables';
 
-const osDark = useDark();
 const theme = useThemeStore();
-const { handleDarkMode } = useThemeStore();
+const { naiveTheme } = useDarkMode();
-
-/** 系统暗黑模式 */
-const dark = computed(() => (theme.darkMode ? darkTheme : undefined));
-
-// 操作系统的暗黑模式
-watch(
-  osDark,
-  newValue => {
-    handleDarkMode(newValue);
-  },
-  {
-    immediate: true
-  }
-);
 </script>
 <style></style>

src/composables/common/index.ts

@@ -2,3 +2,4 @@ export * from './route';
 export * from './router';
 export * from './system';
 export * from './layout';
+export * from './theme';

src/composables/common/theme.ts

@@ -0,0 +1,29 @@
+import { computed, watch } from 'vue';
+import { darkTheme } from 'naive-ui';
+import { useDark } from '@vueuse/core';
+import { useThemeStore } from '@/store';
+
+/** 系统暗黑模式 */
+export function useDarkMode() {
+  const osDark = useDark();
+  const theme = useThemeStore();
+  const { handleDarkMode } = useThemeStore();
+
+  /** naive-ui暗黑主题 */
+  const naiveTheme = computed(() => (theme.darkMode ? darkTheme : undefined));
+
+  // 监听操作系统主题模式
+  watch(
+    osDark,
+    newValue => {
+      handleDarkMode(newValue);
+    },
+    {
+      immediate: true
+    }
+  );
+
+  return {
+    naiveTheme
+  };
+}