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

✨ Added dark theme and white theme switching

Browse Source
This commit is contained in:
landaiqing
2025-06-09 02:29:15 +08:00
parent 7f97b4a937
commit aff08f4d3d
23 changed files with 630 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,6 +114,11 @@ export class AppearanceConfig {
*/
"theme": ThemeType;
/**
* 系统界面主题
*/
"systemTheme": SystemThemeType;
/** Creates a new AppearanceConfig instance. */
constructor($$source: Partial<AppearanceConfig> = {}) {
if (!("language" in $$source)) {
@@ -122,6 +127,9 @@ export class AppearanceConfig {
if (!("theme" in $$source)) {
this["theme"] = ("" as ThemeType);
}
if (!("systemTheme" in $$source)) {
this["systemTheme"] = ("" as SystemThemeType);
}
Object.assign(this, $$source);
}
@@ -509,6 +517,31 @@ export enum LanguageType {
LangEnUS = "en-US",
};
/**
* SystemThemeType 系统主题类型定义
*/
export enum SystemThemeType {
/**
* The Go zero value for the underlying type of the enum.
*/
$zero = "",
/**
* SystemThemeDark 深色系统主题
*/
SystemThemeDark = "dark",
/**
* SystemThemeLight 浅色系统主题
*/
SystemThemeLight = "light",
/**
* SystemThemeAuto 跟随系统主题
*/
SystemThemeAuto = "auto",
};
/**
* TabType 定义了制表符类型
*/

4
frontend/src/App.vue
View File

@@ -1,15 +1,17 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import { useConfigStore } from '@/stores/configStore';
import { useSystemTheme } from '@/composables/useSystemTheme';
import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
const configStore = useConfigStore();
const { setTheme } = useSystemTheme();
// 应用启动时加载配置
onMounted(async () => {
await configStore.initConfig();
await configStore.initializeLanguage();
setTheme(configStore.config.appearance.systemTheme);
});
</script>

3
frontend/src/assets/styles/index.css
View File

@@ -1,4 +1,5 @@
/* 导入所有CSS文件 */
@import 'normalize.css';
@import 'variables.css';
@import "fonts.css";
@import "fonts.css";
@import 'scrollbar.css';

108
frontend/src/assets/styles/scrollbar.css Normal file
View File

@@ -0,0 +1,108 @@
/* 滚动条样式 - 支持主题切换 */
/* Webkit 浏览器滚动条样式 */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 6px;
border: 2px solid var(--scrollbar-track);
transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-thumb:active {
background: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
background: var(--scrollbar-track);
}
/* 细滚动条变体（用于特定区域） */
.thin-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.thin-scrollbar::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 4px;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 4px;
border: 1px solid var(--scrollbar-track);
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
/* Firefox 滚动条样式 */
* {
scrollbar-width: auto;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* 细滚动条的Firefox样式 */
.thin-scrollbar {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* 隐藏滚动条但保持功能的工具类 */
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* 自定义悬浮显示滚动条 */
.hover-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.hover-scrollbar::-webkit-scrollbar {
display: none;
}
.hover-scrollbar:hover {
scrollbar-width: auto;
}
.hover-scrollbar:hover::-webkit-scrollbar {
display: block;
width: 8px;
height: 8px;
}
.hover-scrollbar:hover::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 4px;
}
.hover-scrollbar:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 4px;
}
.hover-scrollbar:hover::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}

181
frontend/src/assets/styles/variables.css
View File

@@ -1,12 +1,177 @@
:root {
/* 主题颜色 */
--bg-secondary: #0E1217; /* 工具栏背景 */
/* 文本颜色 */
/* 编辑器区域 */
--text-primary: #9BB586; /* 内容区域字体颜色 */
--text-secondary: #a0aec0;
--text-muted: #666;
/* 深色主题颜色变量 */
--dark-toolbar-bg: #2d2d2d;
--dark-toolbar-border: #404040;
--dark-toolbar-text: #ffffff;
--dark-toolbar-text-secondary: #cccccc;
--dark-toolbar-button-hover: #404040;
--dark-bg-secondary: #0E1217;
--dark-text-secondary: #a0aec0;
--dark-text-muted: #666;
--dark-border-color: #2d3748;
--dark-settings-bg: #2a2a2a;
--dark-settings-card-bg: #333333;
--dark-settings-text: #ffffff;
--dark-settings-text-secondary: #cccccc;
--dark-settings-border: #444444;
--dark-settings-input-bg: #3a3a3a;
--dark-settings-input-border: #555555;
--dark-settings-hover: #404040;
--dark-scrollbar-track: #2a2a2a;
--dark-scrollbar-thumb: #555555;
--dark-scrollbar-thumb-hover: #666666;
/* 浅色主题颜色变量 */
--light-toolbar-bg: #f8f9fa;
--light-toolbar-border: #e9ecef;
--light-toolbar-text: #212529;
--light-toolbar-text-secondary: #495057;
--light-toolbar-button-hover: #e9ecef;
--light-bg-secondary: #f7fef7;
--light-text-secondary: #374151;
--light-text-muted: #6b7280;
--light-border-color: #e5e7eb;
--light-settings-bg: #ffffff;
--light-settings-card-bg: #f8f9fa;
--light-settings-text: #212529;
--light-settings-text-secondary: #6c757d;
--light-settings-border: #dee2e6;
--light-settings-input-bg: #ffffff;
--light-settings-input-border: #ced4da;
--light-settings-hover: #e9ecef;
--light-scrollbar-track: #f1f3f4;
--light-scrollbar-thumb: #c1c1c1;
--light-scrollbar-thumb-hover: #a8a8a8;
/* 默认使用深色主题 */
--toolbar-bg: var(--dark-toolbar-bg);
--toolbar-border: var(--dark-toolbar-border);
--toolbar-text: var(--dark-toolbar-text);
--toolbar-text-secondary: var(--dark-toolbar-text-secondary);
--toolbar-button-hover: var(--dark-toolbar-button-hover);
--toolbar-separator: var(--dark-toolbar-button-hover);
--bg-secondary: var(--dark-bg-secondary);
--text-secondary: var(--dark-text-secondary);
--text-muted: var(--dark-text-muted);
--border-color: var(--dark-border-color);
--settings-bg: var(--dark-settings-bg);
--settings-card-bg: var(--dark-settings-card-bg);
--settings-text: var(--dark-settings-text);
--settings-text-secondary: var(--dark-settings-text-secondary);
--settings-border: var(--dark-settings-border);
--settings-input-bg: var(--dark-settings-input-bg);
--settings-input-border: var(--dark-settings-input-border);
--settings-hover: var(--dark-settings-hover);
--scrollbar-track: var(--dark-scrollbar-track);
--scrollbar-thumb: var(--dark-scrollbar-thumb);
--scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
color-scheme: light dark;
}
/* 边框颜色 */
--border-color: #2d3748;
/* 监听系统深色主题 */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--toolbar-bg: var(--dark-toolbar-bg);
--toolbar-border: var(--dark-toolbar-border);
--toolbar-text: var(--dark-toolbar-text);
--toolbar-text-secondary: var(--dark-toolbar-text-secondary);
--toolbar-button-hover: var(--dark-toolbar-button-hover);
--toolbar-separator: var(--dark-toolbar-button-hover);
--bg-secondary: var(--dark-bg-secondary);
--text-secondary: var(--dark-text-secondary);
--text-muted: var(--dark-text-muted);
--border-color: var(--dark-border-color);
--settings-bg: var(--dark-settings-bg);
--settings-card-bg: var(--dark-settings-card-bg);
--settings-text: var(--dark-settings-text);
--settings-text-secondary: var(--dark-settings-text-secondary);
--settings-border: var(--dark-settings-border);
--settings-input-bg: var(--dark-settings-input-bg);
--settings-input-border: var(--dark-settings-input-border);
--settings-hover: var(--dark-settings-hover);
--scrollbar-track: var(--dark-scrollbar-track);
--scrollbar-thumb: var(--dark-scrollbar-thumb);
--scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
}
}
/* 监听系统浅色主题 */
@media (prefers-color-scheme: light) {
:root[data-theme="auto"] {
--toolbar-bg: var(--light-toolbar-bg);
--toolbar-border: var(--light-toolbar-border);
--toolbar-text: var(--light-toolbar-text);
--toolbar-text-secondary: var(--light-toolbar-text-secondary);
--toolbar-button-hover: var(--light-toolbar-button-hover);
--toolbar-separator: var(--light-toolbar-button-hover);
--bg-secondary: var(--light-bg-secondary);
--text-secondary: var(--light-text-secondary);
--text-muted: var(--light-text-muted);
--border-color: var(--light-border-color);
--settings-bg: var(--light-settings-bg);
--settings-card-bg: var(--light-settings-card-bg);
--settings-text: var(--light-settings-text);
--settings-text-secondary: var(--light-settings-text-secondary);
--settings-border: var(--light-settings-border);
--settings-input-bg: var(--light-settings-input-bg);
--settings-input-border: var(--light-settings-input-border);
--settings-hover: var(--light-settings-hover);
--scrollbar-track: var(--light-scrollbar-track);
--scrollbar-thumb: var(--light-scrollbar-thumb);
--scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
}
}
/* 手动选择浅色主题 */
:root[data-theme="light"] {
--toolbar-bg: var(--light-toolbar-bg);
--toolbar-border: var(--light-toolbar-border);
--toolbar-text: var(--light-toolbar-text);
--toolbar-text-secondary: var(--light-toolbar-text-secondary);
--toolbar-button-hover: var(--light-toolbar-button-hover);
--toolbar-separator: var(--light-toolbar-button-hover);
--bg-secondary: var(--light-bg-secondary);
--text-secondary: var(--light-text-secondary);
--text-muted: var(--light-text-muted);
--border-color: var(--light-border-color);
--settings-bg: var(--light-settings-bg);
--settings-card-bg: var(--light-settings-card-bg);
--settings-text: var(--light-settings-text);
--settings-text-secondary: var(--light-settings-text-secondary);
--settings-border: var(--light-settings-border);
--settings-input-bg: var(--light-settings-input-bg);
--settings-input-border: var(--light-settings-input-border);
--settings-hover: var(--light-settings-hover);
--scrollbar-track: var(--light-scrollbar-track);
--scrollbar-thumb: var(--light-scrollbar-thumb);
--scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
}
/* 手动选择深色主题 */
:root[data-theme="dark"] {
--toolbar-bg: var(--dark-toolbar-bg);
--toolbar-border: var(--dark-toolbar-border);
--toolbar-text: var(--dark-toolbar-text);
--toolbar-text-secondary: var(--dark-toolbar-text-secondary);
--toolbar-button-hover: var(--dark-toolbar-button-hover);
--toolbar-separator: var(--dark-toolbar-button-hover);
--bg-secondary: var(--dark-bg-secondary);
--text-secondary: var(--dark-text-secondary);
--text-muted: var(--dark-text-muted);
--border-color: var(--dark-border-color);
--settings-bg: var(--dark-settings-bg);
--settings-card-bg: var(--dark-settings-card-bg);
--settings-text: var(--dark-settings-text);
--settings-text-secondary: var(--dark-settings-text-secondary);
--settings-border: var(--dark-settings-border);
--settings-input-bg: var(--dark-settings-input-bg);
--settings-input-border: var(--dark-settings-input-border);
--settings-hover: var(--dark-settings-hover);
--scrollbar-track: var(--dark-scrollbar-track);
--scrollbar-thumb: var(--dark-scrollbar-thumb);
--scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
}

