feat(main): 实现字幕引擎控制功能

- 新增字幕引擎启动和停止功能
- 实现控制窗口的字幕引擎状态显示
- 优化字幕日志的发送逻辑
- 重构子进程相关代码

src/renderer/src/components/CaptionControl.vue

@@ -59,12 +59,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useCaptionControlStore } from '@renderer/stores/captionControl'
 
 const captionControl = useCaptionControlStore()
-const { captionEngine } = storeToRefs(captionControl)
+const { captionEngine, changeSignal } = storeToRefs(captionControl)
 
 const currentSourceLang = ref('auto')
 const currentTargetLang = ref('zh')
@@ -107,6 +107,13 @@ function cancelChange(){
   currentCustomizedApp.value = captionControl.customizedApp
   currentCustomizedCommand.value = captionControl.customizedCommand
 }
+
+watch(changeSignal, (val) => {
+  if(val == true) {
+    cancelChange();
+    captionControl.changeSignal = false;
+  }
+})
 </script>
 
 <style scoped>

src/renderer/src/components/CaptionData.vue

@@ -2,10 +2,10 @@
   <div class="caption-stat">
     <a-row>
       <a-col :span="6">
-        <a-statistic title="字幕引擎" :value="'gummy'" />
+        <a-statistic title="字幕引擎" :value="engine" />
       </a-col>
       <a-col :span="6">
-        <a-statistic title="字幕引擎状态" :value="'未连接'" />
+        <a-statistic title="字幕引擎状态" :value="engineEnabled?'已启动':'未启动'" />
       </a-col>
       <a-col :span="6">
         <a-statistic title="已记录字幕" :value="captionData.length" />
@@ -14,9 +14,19 @@
   </div>
 
   <div class="caption-control">
-    <a-button type="primary" class="control-button" @click="openCaptionWindow">打开字幕窗口</a-button>
-    <a-button class="control-button">启动字幕引擎</a-button>
-    <a-button danger class="control-button">关闭字幕引擎</a-button>
+    <a-button
+      type="primary"
+      class="control-button"
+      @click="openCaptionWindow"
+    >打开字幕窗口</a-button>
+    <a-button
+      class="control-button"
+      @click="captionControl.startEngine"
+    >启动字幕引擎</a-button>
+    <a-button 
+     danger class="control-button"
+     @click="captionControl.stopEngine"
+    >关闭字幕引擎</a-button>
   </div>
 
   <div class="caption-list">
@@ -51,9 +61,11 @@
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useCaptionLogStore } from '@renderer/stores/captionLog'
+import { useCaptionControlStore } from '@renderer/stores/captionControl'
 const captionLog = useCaptionLogStore()
 const { captionData } = storeToRefs(captionLog)
