From 29d0c48460ee3a5fdf492417e4e63e0a4cb71188 Mon Sep 17 00:00:00 2001 From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com> Date: Thu, 24 Apr 2025 13:43:06 +0800 Subject: [PATCH] update --- .../src/components/StyleCustomizer.vue | 80 +++++++++++++++++++ .../appearance/config/default-themes.ts | 4 +- packages/frontend/src/locales/en.json | 7 +- packages/frontend/src/locales/zh.json | 7 +- 4 files changed, 94 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/components/StyleCustomizer.vue b/packages/frontend/src/components/StyleCustomizer.vue index ea08a0a..7987de7 100644 --- a/packages/frontend/src/components/StyleCustomizer.vue +++ b/packages/frontend/src/components/StyleCustomizer.vue @@ -187,6 +187,54 @@ const handleResetUiTheme = async () => { } }; +// 定义黑暗模式主题变量 +const darkModeTheme = { + '--app-bg-color': '#212529', + '--text-color': '#e9ecef', + '--text-color-secondary': '#adb5bd', + '--border-color': '#495057', + '--link-color': '#6cb2eb', + '--link-hover-color': '#91caff', + '--link-active-color': '#3498db', + '--link-active-bg-color': 'rgba(52, 152, 219, 0.2)', + '--nav-item-active-bg-color': 'var(--link-active-bg-color)', + '--header-bg-color': '#343a40', + '--footer-bg-color': '#343a40', + '--button-bg-color': 'var(--link-active-color)', + '--button-text-color': '#ffffff', + '--button-hover-bg-color': '#2980b9', + '--icon-color': 'var(--text-color-secondary)', + '--icon-hover-color': 'var(--link-hover-color)', + '--split-line-color': 'var(--border-color)', + '--split-line-hover-color': 'var(--border-color)', + '--input-focus-border-color': 'var(--link-active-color)', + '--input-focus-glow': 'var(--link-active-color)', + '--ssh-tab-active': 'transparent', + '--ssh-tab-background': 'transparent', + '--overlay-bg-color': 'rgba(0, 0, 0, 0.8)', + '--color-success': '#5cb85c', + '--color-error': '#d9534f', + '--color-warning': '#f0ad4e', + '--font-family-sans-serif': 'sans-serif', + '--base-padding': '1rem', + '--base-margin': '0.5rem' +}; + +// 应用黑暗模式 +const applyDarkMode = async () => { + try { + // 深拷贝覆盖当前编辑的主题 + editableUiTheme.value = JSON.parse(JSON.stringify(darkModeTheme)); + await appearanceStore.saveCustomUiTheme(editableUiTheme.value); + // TODO: 添加 i18n 翻译 'styleCustomizer.darkModeApplied' + alert(t('styleCustomizer.darkModeApplied', '黑暗模式已应用')); + } catch (error: any) { + console.error("应用黑暗模式失败:", error); + // TODO: 添加 i18n 翻译 'styleCustomizer.darkModeApplyFailed' + alert(t('styleCustomizer.darkModeApplyFailed', { message: error.message || '未知错误' })); + } +}; + // --- Textarea 和 Color Picker 同步 --- // 计算属性：将本地编辑的 UI 主题对象格式化为内部键值对字符串（无大括号，无行尾逗号） @@ -801,6 +849,14 @@ const handleFocusAndSelect = (event: FocusEvent) => {

{{ t('styleCustomizer.uiStyles') }}

+ +
+ +
+ + +
+

{{ t('styleCustomizer.uiDescription') }}

@@ -1735,4 +1791,28 @@ hr { cursor: not-allowed; } +/* 主题模式选择器样式 */ +.theme-mode-selector { + grid-template-columns: auto 1fr; /* 标签自动宽度，按钮组占据剩余空间 */ + margin-bottom: calc(var(--base-padding) * 1.5); /* 与下方元素的间距 */ +} + +.theme-mode-selector label { + grid-column: 1 / 2; + text-align: left; + color: var(--text-color); + font-size: 0.9rem; + font-weight: 500; + align-self: center; /* 垂直居中 */ +} + +.theme-mode-selector .button-group { + grid-column: 2 / 3; + display: flex; + gap: var(--base-margin); /* 按钮间距 */ + justify-content: flex-start; /* 按钮靠左对齐 */ +} + +/* 按钮组内的按钮继承 .button-inline 样式，无需重复 */ + diff --git a/packages/frontend/src/features/appearance/config/default-themes.ts b/packages/frontend/src/features/appearance/config/default-themes.ts index 45c0e14..c058cba 100644 --- a/packages/frontend/src/features/appearance/config/default-themes.ts +++ b/packages/frontend/src/features/appearance/config/default-themes.ts @@ -32,7 +32,7 @@ export const defaultUiTheme: Record = { '--text-color': '#333333', '--text-color-secondary': '#666666', '--border-color': '#cccccc', - '--link-color': '#333', + '--link-color': '#333333', // 修复：扩展为 #rrggbb '--link-hover-color': '#0056b3', '--link-active-color': '#007bff', '--link-active-bg-color': '#e0e0ff', /* Added */ @@ -51,7 +51,7 @@ export const defaultUiTheme: Record = { '--input-focus-glow': 'var(--link-active-color)', /* 输入框聚焦光晕值 */ '--ssh-tab-active': 'transparent', /* Added SSH Tab Active */ '--ssh-tab-background': 'transparent', /* Added SSH Tab Background */ - '--overlay-bg-color': 'rgba(0, 0, 0, 0.6)', /* Added Overlay Background */ + '--overlay-bg-color': '#000000', /* Added Overlay Background - 修复：改为 #rrggbb 格式 */ // End added variables '--font-family-sans-serif': 'sans-serif', '--base-padding': '1rem', diff --git a/packages/frontend/src/locales/en.json b/packages/frontend/src/locales/en.json index ef98d49..b1a93eb 100644 --- a/packages/frontend/src/locales/en.json +++ b/packages/frontend/src/locales/en.json @@ -81,7 +81,12 @@ "applyButton": "Apply", "searchThemePlaceholder": "Search theme name...", "exportActiveThemeTooltip": "Export the currently active theme as a JSON file", - "exportActiveTheme": "Export Active Theme" + "exportActiveTheme": "Export Active Theme", + "themeModeLabel": "Theme Mode:", + "defaultMode": "Default Mode", + "darkMode": "Dark Mode", + "darkModeApplied": "Dark mode applied", + "darkModeApplyFailed": "Failed to apply dark mode: {message}" }, "login": { "title": "User Login", diff --git a/packages/frontend/src/locales/zh.json b/packages/frontend/src/locales/zh.json index 553118d..bf4891f 100644 --- a/packages/frontend/src/locales/zh.json +++ b/packages/frontend/src/locales/zh.json @@ -81,7 +81,12 @@ "applyButton": "应用", "searchThemePlaceholder": "搜索主题名称...", "exportActiveThemeTooltip": "将当前激活的主题导出为 JSON 文件", - "exportActiveTheme": "导出当前主题" + "exportActiveTheme": "导出当前主题", + "themeModeLabel": "主题模式:", + "defaultMode": "默认模式", + "darkMode": "黑暗模式", + "darkModeApplied": "黑暗模式已应用", + "darkModeApplyFailed": "应用黑暗模式失败: {message}" }, "login": { "title": "用户登录",