From aa8139884b3001ce2f15ee61b442f236ca88da7f Mon Sep 17 00:00:00 2001 From: landaiqing Date: Mon, 20 Oct 2025 21:58:37 +0800 Subject: [PATCH] :art: Optimize preset theme code --- .../voidraft/internal/models/models.ts | 8 + .../internal/services/themeservice.ts | 47 +--- frontend/src/common/constant/config.ts | 6 +- frontend/src/stores/configStore.ts | 6 + frontend/src/stores/editorStore.ts | 8 +- frontend/src/stores/themeStore.ts | 242 ++++++------------ .../src/views/editor/basic/themeExtension.ts | 25 +- frontend/src/views/editor/theme/dark/aura.ts | 2 +- .../src/views/editor/theme/dark/dracula.ts | 2 +- .../views/editor/theme/dark/github-dark.ts | 2 +- .../views/editor/theme/dark/material-dark.ts | 2 +- .../src/views/editor/theme/dark/one-dark.ts | 2 +- .../views/editor/theme/dark/solarized-dark.ts | 2 +- .../editor/theme/dark/tokyo-night-storm.ts | 2 +- .../views/editor/theme/dark/tokyo-night.ts | 2 +- frontend/src/views/editor/theme/index.ts | 12 + .../views/editor/theme/light/github-light.ts | 2 +- .../editor/theme/light/material-light.ts | 2 +- .../editor/theme/light/solarized-light.ts | 2 +- .../editor/theme/light/tokyo-night-day.ts | 2 +- frontend/src/views/editor/theme/registry.ts | 59 ----- .../settings/components/SettingSection.vue | 6 +- .../views/settings/pages/AppearancePage.vue | 84 +++--- internal/models/config.go | 10 +- internal/models/theme.go | 24 +- internal/services/theme_service.go | 149 +++-------- 26 files changed, 245 insertions(+), 465 deletions(-) create mode 100644 frontend/src/views/editor/theme/index.ts delete mode 100644 frontend/src/views/editor/theme/registry.ts diff --git a/frontend/bindings/voidraft/internal/models/models.ts b/frontend/bindings/voidraft/internal/models/models.ts index 29be623..b4dc1be 100644 --- a/frontend/bindings/voidraft/internal/models/models.ts +++ b/frontend/bindings/voidraft/internal/models/models.ts @@ -110,6 +110,11 @@ export class AppearanceConfig { */ "systemTheme": SystemThemeType; + /** + * 当前选择的预设主题名称 + */ + "currentTheme": string; + /** Creates a new AppearanceConfig instance. */ constructor($$source: Partial = {}) { if (!("language" in $$source)) { @@ -118,6 +123,9 @@ export class AppearanceConfig { if (!("systemTheme" in $$source)) { this["systemTheme"] = ("" as SystemThemeType); } + if (!("currentTheme" in $$source)) { + this["currentTheme"] = ""; + } Object.assign(this, $$source); } diff --git a/frontend/bindings/voidraft/internal/services/themeservice.ts b/frontend/bindings/voidraft/internal/services/themeservice.ts index c4adde1..92b8bc5 100644 --- a/frontend/bindings/voidraft/internal/services/themeservice.ts +++ b/frontend/bindings/voidraft/internal/services/themeservice.ts @@ -17,18 +17,6 @@ import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/applic // @ts-ignore: Unused imports import * as models$0 from "../models/models.js"; -/** - * CreateTheme 创建新主题 - */ -export function CreateTheme(theme: models$0.Theme | null): Promise & { cancel(): void } { - let $resultPromise = $Call.ByID(3274757686, theme) as any; - let $typingPromise = $resultPromise.then(($result: any) => { - return $$createType1($result); - }) as any; - $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise); - return $typingPromise; -} - /** * GetAllThemes 获取所有主题 */ @@ -42,10 +30,11 @@ export function GetAllThemes(): Promise<(models$0.Theme | null)[]> & { cancel(): } /** - * GetThemeByID 根据ID获取主题 + * GetThemeByID 根据ID或名称获取主题 + * 如果 id > 0，按ID查询；如果 id = 0，按名称查询 */ -export function GetThemeByID(id: number): Promise & { cancel(): void } { - let $resultPromise = $Call.ByID(3053137052, id) as any; +export function GetThemeByIdOrName(id: number, ...name: string[]): Promise & { cancel(): void } { + let $resultPromise = $Call.ByID(127385338, id, name) as any; let $typingPromise = $resultPromise.then(($result: any) => { return $$createType1($result); }) as any; @@ -53,35 +42,11 @@ export function GetThemeByID(id: number): Promise & { can return $typingPromise; } -/** - * GetThemeByType 根据类型获取默认主题 - */ -export function GetThemeByType(themeType: models$0.ThemeType): Promise & { cancel(): void } { - let $resultPromise = $Call.ByID(1680465265, themeType) as any; - let $typingPromise = $resultPromise.then(($result: any) => { - return $$createType1($result); - }) as any; - $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise); - return $typingPromise; -} - -/** - * GetThemesByType 根据类型获取所有主题 - */ -export function GetThemesByType(themeType: models$0.ThemeType): Promise<(models$0.Theme | null)[]> & { cancel(): void } { - let $resultPromise = $Call.ByID(1478417492, themeType) as any; - let $typingPromise = $resultPromise.then(($result: any) => { - return $$createType2($result); - }) as any; - $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise); - return $typingPromise; -} - /** * ResetTheme 重置主题为预设配置 */ -export function ResetTheme(id: number): Promise & { cancel(): void } { - let $resultPromise = $Call.ByID(1806334457, id) as any; +export function ResetTheme(id: number, ...name: string[]): Promise & { cancel(): void } { + let $resultPromise = $Call.ByID(1806334457, id, name) as any; return $resultPromise; } diff --git a/frontend/src/common/constant/config.ts b/frontend/src/common/constant/config.ts index f76b1bc..3f19326 100644 --- a/frontend/src/common/constant/config.ts +++ b/frontend/src/common/constant/config.ts @@ -62,7 +62,8 @@ export const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = { export const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = { language: 'appearance.language', - systemTheme: 'appearance.systemTheme' + systemTheme: 'appearance.systemTheme', + currentTheme: 'appearance.currentTheme' } as const; export const UPDATES_CONFIG_KEY_MAP: UpdatesConfigKeyMap = { @@ -128,7 +129,8 @@ export const DEFAULT_CONFIG: AppConfig = { }, appearance: { language: LanguageType.LangZhCN, - systemTheme: SystemThemeType.SystemThemeAuto + systemTheme: SystemThemeType.SystemThemeAuto, + currentTheme: 'default-dark' }, updates: { version: "1.0.0", diff --git a/frontend/src/stores/configStore.ts b/frontend/src/stores/configStore.ts index 3da39f5..e0879d4 100644 --- a/frontend/src/stores/configStore.ts +++ b/frontend/src/stores/configStore.ts @@ -204,6 +204,11 @@ export const useConfigStore = defineStore('config', () => { await updateAppearanceConfig('systemTheme', systemTheme); }; + // 当前主题设置方法 + const setCurrentTheme = async (themeName: string): Promise => { + await updateAppearanceConfig('currentTheme', themeName); + }; + // 初始化语言设置 const initializeLanguage = async (): Promise => { @@ -268,6 +273,7 @@ export const useConfigStore = defineStore('config', () => { // 主题相关方法 setSystemTheme, + setCurrentTheme, // 字体大小操作 ...adjusters.fontSize, diff --git a/frontend/src/stores/editorStore.ts b/frontend/src/stores/editorStore.ts index 97f48d6..b5811cf 100644 --- a/frontend/src/stores/editorStore.ts +++ b/frontend/src/stores/editorStore.ts @@ -125,9 +125,7 @@ export const useEditorStore = defineStore('editor', () => { const basicExtensions = createBasicSetup(); // 获取主题扩展 - const themeExtension = createThemeExtension( - configStore.config.appearance.systemTheme || SystemThemeType.SystemThemeAuto - ); + const themeExtension = createThemeExtension(); // Tab相关扩展 const tabExtensions = getTabExtensions( @@ -504,9 +502,7 @@ export const useEditorStore = defineStore('editor', () => { // 应用主题设置 const applyThemeSettings = () => { editorCache.values().forEach(instance => { - updateEditorTheme(instance.view, - themeStore.currentTheme || SystemThemeType.SystemThemeAuto - ); + updateEditorTheme(instance.view); }); }; diff --git a/frontend/src/stores/themeStore.ts b/frontend/src/stores/themeStore.ts index c7d0ad5..68aa04f 100644 --- a/frontend/src/stores/themeStore.ts +++ b/frontend/src/stores/themeStore.ts @@ -1,11 +1,10 @@ import { defineStore } from 'pinia'; -import { computed, reactive, ref } from 'vue'; +import { computed, ref } from 'vue'; import {SystemThemeType, ThemeType, Theme, 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 { getThemeConfig } from '@/views/editor/theme/registry'; /** * 主题管理 Store @@ -14,29 +13,24 @@ import { getThemeConfig } from '@/views/editor/theme/registry'; export const useThemeStore = defineStore('theme', () => { const configStore = useConfigStore(); - // 所有主题列表（从数据库加载） + // 所有主题列表 const allThemes = ref([]); - // 当前选中的主题 ID - const currentThemeIds = reactive({ - dark: 0, // 当前深色主题ID - light: 0, // 当前浅色主题ID - }); - - // 当前主题的颜色配置（用于编辑器渲染） - const currentColors = reactive<{ - dark: ThemeColors | null; - light: ThemeColors | null; - }>({ - dark: null, - light: null, - }); + // 当前主题的颜色配置 + const currentColors = ref(null); // 计算属性：当前系统主题模式 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 darkThemes = computed(() => allThemes.value.filter(t => t.type === ThemeType.ThemeTypeDark) @@ -46,14 +40,10 @@ export const useThemeStore = defineStore('theme', () => { allThemes.value.filter(t => t.type === ThemeType.ThemeTypeLight) ); - // 计算属性：获取当前激活的主题对象 - const activeTheme = computed(() => { - const isDark = currentTheme.value === SystemThemeType.SystemThemeDark || - (currentTheme.value === SystemThemeType.SystemThemeAuto && - window.matchMedia('(prefers-color-scheme: dark)').matches); - - return isDark ? currentColors.dark : currentColors.light; - }); + // 计算属性：当前可用的主题列表 + const availableThemes = computed(() => + isDarkMode.value ? darkThemes.value : lightThemes.value + ); // 应用主题到 DOM const applyThemeToDOM = (theme: SystemThemeType) => { @@ -77,66 +67,24 @@ export const useThemeStore = defineStore('theme', () => { return []; } }; - - // 根据主题对象加载颜色配置 - const loadThemeColors = (theme: Theme): ThemeColors => { - // 优先使用数据库中的颜色配置 - const dbColors = theme.colors as unknown as ThemeColors; - - // 如果数据库颜色不完整，尝试从预设主题获取 - if (!dbColors || Object.keys(dbColors).length < 10) { - const presetConfig = getThemeConfig(theme.name); - if (presetConfig) { - return presetConfig; - } - } - - return dbColors; - }; - // 初始化主题颜色（加载默认主题） + // 初始化主题颜色 const initializeThemeColors = async () => { - try { - // 加载所有主题 - await loadAllThemes(); - - // 查找默认主题 - const defaultDark = allThemes.value.find( - t => t.type === ThemeType.ThemeTypeDark && t.isDefault - ); - const defaultLight = allThemes.value.find( - t => t.type === ThemeType.ThemeTypeLight && t.isDefault - ); - - // 设置默认主题 - if (defaultDark) { - currentThemeIds.dark = defaultDark.id; - currentColors.dark = loadThemeColors(defaultDark); - } - - if (defaultLight) { - currentThemeIds.light = defaultLight.id; - currentColors.light = loadThemeColors(defaultLight); - } - - // 如果没有找到默认主题，使用第一个可用主题 - if (!currentColors.dark && darkThemes.value.length > 0) { - const fallback = darkThemes.value[0]; - currentThemeIds.dark = fallback.id; - currentColors.dark = loadThemeColors(fallback); - } - - if (!currentColors.light && lightThemes.value.length > 0) { - const fallback = lightThemes.value[0]; - currentThemeIds.light = fallback.id; - currentColors.light = loadThemeColors(fallback); - } - } catch (error) { - console.error('Failed to initialize theme colors:', error); - // 使用预设主题作为后备 - currentColors.dark = getThemeConfig('default-dark'); - currentColors.light = getThemeConfig('default-light'); + // 加载所有主题 + 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; }; // 初始化主题 @@ -153,98 +101,66 @@ export const useThemeStore = defineStore('theme', () => { refreshEditorTheme(); }; - // 切换到指定的预设主题（通过主题ID） - const switchToTheme = async (themeId: number) => { - try { - const theme = allThemes.value.find(t => t.id === themeId); - if (!theme) { - console.error('Theme not found:', themeId); - return false; - } - - // 加载主题颜色 - const colors = loadThemeColors(theme); - - // 根据主题类型更新对应的颜色配置 - if (theme.type === ThemeType.ThemeTypeDark) { - currentThemeIds.dark = themeId; - currentColors.dark = colors; - } else { - currentThemeIds.light = themeId; - currentColors.light = colors; - } - - // 刷新编辑器主题 - refreshEditorTheme(); - return true; - } catch (error) { - console.error('Failed to switch theme:', error); + // 切换到指定的预设主题 + const switchToTheme = async (themeName: string) => { + const theme = allThemes.value.find(t => t.name === themeName); + if (!theme) { + console.error('Theme not found:', themeName); return false; } + + // 直接设置当前主题颜色 + currentColors.value = theme.colors as ThemeColors; + + // 持久化到配置 + await configStore.setCurrentTheme(themeName); + + // 刷新编辑器 + refreshEditorTheme(); + return true; }; // 更新当前主题的颜色配置 - const updateCurrentColors = (colors: Partial, isDark: boolean) => { - const target = isDark ? currentColors.dark : currentColors.light; - if (!target) return; - - Object.assign(target, colors); + const updateCurrentColors = (colors: Partial) => { + if (!currentColors.value) return; + Object.assign(currentColors.value, colors); }; // 保存当前主题颜色到数据库 - const saveCurrentTheme = async (isDark: boolean) => { - try { - const themeId = isDark ? currentThemeIds.dark : currentThemeIds.light; - const colors = isDark ? currentColors.dark : currentColors.light; - - if (!themeId || !colors) { - throw new Error('No theme selected'); - } - - // 转换为数据库格式并保存 - const dbColors = colors as ThemeColorConfig; // ThemeColorConfig from bindings - await ThemeService.UpdateTheme(themeId, dbColors); - - return true; - } catch (error) { - console.error('Failed to save theme:', error); - throw error; + const saveCurrentTheme = async () => { + if (!currentColors.value) { + throw new Error('No theme selected'); } + + const theme = allThemes.value.find(t => t.name === currentColors.value!.name); + if (!theme) { + throw new Error('Theme not found'); + } + + await ThemeService.UpdateTheme(theme.id, currentColors.value as ThemeColorConfig); + return true; }; // 重置当前主题为预设配置 - const resetCurrentTheme = async (isDark: boolean) => { - try { - const themeId = isDark ? currentThemeIds.dark : currentThemeIds.light; - - if (!themeId) { - throw new Error('No theme selected'); - } - - // 调用后端重置服务 - await ThemeService.ResetTheme(themeId); - - // 重新加载主题 - await loadAllThemes(); - const theme = allThemes.value.find(t => t.id === themeId); - - if (theme) { - const colors = loadThemeColors(theme); - if (isDark) { - currentColors.dark = colors; - } else { - currentColors.light = colors; - } - } - - // 刷新编辑器主题 - refreshEditorTheme(); - - return true; - } catch (error) { - console.error('Failed to reset theme:', error); - return false; + const resetCurrentTheme = async () => { + if (!currentColors.value) { + throw new Error('No theme selected'); } + + // 调用后端重置 + await ThemeService.ResetTheme(0, currentColors.value.name); + + // 重新加载所有主题 + await loadAllThemes(); + + const updatedTheme = allThemes.value.find(t => t.name === currentColors.value!.name); + + if (updatedTheme) { + currentColors.value = updatedTheme.colors as ThemeColors; + } + + refreshEditorTheme(); + return true; }; // 刷新编辑器主题 @@ -260,10 +176,10 @@ export const useThemeStore = defineStore('theme', () => { allThemes, darkThemes, lightThemes, + availableThemes, currentTheme, - currentThemeIds, currentColors, - activeTheme, + isDarkMode, // 方法 setTheme, diff --git a/frontend/src/views/editor/basic/themeExtension.ts b/frontend/src/views/editor/basic/themeExtension.ts index 745511e..a2cba19 100644 --- a/frontend/src/views/editor/basic/themeExtension.ts +++ b/frontend/src/views/editor/basic/themeExtension.ts @@ -1,7 +1,6 @@ import { Extension, Compartment } from '@codemirror/state'; import { EditorView } from '@codemirror/view'; -import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models'; -import { createThemeByColors } from '@/views/editor/theme/registry'; +import { createThemeByColors } from '@/views/editor/theme'; import { useThemeStore } from '@/stores/themeStore'; // 主题区间 - 用于动态切换主题 @@ -10,20 +9,13 @@ export const themeCompartment = new Compartment(); /** * 根据主题类型获取主题扩展 */ -const getThemeExtension = (themeType: SystemThemeType): Extension | null => { +const getThemeExtension = (): Extension | null => { const themeStore = useThemeStore(); - // 处理 auto 主题类型 - let isDark = themeType === SystemThemeType.SystemThemeDark; - if (themeType === SystemThemeType.SystemThemeAuto) { - isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - } - - // 根据主题类型获取对应的颜色配置 - const colors = isDark ? themeStore.currentColors.dark : themeStore.currentColors.light; + // 直接获取当前主题颜色配置 + const colors = themeStore.currentColors; if (!colors) { - console.warn('Theme colors not loaded yet'); return null; } @@ -34,8 +26,8 @@ const getThemeExtension = (themeType: SystemThemeType): Extension | null => { /** * 创建主题扩展（用于编辑器初始化） */ -export const createThemeExtension = (themeType: SystemThemeType = SystemThemeType.SystemThemeDark): Extension => { - const extension = getThemeExtension(themeType); +export const createThemeExtension = (): Extension => { + const extension = getThemeExtension(); // 如果主题未加载，返回空扩展 if (!extension) { @@ -48,17 +40,16 @@ export const createThemeExtension = (themeType: SystemThemeType = SystemThemeTyp /** * 更新编辑器主题 */ -export const updateEditorTheme = (view: EditorView, themeType: SystemThemeType): void => { +export const updateEditorTheme = (view: EditorView): void => { if (!view?.dispatch) { return; } try { - const extension = getThemeExtension(themeType); + const extension = getThemeExtension(); // 如果主题未加载，不更新 if (!extension) { - console.warn('Cannot update theme: theme not loaded'); return; } diff --git a/frontend/src/views/editor/theme/dark/aura.ts b/frontend/src/views/editor/theme/dark/aura.ts index 4a168c2..503cdbe 100644 --- a/frontend/src/views/editor/theme/dark/aura.ts +++ b/frontend/src/views/editor/theme/dark/aura.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#21202e', - backgroundSecondary: '#21202e', + backgroundSecondary: '#2B2A3BFF', surface: '#21202e', dropdownBackground: '#21202e', dropdownBorder: '#3b334b', diff --git a/frontend/src/views/editor/theme/dark/dracula.ts b/frontend/src/views/editor/theme/dark/dracula.ts index 7418b78..baaad89 100644 --- a/frontend/src/views/editor/theme/dark/dracula.ts +++ b/frontend/src/views/editor/theme/dark/dracula.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#282A36', - backgroundSecondary: '#282A36', + backgroundSecondary: '#323543FF', surface: '#282A36', dropdownBackground: '#282A36', dropdownBorder: '#191A21', diff --git a/frontend/src/views/editor/theme/dark/github-dark.ts b/frontend/src/views/editor/theme/dark/github-dark.ts index 8a8c106..7b9eb6a 100644 --- a/frontend/src/views/editor/theme/dark/github-dark.ts +++ b/frontend/src/views/editor/theme/dark/github-dark.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#24292e', - backgroundSecondary: '#24292e', + backgroundSecondary: '#2E343BFF', surface: '#24292e', dropdownBackground: '#24292e', dropdownBorder: '#1b1f23', diff --git a/frontend/src/views/editor/theme/dark/material-dark.ts b/frontend/src/views/editor/theme/dark/material-dark.ts index b91128f..019cf1f 100644 --- a/frontend/src/views/editor/theme/dark/material-dark.ts +++ b/frontend/src/views/editor/theme/dark/material-dark.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#263238', - backgroundSecondary: '#263238', + backgroundSecondary: '#2D3E46FF', surface: '#263238', dropdownBackground: '#263238', dropdownBorder: '#FFFFFF10', diff --git a/frontend/src/views/editor/theme/dark/one-dark.ts b/frontend/src/views/editor/theme/dark/one-dark.ts index ad79045..9b53243 100644 --- a/frontend/src/views/editor/theme/dark/one-dark.ts +++ b/frontend/src/views/editor/theme/dark/one-dark.ts @@ -15,7 +15,7 @@ const chalky = "#e5c07b", whiskey = "#d19a66", violet = "#c678dd", darkBackground = "#21252b", - highlightBackground = "#2c313a", + highlightBackground = "#313949FF", background = "#282c34", tooltipBackground = "#353a42", selection = "#3E4451", diff --git a/frontend/src/views/editor/theme/dark/solarized-dark.ts b/frontend/src/views/editor/theme/dark/solarized-dark.ts index 59646fb..66959c7 100644 --- a/frontend/src/views/editor/theme/dark/solarized-dark.ts +++ b/frontend/src/views/editor/theme/dark/solarized-dark.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#002B36', - backgroundSecondary: '#002B36', + backgroundSecondary: '#003643FF', surface: '#002B36', dropdownBackground: '#002B36', dropdownBorder: '#2AA19899', diff --git a/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts b/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts index 93f87bf..1a38a56 100644 --- a/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts +++ b/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#24283b', - backgroundSecondary: '#24283b', + backgroundSecondary: '#2B3151FF', surface: '#24283b', dropdownBackground: '#24283b', dropdownBorder: '#7982a9', diff --git a/frontend/src/views/editor/theme/dark/tokyo-night.ts b/frontend/src/views/editor/theme/dark/tokyo-night.ts index 74d90d4..01ac03f 100644 --- a/frontend/src/views/editor/theme/dark/tokyo-night.ts +++ b/frontend/src/views/editor/theme/dark/tokyo-night.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#1a1b26', - backgroundSecondary: '#1a1b26', + backgroundSecondary: '#272839FF', surface: '#1a1b26', dropdownBackground: '#1a1b26', dropdownBorder: '#787c99', diff --git a/frontend/src/views/editor/theme/index.ts b/frontend/src/views/editor/theme/index.ts new file mode 100644 index 0000000..1f23799 --- /dev/null +++ b/frontend/src/views/editor/theme/index.ts @@ -0,0 +1,12 @@ +import { Extension } from '@codemirror/state'; +import type { ThemeColors } from './types'; +import { createBaseTheme } from './base'; + +/** + * 根据自定义颜色配置创建主题 + */ +export function createThemeByColors(colors: ThemeColors): Extension { + return createBaseTheme(colors); +} + + diff --git a/frontend/src/views/editor/theme/light/github-light.ts b/frontend/src/views/editor/theme/light/github-light.ts index 6fbc4d7..376be4a 100644 --- a/frontend/src/views/editor/theme/light/github-light.ts +++ b/frontend/src/views/editor/theme/light/github-light.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#fff', - backgroundSecondary: '#fff', + backgroundSecondary: '#f1faf1', surface: '#fff', dropdownBackground: '#fff', dropdownBorder: '#e1e4e8', diff --git a/frontend/src/views/editor/theme/light/material-light.ts b/frontend/src/views/editor/theme/light/material-light.ts index 82a0d63..a3cd49b 100644 --- a/frontend/src/views/editor/theme/light/material-light.ts +++ b/frontend/src/views/editor/theme/light/material-light.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#FAFAFA', - backgroundSecondary: '#FAFAFA', + backgroundSecondary: '#f1faf1', surface: '#FAFAFA', dropdownBackground: '#FAFAFA', dropdownBorder: '#00000010', diff --git a/frontend/src/views/editor/theme/light/solarized-light.ts b/frontend/src/views/editor/theme/light/solarized-light.ts index 9559c1b..f8e8596 100644 --- a/frontend/src/views/editor/theme/light/solarized-light.ts +++ b/frontend/src/views/editor/theme/light/solarized-light.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#FDF6E3', - backgroundSecondary: '#FDF6E3', + backgroundSecondary: '#FFEEBCD4', surface: '#FDF6E3', dropdownBackground: '#FDF6E3', dropdownBorder: '#D3AF86', diff --git a/frontend/src/views/editor/theme/light/tokyo-night-day.ts b/frontend/src/views/editor/theme/light/tokyo-night-day.ts index 608cb31..a6978b1 100644 --- a/frontend/src/views/editor/theme/light/tokyo-night-day.ts +++ b/frontend/src/views/editor/theme/light/tokyo-night-day.ts @@ -8,7 +8,7 @@ export const config: ThemeColors = { // 基础色调 background: '#e1e2e7', - backgroundSecondary: '#e1e2e7', + backgroundSecondary: '#D2D8EFFF', surface: '#e1e2e7', dropdownBackground: '#e1e2e7', dropdownBorder: '#6a6f8e', diff --git a/frontend/src/views/editor/theme/registry.ts b/frontend/src/views/editor/theme/registry.ts deleted file mode 100644 index faf94a0..0000000 --- a/frontend/src/views/editor/theme/registry.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Extension } from '@codemirror/state'; -import type { ThemeColors } from './types'; -import { createBaseTheme } from './base'; - -// 深色主题导入 -import { config as draculaConfig } from './dark/dracula'; -import { config as auraConfig } from './dark/aura'; -import { config as githubDarkConfig } from './dark/github-dark'; -import { config as materialDarkConfig } from './dark/material-dark'; -import { config as oneDarkConfig } from './dark/one-dark'; -import { config as solarizedDarkConfig } from './dark/solarized-dark'; -import { config as tokyoNightConfig } from './dark/tokyo-night'; -import { config as tokyoNightStormConfig } from './dark/tokyo-night-storm'; - -// 浅色主题导入 -import { config as githubLightConfig } from './light/github-light'; -import { config as materialLightConfig } from './light/material-light'; -import { config as solarizedLightConfig } from './light/solarized-light'; -import { config as tokyoNightDayConfig } from './light/tokyo-night-day'; - -/** - * 主题配置映射表 - * key: 主题名称（与数据库中的 name 字段一致） - * value: 主题颜色配置 - */ -const themeConfigMap: Record = { - // 深色主题 - 'dracula': draculaConfig, - 'aura': auraConfig, - 'github-dark': githubDarkConfig, - 'material-dark': materialDarkConfig, - 'one-dark': oneDarkConfig, - 'solarized-dark': solarizedDarkConfig, - 'tokyo-night': tokyoNightConfig, - 'tokyo-night-storm': tokyoNightStormConfig, - - // 浅色主题 - 'github-light': githubLightConfig, - 'material-light': materialLightConfig, - 'solarized-light': solarizedLightConfig, - 'tokyo-night-day': tokyoNightDayConfig, -}; - -/** - * 根据主题名称获取主题配置 - */ -export function getThemeConfig(themeName: string): ThemeColors | null { - return themeConfigMap[themeName] || null; -} - - -/** - * 根据自定义颜色配置创建主题 - */ -export function createThemeByColors(colors: ThemeColors): Extension { - return createBaseTheme(colors); -} - - diff --git a/frontend/src/views/settings/components/SettingSection.vue b/frontend/src/views/settings/components/SettingSection.vue index 528bb5f..882c87b 100644 --- a/frontend/src/views/settings/components/SettingSection.vue +++ b/frontend/src/views/settings/components/SettingSection.vue @@ -1,13 +1,15 @@