♻️ Refactor theme module

2025-11-20 23:07:12 +08:00
parent 5584a46ca2
commit fc7c162e2f
8 changed files with 388 additions and 1465 deletions
--- a/frontend/src/stores/themeStore.ts
+++ b/frontend/src/stores/themeStore.ts
@@ -1,191 +1,156 @@
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
-import {SystemThemeType, ThemeType, Theme, ThemeColorConfig} 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 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 };
+
+const resolveThemeName = (name?: string) =>
+  name && themePresetMap[name] ? name : FALLBACK_THEME_NAME;
+
+const createThemeOptions = (type: ThemeType): ThemeOption[] =>
+  themePresetList
+    .filter(preset => preset.type === type)
+    .map(preset => ({ name: preset.name, type: preset.type }));
+
+const darkThemeOptions = createThemeOptions(ThemeType.ThemeTypeDark);
+const lightThemeOptions = createThemeOptions(ThemeType.ThemeTypeLight);
+
+const cloneColors = (colors: ThemeColorConfig): ThemeColors =>
+  JSON.parse(JSON.stringify(colors)) as ThemeColors;
+
+const getPresetColors = (name: string): ThemeColors => {
+  const preset = themePresetMap[name] ?? themePresetMap[FALLBACK_THEME_NAME];
+  const colors = cloneThemeColors(preset.colors);
+  colors.themeName = name;
+  return colors;
+};
+
+const fetchThemeColors = async (themeName: string): Promise<ThemeColors> => {
+  const safeName = resolveThemeName(themeName);
+  try {
+    const theme = await ThemeService.GetThemeByName(safeName);
+    if (theme?.colors) {
+      const colors = cloneColors(theme.colors);
+      colors.themeName = safeName;
+      return colors;
+    }
+  } catch (error) {
+    console.error('Failed to load theme override:', error);
+  }
+  return getPresetColors(safeName);
+};

