✨ feat: 添加深色主题

Author: caolib

src/App.vue

@@ -1,16 +1,41 @@
 <script setup>
-import { onMounted, ref, h, watch } from 'vue';
-import { ConfigProvider, Layout, Menu } from 'ant-design-vue';
+import { onMounted, ref, h, watch, computed } from 'vue';
+import { ConfigProvider, Layout, Menu, theme as antTheme } from 'ant-design-vue';
 import { FileTextOutlined, SettingOutlined } from '@ant-design/icons-vue';
 import HomeView from './components/HomeView.vue';
 import ConfigView from './components/ConfigView.vue';
 import { useCommitTypesStore } from './stores/commitTypes';
+import { useSettingsStore } from './stores/settings';
 
 const { Sider, Content } = Layout;
 
 const currentView = ref(['home']);
 const enterAction = ref({});
 const commitTypesStore = useCommitTypesStore();
+const settingsStore = useSettingsStore();
+
+// 主题相关
+const systemDarkMode = ref(window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+// 计算实际使用的主题
+const actualTheme = computed(() => {
+  if (settingsStore.theme === 'system') {
+    return systemDarkMode.value ? 'dark' : 'light';
+  }
+  return settingsStore.theme;
+});
+
+// Ant Design 主题配置
+const themeConfig = computed(() => {
+  return {
+    algorithm: actualTheme.value === 'dark' ? antTheme.darkAlgorithm : antTheme.defaultAlgorithm
+  };
+});
+
+// 应用主题到document
+const applyTheme = () => {
+  document.documentElement.setAttribute('data-theme', actualTheme.value);
+};
 
 const menuItems = [
   {
@@ -68,6 +93,16 @@ const registerCommands = () => {
 };
 
 onMounted(() => {
+  // 应用初始主题
+  applyTheme();
+
+  // 监听系统主题变化
+  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const handleThemeChange = (e) => {
+    systemDarkMode.value = e.matches;
+  };
+  darkModeMediaQuery.addEventListener('change', handleThemeChange);
+
   // 清理可能存在的旧动态功能
   try {
     const existingFeatures = window.utools.getFeatures();
@@ -108,18 +143,25 @@ watch(
   }
 );
 
+// 监听主题变化
+watch(actualTheme, () => {
+  applyTheme();
+});
+
 const handleMenuClick = ({ key }) => {
   currentView.value = [key];
 };
 </script>
 
 <template>
-  <ConfigProvider>
+  <ConfigProvider :theme="themeConfig">
     <Layout style="min-height: 100vh;">
-      <Sider theme="light" :width="150" style="border-right: 1px solid #f0f0f0;">
-        <Menu v-model:selectedKeys="currentView" mode="inline" :items="menuItems" @click="handleMenuClick" />
+      <Sider :theme="actualTheme === 'dark' ? 'dark' : 'light'" :width="150"
+        :style="{ borderRight: actualTheme === 'dark' ? '1px solid #303030' : '1px solid #f0f0f0' }">
+        <Menu style="height: 100%;" v-model:selectedKeys="currentView" mode="inline" :items="menuItems"
+          @click="handleMenuClick" />
       </Sider>
-      <Content style="background: #fff;">
+      <Content :style="{ background: actualTheme === 'dark' ? '#141414' : '#fff' }">
         <HomeView v-if="currentView[0] === 'home'" :enterAction="enterAction" />
         <ConfigView v-else-if="currentView[0] === 'config'" />
       </Content>

src/components/ConfigView.vue

@@ -80,22 +80,26 @@ const autoClassify = computed({
     set: (val) => settingsStore.setAutoClassify(val)
 });
 
+const theme = computed({
+    get: () => settingsStore.theme,
+    set: (val) => settingsStore.setTheme(val)
+});
+
+// 主题选项
+const themeOptions = [
+    { label: '跟随系统', value: 'system' },
+    { label: '浅色主题', value: 'light' },
+    { label: '深色主题', value: 'dark' }
+];
+
 // 重置为默认配置
 const resetConfig = () => {
     settingsStore.resetToDefault();
-    message.success("如你所愿");
-}
-
-const logs = () => {
-    console.log('isKill', isKill.value);
-    console.log('useIcon', useIcon.value);
-    console.log('autoClassify', autoClassify.value);
 }
 
 // 保存配置文件（Pinia 自动持久化，这里只显示提示）
 const saveData = () => {
     message.success("保存好了");
-    logs();
 }
 
 // 打开分类规则管理
@@ -296,6 +300,14 @@ const resetTypesToDefault = () => {
                 <span style="margin-left:8px;color:#888;cursor:help">?</span>
             </a-tooltip>
         </div>
+        <div class="config-row">
+            <a-typography-text style="margin-right: 10px;">主题:</a-typography-text>
+            <a-radio-group v-model:value="theme" button-style="solid">
+                <a-radio-button v-for="option in themeOptions" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                </a-radio-button>
+            </a-radio-group>
+        </div>
         <div class="config-row">
             <a-button type="default" @click="openRulesManager">
                 🔧 管理自动分类规则

src/components/HomeView.vue

@@ -232,7 +232,6 @@ textarea.ant-input {
 .commit-msg {
   font-size: 20px;
   width: fit-content;
-  background: white;
   color: #c678dd;
   padding: 10px;
   border-radius: 10px;

src/main.css

@@ -3,6 +3,23 @@
   --light: #fff;
 }
 
+/* 浅色主题 */
+:root,
+:root[data-theme="light"] {
+  --bg-color: #f4f4f4;
+  --text-color: #000;
+  --scrollbar-track: #f4f4f4;
+  --scrollbar-thumb: #666;
+}
+
+/* 深色主题 */
+:root[data-theme="dark"] {
+  --bg-color: #282c34;
+  --text-color: #e6e6e6;
+  --scrollbar-track: #303133;
+  --scrollbar-thumb: #666;
+}
+
 
 html,
 body {
@@ -37,32 +54,17 @@ textarea {
   margin: 0;
 }
 
-@media (prefers-color-scheme: light) {
-  body {
-    background-color: #f4f4f4;
-  }
-
-  ::-webkit-scrollbar-track-piece {
-    background-color: #f4f4f4;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-color: #f4f4f4;
-  }
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-@media (prefers-color-scheme: dark) {
-  &::-webkit-scrollbar-track-piece {
-    background-color: #303133;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #666;
-    border-color: #303133;
-  }
+::-webkit-scrollbar-track-piece {
+  background-color: var(--scrollbar-track);
+}
 
-  body {
-    background-color: #303133;
-    color: #fff;
-  }
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-color: var(--scrollbar-track);
 }

src/stores/settings.js

@@ -51,6 +51,9 @@ export const useSettingsStore = defineStore('settings', {
         // 行为设置
         isKill: true, // 复制后是否退出
 
+        // 主题设置：'light' | 'dark' | 'system'
+        theme: 'system',
+
         // 远程数据源（保留但不推荐使用）
         isCustomType: false,
         customFileUrl: '',
@@ -84,6 +87,11 @@ export const useSettingsStore = defineStore('settings', {
             this.isKill = value
         },
 
+        // 设置主题
+        setTheme(theme) {
+            this.theme = theme
+        },
+
         // 设置远程数据源
         setCustomType(isCustom, url) {
             this.isCustomType = isCustom
@@ -101,6 +109,7 @@ export const useSettingsStore = defineStore('settings', {
             this.autoClassify = true
             this.classifyRules = { ...defaultClassifyRules }
             this.isKill = true
+            this.theme = 'system'
             this.isCustomType = false
             this.customFileUrl = ''
             this.isCustomIcon = false