feat(control): 重构项目，增加字幕引擎配置

2026-02-14 11:34:43 +08:00 · 2025-06-19 18:59:13 +08:00
parent 5da9c3c038
commit 54c618aa3f
17 changed files with 152 additions and 180 deletions
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -2,7 +2,7 @@
 <html>
  <head>
    <meta charset="UTF-8" />
-    <title>Auto Caption Player</title>
+    <title>Auto Caption</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
--- a/src/renderer/src/assets/styles/reset.css
+++ b/src/renderer/src/assets/styles/reset.css
--- a/src/renderer/src/assets/video/example-ja.mp4
+++ b/src/renderer/src/assets/video/example-ja.mp4
--- a/src/renderer/src/components/CaptionControl.vue
+++ b/src/renderer/src/components/CaptionControl.vue
@@ -9,7 +9,6 @@
      <span class="control-label">源语言</span>
      <a-select
        class="control-input"
-        ref="select"
        v-model:value="currentSourceLang"
        :options="langList"
      ></a-select>
@@ -18,7 +17,6 @@
      <span class="control-label">翻译语言</span>
      <a-select
        class="control-input"
-        ref="select"
        v-model:value="currentTargetLang"
        :options="langList.filter((item) => item.value !== 'auto')"
      ></a-select>
@@ -27,23 +25,34 @@
      <span class="control-label">字幕引擎</span>
      <a-select
        class="control-input"
-        ref="select"
        v-model:value="currentEngine"
        :options="captionEngine"
      ></a-select>
    </div>
-    <div class="control-item">
-      <span class="control-label">端口号</span>
-      <a-input
-        class="control-input"
-        ref="select"
-        type="number"
-        v-model:value="currentPort"
-      ></a-input>
-    </div>
    <div class="control-item">
      <span class="control-label">启用翻译</span>
      <a-switch v-model:checked="currentTranslation" />
+      <span class="control-label">自定义引擎</span>
+      <a-switch v-model:checked="currentCustomized" />
+    </div>
+    <div v-show="currentCustomized">
+      <a-card size="small" title="自定义字幕引擎">
+        <p class="customize-note">说明：允许用户使用自定义字幕引擎提供字幕。提供的引擎要能通过 <code>child_process.spawn()</code> 进行启动，且需要通过 IPC 与项目 node.js 后端进行通信。具体通信接口见后端实现。</p>
+        <div class="control-item">
+          <span class="control-label">引擎路径</span>
+          <a-input
+            class="control-input"
+            v-model:value="currentCustomizedApp"
+          ></a-input>
+        </div>
+        <div class="control-item">
+          <span class="control-label">引擎指令</span>
+          <a-input
+            class="control-input"
+            v-model:value="currentCustomizedCommand"
+          ></a-input>
+        </div>
+      </a-card>
    </div>
  </a-card>
  <div style="height: 20px;"></div>
@@ -60,9 +69,12 @@ const { captionEngine } = storeToRefs(captionControl)
 const currentSourceLang = ref('auto')
 const currentTargetLang = ref('zh')
 const currentEngine = ref('gummy')
-const currentPort = ref(8765)
 const currentTranslation = ref<boolean>(false)

