♻️ 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/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>