-/**
- * 主题管理 Store
- * 职责：管理主题状态、颜色配置和预设主题列表
- */
 export const useThemeStore = defineStore('theme', () => {
  const configStore = useConfigStore();
-  
-  // 所有主题列表
-  const allThemes = ref<Theme[]>([]);
-  
-  // 当前主题的颜色配置
  const currentColors = ref<ThemeColors | null>(null);
-  
-  // 计算属性：当前系统主题模式
-  const currentTheme = computed(() => 
-    configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
+
+  const currentTheme = computed(
+    () => configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
  );

-  // 计算属性：当前是否为深色模式
-  const isDarkMode = computed(() => 
-    currentTheme.value === SystemThemeType.SystemThemeDark || 
-    (currentTheme.value === SystemThemeType.SystemThemeAuto && 
-     window.matchMedia('(prefers-color-scheme: dark)').matches)
+  const isDarkMode = computed(
+    () =>
+      currentTheme.value === SystemThemeType.SystemThemeDark ||
+      (currentTheme.value === SystemThemeType.SystemThemeAuto &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
  );

-  // 计算属性：根据类型获取主题列表
-  const darkThemes = computed(() => 
-    allThemes.value.filter(t => t.type === ThemeType.ThemeTypeDark)
-  );
-  
-  const lightThemes = computed(() => 
-    allThemes.value.filter(t => t.type === ThemeType.ThemeTypeLight)
-  );
-  
-  // 计算属性：当前可用的主题列表
-  const availableThemes = computed(() => 
-    isDarkMode.value ? darkThemes.value : lightThemes.value
+  const availableThemes = computed<ThemeOption[]>(() =>
+    isDarkMode.value ? darkThemeOptions : lightThemeOptions
  );

-  // 应用主题到 DOM
  const applyThemeToDOM = (theme: SystemThemeType) => {
    const themeMap = {
      [SystemThemeType.SystemThemeAuto]: 'auto',
      [SystemThemeType.SystemThemeDark]: 'dark',
-      [SystemThemeType.SystemThemeLight]: 'light'
+      [SystemThemeType.SystemThemeLight]: 'light',
    };
    document.documentElement.setAttribute('data-theme', themeMap[theme]);
  };

-  // 从数据库加载所有主题
-  const loadAllThemes = async () => {
-    try {
-      const themes = await ThemeService.GetAllThemes();
-      allThemes.value = (themes || []).filter((t): t is Theme => t !== null);
-      return allThemes.value;
-    } catch (error) {
-      console.error('Failed to load themes from database:', error);
-      allThemes.value = [];
-      return [];
-    }
+  const loadThemeColors = async (themeName?: string) => {
+    const targetName = resolveThemeName(
+      themeName || configStore.config?.appearance?.currentTheme
+    );
+    currentColors.value = await fetchThemeColors(targetName);
  };

-  // 初始化主题颜色
-  const initThemeColors = async () => {
-    // 加载所有主题
-    await loadAllThemes();
-    
-    // 从配置获取当前主题名称并加载
-    const currentThemeName = configStore.config?.appearance?.currentTheme || 'default-dark';
-    
-    const theme = allThemes.value.find(t => t.name === currentThemeName);
-
-    if (!theme) {
-      console.error(`Theme not found: ${currentThemeName}`);
-      return;
-    }
-
-    // 直接设置当前主题颜色
-    currentColors.value = theme.colors as ThemeColors;
-  };
-
-  // 初始化主题
  const initializeTheme = async () => {
-    const theme = currentTheme.value;
-    applyThemeToDOM(theme);
-    await initThemeColors();
+    applyThemeToDOM(currentTheme.value);
+    await loadThemeColors();
  };

-  // 设置系统主题模式（深色/浅色/自动）
  const setTheme = async (theme: SystemThemeType) => {
    await configStore.setSystemTheme(theme);
    applyThemeToDOM(theme);
    refreshEditorTheme();
  };
-  
-  // 切换到指定的预设主题
+
  const switchToTheme = async (themeName: string) => {
-    const theme = allThemes.value.find(t => t.name === themeName);
-    if (!theme) {
+    if (!themePresetMap[themeName]) {
      console.error('Theme not found:', themeName);
      return false;
    }

-    // 直接设置当前主题颜色
-    currentColors.value = theme.colors as ThemeColors;
-    
-    // 持久化到配置
+    await loadThemeColors(themeName);
    await configStore.setCurrentTheme(themeName);
-    
-    // 刷新编辑器
    refreshEditorTheme();
    return true;
  };
-  
-  // 更新当前主题的颜色配置
+
  const updateCurrentColors = (colors: Partial<ThemeColors>) => {
    if (!currentColors.value) return;
    Object.assign(currentColors.value, colors);
  };
-  
-  // 保存当前主题颜色到数据库
+
  const saveCurrentTheme = async () => {
    if (!currentColors.value) {
      throw new Error('No theme selected');
    }

-    const theme = allThemes.value.find(t => t.name === currentColors.value!.themeName);
-    if (!theme) {
-      throw new Error('Theme not found');
-    }
-    
-    await ThemeService.UpdateTheme(theme.id, currentColors.value as ThemeColorConfig);
+    const themeName = resolveThemeName(currentColors.value.themeName);
+    currentColors.value.themeName = themeName;
+
+    await ThemeService.UpdateTheme(themeName, currentColors.value as unknown as ThemeColorConfig);
+
+    await loadThemeColors(themeName);
+    refreshEditorTheme();
    return true;
  };
-  
-  // 重置当前主题为预设配置
+
  const resetCurrentTheme = async () => {
    if (!currentColors.value) {
      throw new Error('No theme selected');
    }
-    
-    // 调用后端重置
-    await ThemeService.ResetTheme(0, currentColors.value.themeName);
-    
-    // 重新加载所有主题
-    await loadAllThemes();

-    const updatedTheme = allThemes.value.find(t => t.name === currentColors.value!.themeName);
-    
-    if (updatedTheme) {
-      currentColors.value = updatedTheme.colors as ThemeColors;
-    }
-    
+    const themeName = resolveThemeName(currentColors.value.themeName);
+    await ThemeService.ResetTheme(themeName);
+
+    await loadThemeColors(themeName);
    refreshEditorTheme();
    return true;
  };
-  
-  // 刷新编辑器主题
+
  const refreshEditorTheme = () => {
    applyThemeToDOM(currentTheme.value);
-    
+
    const editorStore = useEditorStore();
    editorStore?.applyThemeSettings();
  };

  return {
-    // 状态
-    allThemes,
-    darkThemes,
-    lightThemes,
    availableThemes,
    currentTheme,
    currentColors,
    isDarkMode,
-    
-    // 方法
    setTheme,
    switchToTheme,
    initializeTheme,
-    loadAllThemes,
    updateCurrentColors,
    saveCurrentTheme,
    resetCurrentTheme,
--- a/frontend/src/views/editor/theme/presets.ts
+++ b/frontend/src/views/editor/theme/presets.ts
@@ -0,0 +1,52 @@
+import type {ThemeColors} from './types';
+import {ThemeType} from '@/../bindings/voidraft/internal/models/models';
+import {defaultDarkColors} from './dark/default-dark';
+import {defaultLightColors} from './light/default-light';
+import {config as draculaColors} from './dark/dracula';
+import {config as auraColors} from './dark/aura';
+import {config as githubDarkColors} from './dark/github-dark';
+import {config as materialDarkColors} from './dark/material-dark';
+import {config as oneDarkColors} from './dark/one-dark';
+import {config as solarizedDarkColors} from './dark/solarized-dark';
+import {config as tokyoNightColors} from './dark/tokyo-night';
+import {config as tokyoNightStormColors} from './dark/tokyo-night-storm';
+import {config as githubLightColors} from './light/github-light';
+import {config as materialLightColors} from './light/material-light';
+import {config as solarizedLightColors} from './light/solarized-light';
+import {config as tokyoNightDayColors} from './light/tokyo-night-day';
+
+export interface ThemePreset {
+    name: string;
+    type: ThemeType;
+    colors: ThemeColors;
+}
+
+export const FALLBACK_THEME_NAME = defaultDarkColors.themeName;
+
+export const themePresetList: ThemePreset[] = [
+    {name: defaultDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: defaultDarkColors},
+    {name: draculaColors.themeName, type: ThemeType.ThemeTypeDark, colors: draculaColors},
+    {name: auraColors.themeName, type: ThemeType.ThemeTypeDark, colors: auraColors},
+    {name: githubDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: githubDarkColors},
+    {name: materialDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: materialDarkColors},
+    {name: oneDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: oneDarkColors},
+    {name: solarizedDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: solarizedDarkColors},
+    {name: tokyoNightColors.themeName, type: ThemeType.ThemeTypeDark, colors: tokyoNightColors},
+    {name: tokyoNightStormColors.themeName, type: ThemeType.ThemeTypeDark, colors: tokyoNightStormColors},
+    {name: defaultLightColors.themeName, type: ThemeType.ThemeTypeLight, colors: defaultLightColors},
+    {name: githubLightColors.themeName, type: ThemeType.ThemeTypeLight, colors: githubLightColors},
+    {name: materialLightColors.themeName, type: ThemeType.ThemeTypeLight, colors: materialLightColors},
+    {name: solarizedLightColors.themeName, type: ThemeType.ThemeTypeLight, colors: solarizedLightColors},
+    {name: tokyoNightDayColors.themeName, type: ThemeType.ThemeTypeLight, colors: tokyoNightDayColors},
+];
+
+export const themePresetMap: Record<string, ThemePreset> = themePresetList.reduce(
+    (map, preset) => {
+        map[preset.name] = preset;
+        return map;
+    },
+    {} as Record<string, ThemePreset>
+);
+
+export const cloneThemeColors = (colors: ThemeColors): ThemeColors =>
+    JSON.parse(JSON.stringify(colors)) as ThemeColors;
--- a/frontend/src/views/settings/pages/AppearancePage.vue
+++ b/frontend/src/views/settings/pages/AppearancePage.vue
@@ -2,7 +2,7 @@
 import { useConfigStore } from '@/stores/configStore';
 import { useThemeStore } from '@/stores/themeStore';
 import { useI18n } from 'vue-i18n';
-import { computed, watch, onMounted, ref } from 'vue';
+import { computed, watch, onMounted, ref, nextTick } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import SettingItem from '../components/SettingItem.vue';
 import { SystemThemeType, LanguageType } from '@/../bindings/voidraft/internal/models/models';
@@ -50,7 +50,10 @@ const resetButtonState = ref({

 // 当前选中的主题名称
 const currentThemeName = computed({
-  get: () => themeStore.currentColors?.name || '',
+  get: () =>
+    themeStore.currentColors?.themeName ||
+    configStore.config.appearance.currentTheme ||
+    '',
  set: async (themeName: string) => {
    await themeStore.switchToTheme(themeName);
    syncTempColors();
@@ -89,21 +92,39 @@ onMounted(() => {
 // 从 ThemeColors 接口自动提取所有颜色字段
 const colorKeys = computed(() => {
  if (!tempColors.value) return [];
-  
-  // 获取所有字段，排除 name 和 dark（这两个是元数据）
-  return Object.keys(tempColors.value).filter(key => 
-    key !== 'name' && key !== 'dark'
-  );
+
+  return Object.keys(tempColors.value)
+    .filter(key => key !== 'themeName' && key !== 'dark')
+    .sort((a, b) => a.localeCompare(b));
 });

-// 颜色配置列表
-const colorList = computed(() => 
+const colorList = computed(() =>
  colorKeys.value.map(colorKey => ({
    key: colorKey,
-    label: t(`settings.themeColors.${colorKey}`)
+    label: colorKey
  }))
 );

+const colorSearch = ref('');
+const showSearch = ref(false);
+const searchInputRef = ref<HTMLInputElement | null>(null);
+
+const filteredColorList = computed(() => {
+  const keyword = colorSearch.value.trim().toLowerCase();
+  if (!keyword) return colorList.value;
+  return colorList.value.filter(color => color.key.toLowerCase().includes(keyword));
+});
+
+const toggleSearch = async () => {
+  showSearch.value = !showSearch.value;
+  if (showSearch.value) {
+    await nextTick();
+    searchInputRef.value?.focus();
+  } else {
+    colorSearch.value = '';
+  }
+};
+
 // 处理重置按钮点击
 const handleResetClick = () => {
  if (resetButtonState.value.confirming) {
@@ -193,7 +214,7 @@ const updateSystemTheme = async (event: Event) => {
  await themeStore.setTheme(selectedSystemTheme);
  
  const availableThemes = themeStore.availableThemes;
-  const currentThemeName = currentColors.value?.name;
+  const currentThemeName = currentColors.value?.themeName;
  const isCurrentThemeAvailable = availableThemes.some(t => t.name === currentThemeName);
  
  if (!isCurrentThemeAvailable && availableThemes.length > 0) {
@@ -242,7 +263,7 @@ const handlePickerClose = () => {
      <!-- 预设主题选择 -->
      <SettingItem :title="t('settings.presetTheme')">
        <select class="select-input" v-model="currentThemeName" :disabled="hasUnsavedChanges">
-          <option v-for="theme in themeStore.availableThemes" :key="theme.id" :value="theme.name">
+          <option v-for="theme in themeStore.availableThemes" :key="theme.name" :value="theme.name">
            {{ theme.name }}
          </option>
        </select>
@@ -251,14 +272,27 @@ const handlePickerClose = () => {

    <!-- 自定义主题颜色配置 -->
    <SettingSection :title="t('settings.customThemeColors')">
-      <template #title>
-        <div class="theme-section-title">
-          <span class="section-title-text">{{ t('settings.customThemeColors') }}</span>
-          <span v-if="currentColors.name" class="current-theme-name">{{ currentColors.name }}</span>
-        </div>
-      </template>
      <template #title-right>
        <div class="theme-controls">
+          <div :class="['theme-search-wrapper', showSearch ? 'active' : '']">
+            <input
+              ref="searchInputRef"
+              class="theme-search-input"
+              type="text"
+              v-model="colorSearch"
+              placeholder="Search..."
+            />
+          </div>
+          <button class="search-toggle-button" @click="toggleSearch" :title="showSearch ? '关闭搜索' : '搜索颜色'">
+            <svg v-if="!showSearch" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <path d="m21 21-4.35-4.35"></path>
+            </svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
          <button 
            v-if="!hasUnsavedChanges" 
            :class="['reset-button', resetButtonState.confirming ? 'reset-button-confirming' : '']" 
@@ -280,7 +314,7 @@ const handlePickerClose = () => {
      <!-- 颜色列表 -->
      <div class="color-list">
        <SettingItem 
-          v-for="color in colorList" 
+          v-for="color in filteredColorList" 
          :key="color.key" 
          :title="color.label"
          class="color-setting-item"
@@ -318,10 +352,6 @@ const handlePickerClose = () => {
 </template>

 <style scoped lang="scss">
-.settings-page {
-  //max-width: 1000px;
-}
-
 .select-input {
  min-width: 140px;
  padding: 6px 10px;
@@ -349,27 +379,6 @@ const handlePickerClose = () => {
  }
 }

-// 主题部分标题
-.theme-section-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.section-title-text {
-  font-weight: 500;
-}
-
-.current-theme-name {
-  font-size: 13px;
-  color: var(--settings-text-secondary);
-  font-weight: normal;
-  padding: 2px 8px;
-  background-color: var(--settings-input-bg);
-  border: 1px solid var(--settings-input-border);
-  border-radius: 4px;
-}
-
 // 主题控制区域
 .theme-controls {
  display: flex;
@@ -441,6 +450,78 @@ const handlePickerClose = () => {
  margin-top: 12px;
 }

+.theme-search-wrapper {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.3s ease;
+  opacity: 0;
+}
+
+.theme-search-wrapper.active {
+  width: 150px;
+  margin-right: 8px;
+  opacity: 1;
+}
+
+.theme-search-input {
+  width: 100%;
+  padding: 6px 12px;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 20px;
+  background-color: var(--settings-input-bg);
+  color: var(--settings-text);
+  font-size: 12px;
+  transition: all 0.2s ease;
+  height: 25px;
+  box-sizing: border-box;
+  
+  &:focus {
+    outline: none;
+    border-color: #4a9eff;
+    background-color: var(--settings-card-bg);
+    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
+  }
+  
+  &::placeholder {
+    color: var(--settings-text-secondary);
+    opacity: 0.6;
+  }
+}
+
+.search-toggle-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  margin-right: 8px;
+  padding: 0;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 50%;
+  background-color: var(--settings-button-bg);
+  color: var(--settings-button-text);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  svg {
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #4a9eff;
+    background-color: var(--settings-button-hover-bg);
+    transform: scale(1.05);
+    
+    svg {
+      transform: scale(1.1);
+    }
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
 .color-setting-item {
  :deep(.setting-item-content) {
    align-items: center;
@@ -495,4 +576,4 @@ const handlePickerClose = () => {
    color: var(--settings-text-secondary);
  }
 }
-</style>
+</style>
--- a/frontend/src/views/settings/pages/EditingPage.vue
+++ b/frontend/src/views/settings/pages/EditingPage.vue
@@ -19,16 +19,17 @@ onMounted(async () => {

 // 字体选择选项
 const fontFamilyOptions = computed(() => configStore.fontOptions);
-const currentFontFamily = computed(() => configStore.config.editing.fontFamily);
-
-// 字体选择
-const handleFontFamilyChange = async (event: Event) => {
-  const target = event.target as HTMLSelectElement;
-  const fontFamily = target.value;
-  if (fontFamily) {
-    await configStore.setFontFamily(fontFamily);
+const fontFamilyModel = computed({
+  get: () =>
+    configStore.config.editing.fontFamily ||
+    fontFamilyOptions.value[0]?.value ||
+    '',
+  set: async (fontFamily: string) => {
+    if (fontFamily) {
+      await configStore.setFontFamily(fontFamily);
+    }
  }
-};
+});

 // 字体粗细选项
 const fontWeightOptions = [
@@ -44,10 +45,14 @@ const fontWeightOptions = [
 ];

 // 字体粗细选择
-const handleFontWeightChange = async (event: Event) => {
-  const target = event.target as HTMLSelectElement;
-  await configStore.setFontWeight(target.value);
-};
+const fontWeightModel = computed({
+  get: () => configStore.config.editing.fontWeight || fontWeightOptions[0].value,
+  set: async (value: string) => {
+    if (value) {
+      await configStore.setFontWeight(value);
+    }
+  }
+});

 // 行高控制
 const increaseLineHeight = async () => {
@@ -118,8 +123,7 @@ const handleAutoSaveDelayChange = async (event: Event) => {
      >
        <select 
          class="font-family-select" 
-          :value="currentFontFamily"
-          @change="handleFontFamilyChange"
+          v-model="fontFamilyModel"
        >
          <option 
            v-for="option in fontFamilyOptions" 
@@ -146,8 +150,7 @@ const handleAutoSaveDelayChange = async (event: Event) => {
      >
        <select 
          class="font-weight-select" 
-          :value="configStore.config.editing.fontWeight"
-          @change="handleFontWeightChange"
+          v-model="fontWeightModel"
        >
          <option 
            v-for="option in fontWeightOptions" 
@@ -385,4 +388,4 @@ const handleAutoSaveDelayChange = async (event: Event) => {
    transform: none;
  }
 }
-</style>
+</style>