✨ Modify the theme storage schema

2025-08-17 19:34:35 +08:00
parent 5b88efcfbe
commit 873a3c0e60
11 changed files with 587 additions and 239 deletions
--- a/frontend/src/stores/configStore.ts
+++ b/frontend/src/stores/configStore.ts
@@ -78,8 +78,7 @@ const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {

 const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
    language: 'appearance.language',
-    systemTheme: 'appearance.systemTheme',
-    customTheme: 'appearance.customTheme'
+    systemTheme: 'appearance.systemTheme'
 } as const;

 const UPDATES_CONFIG_KEY_MAP: UpdatesConfigKeyMap = {
@@ -189,80 +188,10 @@ const DEFAULT_CONFIG: AppConfig = {
        tabType: CONFIG_LIMITS.tabType.default,
        autoSaveDelay: 5000
    },
-    appearance: {
-        language: LanguageType.LangZhCN,
-        systemTheme: SystemThemeType.SystemThemeAuto,
-        customTheme: {
-            darkTheme: {
-                // 基础色调
-                background: '#252B37',
-                backgroundSecondary: '#213644',
-                surface: '#474747',
-                foreground: '#9BB586',
-                foregroundSecondary: '#9c9c9c',
-                
-                // 语法高亮
-                comment: '#6272a4',
-                keyword: '#ff79c6',
-                string: '#f1fa8c',
-                function: '#50fa7b',
-                number: '#bd93f9',
-                operator: '#ff79c6',
-                variable: '#8fbcbb',
-                type: '#8be9fd',
-                
-                // 界面元素
-                cursor: '#fff',
-                selection: '#0865a9aa',
-                selectionBlur: '#225377aa',
-                activeLine: 'rgba(255,255,255,0.04)',
-                lineNumber: 'rgba(255,255,255, 0.15)',
-                activeLineNumber: 'rgba(255,255,255, 0.6)',
-                
-                // 边框分割线
-                borderColor: '#1e222a',
-                borderLight: 'rgba(255,255,255, 0.1)',
-                
-                // 搜索匹配
-                searchMatch: '#8fbcbb',
-                matchingBracket: 'rgba(255,255,255,0.1)'
-            },
-            lightTheme: {
-                // 基础色调
-                background: '#ffffff',
-                backgroundSecondary: '#f1faf1',
-                surface: '#f5f5f5',
-                foreground: '#444d56',
-                foregroundSecondary: '#6a737d',
-                
-                // 语法高亮
-                comment: '#6a737d',
-                keyword: '#d73a49',
-                string: '#032f62',
-                function: '#005cc5',
-                number: '#005cc5',
-                operator: '#d73a49',
-                variable: '#24292e',
-                type: '#6f42c1',
-                
-                // 界面元素
-                cursor: '#000',
-                selection: '#77baff8c',
-                selectionBlur: '#b2c2ca85',
-                activeLine: '#000000',
-                lineNumber: '#000000',
-                activeLineNumber: '#000000',
-                
-                // 边框分割线
-                borderColor: '#dfdfdf',
-                borderLight: '#0000000C',
-                
-                // 搜索匹配
-                searchMatch: '#005cc5',
-                matchingBracket: 'rgba(0,0,0,0.1)'
-            }
-        }
-    },
+            appearance: {
+            language: LanguageType.LangZhCN,
+            systemTheme: SystemThemeType.SystemThemeAuto
+        },
    updates: {
        version: "1.0.0",
        autoUpdate: true,
@@ -478,50 +407,7 @@ export const useConfigStore = defineStore('config', () => {
        await updateAppearanceConfig('systemTheme', systemTheme);
    };

-    // 更新自定义主题方法
-    const updateCustomTheme = async (themeType: 'darkTheme' | 'lightTheme', colorKey: string, colorValue: string): Promise<void> => {
-        // 确保配置已加载
-        if (!state.configLoaded && !state.isLoading) {
-            await initConfig();
-        }

-        try {
-            // 深拷贝当前配置
-            const customTheme = JSON.parse(JSON.stringify(state.config.appearance.customTheme));
-            
-            // 更新对应主题的颜色值
-            customTheme[themeType][colorKey] = colorValue;
-            
-            // 更新整个自定义主题配置到后端
-            await ConfigService.Set(APPEARANCE_CONFIG_KEY_MAP.customTheme, customTheme);
-            
-            // 更新前端状态
-            state.config.appearance.customTheme = customTheme;
-        } catch (error) {
-            throw error;
-        }
-    };
-
-    // 设置整个自定义主题配置
-    const setCustomTheme = async (customTheme: any): Promise<void> => {
-        // 确保配置已加载
-        if (!state.configLoaded && !state.isLoading) {
-            await initConfig();
-        }
-
-        try {
-            // 更新整个自定义主题配置到后端
-            await ConfigService.Set(APPEARANCE_CONFIG_KEY_MAP.customTheme, customTheme);
-            
-            // 更新前端状态
-            state.config.appearance.customTheme = customTheme;
-            
-            // 确保Vue能检测到变化
-            state.config.appearance = { ...state.config.appearance };
-        } catch (error) {
-            throw error;
-        }
-    };

    // 初始化语言设置
    const initializeLanguage = async (): Promise<void> => {
@@ -586,8 +472,6 @@ export const useConfigStore = defineStore('config', () => {

        // 主题相关方法
        setSystemTheme,
-        updateCustomTheme,
-        setCustomTheme,

        // 字体大小操作
        ...adjusters.fontSize,
--- a/frontend/src/stores/themeStore.ts
+++ b/frontend/src/stores/themeStore.ts
@@ -1,6 +1,7 @@
 import {defineStore} from 'pinia';
 import {computed, reactive} from 'vue';
-import {SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
+import {SystemThemeType, ThemeType, ThemeColorConfig} from '@/../bindings/voidraft/internal/models/models';
+import {ThemeService} from '@/../bindings/voidraft/internal/services';
 import {useConfigStore} from './configStore';
 import {useEditorStore} from './editorStore';
 import {defaultDarkColors} from '@/views/editor/theme/dark';
@@ -24,16 +25,21 @@ export const useThemeStore = defineStore('theme', () => {
    configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
  );

-  // 初始化主题颜色 - 从配置加载
-  const initializeThemeColors = () => {
-    const customTheme = configStore.config?.appearance?.customTheme;
-    if (customTheme) {
-      if (customTheme.darkTheme) {
-        Object.assign(themeColors.darkTheme, customTheme.darkTheme);
+  // 初始化主题颜色 - 从数据库加载
+  const initializeThemeColors = async () => {
+    try {
+      const themes = await ThemeService.GetDefaultThemes();
+      if (themes.dark) {
+        Object.assign(themeColors.darkTheme, themes.dark.colors);
      }
-      if (customTheme.lightTheme) {
-        Object.assign(themeColors.lightTheme, customTheme.lightTheme);
+      if (themes.light) {
+        Object.assign(themeColors.lightTheme, themes.light.colors);
      }
+    } catch (error) {
+      console.warn('Failed to load themes from database, using defaults:', error);
+      // 如果数据库加载失败，使用默认主题
+      Object.assign(themeColors.darkTheme, defaultDarkColors);
+      Object.assign(themeColors.lightTheme, defaultLightColors);
    }
  };

@@ -46,10 +52,10 @@ export const useThemeStore = defineStore('theme', () => {
  };

  // 初始化主题
-  const initializeTheme = () => {
+  const initializeTheme = async () => {
    const theme = configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto;
    applyThemeToDOM(theme);
-    initializeThemeColors();
+    await initializeThemeColors();
  };

  // 设置主题
@@ -84,31 +90,35 @@ export const useThemeStore = defineStore('theme', () => {
    return hasChanges;
  };
  
-  // 保存主题颜色到配置
+  // 保存主题颜色到数据库
  const saveThemeColors = async () => {
-    const customTheme = {
-      darkTheme: { ...themeColors.darkTheme },
-      lightTheme: { ...themeColors.lightTheme }
-    };
-    
-    await configStore.setCustomTheme(customTheme);
+    try {
+      const darkColors = ThemeColorConfig.createFrom(themeColors.darkTheme);
+      const lightColors = ThemeColorConfig.createFrom(themeColors.lightTheme);
+      
+      await ThemeService.UpdateThemeColors(ThemeType.ThemeTypeDark, darkColors);
+      await ThemeService.UpdateThemeColors(ThemeType.ThemeTypeLight, lightColors);
+    } catch (error) {
+      console.error('Failed to save theme colors:', error);
+      throw error;
+    }
  };
  
  // 重置主题颜色
  const resetThemeColors = async (themeType: 'darkTheme' | 'lightTheme') => {
    try {
-      // 1. 更新内存中的颜色状态
+      const dbThemeType = themeType === 'darkTheme' ? ThemeType.ThemeTypeDark : ThemeType.ThemeTypeLight;
+      
+      // 1. 调用后端重置服务
+      await ThemeService.ResetThemeColors(dbThemeType);
+      
+      // 2. 更新内存中的颜色状态
      if (themeType === 'darkTheme') {
        Object.assign(themeColors.darkTheme, defaultDarkColors);
-      }
-      
-      if (themeType === 'lightTheme') {
+      } else {
        Object.assign(themeColors.lightTheme, defaultLightColors);
      }
      
-      // 2. 保存到配置
-      await saveThemeColors();
-      
      // 3. 刷新编辑器主题
      refreshEditorTheme();
      
--- a/frontend/src/views/settings/pages/AppearancePage.vue
+++ b/frontend/src/views/settings/pages/AppearancePage.vue
@@ -16,8 +16,8 @@ const themeStore = useThemeStore();

 // 添加临时颜色状态
 const tempColors = ref({
-  darkTheme: { ...configStore.config.appearance.customTheme?.darkTheme || defaultDarkColors },
-  lightTheme: { ...configStore.config.appearance.customTheme?.lightTheme || defaultLightColors }
+  darkTheme: { ...defaultDarkColors },
+  lightTheme: { ...defaultLightColors }
 });

 // 标记是否有未保存的更改
@@ -71,9 +71,9 @@ const currentThemeMode = computed(() => {
  return isDark ? 'dark' : 'light';
 });

-// 监听配置变更，更新临时颜色
+// 监听主题颜色变更，更新临时颜色
 watch(
-  () => configStore.config.appearance.customTheme,
+  () => themeStore.themeColors,
  (newValue) => {
    if (!hasUnsavedChanges.value) {
      tempColors.value = {