19
frontend/src/components/titlebar/WindowTitleBar.vue
View File

@@ -123,7 +123,8 @@ onMounted(async () => {
.windows-titlebar {
display: flex;
height: 32px;
background: #202020;
background: var(--toolbar-bg);
border-bottom: 1px solid var(--toolbar-border);
user-select: none;
-webkit-user-select: none;
position: fixed;
@@ -145,7 +146,7 @@ onMounted(async () => {
flex: 1;
padding-left: 8px;
gap: 8px;
color: #ffffff;
color: var(--toolbar-text);
font-size: 12px;
font-weight: 400;
cursor: default;
@@ -169,7 +170,7 @@ onMounted(async () => {
.titlebar-title {
font-size: 12px;
color: #ffffff;
color: var(--toolbar-text);
}
.titlebar-controls {
@@ -187,7 +188,7 @@ onMounted(async () => {
height: 32px;
border: none;
background: transparent;
color: #ffffff;
color: var(--toolbar-text);
cursor: pointer;
display: flex;
align-items: center;
@@ -197,11 +198,12 @@ onMounted(async () => {
margin: 0;
&:hover {
background: rgba(255, 255, 255, 0.0605);
background: var(--toolbar-button-hover);
}
&:active {
background: rgba(255, 255, 255, 0.0837);
background: var(--toolbar-button-hover);
opacity: 0.8;
}
}
@@ -220,12 +222,13 @@ onMounted(async () => {
.minimize-button:hover,
.maximize-button:hover {
background: rgba(255, 255, 255, 0.0605);
background: var(--toolbar-button-hover);
}
.minimize-button:active,
.maximize-button:active {
background: rgba(255, 255, 255, 0.0837);
background: var(--toolbar-button-hover);
opacity: 0.8;
}
.close-button:hover {

20
frontend/src/components/toolbar/Toolbar.vue
View File

@@ -174,7 +174,8 @@ watch(isLoaded, async (newLoaded) => {
color: var(--text-muted);
.stat-value {
color: #e0e0e0;
color: var(--text-secondary);
font-weight: 500;
}
}
}
@@ -212,10 +213,12 @@ watch(isLoaded, async (newLoaded) => {
cursor: pointer;
padding: 0 3px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.05);
background-color: var(--border-color);
opacity: 0.6;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
opacity: 1;
background-color: var(--border-color);
}
}
@@ -255,7 +258,8 @@ watch(isLoaded, async (newLoaded) => {
transition: all 0.2s ease;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
background-color: var(--border-color);
opacity: 0.8;
}
&.active {
@@ -291,7 +295,8 @@ watch(isLoaded, async (newLoaded) => {
border-radius: 3px;
&:hover {
background-color: rgba(255, 255, 255, 0.05);
background-color: var(--border-color);
opacity: 0.8;
}
.arrow {
@@ -321,7 +326,8 @@ watch(isLoaded, async (newLoaded) => {
white-space: nowrap;
&:hover {
background-color: var(--bg-hover);
background-color: var(--border-color);
opacity: 0.8;
}
&.active {
@@ -342,7 +348,7 @@ watch(isLoaded, async (newLoaded) => {
padding: 2px;
&:hover {
color: var(--text-primary);
color: var(--text-secondary);
}
}
}

35
frontend/src/composables/useSystemTheme.ts Normal file
View File

@@ -0,0 +1,35 @@
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useConfigStore } from '@/stores/configStore';
export function useSystemTheme() {
const configStore = useConfigStore();
const currentSystemTheme = ref<'dark' | 'light'>('dark');
// 设置主题 - 简化版本
const setTheme = (theme: string) => {
const root = document.documentElement;
root.setAttribute('data-theme', theme);
};
// 监听配置变化
watch(
() => configStore.config.appearance.systemTheme,
(newTheme) => {
// 直接根据配置设置主题，不需要检测系统主题
const root = document.documentElement;
root.setAttribute('data-theme', newTheme);
},
{ immediate: true }
);
onMounted(() => {
const root = document.documentElement;
const systemTheme = configStore.config.appearance.systemTheme;
root.setAttribute('data-theme', systemTheme);
});
return {
currentSystemTheme,
setTheme
};
}

11
frontend/src/i18n/locales/en-US.ts
View File

@@ -37,12 +37,19 @@ export default {
languageChanged: 'Language setting updated',
languageChangeFailed: 'Failed to update language setting',
themeChanged: 'Theme setting updated',
themeChangeFailed: 'Failed to update theme setting'
themeChangeFailed: 'Failed to update theme setting',
systemThemeChanged: 'System theme setting updated',
systemThemeChangeFailed: 'Failed to update system theme setting'
},
languages: {
'zh-CN': '简体中文',
'en-US': 'English'
},
systemTheme: {
dark: 'Dark',
light: 'Light',
auto: 'Follow System'
},
document: {
loadSuccess: 'Document loaded successfully',
loadFailed: 'Failed to load document',
@@ -76,7 +83,6 @@ export default {
cancel: 'Cancel',
dangerZone: 'Danger Zone',
resetAllSettings: 'Reset All Settings',
resetDescription: 'This will restore all settings to their default values. This action cannot be undone.',
confirmReset: 'Click again to confirm reset',
globalHotkey: 'Global Keyboard Shortcuts',
enableGlobalHotkey: 'Enable Global Hotkeys',
@@ -106,6 +112,7 @@ export default {
tabs: 'Tabs',
enableTabIndent: 'Enable Tab Indent',
language: 'Interface Language',
systemTheme: 'System Theme',
theme: 'Editor Theme',
themeDescription: 'Choose editor theme',
restartRequired: '(Restart required)',

11
frontend/src/i18n/locales/zh-CN.ts
View File

@@ -37,12 +37,19 @@ export default {
languageChanged: '语言设置已更新',
languageChangeFailed: '语言设置更新失败',
themeChanged: '主题设置已更新',
themeChangeFailed: '主题设置更新失败'
themeChangeFailed: '主题设置更新失败',
systemThemeChanged: '系统主题设置已更新',
systemThemeChangeFailed: '系统主题设置更新失败'
},
languages: {
'zh-CN': '简体中文',
'en-US': 'English'
},
systemTheme: {
dark: '深色',
light: '浅色',
auto: '跟随系统'
},
document: {
loadSuccess: '文档加载成功',
loadFailed: '文档加载失败',
@@ -76,7 +83,6 @@ export default {
cancel: '取消',
dangerZone: '危险操作',
resetAllSettings: '重置所有设置',
resetDescription: '这将恢复所有设置为默认值，此操作无法撤销',
confirmReset: '再次点击确认重置',
globalHotkey: '全局键盘快捷键',
enableGlobalHotkey: '启用全局热键',
@@ -106,6 +112,7 @@ export default {
tabs: '制表符',
enableTabIndent: '启用 Tab 缩进',
language: '界面语言',
systemTheme: '系统主题',
theme: '编辑器主题',
themeDescription: '选择编辑器主题',
restartRequired: '(需要重启)',

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

@@ -7,6 +7,7 @@ import {
EditingConfig,
GeneralConfig,
LanguageType,
SystemThemeType,
TabType,
ThemeType
} from '@/../bindings/voidraft/internal/models';
@@ -67,7 +68,8 @@ const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
language: 'appearance.language',
theme: 'appearance.theme'
theme: 'appearance.theme',
systemTheme: 'appearance.system_theme'
} as const;
// 配置限制
@@ -139,7 +141,8 @@ const DEFAULT_CONFIG: AppConfig = {
},
appearance: {
language: LanguageType.LangZhCN,
theme: 'default-dark' as ThemeType
theme: 'default-dark' as ThemeType,
systemTheme: 'dark' as SystemThemeType
},
keyBindings: {},
updates: {},
@@ -308,6 +311,13 @@ export const useConfigStore = defineStore('config', () => {
}, 'config.themeChangeFailed', 'config.themeChanged');
};
// 系统主题设置方法
const setSystemTheme = async (systemTheme: SystemThemeType): Promise<void> => {
await safeCall(async () => {
await updateAppearanceConfig('systemTheme', systemTheme);
}, 'config.systemThemeChangeFailed', 'config.systemThemeChanged');
};
// 初始化语言设置
const initializeLanguage = async (): Promise<void> => {
try {
@@ -372,6 +382,7 @@ export const useConfigStore = defineStore('config', () => {
// 主题相关方法
setTheme,
setSystemTheme,
// 字体大小操作
...adjusters.fontSize,

2
frontend/src/types/index.ts
View File

@@ -1,4 +1,4 @@
// 统一类型导出
export type { ThemeType, LanguageType } from '@/../bindings/voidraft/internal/models';
export type { ThemeType, LanguageType, SystemThemeType } from '@/../bindings/voidraft/internal/models';
export * from './theme';
export * from './editor';

76
frontend/src/views/settings/Settings.vue
View File

@@ -45,7 +45,7 @@ const goBackToEditor = async () => {
<h1>{{ t('settings.title') }}</h1>
</div>
</div>
<div class="settings-nav">
<div class="settings-nav thin-scrollbar">
<div
v-for="item in navItems"
:key="item.id"
@@ -76,8 +76,8 @@ const goBackToEditor = async () => {
height: 100vh;
margin: 0;
padding: 0;
background-color: #2a2a2a;
color: #e0e0e0;
background-color: var(--settings-bg);
color: var(--settings-text);
display: flex;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -85,16 +85,16 @@ const goBackToEditor = async () => {
.settings-sidebar {
width: 200px;
height: 100%;
background-color: #333333;
border-right: 1px solid #444444;
background-color: var(--settings-card-bg);
border-right: 1px solid var(--settings-border);
display: flex;
flex-direction: column;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
.settings-header {
padding: 20px 16px;
border-bottom: 1px solid #444444;
background-color: #2d2d2d;
border-bottom: 1px solid var(--settings-border);
background-color: var(--settings-card-bg);
.header-content {
display: flex;
@@ -104,7 +104,7 @@ const goBackToEditor = async () => {
.back-button {
background: none;
border: none;
color: #a0a0a0;
color: var(--settings-text-secondary);
cursor: pointer;
padding: 6px;
border-radius: 4px;
@@ -114,8 +114,8 @@ const goBackToEditor = async () => {
transition: all 0.2s ease;
&:hover {
color: #e0e0e0;
background-color: #3a3a3a;
color: var(--settings-text);
background-color: var(--settings-hover);
}
svg {
@@ -128,7 +128,7 @@ const goBackToEditor = async () => {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #ffffff;
color: var(--settings-text);
}
}
}
@@ -138,19 +138,6 @@ const goBackToEditor = async () => {
padding: 10px 0;
overflow-y: auto;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #333333;
}
&::-webkit-scrollbar-thumb {
background-color: #555555;
border-radius: 4px;
}
.nav-item {
display: flex;
align-items: center;
@@ -160,11 +147,11 @@ const goBackToEditor = async () => {
border-left: 3px solid transparent;
&:hover {
background-color: #3a3a3a;
background-color: var(--settings-hover);
}
&.active {
background-color: #3c3c3c;
background-color: var(--settings-hover);
border-left-color: #4a9eff;
font-weight: 500;
}
@@ -183,8 +170,8 @@ const goBackToEditor = async () => {
.settings-footer {
padding: 12px 16px 16px 16px;
border-top: 1px solid #444444;
background-color: #2d2d2d;
border-top: 1px solid var(--settings-border);
background-color: var(--settings-card-bg);
.memory-info-section {
display: flex;
@@ -193,7 +180,7 @@ const goBackToEditor = async () => {
.section-title {
font-size: 10px;
color: #777777;
color: var(--settings-text-secondary);
font-weight: 500;
margin-bottom: 0;
text-transform: uppercase;
@@ -206,36 +193,11 @@ const goBackToEditor = async () => {
.settings-content {
flex: 1;
height: 100%;
padding: 24px;
padding: 24px 24px 48px 24px;
overflow-y: auto;
background-color: #2a2a2a;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: #2a2a2a;
}
&::-webkit-scrollbar-thumb {
background-color: #555555;
border-radius: 5px;
border: 2px solid #2a2a2a;
}
background-color: var(--settings-bg);
}
}
// 自定义变量
:root {
--border-color: #444444;
--hover-color: #3a3a3a;
--active-bg: #3c3c3c;
--accent-color: #4a9eff;
--bg-primary: #2a2a2a;
--bg-secondary: #333333;
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--text-muted: #777777;
}
</style>

9
frontend/src/views/settings/components/SettingItem.vue
View File

@@ -21,11 +21,12 @@ defineProps<{
.setting-item {
display: flex;
padding: 14px 0;
border-bottom: 1px solid #444444;
border-bottom: 1px solid var(--settings-border);
transition: background-color 0.15s ease;
&:hover {
background-color: rgba(255, 255, 255, 0.03);
background-color: var(--settings-hover);
opacity: 0.8;
}
&:last-child {
@@ -40,12 +41,12 @@ defineProps<{
font-size: 14px;
font-weight: 500;
margin-bottom: 6px;
color: #e0e0e0;
color: var(--settings-text);
}
.setting-description {
font-size: 12px;
color: #a0a0a0;
color: var(--settings-text-secondary);
line-height: 1.5;
}
}

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

@@ -16,19 +16,20 @@ defineProps<{
<style scoped lang="scss">
.setting-section {
margin-bottom: 30px;
background-color: #333333;
background-color: var(--settings-card-bg);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border: 1px solid var(--settings-border);
.section-title {
font-size: 14px;
font-weight: 600;
margin: 0;
padding: 12px 16px;
background-color: #3d3d3d;
color: #ffffff;
border-bottom: 1px solid #444444;
background-color: var(--settings-hover);
color: var(--settings-text);
border-bottom: 1px solid var(--settings-border);
}
.section-content {

4
frontend/src/views/settings/components/ToggleSwitch.vue
View File

@@ -22,7 +22,7 @@ const toggle = () => {
.toggle-switch {
width: 40px;
height: 20px;
background-color: #555555;
background-color: var(--settings-input-border);
border-radius: 10px;
position: relative;
cursor: pointer;
@@ -44,7 +44,7 @@ const toggle = () => {
left: 2px;
width: 16px;
height: 16px;
background-color: #f0f0f0;
background-color: var(--settings-text);
border-radius: 50%;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

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

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
import { ref, computed, watch } from 'vue';
import SettingSection from '../components/SettingSection.vue';
import SettingItem from '../components/SettingItem.vue';
import type { ThemeType } from '@/types';
import type { ThemeType, SystemThemeType } from '@/types';
import { LanguageType } from '@/../bindings/voidraft/internal/models';
import { AVAILABLE_THEMES } from '@/types/theme';
import { useTheme } from '@/composables/useTheme';
@@ -21,6 +21,13 @@ const languageOptions = [
{ value: LanguageType.LangEnUS, label: t('languages.en-US') },
];
// 系统主题选项
const systemThemeOptions = [
{ value: 'dark' as SystemThemeType, label: t('systemTheme.dark') },
{ value: 'light' as SystemThemeType, label: t('systemTheme.light') },
{ value: 'auto' as SystemThemeType, label: t('systemTheme.auto') },
];
// 更新语言设置
const updateLanguage = async (event: Event) => {
const select = event.target as HTMLSelectElement;
@@ -32,6 +39,17 @@ const updateLanguage = async (event: Event) => {
);
};
// 更新系统主题设置
const updateSystemTheme = async (event: Event) => {
const select = event.target as HTMLSelectElement;
const selectedSystemTheme = select.value as SystemThemeType;
await safeCall(
() => configStore.setSystemTheme(selectedSystemTheme),
'config.systemThemeChangeFailed'
);
};
// 主题选择
const themeOptions = computed(() => AVAILABLE_THEMES);
const selectedTheme = ref<ThemeType>(configStore.config.appearance.theme || 'default-dark' as ThemeType);
@@ -77,6 +95,16 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
</SettingItem>
</SettingSection>
<SettingSection :title="t('settings.systemTheme')">
<SettingItem :title="t('settings.systemTheme')">
<select class="select-input" :value="configStore.config.appearance.systemTheme" @change="updateSystemTheme">
<option v-for="option in systemThemeOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
</SettingItem>
</SettingSection>
<SettingSection :title="t('settings.appearance')">
<div class="appearance-content">
<div class="theme-selection-area">
@@ -140,6 +168,7 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
<style scoped lang="scss">
.settings-page {
max-width: 1000px;
padding-bottom: 48px;
}
.appearance-content {
@@ -169,17 +198,18 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
.select-input {
min-width: 150px;
padding: 8px 12px;
border: 1px solid #555555;
border: 1px solid var(--settings-input-border);
border-radius: 4px;
background-color: #3a3a3a;
color: #e0e0e0;
background-color: var(--settings-input-bg);
color: var(--settings-text);
font-size: 13px;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
padding-right: 30px;
transition: border-color 0.2s ease;
&:focus {
outline: none;
@@ -187,7 +217,8 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
}
option {
background-color: #2a2a2a;
background-color: var(--settings-card-bg);
color: var(--settings-text);
}
}

87
frontend/src/views/settings/pages/EditingPage.vue
View File

@@ -295,30 +295,31 @@ const fontPreviewText = computed(() => {
<style scoped lang="scss">
.settings-page {
max-width: 800px;
padding-bottom: 48px;
}
.number-control {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
.control-button {
width: 30px;
height: 30px;
width: 28px;
height: 28px;
border: 1px solid var(--settings-input-border);
background-color: var(--settings-input-bg);
color: var(--settings-text);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: #3a3a3a;
border: 1px solid #555555;
border-radius: 4px;
color: #e0e0e0;
cursor: pointer;
font-size: 16px;
font-size: 14px;
transition: all 0.2s ease;
&:hover:not(:disabled) {
background-color: #444444;
border-color: #666666;
background-color: var(--settings-hover);
border-color: var(--settings-border);
}
&:active:not(:disabled) {
@@ -335,9 +336,9 @@ const fontPreviewText = computed(() => {
min-width: 50px;
text-align: center;
font-size: 14px;
color: #e0e0e0;
background-color: #3a3a3a;
border: 1px solid #555555;
color: var(--settings-text);
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
padding: 5px 8px;
}
@@ -346,14 +347,14 @@ const fontPreviewText = computed(() => {
.font-size-preview {
margin: 15px 0 5px 20px;
padding: 15px;
background-color: #252525;
border: 1px solid #444444;
background-color: var(--settings-card-bg);
border: 1px solid var(--settings-border);
border-radius: 4px;
font-family: 'Consolas', 'Courier New', monospace;
.preview-label {
font-size: 12px;
color: #888888;
color: var(--text-muted);
margin-bottom: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@@ -364,7 +365,7 @@ const fontPreviewText = computed(() => {
span {
line-height: 1.4;
color: #d0d0d0;
color: var(--settings-text-secondary);
}
.indent {
@@ -377,13 +378,13 @@ const fontPreviewText = computed(() => {
.font-preview {
margin: 15px 0 5px 20px;
padding: 15px;
background-color: #252525;
border: 1px solid #444444;
background-color: var(--settings-card-bg);
border: 1px solid var(--settings-border);
border-radius: 4px;
.preview-label {
font-size: 12px;
color: #888888;
color: var(--text-muted);
margin-bottom: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@@ -393,7 +394,7 @@ const fontPreviewText = computed(() => {
flex-direction: column;
span {
color: #d0d0d0;
color: var(--settings-text-secondary);
}
.indent {
@@ -407,10 +408,10 @@ const fontPreviewText = computed(() => {
.font-weight-select {
min-width: 180px;
padding: 8px 12px;
border: 1px solid #555555;
border: 1px solid var(--settings-input-border);
border-radius: 4px;
background-color: #3a3a3a;
color: #e0e0e0;
background-color: var(--settings-input-bg);
color: var(--settings-text);
font-size: 13px;
cursor: pointer;
@@ -420,12 +421,12 @@ const fontPreviewText = computed(() => {
}
&:hover {
border-color: #666666;
border-color: var(--settings-border);
}
option {
background-color: #3a3a3a;
color: #e0e0e0;
background-color: var(--settings-input-bg);
color: var(--settings-text);
padding: 4px 8px;
}
}
@@ -433,18 +434,18 @@ const fontPreviewText = computed(() => {
.tab-type-toggle {
min-width: 100px;
padding: 8px 15px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
cursor: pointer;
font-size: 13px;
text-align: center;
transition: all 0.2s ease;
&:hover {
background-color: #444444;
border-color: #666666;
background-color: var(--settings-hover);
border-color: var(--settings-border);
}
&:active {
@@ -455,10 +456,10 @@ const fontPreviewText = computed(() => {
.number-input {
width: 100px;
padding: 8px 12px;
border: 1px solid #555555;
border: 1px solid var(--settings-input-border);
border-radius: 4px;
background-color: #3a3a3a;
color: #e0e0e0;
background-color: var(--settings-input-bg);
color: var(--settings-text);
font-size: 13px;
&:focus {
@@ -467,14 +468,14 @@ const fontPreviewText = computed(() => {
}
&:hover {
border-color: #666666;
border-color: var(--settings-border);
}
&:disabled {
opacity: 0.7;
cursor: not-allowed;
background-color: #2a2a2a;
color: #a0a0a0;
background-color: var(--settings-hover);
color: var(--text-muted);
}
}
@@ -491,8 +492,8 @@ const fontPreviewText = computed(() => {
cursor: not-allowed;
&:hover {
background-color: #3a3a3a;
border-color: #555555;
background-color: var(--settings-input-bg);
border-color: var(--settings-input-border);
}
}
@@ -506,8 +507,8 @@ const fontPreviewText = computed(() => {
cursor: not-allowed;
&:hover {
background-color: #3a3a3a;
border-color: #555555;
background-color: var(--settings-input-bg);
border-color: var(--settings-input-border);
transform: none;
}

98
frontend/src/views/settings/pages/GeneralPage.vue
View File

@@ -148,9 +148,11 @@ const progressBarClass = computed(() => {
});
const progressBarWidth = computed(() => {
if (isMigrating.value) {
// 只有在显示消息且正在迁移时才显示进度条
if (showMessages.value && isMigrating.value) {
return migrationProgress.progress + '%';
} else if (migrationComplete.value || migrationFailed.value) {
} else if (showMessages.value && (migrationComplete.value || migrationFailed.value)) {
// 迁移完成或失败时，短暂显示100%，然后随着消息隐藏而隐藏
return '100%';
}
return '0%';
@@ -369,7 +371,7 @@ onUnmounted(() => {
<div
class="progress-bar"
:class="[
{ 'active': showMessages },
{ 'active': showMessages && (isMigrating || migrationComplete || migrationFailed) },
progressBarClass
]"
:style="{ width: progressBarWidth }"
@@ -392,7 +394,7 @@ onUnmounted(() => {
</SettingSection>
<SettingSection :title="t('settings.dangerZone')">
<SettingItem :title="t('settings.resetAllSettings')" :description="t('settings.resetDescription')">
<SettingItem :title="t('settings.resetAllSettings')">
<button
class="reset-button"
:class="{ 'confirming': resetConfirmState === 'confirming' }"
@@ -415,6 +417,7 @@ onUnmounted(() => {
<style scoped lang="scss">
.settings-page {
max-width: 800px;
padding-bottom: 48px;
}
.hotkey-selector {
@@ -453,15 +456,15 @@ onUnmounted(() => {
.modifier-key {
display: inline-block;
padding: 6px 12px;
background-color: #444444;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #b0b0b0;
color: var(--settings-text-secondary);
font-size: 13px;
transition: all 0.2s ease;
&:hover {
background-color: #4a4a4a;
background-color: var(--settings-hover);
}
}
@@ -476,13 +479,13 @@ onUnmounted(() => {
.key-select {
min-width: 80px;
padding: 8px 12px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
font-size: 13px;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
@@ -496,11 +499,12 @@ onUnmounted(() => {
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #2a2a2a;
background-color: var(--settings-hover);
}
option {
background-color: #2a2a2a;
background-color: var(--settings-input-bg);
color: var(--settings-text);
}
}
@@ -509,19 +513,19 @@ onUnmounted(() => {
align-items: center;
gap: 8px;
padding: 8px 12px;
background-color: #252525;
border: 1px solid #444444;
background-color: var(--settings-card-bg);
border: 1px solid var(--settings-border);
border-radius: 4px;
margin-top: 8px;
.preview-label {
font-size: 12px;
color: #888888;
color: var(--settings-text-secondary);
}
.preview-hotkey {
font-size: 13px;
color: #4a9eff;
color: var(--settings-text);
font-weight: 500;
font-family: 'Consolas', 'Courier New', monospace;
}
@@ -544,7 +548,7 @@ onUnmounted(() => {
.setting-title {
font-size: 14px;
font-weight: 500;
color: #e0e0e0;
color: var(--settings-text);
}
}
}
@@ -563,24 +567,23 @@ onUnmounted(() => {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
font-size: 13px;
line-height: 1.2;
transition: all 0.2s ease;
cursor: pointer;
&:hover:not(:disabled) {
border-color: #4a9eff;
background-color: #404040;
border-color: var(--settings-hover);
background-color: var(--settings-hover);
}
&:focus {
outline: none;
border-color: #4a9eff;
background-color: #404040;
}
&:disabled {
@@ -589,7 +592,7 @@ onUnmounted(() => {
}
&::placeholder {
color: #888888;
color: var(--text-muted);
}
}
@@ -598,25 +601,27 @@ onUnmounted(() => {
bottom: 0;
left: 0;
height: 2px;
background-color: #22c55e;
transition: width 0.3s ease;
background-color: transparent;
border-radius: 0 0 4px 4px;
transition: all 0.3s ease;
width: 0;
opacity: 0;
&.active {
opacity: 1;
}
&.migrating {
background-color: #3b82f6;
animation: progress-wave 2s infinite;
}
&.migrating {
background-color: #3b82f6;
}
&.success {
background-color: #22c55e;
}
&.success {
background-color: #22c55e;
}
&.error {
background-color: #ef4444;
&.error {
background-color: #ef4444;
}
}
}
}
@@ -653,10 +658,10 @@ onUnmounted(() => {
}
&.start {
color: #94a3b8;
color: var(--text-muted);
&::before {
background-color: #94a3b8;
background-color: var(--text-muted);
}
}
@@ -732,6 +737,19 @@ onUnmounted(() => {
}
}
// 进度条波浪动画
@keyframes progress-wave {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
// 按钮脉冲动画
@keyframes pulse-button {
0% {

31
frontend/src/views/settings/pages/KeyBindingsPage.vue
View File

@@ -121,6 +121,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
<style scoped lang="scss">
.settings-page {
max-width: 800px;
padding-bottom: 48px;
}
.key-bindings-container {
@@ -129,8 +130,8 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
.key-bindings-header {
display: flex;
padding: 0 0 10px 0;
border-bottom: 1px solid #444444;
color: #a0a0a0;
border-bottom: 1px solid var(--settings-border);
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
}
@@ -138,7 +139,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
.key-binding-row {
display: flex;
padding: 14px 0;
border-bottom: 1px solid #3a3a3a;
border-bottom: 1px solid var(--settings-border);
align-items: center;
transition: background-color 0.2s ease;
@@ -147,7 +148,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
}
&:hover {
background-color: rgba(255, 255, 255, 0.03);
background-color: var(--settings-hover);
}
&.is-editing {
@@ -159,6 +160,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
flex: 1;
padding-right: 10px;
font-size: 14px;
color: var(--settings-text);
}
.keybinding-col {
@@ -169,15 +171,16 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
&.is-editing {
font-style: italic;
color: #a0a0a0;
color: var(--text-muted);
}
.key-badge {
background-color: #3a3a3a;
background-color: var(--settings-input-bg);
padding: 3px 8px;
border-radius: 3px;
font-size: 12px;
border: 1px solid #555555;
border: 1px solid var(--settings-input-border);
color: var(--settings-text);
}
}
@@ -187,17 +190,17 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
.edit-button {
padding: 5px 10px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
&:hover {
background-color: #444444;
border-color: #666666;
background-color: var(--settings-hover);
border-color: var(--settings-border);
}
&:active {
@@ -209,9 +212,9 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
.coming-soon-placeholder {
padding: 20px;
background-color: #333333;
background-color: var(--settings-card-bg);
border-radius: 6px;
color: #a0a0a0;
color: var(--text-muted);
text-align: center;
font-style: italic;
font-size: 14px;

25
frontend/src/views/settings/pages/UpdatesPage.vue
View File

@@ -89,6 +89,7 @@ const downloadUpdate = () => {
<style scoped lang="scss">
.settings-page {
max-width: 800px;
padding-bottom: 48px;
}
.update-info {
@@ -105,22 +106,22 @@ const downloadUpdate = () => {
font-size: 14px;
.label {
color: #a0a0a0;
color: var(--text-muted);
margin-right: 5px;
}
.version {
color: #e0e0e0;
color: var(--settings-text);
font-weight: 500;
}
}
.check-button {
padding: 8px 16px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
@@ -129,8 +130,8 @@ const downloadUpdate = () => {
gap: 8px;
&:hover:not(:disabled) {
background-color: #444444;
border-color: #666666;
background-color: var(--settings-hover);
border-color: var(--settings-border);
}
&:active:not(:disabled) {
@@ -148,7 +149,7 @@ const downloadUpdate = () => {
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #e0e0e0;
border-top-color: var(--settings-text);
animation: spin 1s linear infinite;
}
@@ -159,8 +160,8 @@ const downloadUpdate = () => {
}
.update-available {
background-color: #2c3847;
border: 1px solid #3a4a5c;
background-color: var(--settings-card-bg);
border: 1px solid var(--settings-border);
border-radius: 6px;
padding: 16px;
@@ -199,7 +200,7 @@ const downloadUpdate = () => {
.update-notes {
.notes-title {
font-size: 13px;
color: #b0b0b0;
color: var(--settings-text-secondary);
margin-bottom: 8px;
}
@@ -209,7 +210,7 @@ const downloadUpdate = () => {
li {
font-size: 13px;
color: #d0d0d0;
color: var(--settings-text-secondary);
margin-bottom: 6px;
&:last-child {

22
internal/models/config.go
View File

@@ -56,6 +56,18 @@ const (
ThemeTokyoNightDay ThemeType = "tokyo-night-day"
)
// SystemThemeType 系统主题类型定义
type SystemThemeType string
const (
// SystemThemeDark 深色系统主题
SystemThemeDark SystemThemeType = "dark"
// SystemThemeLight 浅色系统主题
SystemThemeLight SystemThemeType = "light"
// SystemThemeAuto 跟随系统主题
SystemThemeAuto SystemThemeType = "auto"
)
// GeneralConfig 通用设置配置
type GeneralConfig struct {
AlwaysOnTop bool `json:"alwaysOnTop" yaml:"always_on_top" mapstructure:"always_on_top"` // 窗口是否置顶
@@ -95,8 +107,9 @@ type EditingConfig struct {
// AppearanceConfig 外观设置配置
type AppearanceConfig struct {
Language LanguageType `json:"language" yaml:"language" mapstructure:"language"` // 界面语言
Theme ThemeType `json:"theme" yaml:"theme" mapstructure:"theme"` // 编辑器主题
Language LanguageType `json:"language" yaml:"language" mapstructure:"language"` // 界面语言
Theme ThemeType `json:"theme" yaml:"theme" mapstructure:"theme"` // 编辑器主题
SystemTheme SystemThemeType `json:"systemTheme" yaml:"system_theme" mapstructure:"system_theme"` // 系统界面主题
}
// KeyBindingsConfig 快捷键设置配置
@@ -164,8 +177,9 @@ func NewDefaultAppConfig() *AppConfig {
AutoSaveDelay: 5000, // 5秒后自动保存
},
Appearance: AppearanceConfig{
Language: LangZhCN,
Theme: ThemeDefaultDark, // 默认使用深色主题
Language: LangZhCN,
Theme: ThemeDefaultDark, // 默认使用深色主题
SystemTheme: SystemThemeDark, // 默认使用深色系统主题
},
KeyBindings: KeyBindingsConfig{
// 预留给未来的快捷键配置

2
internal/services/config_service.go
View File

@@ -127,6 +127,7 @@ func setDefaults(v *viper.Viper) {
// 外观设置默认值
v.SetDefault("appearance.language", defaultConfig.Appearance.Language)
v.SetDefault("appearance.theme", defaultConfig.Appearance.Theme)
v.SetDefault("appearance.system_theme", defaultConfig.Appearance.SystemTheme)
// 元数据默认值
v.SetDefault("metadata.version", defaultConfig.Metadata.Version)
@@ -262,6 +263,7 @@ func (cs *ConfigService) ResetConfig() {
// 外观设置 - 批量设置到viper中
cs.viper.Set("appearance.language", defaultConfig.Appearance.Language)
cs.viper.Set("appearance.theme", defaultConfig.Appearance.Theme)
cs.viper.Set("appearance.system_theme", defaultConfig.Appearance.SystemTheme)
// 元数据 - 批量设置到viper中
cs.viper.Set("metadata.version", defaultConfig.Metadata.Version)