♻️ Refactor code

frontend/src/stores/configStore.ts

@@ -1,6 +1,6 @@
 import {defineStore} from 'pinia';
 import {computed, reactive} from 'vue';
-import {ConfigService} from '@/../bindings/voidraft/internal/services';
+import {ConfigService} from '../../bindings/voidraft/internal/services';
 import {
     AppConfig,
     AppearanceConfig,
@@ -9,8 +9,7 @@ import {
     LanguageType,
     SystemThemeType,
     TabType,
-    ThemeType
-} from '@/../bindings/voidraft/internal/models';
+} from '../../bindings/voidraft/internal/models/models';
 import {useI18n} from 'vue-i18n';
 import {useErrorHandler} from '@/utils/errorHandler';
 import {ConfigUtils} from '@/utils/configUtils';
@@ -68,7 +67,6 @@ const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
 
 const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
     language: 'appearance.language',
-    theme: 'appearance.theme',
     systemTheme: 'appearance.system_theme'
 } as const;
 
@@ -141,8 +139,7 @@ const DEFAULT_CONFIG: AppConfig = {
     },
     appearance: {
         language: LanguageType.LangZhCN,
-        theme: 'default-dark' as ThemeType,
-        systemTheme: 'dark' as SystemThemeType
+        systemTheme: SystemThemeType.SystemThemeDark
     },
     keyBindings: {},
     updates: {},
@@ -304,13 +301,6 @@ export const useConfigStore = defineStore('config', () => {
         }, 'config.languageChangeFailed', 'config.languageChanged');
     };
 
-    // 主题设置方法
-    const setTheme = async (theme: ThemeType): Promise<void> => {
-        await safeCall(async () => {
-            await updateAppearanceConfig('theme', theme);
-        }, 'config.themeChangeFailed', 'config.themeChanged');
-    };
-
     // 系统主题设置方法
     const setSystemTheme = async (systemTheme: SystemThemeType): Promise<void> => {
         await safeCall(async () => {
@@ -381,7 +371,6 @@ export const useConfigStore = defineStore('config', () => {
         initializeLanguage,
 
         // 主题相关方法
-        setTheme,
         setSystemTheme,
 
         // 字体大小操作

frontend/src/stores/editorStore.ts

@@ -1,6 +1,5 @@
 import {defineStore} from 'pinia';
 import {ref, watch} from 'vue';
-import {DocumentStats} from '@/types/editor';
 import {EditorView} from '@codemirror/view';
 import {EditorState, Extension} from '@codemirror/state';
 import {useConfigStore} from './configStore';
@@ -17,18 +16,24 @@ import {
   createFontExtensionFromBackend,
   updateFontConfig,
 } from '@/views/editor/extensions';
-import { useEditorTheme } from '@/composables/useEditorTheme';
+import { createThemeExtension, updateEditorTheme } from '@/views/editor/extensions/themeExtension';
+import { useThemeStore } from './themeStore';
 import { useI18n } from 'vue-i18n';
-import type { ThemeType } from '@/types';
-import { DocumentService } from '../../bindings/voidraft/internal/services';
+import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
+import { DocumentService } from '@/../bindings/voidraft/internal/services';
 
+export interface DocumentStats {
+    lines: number;
+    characters: number;
+    selectedCharacters: number;
+}
 export const useEditorStore = defineStore('editor', () => {
     // 引用配置store
     const configStore = useConfigStore();
     const documentStore = useDocumentStore();
     const logStore = useLogStore();
+    const themeStore = useThemeStore();
     const { t } = useI18n();
-    const { createThemeExtension, updateTheme } = useEditorTheme();
 
     // 状态
     const documentStats = ref<DocumentStats>({
@@ -123,8 +128,8 @@ export const useEditorStore = defineStore('editor', () => {
         const basicExtensions = createBasicSetup();
 
         // 获取主题扩展
-        const themeExtension = await createThemeExtension(
-            configStore.config.appearance.theme || 'default-dark' as ThemeType
+        const themeExtension = createThemeExtension(
+            configStore.config.appearance.systemTheme || SystemThemeType.SystemThemeDark
         );
 
         // 获取Tab相关扩展
@@ -222,12 +227,6 @@ export const useEditorStore = defineStore('editor', () => {
         });
     };
 
-    // 更新编辑器主题
-    const updateEditorTheme = async (newTheme: ThemeType) => {
-        if (newTheme && editorView.value) {
-            await updateTheme(editorView.value as EditorView, newTheme);
-        }
-    };
 
     // 销毁编辑器
     const destroyEditor = () => {
@@ -260,9 +259,9 @@ export const useEditorStore = defineStore('editor', () => {
         });
 
         // 监听主题变化
-        watch(() => configStore.config.appearance.theme, async (newTheme) => {
-            if (newTheme) {
-                await updateEditorTheme(newTheme);
+        watch(() => themeStore.currentTheme, (newTheme) => {
+            if (editorView.value && newTheme) {
+                updateEditorTheme(editorView.value as EditorView, newTheme);
             }
         });
 
@@ -281,7 +280,6 @@ export const useEditorStore = defineStore('editor', () => {
             createEditor,
             reconfigureTabSettings,
             reconfigureFontSettings,
-            updateEditorTheme,
             handleManualSave,
             destroyEditor,
             scrollEditorToBottom,

frontend/src/stores/themeStore.ts

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia';
+import { computed, watch } from 'vue';
+import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
+import { useConfigStore } from './configStore';
+
+/**
+ * 主题管理 Store
+ * 职责：
+ */
+export const useThemeStore = defineStore('theme', () => {
+  const configStore = useConfigStore();
+  
+  const currentTheme = computed(() => 
+    configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
+  );
+
+
+  // 应用主题到 DOM
+  const applyThemeToDOM = (theme: SystemThemeType) => {
+    document.documentElement.setAttribute('data-theme', 
+      theme === SystemThemeType.SystemThemeAuto ? 'auto' :
+      theme === SystemThemeType.SystemThemeDark ? 'dark' : 'light'
+    );
+  };
+
+  // 设置主题
+  const setTheme = async (theme: SystemThemeType) => {
+    await configStore.setSystemTheme(theme);
+    applyThemeToDOM(theme);
+  };
+
+  return {
+    currentTheme,
+    setTheme,
+  };
+});