-
+const captionControl = useCaptionControlStore()
+const { engineEnabled, engine } = storeToRefs(captionControl)
 const pagination = ref({
   current: 1,
   pageSize: 10,
@@ -93,7 +105,6 @@ const columns = [
 function openCaptionWindow() {
   window.electron.ipcRenderer.send('control.captionWindow.activate')
 }
-
 </script>
 
 <style scoped>

src/renderer/src/stores/captionControl.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
+import { notification } from 'ant-design-vue'
 
 export const useCaptionControlStore = defineStore('captionControl', () => {
   const captionEngine = ref([
@@ -24,18 +25,21 @@ export const useCaptionControlStore = defineStore('captionControl', () => {
       ]
     },
   ])
+  const engineEnabled = ref(false)
 
-  const sourceLang = ref<string>('auto')
+  const sourceLang = ref<string>('en')
   const targetLang = ref<string>('zh')
   const engine = ref<string>('gummy')
-  const translation = ref<boolean>(false)
+  const translation = ref<boolean>(true)
   const customized = ref<boolean>(false)
   const customizedApp = ref<string>('')
   const customizedCommand = ref<string>('')
 
+  const changeSignal = ref<boolean>(false)
 
   function sendControlChange() {
     const controls = {
+      engineEnabled: engineEnabled.value,
       sourceLang: sourceLang.value,
       targetLang: targetLang.value,
       engine: engine.value,
@@ -47,8 +51,52 @@ export const useCaptionControlStore = defineStore('captionControl', () => {
     window.electron.ipcRenderer.send('control.control.change', controls)
   }
 
+  function startEngine() {
+    window.electron.ipcRenderer.send('control.engine.start')
+  }
+
+  function stopEngine() {
+    window.electron.ipcRenderer.send('control.engine.stop')
+  }
+
+  window.electron.ipcRenderer.on('control.control.set', (_, controls) => {
+    sourceLang.value = controls.sourceLang
+    targetLang.value = controls.targetLang
+    engine.value = controls.engine
+    translation.value = controls.translation
+    customized.value = controls.customized
+    customizedApp.value = controls.customizedApp
+    customizedCommand.value = controls.customizedCommand
+    changeSignal.value = true
+  })
+
+  window.electron.ipcRenderer.on('control.engine.already', () => { 
+    engineEnabled.value = true
+    notification.open({
+      message: '字幕引擎已经启动',
+      description: '字幕引擎已经启动，请勿重复启动'
+    });
+  })
+  
+  window.electron.ipcRenderer.on('control.engine.started', () => { 
+    engineEnabled.value = true
+    notification.open({
+      message: '字幕引擎启动',
+      description: `原语言：${sourceLang.value}，是否翻译：${translation.value?'是':'否'}，翻译语言：${targetLang.value}`
+    });
+  })
+
+  window.electron.ipcRenderer.on('control.engine.stopped', () => { 
+    engineEnabled.value = false
+    notification.open({
+      message: '字幕引擎停止',
+      description: '可点击“启动字幕引擎”按钮重新启动'
+    });
+  })
+
   return {
     captionEngine,      // 字幕引擎
+    engineEnabled,      // 字幕引擎是否启用
     sourceLang,         // 源语言
     targetLang,         // 目标语言
     engine,             // 字幕引擎
@@ -56,6 +104,9 @@ export const useCaptionControlStore = defineStore('captionControl', () => {
     customized,         // 是否使用自定义字幕引擎
     customizedApp,      // 自定义字幕引擎的应用程序
     customizedCommand,  // 自定义字幕引擎的命令
-    sendControlChange   // 发送最新控制消息到后端
+    sendControlChange,  // 发送最新控制消息到后端
+    startEngine,        // 启动字幕引擎
+    stopEngine,         // 停止字幕引擎
+    changeSignal,       // 配置改变信号
   }
 })

src/renderer/src/stores/captionLog.ts

@@ -12,6 +12,15 @@ interface CaptionItem {
 export const useCaptionLogStore = defineStore('captionLog', () => {
   const captionData = ref<CaptionItem[]>([])
 
+  window.electron.ipcRenderer.on('both.log.add', (_, log) => {
+    if(captionData.value.length && log.index === captionData.value[captionData.value.length - 1].index) {
+      captionData.value.splice(captionData.value.length - 1, 1, log)
+    }
+    else {
+      captionData.value.push(log)
+    }
+  })
+
   window.electron.ipcRenderer.on('both.log.set', (_, logs) => {
     captionData.value = logs
   })

src/renderer/src/stores/captionStyle.ts

@@ -7,10 +7,12 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
   const fontColor = ref<string>('#000000')
   const background = ref<string>('#dbe2ef')
   const opacity = ref<number>(80)
+  
   const transDisplay = ref<boolean>(true)
   const transFontFamily = ref<string>('sans-serif')
   const transFontSize = ref<number>(24)
   const transFontColor = ref<string>('#000000')
+
   const changeSignal = ref<boolean>(false)
 
   function addOpicityToColor(color: string, opicity: number) {