landaiqing/voidraft
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 18 Wiki Activity

🎨 Optimize preset theme code

Browse Source
This commit is contained in:
landaiqing
2025-10-20 21:58:37 +08:00
parent 9a15df01ee
commit aa8139884b
26 changed files with 245 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/bindings/voidraft/internal/models/models.ts
View File

@@ -110,6 +110,11 @@ export class AppearanceConfig {
*/
"systemTheme": SystemThemeType;
/**
* 当前选择的预设主题名称
*/
"currentTheme": string;
/** Creates a new AppearanceConfig instance. */
constructor($$source: Partial<AppearanceConfig> = {}) {
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);
}

47
frontend/bindings/voidraft/internal/services/themeservice.ts
View File

@@ -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<models$0.Theme | null> & { 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<models$0.Theme | null> & { cancel(): void } {
let $resultPromise = $Call.ByID(3053137052, id) as any;
export function GetThemeByIdOrName(id: number, ...name: string[]): Promise<models$0.Theme | null> & { 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<models$0.Theme | null> & { can
return $typingPromise;
}
/**
* GetThemeByType 根据类型获取默认主题
*/
export function GetThemeByType(themeType: models$0.ThemeType): Promise<models$0.Theme | null> & { 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<void> & { cancel(): void } {
let $resultPromise = $Call.ByID(1806334457, id) as any;
export function ResetTheme(id: number, ...name: string[]): Promise<void> & { cancel(): void } {
let $resultPromise = $Call.ByID(1806334457, id, name) as any;
return $resultPromise;
}

6
frontend/src/common/constant/config.ts
View File

@@ -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",

6
frontend/src/stores/configStore.ts
View File

@@ -204,6 +204,11 @@ export const useConfigStore = defineStore('config', () => {
await updateAppearanceConfig('systemTheme', systemTheme);
};
// 当前主题设置方法
const setCurrentTheme = async (themeName: string): Promise<void> => {
await updateAppearanceConfig('currentTheme', themeName);
};
// 初始化语言设置
const initializeLanguage = async (): Promise<void> => {
@@ -268,6 +273,7 @@ export const useConfigStore = defineStore('config', () => {
// 主题相关方法
setSystemTheme,
setCurrentTheme,
// 字体大小操作
...adjusters.fontSize,

8
frontend/src/stores/editorStore.ts
View File

@@ -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);
});
};

242
frontend/src/stores/themeStore.ts
View File

@@ -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<Theme[]>([]);
// 当前选中的主题 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<ThemeColors | null>(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<ThemeColors>, isDark: boolean) => {
const target = isDark ? currentColors.dark : currentColors.light;
if (!target) return;
Object.assign(target, colors);
const updateCurrentColors = (colors: Partial<ThemeColors>) => {
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,

25
frontend/src/views/editor/basic/themeExtension.ts
View File

@@ -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;
}

2
frontend/src/views/editor/theme/dark/aura.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#21202e',
backgroundSecondary: '#21202e',
backgroundSecondary: '#2B2A3BFF',
surface: '#21202e',
dropdownBackground: '#21202e',
dropdownBorder: '#3b334b',

2
frontend/src/views/editor/theme/dark/dracula.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#282A36',
backgroundSecondary: '#282A36',
backgroundSecondary: '#323543FF',
surface: '#282A36',
dropdownBackground: '#282A36',
dropdownBorder: '#191A21',

2
frontend/src/views/editor/theme/dark/github-dark.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#24292e',
backgroundSecondary: '#24292e',
backgroundSecondary: '#2E343BFF',
surface: '#24292e',
dropdownBackground: '#24292e',
dropdownBorder: '#1b1f23',

2
frontend/src/views/editor/theme/dark/material-dark.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#263238',
backgroundSecondary: '#263238',
backgroundSecondary: '#2D3E46FF',
surface: '#263238',
dropdownBackground: '#263238',
dropdownBorder: '#FFFFFF10',

2
frontend/src/views/editor/theme/dark/one-dark.ts
View File

@@ -15,7 +15,7 @@ const chalky = "#e5c07b",
whiskey = "#d19a66",
violet = "#c678dd",
darkBackground = "#21252b",
highlightBackground = "#2c313a",
highlightBackground = "#313949FF",
background = "#282c34",
tooltipBackground = "#353a42",
selection = "#3E4451",

2
frontend/src/views/editor/theme/dark/solarized-dark.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#002B36',
backgroundSecondary: '#002B36',
backgroundSecondary: '#003643FF',
surface: '#002B36',
dropdownBackground: '#002B36',
dropdownBorder: '#2AA19899',

2
frontend/src/views/editor/theme/dark/tokyo-night-storm.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#24283b',
backgroundSecondary: '#24283b',
backgroundSecondary: '#2B3151FF',
surface: '#24283b',
dropdownBackground: '#24283b',
dropdownBorder: '#7982a9',

2
frontend/src/views/editor/theme/dark/tokyo-night.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#1a1b26',
backgroundSecondary: '#1a1b26',
backgroundSecondary: '#272839FF',
surface: '#1a1b26',
dropdownBackground: '#1a1b26',
dropdownBorder: '#787c99',

12
frontend/src/views/editor/theme/index.ts Normal file
View File

@@ -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);
}

2
frontend/src/views/editor/theme/light/github-light.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#fff',
backgroundSecondary: '#fff',
backgroundSecondary: '#f1faf1',
surface: '#fff',
dropdownBackground: '#fff',
dropdownBorder: '#e1e4e8',

2
frontend/src/views/editor/theme/light/material-light.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#FAFAFA',
backgroundSecondary: '#FAFAFA',
backgroundSecondary: '#f1faf1',
surface: '#FAFAFA',
dropdownBackground: '#FAFAFA',
dropdownBorder: '#00000010',

2
frontend/src/views/editor/theme/light/solarized-light.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#FDF6E3',
backgroundSecondary: '#FDF6E3',
backgroundSecondary: '#FFEEBCD4',
surface: '#FDF6E3',
dropdownBackground: '#FDF6E3',
dropdownBorder: '#D3AF86',

2
frontend/src/views/editor/theme/light/tokyo-night-day.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#e1e2e7',
backgroundSecondary: '#e1e2e7',
backgroundSecondary: '#D2D8EFFF',
surface: '#e1e2e7',
dropdownBackground: '#e1e2e7',
dropdownBorder: '#6a6f8e',

59
frontend/src/views/editor/theme/registry.ts
View File

@@ -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<string, ThemeColors> = {
// 深色主题
'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);
}

6
frontend/src/views/settings/components/SettingSection.vue
View File

@@ -1,13 +1,15 @@
<script setup lang="ts">
defineProps<{
title: string;
title?: string;
}>();
</script>
<template>
<div class="setting-section">
<div class="section-header">
<h2 class="section-title">{{ title }}</h2>
<h2 class="section-title">
<slot name="title">{{ title }}</slot>
</h2>
<div class="section-title-right">
<slot name="title-right"></slot>
</div>

84
frontend/src/views/settings/pages/AppearancePage.vue
View File

@@ -23,8 +23,7 @@ const { debouncedFn: debouncedUpdateColor } = createDebounce(
const { debouncedFn: debouncedResetTheme } = createDebounce(
async () => {
const isDark = isDarkMode.value;
const success = await themeStore.resetCurrentTheme(isDark);
const success = await themeStore.resetCurrentTheme();
if (success) {
// 重新加载临时颜色
@@ -49,23 +48,11 @@ const resetButtonState = ref({
confirming: false
});
// 当前激活的主题类型（深色/浅色）
const isDarkMode = computed(() =>
themeStore.currentTheme === SystemThemeType.SystemThemeDark ||
(themeStore.currentTheme === SystemThemeType.SystemThemeAuto &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
);
// 当前可用的预设主题列表
const availableThemes = computed(() =>
isDarkMode.value ? themeStore.darkThemes : themeStore.lightThemes
);
// 当前选中的主题ID
const currentThemeId = computed({
get: () => isDarkMode.value ? themeStore.currentThemeIds.dark : themeStore.currentThemeIds.light,
set: async (themeId: number) => {
await themeStore.switchToTheme(themeId);
// 当前选中的主题名称
const currentThemeName = computed({
get: () => themeStore.currentColors?.name || '',
set: async (themeName: string) => {
await themeStore.switchToTheme(themeName);
syncTempColors();
hasUnsavedChanges.value = false;
}
@@ -74,20 +61,19 @@ const currentThemeId = computed({
// 当前主题的颜色配置
const currentColors = computed(() => tempColors.value || ({} as ThemeColors));
// 获取当前主题模式（用于颜色选择器）
const currentThemeMode = computed(() => isDarkMode.value ? 'dark' : 'light');
// 获取当前主题模式
const currentThemeMode = computed(() => themeStore.isDarkMode ? 'dark' : 'light');
// 同步临时颜色从 store
const syncTempColors = () => {
const colors = isDarkMode.value ? themeStore.currentColors.dark : themeStore.currentColors.light;
if (colors) {
tempColors.value = { ...colors };
if (themeStore.currentColors) {
tempColors.value = { ...themeStore.currentColors };
}
};
// 监听主题切换，同步临时颜色
watch(
[() => themeStore.currentColors.dark, () => themeStore.currentColors.light, isDarkMode],
() => themeStore.currentColors,
() => {
if (!hasUnsavedChanges.value) {
syncTempColors();
@@ -153,13 +139,11 @@ const applyChanges = async () => {
try {
if (!tempColors.value) return;
const isDark = isDarkMode.value;
// 更新 store 中的颜色
themeStore.updateCurrentColors(tempColors.value, isDark);
themeStore.updateCurrentColors(tempColors.value);
// 保存到数据库
await themeStore.saveCurrentTheme(isDark);
await themeStore.saveCurrentTheme();
// 刷新编辑器主题
themeStore.refreshEditorTheme();
@@ -207,6 +191,17 @@ const updateSystemTheme = async (event: Event) => {
const selectedSystemTheme = select.value as SystemThemeType;
await themeStore.setTheme(selectedSystemTheme);
const availableThemes = themeStore.availableThemes;
const currentThemeName = currentColors.value?.name;
const isCurrentThemeAvailable = availableThemes.some(t => t.name === currentThemeName);
if (!isCurrentThemeAvailable && availableThemes.length > 0) {
const firstTheme = availableThemes[0];
await themeStore.switchToTheme(firstTheme.name);
syncTempColors();
hasUnsavedChanges.value = false;
}
};
// 控制颜色选择器显示状态
@@ -246,8 +241,8 @@ const handlePickerClose = () => {
<!-- 预设主题选择 -->
<SettingItem :title="t('settings.presetTheme')">
<select class="select-input" v-model="currentThemeId" :disabled="hasUnsavedChanges">
<option v-for="theme in availableThemes" :key="theme.id" :value="theme.id">
<select class="select-input" v-model="currentThemeName" :disabled="hasUnsavedChanges">
<option v-for="theme in themeStore.availableThemes" :key="theme.id" :value="theme.name">
{{ theme.name }}
</option>
</select>
@@ -256,6 +251,12 @@ 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">
<button
@@ -348,6 +349,27 @@ 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;