feat(renderer): 添加界面主题颜色功能，添加复制最新字幕选项(#13)

- 新增界面主题颜色功能，支持自定义主题颜色
- 使用 antd 滑块替代原生 input 元素
- 添加复制字幕记录功能，可选择复制最近的字幕记录

.gitignore

@@ -10,3 +10,5 @@ test.py
 engine/build
 engine/models
 engine/notebook
+.repomap
+.virtualme

docs/TODO.md

@@ -18,9 +18,13 @@
 - [x] 添加字幕记录按时间降序排列选择 *2025/07/26*
 - [x] 重构字幕引擎 *2025/07/28*
 - [x] 优化前端界面提示消息 *2025/07/29*
+- [x] 复制字幕记录可选择只复制最近的字幕记录 *2025/08/18*
+- [x] 添加颜色主题设置 *2025/08/18*
 
 ## 待完成
 
+- [ ] 前端页面添加日志内容展示
+- [ ] 调研更多的云端模型（火山、OpenAI、Google等）
 - [ ] 验证 / 添加基于 sherpa-onnx 的字幕引擎
 
 ## 后续计划

docs/api-docs/electron-ipc.md

@@ -84,7 +84,7 @@
 
 ### `control.uiTheme.change`
 
-**介绍：** 前端修改字界面主题，将修改同步给后端
+**介绍：** 前端修改界面主题，将修改同步给后端
 
 **发起方：** 前端控制窗口
 
@@ -92,6 +92,16 @@
 
 **数据类型：** `UITheme`
 
+### `control.uiColor.change`
+
+**介绍：** 前端修改界面主题颜色，将修改同步给后端
+
+**发起方：** 前端控制窗口
+
+**接收方：** 后端控制窗口实例
+
+**数据类型：** `string`
+
 ### `control.leftBarWidth.change`
 
 **介绍：** 前端修改边栏宽度，将修改同步给后端

engine/utils/audioprcs.py

@@ -55,7 +55,7 @@ def resample_chunk_mono(chunk: bytes, channels: int, orig_sr: int, target_sr: in
     return chunk_mono_r.tobytes()
 
 
-def resample_chunk_mono_np(chunk: bytes, channels: int, orig_sr: int, target_sr: int, mode="sinc_best") -> np.ndarray:
+def resample_chunk_mono_np(chunk: bytes, channels: int, orig_sr: int, target_sr: int, mode="sinc_best", dtype=np.float32) -> np.ndarray:
     """
     将当前多通道音频数据块转换成单通道音频数据块，然后进行重采样，返回 Numpy 数组
 
@@ -65,6 +65,7 @@ def resample_chunk_mono_np(chunk: bytes, channels: int, orig_sr: int, target_sr:
         orig_sr: 原始采样率
         target_sr: 目标采样率
         mode: 重采样模式，可选：'sinc_best' | 'sinc_medium' | 'sinc_fastest' | 'zero_order_hold' | 'linear'
+        dtype: 返回 Numpy 数组的数据类型
 
     Return:
         单通道音频数据块
@@ -82,7 +83,7 @@ def resample_chunk_mono_np(chunk: bytes, channels: int, orig_sr: int, target_sr:
 
     ratio = target_sr / orig_sr
     chunk_mono_r = samplerate.resample(chunk_mono, ratio, converter_type=mode)
-    chunk_mono_r = np.round(chunk_mono_r).astype(np.int16)
+    chunk_mono_r = chunk_mono_r.astype(dtype)
     return chunk_mono_r
 
 

src/main/ControlWindow.ts

@@ -109,6 +109,10 @@ class ControlWindow {
       allConfig.uiTheme = args
     })
 
+    ipcMain.on('control.uiColor.change', (_, args) => {
+      allConfig.uiColor = args
+    })
+
     ipcMain.on('control.leftBarWidth.change', (_, args) => {
       allConfig.leftBarWidth = args
     })

src/main/types/index.ts

@@ -49,6 +49,7 @@ export interface FullConfig {
   platform: string,
   uiLanguage: UILanguage,
   uiTheme: UITheme,
+  uiColor: string,
   leftBarWidth: number,
   styles: Styles,
   controls: Controls,

src/main/utils/AllConfig.ts

@@ -49,6 +49,7 @@ class AllConfig {
   uiLanguage: UILanguage = 'zh';
   leftBarWidth: number = 8;
   uiTheme: UITheme = 'system';
+  uiColor: string = '#1677ff';
   styles: Styles = {...defaultStyles};
   controls: Controls = {...defaultControls};
   
@@ -64,6 +65,7 @@ class AllConfig {
       if(config.captionWindowWidth) this.captionWindowWidth = config.captionWindowWidth
       if(config.uiLanguage) this.uiLanguage = config.uiLanguage
       if(config.uiTheme) this.uiTheme = config.uiTheme
+      if(config.uiColor) this.uiColor = config.uiColor
       if(config.leftBarWidth) this.leftBarWidth = config.leftBarWidth
       if(config.styles) this.setStyles(config.styles)
       if(config.controls) this.setControls(config.controls)
@@ -76,6 +78,7 @@ class AllConfig {
       captionWindowWidth: this.captionWindowWidth,
       uiLanguage: this.uiLanguage,
       uiTheme: this.uiTheme,
+      uiColor: this.uiColor,
       leftBarWidth: this.leftBarWidth,
       controls: this.controls,
       styles: this.styles
@@ -90,6 +93,7 @@ class AllConfig {
       platform: process.platform,
       uiLanguage: this.uiLanguage,
       uiTheme: this.uiTheme,
+      uiColor: this.uiColor,
       leftBarWidth: this.leftBarWidth,
       styles: this.styles,
       controls: this.controls,
@@ -123,7 +127,9 @@ class AllConfig {
       }
     }
     this.controls.engineEnabled = engineEnabled
-    Log.info('Set Controls:', this.controls)
+    let _controls = {...this.controls}
+    _controls.API_KEY = _controls.API_KEY.replace(/./g, '*')
+    Log.info('Set Controls:', _controls)
   }
 
   public sendControls(window: BrowserWindow, info = true) {

src/renderer/src/App.vue

@@ -14,6 +14,7 @@ onMounted(() => {
   window.electron.ipcRenderer.invoke('both.window.mounted').then((data: FullConfig) => {
     useGeneralSettingStore().uiLanguage = data.uiLanguage
     useGeneralSettingStore().uiTheme = data.uiTheme
+    useGeneralSettingStore().uiColor = data.uiColor
     useGeneralSettingStore().leftBarWidth = data.leftBarWidth
     useCaptionStyleStore().setStyles(data.styles)
     useEngineControlStore().platform = data.platform

src/renderer/src/assets/input.css

@@ -17,6 +17,7 @@
 }
 
 .input-area {
+  display: inline-block;
   width: calc(100% - 100px);
   min-width: 100px;
 }

src/renderer/src/components/CaptionLog.vue

@@ -55,8 +55,8 @@
           <div class="input-item">
             <span class="input-label">{{ $t('log.exportFormat') }}</span>
             <a-radio-group v-model:value="exportFormat">
-              <a-radio-button value="srt">.srt</a-radio-button>
+              <a-radio-button value="srt"><code>.srt</code></a-radio-button>
-              <a-radio-button value="json">.json</a-radio-button>
+              <a-radio-button value="json"><code>.json</code></a-radio-button>
             </a-radio-group>
           </div>
           <div class="input-item">
@@ -90,6 +90,15 @@
               <a-radio-button value="target">{{ $t('log.translation') }}</a-radio-button>
             </a-radio-group>
           </div>
+          <div class="input-item">
+            <span class="input-label">{{ $t('log.copyNum') }}</span>
+            <a-radio-group v-model:value="copyNum">
+              <a-radio-button :value="0"><code>[:]</code></a-radio-button>
+              <a-radio-button :value="1"><code>[-1:]</code></a-radio-button>
+              <a-radio-button :value="2"><code>[-2:]</code></a-radio-button>
+              <a-radio-button :value="3"><code>[-3:]</code></a-radio-button>
+            </a-radio-group>
+          </div>
         </template>
         <a-button
           style="margin-right: 20px;"
@@ -147,6 +156,7 @@ const exportFormat = ref('srt')
 const showIndex = ref(true)
 const copyTime = ref(true)
 const contentOption = ref('both')
+const copyNum = ref(0)
 
 const baseHH = ref<number>(0)
 const baseMM = ref<number>(0)
@@ -255,7 +265,12 @@ function getExportData() {
 
 function copyCaptions() {
   let content = ''
-  for(let i = 0; i < captionData.value.length; i++){
+  let start = 0
+  if(copyNum.value > 0) {
+    start = captionData.value.length - copyNum.value
+    if(start < 0) start = 0
+  }
+  for(let i = start; i < captionData.value.length; i++){
     const item = captionData.value[i]
     if(showIndex.value) content += `${i+1}\n`
     if(copyTime.value) content += `${item.time_s} --> ${item.time_t}\n`.replace(/\./g, ',')

src/renderer/src/components/CaptionStyle.vue

@@ -34,20 +34,18 @@
     </div>
     <div class="input-item">
       <span class="input-label">{{ $t('style.fontSize') }}</span>
-      <a-input
+      <a-slider
         class="input-area"
-        type="range"
+        :min="0" :max="72"
-        min="0" max="72"
         v-model:value="currentFontSize"
       />
       <div class="input-item-value">{{ currentFontSize }}px</div>
     </div>
     <div class="input-item">
       <span class="input-label">{{ $t('style.fontWeight') }}</span>
-      <a-input
+      <a-slider
         class="input-area"
-        type="range"
+        :min="1" :max="9"
-        min="1" max="9"
         v-model:value="currentFontWeight"
       />
       <div class="input-item-value">{{ currentFontWeight*100 }}</div>
@@ -63,11 +61,10 @@
     </div>
     <div class="input-item">
       <span class="input-label">{{ $t('style.opacity') }}</span>
-      <a-input
+      <a-slider
         class="input-area"
-        type="range"
+        :min="0"
-        min="0"
+        :max="100"
-        max="100"
         v-model:value="currentOpacity"
       />
       <div class="input-item-value">{{ currentOpacity }}%</div>
@@ -111,20 +108,18 @@
         </div>
         <div class="input-item">
           <span class="input-label">{{ $t('style.fontSize') }}</span>
-          <a-input
+          <a-slider
             class="input-area"
-            type="range"
+            :min="0" :max="72"
-            min="0" max="72"
             v-model:value="currentTransFontSize"
           />
           <div class="input-item-value">{{ currentTransFontSize }}px</div>
         </div>
         <div class="input-item">
           <span class="input-label">{{ $t('style.fontWeight') }}</span>
-          <a-input
+          <a-slider
             class="input-area"
-            type="range"
+            :min="1" :max="9"
-            min="1" max="9"
             v-model:value="currentTransFontWeight"
           />
           <div class="input-item-value">{{ currentTransFontWeight*100 }}</div>
@@ -136,30 +131,27 @@
       <a-card size="small" :title="$t('style.shadow.title')">
         <div class="input-item">
           <span class="input-label">{{ $t('style.shadow.offsetX') }}</span>
-          <a-input
+          <a-slider
             class="input-area"
-            type="range"
+            :min="-10" :max="10"
-            min="-10" max="10"
             v-model:value="currentOffsetX"
           />
           <div class="input-item-value">{{ currentOffsetX }}px</div>
         </div>
         <div class="input-item">
           <span class="input-label">{{ $t('style.shadow.offsetY') }}</span>
-          <a-input
+          <a-slider
             class="input-area"
-            type="range"
+            :min="-10" :max="10"
-            min="-10" max="10"
             v-model:value="currentOffsetY"
           />
           <div class="input-item-value">{{ currentOffsetY }}px</div>
         </div>
         <div class="input-item">
           <span class="input-label">{{ $t('style.shadow.blur') }}</span>
-          <a-input
+          <a-slider
             class="input-area"
-            type="range"
+            :min="0" :max="12"
-            min="0" max="12"
             v-model:value="currentBlur"
           />
           <div class="input-item-value">{{ currentBlur }}px</div>
@@ -315,7 +307,7 @@ function resetStyle() {
 }
 
 watch(changeSignal, (val) => {
-  if(val == true) {
+  if(val === true) {
     backStyle();
     captionStyle.changeSignal = false;
   }

src/renderer/src/components/GeneralSetting.vue

@@ -28,11 +28,23 @@
         </a-radio-group>
       </div>
 
+      <div class="input-item">
+        <span class="input-label">{{ $t('general.color') }}</span>
+        <a-radio-group v-model:value="uiColor">
+          <template v-for="color in colorList" :key="color">
+            <a-radio-button :value="color"
+              :style="{
+                backgroundColor: color
+              }"
+            >&nbsp;</a-radio-button>
+          </template>
+        </a-radio-group>
+      </div>
+
       <div class="input-item">
         <span class="input-label">{{ $t('general.barWidth') }}</span>
-        <a-input
+        <a-slider class="span-input"
-          type="range" class="span-input"
+          :min="6" :max="12" v-model:value="leftBarWidth"
-          min="6" max="12" v-model:value="leftBarWidth"
         />
         <div class="input-item-value">{{ (leftBarWidth * 100 / 24).toFixed(0) }}%</div>
       </div>
@@ -45,15 +57,26 @@ import { storeToRefs } from 'pinia'
 import { useGeneralSettingStore } from '@renderer/stores/generalSetting'
 import { InfoCircleOutlined } from '@ant-design/icons-vue';
 
+const colorList = [
+  '#1677ff',
+  '#00b96b',
+  '#fa8c16',
+  '#722ed1',
+  '#eb2f96',
+  '#000000'
+]
+
 const generalSettingStore = useGeneralSettingStore()
-const { uiLanguage, uiTheme, leftBarWidth } = storeToRefs(generalSettingStore)
+const { uiLanguage, uiTheme, uiColor, leftBarWidth } = storeToRefs(generalSettingStore)
 </script>
 
 <style scoped>
 @import url(../assets/input.css);
 
 .span-input {
+  display: inline-block;
   width: 100px;
+  margin: 0;
 }
 
 .general-note {

src/renderer/src/i18n/config/theme.ts

@@ -1,10 +1,29 @@
 import { theme } from 'ant-design-vue';
 
-export const antDesignTheme = {
+let isLight = true
-  light: {
+let themeColor = '#1677ff'
-    token: {}
+
-  },
+export function setThemeColor(color: string) {
-  dark: {
+  themeColor = color
-    algorithm: theme.darkAlgorithm,
-  }
 }
+
+export function getTheme(curIsLight?: boolean) {
+  const lightTheme = {
+    token: {
+      colorPrimary: themeColor,
+      colorInfo: themeColor
+    }
+  }
+  const darkTheme = {
+    algorithm: theme.darkAlgorithm,
+    token: {
+      colorPrimary: themeColor,
+      colorInfo: themeColor
+    }
+  }
+
+  if(curIsLight !== undefined){
+    isLight = curIsLight
+  }
+  return isLight ? lightTheme : darkTheme
+}

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

@@ -37,7 +37,8 @@ export default {
     "theme": "Theme",
     "light": "light",
     "dark": "dark",
-    "system": "system"
+    "system": "system",
+    "color": "Color"
   },
   engine: {
     "title": "Caption Engine Settings",
@@ -142,6 +143,8 @@ export default {
     "both": "Both",
     "source": "Original",
     "translation": "Translation",
+    "copyNum": "Copy Count",
+    "all": "All",
     "copySuccess": "Subtitle copied to clipboard",
     "clear": "Clear Log"
   }

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

@@ -37,7 +37,8 @@ export default {
     "theme": "テーマ",
     "light": "明るい",
     "dark": "暗い",
-    "system": "システム"
+    "system": "システム",
+    "color": "カラー"
   },
   engine: {
     "title": "字幕エンジン設定",
@@ -142,6 +143,8 @@ export default {
     "both": "すべて",
     "source": "原文",
     "translation": "翻訳",
+    "copyNum": "コピー数",
+    "all": "すべて",
     "copySuccess": "字幕がクリップボードにコピーされました",
     "clear": "ログをクリア"
   }

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

@@ -37,7 +37,8 @@ export default {
     "theme": "主题",
     "light": "浅色",
     "dark": "深色",
-    "system": "系统"
+    "system": "系统",
+    "color": "颜色"
   },
   engine: {
     "title": "字幕引擎设置",
@@ -142,6 +143,8 @@ export default {
     "both": "全部",
     "source": "原文",
     "translation": "翻译",
+    "copyNum": "复制数量",
+    "all": "全部",
     "copySuccess": "字幕已复制到剪贴板",
     "clear": "清空记录"
   }

src/renderer/src/stores/generalSetting.ts

@@ -3,16 +3,17 @@ import { defineStore } from 'pinia'
 import { i18n } from '../i18n'
 import type { UILanguage, UITheme } from '../types'
 
-import { engines, audioTypes, antDesignTheme, breakOptions  } from '../i18n'
+import { engines, audioTypes, breakOptions, setThemeColor, getTheme } from '../i18n'
 import { useEngineControlStore } from './engineControl'
 import { useCaptionStyleStore } from './captionStyle'
 
 export const useGeneralSettingStore = defineStore('generalSetting', () => {
   const uiLanguage = ref<UILanguage>('zh')
   const uiTheme = ref<UITheme>('system')
+  const uiColor = ref<string>('#1677ff')
   const leftBarWidth = ref<number>(8)
 
-  const antdTheme = ref<Object>(antDesignTheme['light'])
+  const antdTheme = ref<Object>(getTheme())
 
   window.electron.ipcRenderer.invoke('control.nativeTheme.get').then((theme) => {
     if(theme === 'light') setLightTheme()
@@ -39,6 +40,12 @@ export const useGeneralSettingStore = defineStore('generalSetting', () => {
     else if(newValue === 'dark') setDarkTheme()
   })
 
+  watch(uiColor, (newValue) => {
+    setThemeColor(newValue)
+    antdTheme.value = getTheme()
+    window.electron.ipcRenderer.send('control.uiColor.change', newValue)
+  })
+
   watch(leftBarWidth, (newValue) => {
     window.electron.ipcRenderer.send('control.leftBarWidth.change', newValue)
   })
@@ -53,7 +60,7 @@ export const useGeneralSettingStore = defineStore('generalSetting', () => {
   })
 
   function setLightTheme(){
-    antdTheme.value = antDesignTheme.light
+    antdTheme.value = getTheme(true)
     const root = document.documentElement
     root.style.setProperty('--control-background', '#fff')
     root.style.setProperty('--tag-color', 'rgba(0, 0, 0, 0.45)')
@@ -61,7 +68,7 @@ export const useGeneralSettingStore = defineStore('generalSetting', () => {
   }
 
   function setDarkTheme(){
-    antdTheme.value = antDesignTheme.dark
+    antdTheme.value = getTheme(false)
     const root = document.documentElement
     root.style.setProperty('--control-background', '#000')
     root.style.setProperty('--tag-color', 'rgba(255, 255, 255, 0.45)')
@@ -71,6 +78,7 @@ export const useGeneralSettingStore = defineStore('generalSetting', () => {
   return {
     uiLanguage,
     uiTheme,
+    uiColor,
     leftBarWidth,
     antdTheme
   }

src/renderer/src/types/index.ts

@@ -49,6 +49,7 @@ export interface FullConfig {
   platform: string,
   uiLanguage: UILanguage,
   uiTheme: UITheme,
+  uiColor: string,
   leftBarWidth: number,
   styles: Styles,
   controls: Controls,