From f29e15cde5ae22cc8c73921af40554144ef6fe24 Mon Sep 17 00:00:00 2001 From: himeditator Date: Sat, 5 Jul 2025 00:54:12 +0800 Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E6=B7=BB=E5=8A=A0=E6=9A=97?= =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增暗色主题选项和系统主题自动适配功能 - 调整了部分样式以适应暗色主题 --- CHANGELOG.md | 1 + TODO.md | 1 + assets/technical-docs/api-doc.md | 35 +++++++++++++- src/main/ControlWindow.ts | 24 +++++++++- src/main/types/index.ts | 3 ++ src/main/utils/AllConfig.ts | 8 +++- src/renderer/src/App.vue | 6 ++- src/renderer/src/assets/main.css | 11 ++++- src/renderer/src/assets/reset.css | 6 --- src/renderer/src/components/CaptionLog.vue | 10 ++-- .../src/components/GeneralSetting.vue | 11 ++++- src/renderer/src/i18n/config/theme.ts | 10 ++++ src/renderer/src/i18n/index.ts | 1 + src/renderer/src/i18n/lang/en.ts | 6 ++- src/renderer/src/i18n/lang/ja.ts | 6 ++- src/renderer/src/i18n/lang/zh.ts | 6 ++- src/renderer/src/main.ts | 2 +- src/renderer/src/stores/generalSetting.ts | 42 +++++++++++++++-- src/renderer/src/types/index.ts | 3 ++ src/renderer/src/views/ControlPage.vue | 46 +++++++++++-------- 20 files changed, 192 insertions(+), 46 deletions(-) delete mode 100644 src/renderer/src/assets/reset.css create mode 100644 src/renderer/src/i18n/config/theme.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d0dcf4..c6d7219 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,6 +35,7 @@ - 优化界面布局 - 添加更多可保存和载入的配置项 +- 为字幕引擎添加更严格的状态限制，防止出现僵尸进程 ### 新增文档 diff --git a/TODO.md b/TODO.md index fcca37c..a210407 100644 --- a/TODO.md +++ b/TODO.md @@ -1,4 +1,5 @@ - [x] 添加英语和日语语言支持 - [ ] 优化长字幕显示效果 +- [x] 添加暗色主题 - [ ] 修复字幕引擎空置报错的问题 - [ ] 添加更多字幕引擎 diff --git a/assets/technical-docs/api-doc.md b/assets/technical-docs/api-doc.md index b8924c0..8e7340e 100644 --- a/assets/technical-docs/api-doc.md +++ b/assets/technical-docs/api-doc.md @@ -31,6 +31,19 @@ - 发送：无数据 - 接收：`FullConfig` +### `control.nativeTheme.get` + +**介绍：**前端获取系统当前的主题 + +**发起方：**前端控制窗口 + +**接收方：**后端控制窗口实例 + +**数据类型：** + +- 发送：无数据 +- 接收：`string` + ## 前端 ==> 后端 ### `control.uiLanguage.change` @@ -43,6 +56,16 @@ **数据类型：**`UILanguage` +### `control.uiTheme.change` + +**介绍：**前端修改字界面主题，将修改同步给后端 + +**发起方：**前端控制窗口 + +**接收方：**后端控制窗口实例 + +**数据类型：**`UITheme` + ### `control.leftBarWidth.change` **介绍：**前端修改边栏宽度，将修改同步给后端 @@ -165,7 +188,7 @@ ## 后端 ==> 前端 -### `caption.uiLanguage.set` +### `control.uiLanguage.set` **介绍：**后端将最新界面语言发送给前端，前端进行设置 @@ -175,6 +198,16 @@ **数据类型：**`UILanguage` +### `control.nativeTheme.change` + +**介绍：**系统主题发生改变 + +**发起方：**后端 + +**接收方：**前端控制窗口 + +**数据类型：**`string` + ### `control.engine.started` **介绍：**引擎启动成功 diff --git a/src/main/ControlWindow.ts b/src/main/ControlWindow.ts index 8a3ee69..fb492a8 100644 --- a/src/main/ControlWindow.ts +++ b/src/main/ControlWindow.ts @@ -1,4 +1,4 @@ -import { shell, BrowserWindow, ipcMain } from 'electron' +import { shell, BrowserWindow, ipcMain, nativeTheme } from 'electron' import path from 'path' import { is } from '@electron-toolkit/utils' import icon from '../../resources/icon.png?asset' @@ -50,17 +50,37 @@ class ControlWindow { } public handleMessage() { + nativeTheme.on('updated', () => { + if(allConfig.uiTheme === 'system'){ + if(nativeTheme.shouldUseDarkColors && this.window){ + this.window.webContents.send('control.nativeTheme.change', 'dark') + } + else if(!nativeTheme.shouldUseDarkColors && this.window){ + this.window.webContents.send('control.nativeTheme.change', 'light') + } + } + }) + ipcMain.handle('both.window.mounted', () => { return allConfig.getFullConfig() }) + ipcMain.handle('control.nativeTheme.get', () => { + if(nativeTheme.shouldUseDarkColors) return 'dark' + return 'light' + }) + ipcMain.on('control.uiLanguage.change', (_, args) => { allConfig.uiLanguage = args if(captionWindow.window){ - captionWindow.window.webContents.send('caption.uiLanguage.set', args) + captionWindow.window.webContents.send('control.uiLanguage.set', args) } }) + ipcMain.on('control.uiTheme.change', (_, args) => { + allConfig.uiTheme = args + }) + ipcMain.on('control.leftBarWidth.change', (_, args) => { allConfig.leftBarWidth = args }) diff --git a/src/main/types/index.ts b/src/main/types/index.ts index 4806ed0..0a2af4c 100644 --- a/src/main/types/index.ts +++ b/src/main/types/index.ts @@ -1,5 +1,7 @@ export type UILanguage = "zh" | "en" | "ja" +export type UITheme = "light" | "dark" | "system" + export interface Controls { engineEnabled: boolean, sourceLang: string, @@ -35,6 +37,7 @@ export interface CaptionItem { export interface FullConfig { uiLanguage: UILanguage, + uiTheme: UITheme, leftBarWidth: number, styles: Styles, controls: Controls, diff --git a/src/main/utils/AllConfig.ts b/src/main/utils/AllConfig.ts index 9b8867b..23e8382 100644 --- a/src/main/utils/AllConfig.ts +++ b/src/main/utils/AllConfig.ts @@ -1,6 +1,6 @@ import { - UILanguage, Styles, CaptionItem, Controls, - FullConfig + UILanguage, UITheme, Styles, Controls, + CaptionItem, FullConfig } from '../types' import { app, BrowserWindow } from 'electron' import * as path from 'path' @@ -35,6 +35,7 @@ const defaultControls: Controls = { class AllConfig { uiLanguage: UILanguage = 'zh'; leftBarWidth: number = 8; + uiTheme: UITheme = 'system'; styles: Styles = {...defaultStyles}; controls: Controls = {...defaultControls}; captionLog: CaptionItem[] = []; @@ -46,6 +47,7 @@ class AllConfig { if(fs.existsSync(configPath)){ const config = JSON.parse(fs.readFileSync(configPath, 'utf-8')) if(config.uiLanguage) this.uiLanguage = config.uiLanguage + if(config.uiTheme) this.uiTheme = config.uiTheme if(config.leftBarWidth) this.leftBarWidth = config.leftBarWidth if(config.styles) this.setStyles(config.styles) if(config.controls) this.setControls(config.controls) @@ -56,6 +58,7 @@ class AllConfig { public writeConfig() { const config = { uiLanguage: this.uiLanguage, + uiTheme: this.uiTheme, leftBarWidth: this.leftBarWidth, controls: this.controls, styles: this.styles @@ -68,6 +71,7 @@ class AllConfig { public getFullConfig(): FullConfig { return { uiLanguage: this.uiLanguage, + uiTheme: this.uiTheme, leftBarWidth: this.leftBarWidth, styles: this.styles, controls: this.controls, diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue index 1a4a3f2..5f42c6d 100644 --- a/src/renderer/src/App.vue +++ b/src/renderer/src/App.vue @@ -4,16 +4,20 @@