feat(auto-caption): 发布 v0.7.0 版本

README.md

@@ -3,7 +3,7 @@
     <h1 align="center">auto-caption</h1>
     <p>Auto Caption 是一个跨平台的实时字幕显示软件。</p>
     <p>
-      <a href="https://github.com/HiMeditator/auto-caption/releases"><img src="https://img.shields.io/badge/release-0.6.0-blue"></a>
+      <a href="https://github.com/HiMeditator/auto-caption/releases"><img src="https://img.shields.io/badge/release-0.7.0-blue"></a>
       <a href="https://github.com/HiMeditator/auto-caption/issues"><img src="https://img.shields.io/github/issues/HiMeditator/auto-caption?color=orange"></a>
       <img src="https://img.shields.io/github/languages/top/HiMeditator/auto-caption?color=royalblue">
       <img src="https://img.shields.io/github/repo-size/HiMeditator/auto-caption?color=green">
@@ -14,7 +14,7 @@
         | <a href="./README_en.md">English</a>
         | <a href="./README_ja.md">日本語</a> |
     </p>
-    <p><i>v0.6.0 版本已经发布，对字幕引擎代码进行了大重构，提升了代码的可扩展性。更多的字幕引擎正在尝试开发中...</i></p>
+    <p><i>v0.7.0 版本已经发布，优化了软件界面，添加了日志记录显示。本地的字幕引擎正在尝试开发中，预计以 Python 代码的形式进行发布...</i></p>
 </div>
 
 ![](./assets/media/main_zh.png)
@@ -33,6 +33,15 @@
 
 [更新日志](./docs/CHANGELOG.md)
 
+## ✨ 特性
+
+- 生成音频输出或麦克风输入的字幕
+- 跨平台（Windows、macOS、Linux）、多界面语言（中文、英语、日语）支持
+- 丰富的字幕样式设置（字体、字体大小、字体粗细、字体颜色、背景颜色等）
+- 灵活的字幕引擎选择（阿里云 Gummy 云端模型、本地 Vosk 模型、自己开发的模型）
+- 多语言识别与翻译（见下文“⚙️ 自带字幕引擎说明”）
+- 字幕记录展示与导出（支持导出 `.srt` 和 `.json` 格式）
+
 ## 📖 基本使用
 
 软件已经适配了 Windows、macOS 和 Linux 平台。测试过的平台信息如下：
@@ -62,15 +71,6 @@ macOS 平台和 Linux 平台获取系统音频输出需要进行额外设置，
 
 **如果你觉得上述字幕引擎不能满足你的需求，而且你会 Python，那么你可以考虑开发自己的字幕引擎。详细说明请参考[字幕引擎说明文档](./docs/engine-manual/zh.md)。**
 
-## ✨ 特性
-
-- 跨平台、多界面语言支持
-- 丰富的字幕样式设置
-- 灵活的字幕引擎选择
-- 多语言识别与翻译
-- 字幕记录展示与导出
-- 生成音频输出或麦克风输入的字幕
-
 ## ⚙️ 自带字幕引擎说明
 
 目前软件自带 2 个字幕引擎，正在规划新的引擎。它们的详细信息如下。

README_en.md

@@ -3,7 +3,7 @@
     <h1 align="center">auto-caption</h1>
     <p>Auto Caption is a cross-platform real-time caption display software.</p>
     <p>
-      <a href="https://github.com/HiMeditator/auto-caption/releases"><img src="https://img.shields.io/badge/release-0.6.0-blue"></a>
+      <a href="https://github.com/HiMeditator/auto-caption/releases"><img src="https://img.shields.io/badge/release-0.7.0-blue"></a>
       <a href="https://github.com/HiMeditator/auto-caption/issues"><img src="https://img.shields.io/github/issues/HiMeditator/auto-caption?color=orange"></a>
       <img src="https://img.shields.io/github/languages/top/HiMeditator/auto-caption?color=royalblue">
       <img src="https://img.shields.io/github/repo-size/HiMeditator/auto-caption?color=green">
@@ -14,7 +14,7 @@
         | <b>English</b>
         | <a href="./README_ja.md">日本語</a> |
     </p>
