🐛 Fixed theme invalidation issue

frontend/src/stores/themeStore.ts

@@ -4,12 +4,11 @@ import {SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
 import {Type as ThemeType} from '@/../bindings/voidraft/internal/models/ent/theme/models';
 import {ThemeService} from '@/../bindings/voidraft/internal/services';
 import {useConfigStore} from './configStore';
-import {useEditorStore} from './editorStore';
 import type {ThemeColors} from '@/views/editor/theme/types';
 import {cloneThemeColors, FALLBACK_THEME_NAME, themePresetList, themePresetMap} from '@/views/editor/theme/presets';
 
 // 类型定义
-type ThemeOption = {name: string; type: ThemeType};
+type ThemeOption = { name: string; type: ThemeType };
 
 // 解析主题名称，确保返回有效的主题
 const resolveThemeName = (name?: string): string =>
@@ -62,15 +61,11 @@ export const useThemeStore = defineStore('theme', () => {
     // 从服务器获取主题颜色
     const fetchThemeColors = async (themeName: string): Promise<ThemeColors> => {
         const safeName = resolveThemeName(themeName);
-        try {
-            const theme = await ThemeService.GetThemeByName(safeName);
-            if (theme?.colors) {
-                const colors = cloneThemeColors(theme.colors as ThemeColors);
-                colors.themeName = safeName;
-                return colors;
-            }
-        } catch (error) {
-            console.error('Failed to load theme override:', error);
+        const theme = await ThemeService.GetThemeByName(safeName);
+        if (theme?.colors) {
+            const colors = cloneThemeColors(theme.colors as ThemeColors);
+            colors.themeName = safeName;
+            return colors;
         }
         return getPresetColors(safeName);
     };
@@ -80,21 +75,35 @@ export const useThemeStore = defineStore('theme', () => {
         const targetName = resolveThemeName(
             themeName || configStore.config?.appearance?.currentTheme
         );
+        currentColors.value = getPresetColors(targetName);
         currentColors.value = await fetchThemeColors(targetName);
+
+    };
+
+    // 获取可用的主题颜色
+    const getEffectiveColors = (): ThemeColors => {
+        const targetName = resolveThemeName(
+            currentColors.value?.themeName || configStore.config?.appearance?.currentTheme
+        );
+        return currentColors.value ?? getPresetColors(targetName);
+    };
+
+    // 同步应用到 DOM 与编辑器
+    const applyAllThemes = () => {
+        applyThemeToDOM(currentTheme.value);
     };
 
     // 初始化主题
     const initTheme = async () => {
         applyThemeToDOM(currentTheme.value);
         await loadThemeColors();
-        refreshEditorTheme();
+        applyAllThemes();
     };
 
     // 设置系统主题
     const setTheme = async (theme: SystemThemeType) => {
         await configStore.setSystemTheme(theme);
-        applyThemeToDOM(theme);
-        refreshEditorTheme();
+        applyAllThemes();
     };
 
     // 切换到指定主题
@@ -106,7 +115,7 @@ export const useThemeStore = defineStore('theme', () => {
 
         await loadThemeColors(themeName);
         await configStore.setCurrentTheme(themeName);
-        refreshEditorTheme();
+        applyAllThemes();
         return true;
     };
 
@@ -128,7 +137,7 @@ export const useThemeStore = defineStore('theme', () => {
         await ThemeService.UpdateTheme(themeName, currentColors.value);
 
         await loadThemeColors(themeName);
-        refreshEditorTheme();
+        applyAllThemes();
         return true;
     };
 
@@ -142,16 +151,10 @@ export const useThemeStore = defineStore('theme', () => {
         await ThemeService.ResetTheme(themeName);
 
         await loadThemeColors(themeName);
-        refreshEditorTheme();
+        applyAllThemes();
         return true;
     };
 
-    // 刷新编辑器主题
-    const refreshEditorTheme = () => {
-        applyThemeToDOM(currentTheme.value);
-        const editorStore = useEditorStore();
-        editorStore?.applyThemeSettings();
-    };
 
     return {
         availableThemes,
@@ -164,7 +167,8 @@ export const useThemeStore = defineStore('theme', () => {
         updateCurrentColors,
         saveCurrentTheme,
         resetCurrentTheme,
-        refreshEditorTheme,
         applyThemeToDOM,
+        applyAllThemes,
+        getEffectiveColors,
     };
 });

frontend/src/views/editor/basic/themeExtension.ts

@@ -9,15 +9,11 @@ export const themeCompartment = new Compartment();
 /**
  * 根据主题类型获取主题扩展
  */
-const getThemeExtension = (): Extension | null => {
+const getThemeExtension = (): Extension => {
   const themeStore = useThemeStore();
   
-  // 直接获取当前主题颜色配置
-  const colors = themeStore.currentColors;
-  
-  if (!colors) {
-    return null;
-  }
+  // 获取有效主题颜色
+  const colors = themeStore.getEffectiveColors();
 
   // 使用颜色配置创建主题
   return createThemeByColors(colors);
@@ -28,12 +24,6 @@ const getThemeExtension = (): Extension | null => {
  */
 export const createThemeExtension = (): Extension => {
   const extension = getThemeExtension();
-  
-  // 如果主题未加载，返回空扩展
-  if (!extension) {
-    return themeCompartment.of([]);
-  }
-  
   return themeCompartment.of(extension);
 };
 
@@ -48,11 +38,6 @@ export const updateEditorTheme = (view: EditorView): void => {
   try {
     const extension = getThemeExtension();
     
-    // 如果主题未加载，不更新
-    if (!extension) {
-      return;
-    }
-    
     view.dispatch({
       effects: themeCompartment.reconfigure(extension)
     });
@@ -60,4 +45,3 @@ export const updateEditorTheme = (view: EditorView): void => {
     console.error('Failed to update editor theme:', error);
   }
 };
-

frontend/src/views/settings/pages/AppearancePage.vue

@@ -133,16 +133,13 @@ const updateLocalColor = (colorKey: string, value: string) => {
 const applyChanges = async () => {
   try {
     if (!tempColors.value) return;
-    
+
     // 更新 store 中的颜色
     themeStore.updateCurrentColors(tempColors.value);
     
     // 保存到数据库
     await themeStore.saveCurrentTheme();
-    
-    // 刷新编辑器主题
-    themeStore.refreshEditorTheme();
-    
+
     // 清除未保存标记
     hasUnsavedChanges.value = false;
   } catch (error) {