+const currentCustomized = ref<boolean>(false)
+const currentCustomizedApp = ref('')
+const currentCustomizedCommand = ref('')
+
 const langList = computed(() => {
  for(let item of captionEngine.value){
    if(item.value === currentEngine.value) {
@@ -76,16 +88,24 @@ function applyChange(){
  captionControl.sourceLang = currentSourceLang.value
  captionControl.targetLang = currentTargetLang.value
  captionControl.engine = currentEngine.value
-  captionControl.port = currentPort.value
  captionControl.translation = currentTranslation.value
+
+  captionControl.customized = currentCustomized.value
+  captionControl.customizedApp = currentCustomizedApp.value
+  captionControl.customizedCommand = currentCustomizedCommand.value
+
+  captionControl.sendControlChange()
 }

 function cancelChange(){
  currentSourceLang.value = captionControl.sourceLang
  currentTargetLang.value = captionControl.targetLang
  currentEngine.value = captionControl.engine
-  currentPort.value = captionControl.port
  currentTranslation.value = captionControl.translation
+
+  currentCustomized.value = captionControl.customized
+  currentCustomizedApp.value = captionControl.customizedApp
+  currentCustomizedCommand.value = captionControl.customizedCommand
 }
 </script>

@@ -101,6 +121,12 @@ function cancelChange(){
  margin-right: 10px;
 }

+.customize-note {
+  padding: 0 20px;
+  color: red;
+  font-size: 12px;
+}
+
 .control-input {
  width: calc(100% - 100px);
  min-width: 100px;
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -1,4 +1,4 @@
-import './assets/styles/reset.css'
+import './assets/reset.css'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'

--- a/src/renderer/src/stores/captionControl.ts
+++ b/src/renderer/src/stores/captionControl.ts
@@ -26,17 +26,36 @@ export const useCaptionControlStore = defineStore('captionControl', () => {
  ])

  const sourceLang = ref<string>('auto')
-  const targetLang = ref<string>('')
+  const targetLang = ref<string>('zh')
  const engine = ref<string>('gummy')
-  const port = ref<number>(8765)
  const translation = ref<boolean>(false)
+  const customized = ref<boolean>(false)
+  const customizedApp = ref<string>('')
+  const customizedCommand = ref<string>('')
+
+
+  function sendControlChange() {
+    const controls = {
+      sourceLang: sourceLang.value,
+      targetLang: targetLang.value,
+      engine: engine.value,
+      translation: translation.value,
+      customized: customized.value,
+      customizedApp: customizedApp.value,
+      customizedCommand: customizedCommand.value
+    }
+    window.electron.ipcRenderer.send('control.control.change', controls)
+  }

  return {
-    captionEngine,  // 字幕引擎
-    sourceLang,     // 源语言
-    targetLang,     // 目标语言
-    engine,         // 字幕引擎
-    port,           // 端口
-    translation     // 是否启用翻译
+    captionEngine,      // 字幕引擎
+    sourceLang,         // 源语言
+    targetLang,         // 目标语言
+    engine,             // 字幕引擎
+    translation,        // 是否启用翻译
+    customized,         // 是否使用自定义字幕引擎
+    customizedApp,      // 自定义字幕引擎的应用程序
+    customizedCommand,  // 自定义字幕引擎的命令
+    sendControlChange   // 发送最新控制消息到后端
  }
 })
--- a/src/renderer/src/stores/captionLog.ts
+++ b/src/renderer/src/stores/captionLog.ts
@@ -14,7 +14,6 @@ export const useCaptionLogStore = defineStore('captionLog', () => {

  window.electron.ipcRenderer.on('both.log.set', (_, logs) => {
    captionData.value = logs
-    console.log('GET both.log.set', logs)
  })

  return {
--- a/src/renderer/src/stores/captionStyle.ts
+++ b/src/renderer/src/stores/captionStyle.ts
@@ -36,7 +36,6 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
      transFontColor: transFontColor.value
    }
    window.electron.ipcRenderer.send('control.style.change', styles)
-    console.log('SEND control.style.change', styles)
  }

  window.electron.ipcRenderer.on('caption.style.set', (_, args) => {
@@ -50,7 +49,6 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
    transFontSize.value = args.transFontSize
    transFontColor.value = args.transFontColor
    changeSignal.value = true
-    console.log('GET caption.style.set', args)
  })

  return {
--- a/src/renderer/src/views/CaptionPage.vue
+++ b/src/renderer/src/views/CaptionPage.vue
@@ -58,7 +58,6 @@ onMounted(() => {
    for (const entry of entries) {
      if(windowHeight.value !== Math.floor(entry.contentRect.height) + 2) {
        windowHeight.value = Math.floor(entry.contentRect.height) + 2;
-        console.log('INFO window height change', windowHeight.value);
        window.electron.ipcRenderer.send('caption.windowHeight.change', windowHeight.value)
      }
    }