-    <p><i>Version 0.6.0 has been released, featuring a major refactor of the subtitle engine code to improve code extensibility. More subtitle engines are being developed...</i></p>
+    <p><i>Version 0.7.0 has been released, imporving the software interface and adding software log display. The local caption engine is under development and is expected to be released in the form of Python code...</i></p>
 </div>
 
 ![](./assets/media/main_en.png)
@@ -33,6 +33,15 @@
 
 [Changelog](./docs/CHANGELOG.md)
 
+## ✨ Features
+
+- Generate captions from audio output or microphone input
+- Cross-platform (Windows, macOS, Linux) and multi-language interface (Chinese, English, Japanese) support
+- Rich caption style settings (font, font size, font weight, font color, background color, etc.)
+- Flexible caption engine selection (Alibaba Cloud Gummy cloud model, local Vosk model, self-developed model)
+- Multi-language recognition and translation (see below "⚙️ Built-in Subtitle Engines")
+- Subtitle record display and export (supports exporting `.srt` and `.json` formats)
+
 ## 📖 Basic Usage
 
 The software has been adapted for Windows, macOS, and Linux platforms. The tested platform information is as follows:
@@ -62,15 +71,6 @@ To use the Vosk local caption engine, first download your required model from [V
 
 **If you find the above caption engines don't meet your needs and you know Python, you may consider developing your own caption engine. For detailed instructions, please refer to the [Caption Engine Documentation](./docs/engine-manual/en.md).**
 
-## ✨ Features
-
-- Cross-platform, multi-language UI support
-- Rich caption style settings
-- Flexible caption engine selection
-- Multi-language recognition and translation
-- Caption recording display and export
-- Generate captions for audio output or microphone input
-
 ## ⚙️ Built-in Subtitle Engines
 
 Currently, the software comes with 2 subtitle engines, with new engines under development. Their detailed information is as follows.

README_ja.md

@@ -3,7 +3,7 @@
     <h1 align="center">auto-caption</h1>
     <p>Auto Caption はクロスプラットフォームのリアルタイム字幕表示ソフトウェアです。</p>
     <p>
-      <a href="https://github.com/HiMeditator/auto-caption/releases"><img src="https://img.shields.io/badge/release-0.6.0-blue"></a>
+      <a href="https://github.com/HiMeditator/auto-caption/releases"><img src="https://img.shields.io/badge/release-0.7.0-blue"></a>
       <a href="https://github.com/HiMeditator/auto-caption/issues"><img src="https://img.shields.io/github/issues/HiMeditator/auto-caption?color=orange"></a>
       <img src="https://img.shields.io/github/languages/top/HiMeditator/auto-caption?color=royalblue">
       <img src="https://img.shields.io/github/repo-size/HiMeditator/auto-caption?color=green">
@@ -14,7 +14,7 @@
         | <a href="./README_en.md">English</a>
         | <b>日本語</b> |
     </p>
-    <p><i>v0.6.0 バージョンがリリースされ、字幕エンジンコードが大規模にリファクタリングされ、コードの拡張性が向上しました。より多くの字幕エンジンの開発が試みられています...</i></p>
+    <p><i>バージョン 0.7.0 がリリースされ、ソフトウェアインターフェースが最適化され、ログ記録表示機能が追加されました。ローカルの字幕エンジンは現在開発中であり、Pythonコードの形式でリリースされる予定です...</i></p>
 </div>
 
 ![](./assets/media/main_ja.png)
@@ -33,9 +33,18 @@
 
 [更新履歴](./docs/CHANGELOG.md)
 
+## ✨ 特徴
+
+- 音声出力またはマイク入力からの字幕生成
+- クロスプラットフォーム（Windows、macOS、Linux）、多言語インターフェース（中国語、英語、日本語）対応
+- 豊富な字幕スタイル設定（フォント、フォントサイズ、フォント太さ、フォント色、背景色など）
+- 柔軟な字幕エンジン選択（阿里雲 Gummy クラウドモデル、ローカル Vosk モデル、独自開発モデル）
+- 多言語認識と翻訳（下記「⚙️ 字幕エンジン説明」参照）
+- 字幕記録表示とエクスポート（`.srt` および `.json` 形式のエクスポートに対応）
+
 ## 📖 基本使い方
 
-このソフトウェアはWindows、macOS、Linuxプラットフォームに対応しています。テスト済みのプラットフォーム情報は以下の通りです：
+このソフトウェアは Windows、macOS、Linux プラットフォームに対応しています。テスト済みのプラットフォーム情報は以下の通りです：
 
 | OS バージョン | アーキテクチャ | システムオーディオ入力 | システムオーディオ出力 |
 | ------------------ | ------------ | ------------------ | ------------------- |
@@ -45,7 +54,7 @@
 | Kali Linux 2022.3  | x64          | ✅                 | ✅                   |
 | Kylin Server V10 SP3 | x64 | ✅ | ✅ |
 
-macOSおよびLinuxプラットフォームでシステムオーディオ出力を取得するには追加設定が必要です。詳細は[Auto Captionユーザーマニュアル](./docs/user-manual/ja.md)をご覧ください。
+macOS および Linux プラットフォームでシステムオーディオ出力を取得するには追加設定が必要です。詳細は[Auto Captionユーザーマニュアル](./docs/user-manual/ja.md)をご覧ください。
 
 > 阿里雲の国際版サービスでは Gummy モデルを提供していないため、現在中国以外のユーザーは Gummy 字幕エンジンを使用できません。
 
@@ -62,15 +71,6 @@ Vosk ローカル字幕エンジンを使用するには、まず [Vosk Models](
 
 **上記の字幕エンジンがご要望を満たさず、かつ Python の知識をお持ちの場合、独自の字幕エンジンを開発することも可能です。詳細な説明は[字幕エンジン説明書](./docs/engine-manual/ja.md)をご参照ください。**
 
-## ✨ 特徴
-
-- クロスプラットフォーム、多言語 UI サポート
-- 豊富な字幕スタイル設定
-- 柔軟な字幕エンジン選択
-- 多言語認識と翻訳
-- 字幕記録の表示とエクスポート
-- オーディオ出力またはマイク入力からの字幕生成
-
 ## ⚙️ 字幕エンジン説明
 
 現在、ソフトウェアには2つの字幕エンジンが搭載されており、新しいエンジンが計画されています。それらの詳細情報は以下の通りです。

docs/CHANGELOG.md

@@ -140,9 +140,17 @@
 
 ## v0.7.0
 
-2025-08-xx
+2025-08-20
 
 ### 新增功能
 
 - 添加字幕窗口宽度记忆，重新打开时与上次字幕窗口宽度一致
-- 在尝试关闭字幕引擎 4s 后字幕引擎仍未关闭，则强制关闭字幕引擎
+- 在尝试关闭字幕引擎 4s 后字幕引擎仍未关闭，则强制关闭字幕引擎
+- 添加复制最新字幕选项，用户可以选择只复制最近1~3条字幕 (#13)
+- 添加主题颜色设置，支持六种颜色：蓝色、绿色、橙色、紫色、粉色、暗色/明色
+- 添加日志记录显示：可以查看软件的字幕引擎输出的日志记录
+
+### 优化体验
+
+- 优化软件用户界面的部分组件
+- 更清晰的日志输出

docs/TODO.md

@@ -20,10 +20,10 @@
 - [x] 优化前端界面提示消息 *2025/07/29*
 - [x] 复制字幕记录可选择只复制最近的字幕记录 *2025/08/18*
 - [x] 添加颜色主题设置 *2025/08/18*
+- [x] 前端页面添加日志内容展示 *2025/08/19*
 
 ## 待完成
 
-- [ ] 前端页面添加日志内容展示
 - [ ] 调研更多的云端模型（火山、OpenAI、Google等）
 - [ ] 验证 / 添加基于 sherpa-onnx 的字幕引擎
 

docs/api-docs/caption-engine.md

@@ -80,6 +80,17 @@ Python 端监听到的音频流转换为的字幕数据。
 
 Python 端打印的提示信息，比起 `print`，该信息更希望 Electron 端的关注。
 
+### `error`
+
+```js
+{
+  command: "error",
+  content: string
+}
+```
+
+Python 端打印的错误信息，该错误信息需要在前端弹窗显示。
+
 ### `usage`
 
 ```js

engine/main.py

@@ -1,5 +1,5 @@
 import argparse
-from utils import stdout_cmd, stderr
+from utils import stdout_cmd, stdout_err
 from utils import thread_data, start_server
 from utils import merge_chunk_channels, resample_chunk_mono
 from audio2text import InvalidParameter, GummyRecognizer
@@ -17,6 +17,7 @@ def main_gummy(s: str, t: str, a: int, c: int, k: str):
 
     stream.open_stream()
     engine.start()
+    chunk_mono = bytes()
 
     restart_count = 0
     while thread_data.status == "running":
@@ -28,15 +29,17 @@ def main_gummy(s: str, t: str, a: int, c: int, k: str):
                 engine.send_audio_frame(chunk_mono)
             except InvalidParameter as e:
                 restart_count += 1
-                if restart_count > 8:
-                    stderr(str(e))
+                if restart_count > 5:
+                    stdout_err(str(e))
                     thread_data.status = "kill"
+                    stdout_cmd('kill')
                     break
                 else:
-                    stdout_cmd('info', f'Gummy engine stopped, trying to restart #{restart_count}')
+                    stdout_cmd('info', f'Gummy engine stopped, restart attempt: {restart_count}...')
         except KeyboardInterrupt:
             break
 
+    engine.send_audio_frame(chunk_mono)
     stream.close_stream()
     engine.stop()
 

engine/utils/__init__.py

@@ -4,6 +4,6 @@ from .audioprcs import (
     resample_chunk_mono_np,
     resample_mono_chunk
 )
-from .sysout import stdout, stdout_cmd, stdout_obj, stderr
+from .sysout import stdout, stdout_err, stdout_cmd, stdout_obj, stderr
 from .thdata import thread_data
 from .server import start_server

engine/utils/sysout.py

@@ -4,6 +4,9 @@ import json
 def stdout(text: str):
     stdout_cmd("print", text)
 
+def stdout_err(text: str):
+    stdout_cmd("error", text)
+
 def stdout_cmd(command: str, content = ""):
     msg = { "command": command, "content": content }
     sys.stdout.write(json.dumps(msg) + "\n")

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "auto-caption",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "auto-caption",
-      "version": "0.6.0",
+      "version": "0.7.0",
       "hasInstallScript": true,
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "auto-caption",
   "productName": "Auto Caption",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A cross-platform subtitle display software.",
   "main": "./out/main/index.js",
   "author": "himeditator",

src/main/utils/AllConfig.ts

@@ -61,6 +61,7 @@ class AllConfig {
   public readConfig() {
     const configPath = path.join(app.getPath('userData'), 'config.json')
     if(fs.existsSync(configPath)){
+      Log.info('Read Config from:', configPath)
       const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'))
       if(config.captionWindowWidth) this.captionWindowWidth = config.captionWindowWidth
       if(config.uiLanguage) this.uiLanguage = config.uiLanguage
@@ -69,7 +70,6 @@ class AllConfig {
       if(config.leftBarWidth) this.leftBarWidth = config.leftBarWidth
       if(config.styles) this.setStyles(config.styles)
       if(config.controls) this.setControls(config.controls)
-      Log.info('Read Config from:', configPath)
     }
   }
 

src/main/utils/CaptionEngine.ts

@@ -150,8 +150,7 @@ export class CaptionEngine {
       const lines = data.toString().split('\n')
       lines.forEach((line: string) => {
         if(line.trim()){
-          controlWindow.sendErrorMessage(/*i18n('engine.error') +*/ line)
-          console.error(line)          
+          Log.error(line)       
         }
       })
     });
@@ -228,6 +227,10 @@ function handleEngineData(data: any) {
   else if(data.command === 'info') {
     Log.info('Engine Info:', data.content)
   }
+  else if(data.command === 'error') {
+    Log.error('Engine Error:', data.content)
+    controlWindow.sendErrorMessage(/*i18n('engine.error') +*/ data.content)
+  }
   else if(data.command === 'usage') {
     Log.info('Engine Token Usage: ', data.content)
   }

src/renderer/src/components/CaptionLog.vue

@@ -122,14 +122,19 @@
       </template>
       <template v-if="column.key === 'time'">
         <div class="time-cell">
-          <div class="time-start">{{ record.time_s }}</div>
-          <div class="time-end">{{ record.time_t }}</div>
+          <code class="time-start"
+            :style="`color: ${uiColor}`"
+          >{{ record.time_s }}</code>
+          <code class="time-end">{{ record.time_t }}</code>
         </div>
       </template>
       <template v-if="column.key === 'content'">
         <div class="caption-content">
           <div class="caption-text">{{ record.text }}</div>
-          <div class="caption-translation">{{ record.translation }}</div>
+          <div
+            class="caption-translation"
+            :style="`border-left: 3px solid ${uiColor};`"
+          >{{ record.translation }}</div>
         </div>
       </template>
     </template>
@@ -140,6 +145,7 @@
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useCaptionLogStore } from '@renderer/stores/captionLog'
+import { useGeneralSettingStore } from '@renderer/stores/generalSetting'
 import { message } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
 import * as tc from '../utils/timeCalc'
@@ -150,6 +156,9 @@ const { t } = useI18n()
 const captionLog = useCaptionLogStore()
 const { captionData } = storeToRefs(captionLog)
 
+const generalSetting = useGeneralSettingStore()
+const { uiColor } = storeToRefs(generalSetting)
+
 const exportFormat = ref('srt')
 const showIndex = ref(true)
 const copyTime = ref(true)
@@ -326,10 +335,13 @@ function clearCaptions() {
 }
 
 .time-start {
-  color: #1677ff;
+  display: block;
+  font-weight: bold;
 }
 
 .time-end {
+  display: block;
+  font-weight: bold;
   color: #ff4d4f;
 }
 
@@ -345,6 +357,5 @@ function clearCaptions() {
 .caption-translation {
   font-size: 14px;
   padding-left: 16px;
-  border-left: 3px solid #1890ff;
 }
 </style>

src/renderer/src/components/EngineStatus.vue

@@ -86,7 +86,7 @@
       <p class="about-desc">{{ $t('status.about.desc') }}</p>
       <a-divider />
       <div class="about-info">
-        <p><b>{{ $t('status.about.version') }}</b><a-tag color="green">v0.6.0</a-tag></p>
+        <p><b>{{ $t('status.about.version') }}</b><a-tag color="green">v0.7.0</a-tag></p>
         <p>
           <b>{{ $t('status.about.author') }}</b>
           <a

src/renderer/src/components/GeneralSetting.vue

@@ -54,21 +54,46 @@
 </template>
 
 <script setup lang="ts">
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useGeneralSettingStore } from '@renderer/stores/generalSetting'
 import { InfoCircleOutlined, CheckOutlined } from '@ant-design/icons-vue'
 
-const colorList = [
+const generalSettingStore = useGeneralSettingStore()
+const { uiLanguage, realTheme, uiTheme, uiColor, leftBarWidth } = storeToRefs(generalSettingStore)
+
+const colorListLight = [
   '#1677ff',
   '#00b96b',
   '#fa8c16',
-  '#722ed1',
+  '#9254de',
   '#eb2f96',
   '#000000'
 ]
 
-const generalSettingStore = useGeneralSettingStore()
-const { uiLanguage, uiTheme, uiColor, leftBarWidth } = storeToRefs(generalSettingStore)
+const colorListDark = [
+  '#1677ff',
+  '#00b96b',
+  '#fa8c16',
+  '#9254de',
+  '#eb2f96',
+  '#b9d7ea'
+]
+
+const colorList = ref(colorListLight)
+
+watch(realTheme, (val) => {
+  if(val === 'dark') {
+    colorList.value = colorListDark
+  } else {
+    colorList.value = colorListLight
+  }
+  console.log(val)
+})
+
+watch(uiTheme, (val) => {
+  console.log(val)
+})
 </script>
 
 <style scoped>

src/renderer/src/components/SoftwareLog.vue

@@ -15,12 +15,15 @@
     style="margin-top: 10px;"
   >
     <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'type'">
-        <span :class="record.type">{{ record.type }}</span>
-      </template>
       <template v-if="column.key === 'index'">
         {{ record.index }}
       </template>
+      <template v-if="column.key === 'type'">
+        <code :class="record.type">{{ record.type }}</code>
+      </template>
+      <template v-if="column.key === 'time'">
+        <code>{{ record.time }}</code>
+      </template>
       <template v-if="column.key === 'content'">
         <code>{{ record.text }}</code>
       </template>
@@ -79,7 +82,7 @@ const columns = [
     title: 'time',
     dataIndex: 'time',
     key: 'time',
-    width: 120,
+    width: 135,
     sortDirections: ['descend'],
   },
   {

src/renderer/src/i18n/lang/en.ts

@@ -121,7 +121,7 @@ export default {
       "projLink": "Project Link",
       "manual": "User Manual",
       "engineDoc": "Caption Engine Manual",
-      "date": "July 30, 2025"
+      "date": "August 20, 2025"
     }
   },
   log: {

src/renderer/src/i18n/lang/ja.ts

@@ -121,7 +121,7 @@ export default {
       "projLink": "プロジェクトリンク",
       "manual": "ユーザーマニュアル",
       "engineDoc": "字幕エンジンマニュアル",
-      "date": "2025 年 7 月 30 日"
+      "date": "2025 年 8 月 20 日"
     }
   },
   log: {

src/renderer/src/i18n/lang/zh.ts

@@ -121,7 +121,7 @@ export default {
       "projLink": "项目链接",
       "manual": "用户手册",
       "engineDoc": "字幕引擎手册",
-      "date": "2025 年 7 月 30 日"
+      "date": "2025 年 8 月 20 日"
     }
   },
   log: {

src/renderer/src/stores/generalSetting.ts

@@ -7,17 +7,31 @@ import { engines, audioTypes, breakOptions, setThemeColor, getTheme } from '../i
 import { useEngineControlStore } from './engineControl'
 import { useCaptionStyleStore } from './captionStyle'
 
+type RealTheme = 'light' | 'dark'
+
 export const useGeneralSettingStore = defineStore('generalSetting', () => {
   const uiLanguage = ref<UILanguage>('zh')
+  const realTheme = ref<RealTheme>('light')
   const uiTheme = ref<UITheme>('system')
   const uiColor = ref<string>('#1677ff')
   const leftBarWidth = ref<number>(8)
 
   const antdTheme = ref<Object>(getTheme())
 
+  function handleThemeChange(newTheme: RealTheme) {
+    realTheme.value = newTheme
+    if(newTheme === 'dark' && uiColor.value === '#000000') {
+      uiColor.value = '#b9d7ea'
+    }
+    if(newTheme === 'light' && uiColor.value === '#b9d7ea') {
+      uiColor.value = '#000000'
+    }
+  }
+
   window.electron.ipcRenderer.invoke('control.nativeTheme.get').then((theme) => {
     if(theme === 'light') setLightTheme()
     else if(theme === 'dark') setDarkTheme()
+    handleThemeChange(theme)
   })
 
   watch(uiLanguage, (newValue) => {
@@ -31,13 +45,20 @@ export const useGeneralSettingStore = defineStore('generalSetting', () => {
   watch(uiTheme, (newValue) => {
     window.electron.ipcRenderer.send('control.uiTheme.change', newValue)
     if(newValue === 'system'){
-      window.electron.ipcRenderer.invoke('control.nativeTheme.get').then((theme) => {
+      window.electron.ipcRenderer.invoke('control.nativeTheme.get').then((theme: RealTheme) => {
         if(theme === 'light') setLightTheme()
         else if(theme === 'dark') setDarkTheme()
+        handleThemeChange(theme)
       })
     }
-    else if(newValue === 'light') setLightTheme()
-    else if(newValue === 'dark') setDarkTheme()
+    else if(newValue === 'light'){
+      setLightTheme()
+      handleThemeChange('light')
+    }
+    else if(newValue === 'dark') {
+      setDarkTheme()
+      handleThemeChange('dark')
+    }
   })
 
   watch(uiColor, (newValue) => {
@@ -50,13 +71,18 @@ export const useGeneralSettingStore = defineStore('generalSetting', () => {
     window.electron.ipcRenderer.send('control.leftBarWidth.change', newValue)
   })
 
+  watch(realTheme, (newValue) => { 
+    console.log('realTheme', newValue)
+  })
+
   window.electron.ipcRenderer.on('control.uiLanguage.set', (_, args: UILanguage) => {
     uiLanguage.value = args
   })
 
-  window.electron.ipcRenderer.on('control.nativeTheme.change', (_, args) => {
+  window.electron.ipcRenderer.on('control.nativeTheme.change', (_, args: RealTheme) => {
     if(args === 'light') setLightTheme()
     else if(args === 'dark') setDarkTheme()
+    handleThemeChange(args)
   })
 
   function setLightTheme(){
@@ -77,6 +103,7 @@ export const useGeneralSettingStore = defineStore('generalSetting', () => {
 
   return {
     uiLanguage,
+    realTheme,
     uiTheme,
     uiColor,
     leftBarWidth,