feat(main): 实现字幕日志传输和控制窗口激活功能

src/main/caption.ts

@@ -3,7 +3,8 @@ import path from 'path'
 import { is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import { controlWindow } from './control'
-import { sendStyles } from './data'
+import { sendStyles, sendCaptionLog } from './data'
+import { send } from 'vite'
 
 class CaptionWindow { 
   window: BrowserWindow | undefined;
@@ -30,6 +31,7 @@ class CaptionWindow {
     setTimeout(() => {
       if (this.window) {
         sendStyles(this.window);
+        sendCaptionLog(this.window);
       }
     }, 1000);
 
@@ -58,10 +60,13 @@ class CaptionWindow {
 
   public handleMessage() {
     // 字幕窗口请求创建控制窗口
-    ipcMain.on('caption.controlWindow.create', () => {
+    ipcMain.on('caption.controlWindow.activate', () => {
       if(!controlWindow.window){
         controlWindow.createWindow()
-        console.log('GET caption.controlWindow.create')
+        console.log('GET caption.controlWindow.activate')
+      }
+      else {
+        controlWindow.window.show()
       }
     })
     // 字幕窗口高度发生变化
@@ -71,6 +76,20 @@ class CaptionWindow {
         this.window.setSize(this.window.getSize()[0], height) 
       }
     })
+    // 关闭字幕窗口
+    ipcMain.on('caption.window.close', () => {
+      console.log('GET caption.window.close')
+      if(this.window){
+        this.window.close()
+      }
+    })
+    // 是否固定在最前面
+    ipcMain.on('caption.pin.set', (_, pinned) => {
+      console.log('GET caption.pin.set', pinned)
+      if(this.window){
+        this.window.setAlwaysOnTop(pinned)
+      }
+    })
   }
 }
 

src/main/control.ts

@@ -2,7 +2,7 @@ import { shell, BrowserWindow, ipcMain } from 'electron'
 import path from 'path'
 import { is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
-import { setStyles, sendStyles } from './data'
+import { setStyles, sendStyles, sendCaptionLog } from './data'
 import { captionWindow } from './caption'
 
 class ControlWindow {
@@ -11,8 +11,10 @@ class ControlWindow {
   public createWindow(): void {
     this.window = new BrowserWindow({
       icon: icon,
-      width: 900,
-      height: 670,
+      width: 1200,
+      height: 800,
+      minWidth: 900,
+      minHeight: 600,
       show: false,
       center: true,
       autoHideMenuBar: true,
@@ -26,6 +28,7 @@ class ControlWindow {
     setTimeout(() => {
       if (this.window) {
         sendStyles(this.window);
+        sendCaptionLog(this.window);
       }
     }, 1000);
     
@@ -61,10 +64,13 @@ class ControlWindow {
       }
     })
     // 控制窗口请求创建字幕窗口
-    ipcMain.on('control.captionWindow.create', () => {
+    ipcMain.on('control.captionWindow.activate', () => {
       if(!captionWindow.window){
         captionWindow.createWindow()
-        console.log('GET control.captionWindow.create')
+        console.log('GET control.captionWindow.activate')
+      }
+      else {
+        captionWindow.window.show()
       }
     })
   }

src/main/data.ts

@@ -12,12 +12,20 @@ export interface Styles {
   transFontColor: string
 }
 
+export interface CaptionItem {
+  index: number,
+  time_s: string,
+  time_t: string,
+  text: string,
+  translation: string
+}
+
 export let styles: Styles = {
   fontFamily: 'sans-serif',
   fontSize: 24,
   fontColor: '#000000',
   background: '#dbe2ef',
-  opacity: 50,
+  opacity: 80,
   transDisplay: true,
   transFontFamily: 'sans-serif',
   transFontSize: 24,
@@ -39,4 +47,24 @@ export function setStyles(args: any) {
 export function sendStyles(window: BrowserWindow) {
   window.webContents.send('caption.style.set', styles)
   console.log('SNED caption.style.set')
+}
+
+export let captionLog: CaptionItem[] = [
+  {index: 1, time_s: "00:00:00", time_t: "00:00:00", text: "Long time no see.", translation: "好久不见"},
+  {index: 2, time_s: "00:00:00", time_t: "00:00:00", text: "How have you been?", translation: "你最近怎么样？"},
+  {index: 3, time_s: "00:00:00", time_t: "00:00:00", text: "I've missed you a lot.", translation: "我非常想念你。"},
+  {index: 4, time_s: "00:00:00", time_t: "00:00:00", text: "It's good to see you again.", translation: "很高兴再次见到你。"},
+  {index: 5, time_s: "00:00:00", time_t: "00:00:00", text: "What have you been up to?", translation: "你最近在忙什么？"},
+  {index: 6, time_s: "00:00:00", time_t: "00:00:00", text: "Let's catch up over coffee.", translation: "我们去喝杯咖啡聊聊天吧。"},
+  {index: 7, time_s: "00:00:00", time_t: "00:00:00", text: "You look great!", translation: "你看起来很棒！"},
+  {index: 8, time_s: "00:00:00", time_t: "00:00:00", text: "I can't believe it's been so long.", translation: "真不敢相信已经这么久了。"},
+  {index: 9, time_s: "00:00:00", time_t: "00:00:00", text: "We should do this more often.", translation: "我们应该多聚聚。"},
+  {index: 10, time_s: "00:00:00", time_t: "00:00:00", text: "Thanks for coming to see me.", translation: "谢谢你来看我。"},
+  {index: 11, time_s: "00:00:00", time_t: "00:00:00", text: "We show case the utility of Macformer when combined with molecular docking simulations and wet lab based experimental validation, by applying it to the prospective design of macrocyclic JAK2 inhibitors.", translation: "我们通过将其应用于大环JAK2抑制剂的前瞻性设计，展示了Macformer与分子对接模拟和湿实验验证相结合的实用性。"},
+  {index: 12, time_s: "00:00:00", time_t: "00:00:00", text: "Macrocycles, typically defined as cyclic small molecules or peptides with ring structures consisting of 12 or more atoms, has emerged as promising chemical scaffolds in the field of new drug discovery1,2. The distinct physicochemical properties, including high molecular weight and abundant hydrogen bond donors3, render this structural class occupy a chemical space beyond Lipinski's rule of five4.", translation: "大环分子通常定义为具有由 12 个或更多原子组成的环状结构的环状小分子或肽，已成为新药发现领域中具有前景的化学骨架 [1,2]。其独特的理化性质（包括高分子量和丰富的氢键供体）[3]，使这类结构占据了超越 Lipinski 五规则 [4] 的化学空间。"}
+]
+
+export function sendCaptionLog(window: BrowserWindow) {
+  window.webContents.send('both.log.set', captionLog)
+  console.log('SEND both.log.set')
 }

src/renderer/src/components/CaptionData.vue

@@ -91,7 +91,7 @@ const columns = [
 ]
 
 function openCaptionWindow() {
-  window.electron.ipcRenderer.send('control.captionWindow.create')
+  window.electron.ipcRenderer.send('control.captionWindow.activate')
 }
 
 </script>

src/renderer/src/stores/captionLog.ts

@@ -1,21 +1,21 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
+interface CaptionItem {
+  index: number,
+  time_s: string,
+  time_t: string,
+  text: string,
+  translation: string
+}
+
 export const useCaptionLogStore = defineStore('captionLog', () => {
-  const captionData = ref([
-    {index: 1, time_s: "00:00:00", time_t: "00:00:00", text: "Long time no see.", translation: "好久不见"},
-    {index: 2, time_s: "00:00:00", time_t: "00:00:00", text: "How have you been?", translation: "你最近怎么样？"},
-    {index: 3, time_s: "00:00:00", time_t: "00:00:00", text: "I've missed you a lot.", translation: "我非常想念你。"},
-    {index: 4, time_s: "00:00:00", time_t: "00:00:00", text: "It's good to see you again.", translation: "很高兴再次见到你。"},
-    {index: 5, time_s: "00:00:00", time_t: "00:00:00", text: "What have you been up to?", translation: "你最近在忙什么？"},
-    {index: 6, time_s: "00:00:00", time_t: "00:00:00", text: "Let's catch up over coffee.", translation: "我们去喝杯咖啡聊聊天吧。"},
-    {index: 7, time_s: "00:00:00", time_t: "00:00:00", text: "You look great!", translation: "你看起来很棒！"},
-    {index: 8, time_s: "00:00:00", time_t: "00:00:00", text: "I can't believe it's been so long.", translation: "真不敢相信已经这么久了。"},
-    {index: 9, time_s: "00:00:00", time_t: "00:00:00", text: "We should do this more often.", translation: "我们应该多聚聚。"},
-    {index: 10, time_s: "00:00:00", time_t: "00:00:00", text: "Thanks for coming to see me.", translation: "谢谢你来看我。"},
-    {index: 11, time_s: "00:00:00", time_t: "00:00:00", text: "We show case the utility of Macformer when combined with molecular docking simulations and wet lab based experimental validation, by applying it to the prospective design of macrocyclic JAK2 inhibitors.", translation: "我们通过将其应用于大环JAK2抑制剂的前瞻性设计，展示了Macformer与分子对接模拟和湿实验验证相结合的实用性。"},
-    {index: 12, time_s: "00:00:00", time_t: "00:00:00", text: "Macrocycles, typically defined as cyclic small molecules or peptides with ring structures consisting of 12 or more atoms, has emerged as promising chemical scaffolds in the field of new drug discovery1,2. The distinct physicochemical properties, including high molecular weight and abundant hydrogen bond donors3, render this structural class occupy a chemical space beyond Lipinski's rule of five4.", translation: "大环分子通常定义为具有由 12 个或更多原子组成的环状结构的环状小分子或肽，已成为新药发现领域中具有前景的化学骨架 [1,2]。其独特的理化性质（包括高分子量和丰富的氢键供体）[3]，使这类结构占据了超越 Lipinski 五规则 [4] 的化学空间。"}
-  ])
+  const captionData = ref<CaptionItem[]>([])
+
+  window.electron.ipcRenderer.on('both.log.set', (_, logs) => {
+    captionData.value = logs
+    console.log('GET both.log.set', logs)
+  })
 
   return {
     captionData

src/renderer/src/stores/captionStyle.ts

@@ -6,7 +6,7 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
   const fontSize = ref<number>(24)
   const fontColor = ref<string>('#000000')
   const background = ref<string>('#dbe2ef')
-  const opacity = ref<number>(50)
+  const opacity = ref<number>(80)
   const transDisplay = ref<boolean>(true)
   const transFontFamily = ref<string>('sans-serif')
   const transFontSize = ref<number>(24)
@@ -39,7 +39,7 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
     console.log('SEND control.style.change', styles)
   }
 
-  window.electron.ipcRenderer.on('caption.style.set', async (_, args) => {
+  window.electron.ipcRenderer.on('caption.style.set', (_, args) => {
     fontFamily.value = args.fontFamily
     fontSize.value = args.fontSize
     fontColor.value = args.fontColor

src/renderer/src/views/CaptionPage.vue

@@ -8,13 +8,14 @@
   >
     <div class="title-bar">
       <div class="drag-area">&nbsp;</div>
-      <div class="option-item">
-        <PushpinOutlined class="option-icon" />
+      <div class="option-item" @click="pinCaptionWindow">
+        <PushpinFilled v-if="pinned" />
+        <PushpinOutlined v-else />
       </div>
-      <div class="option-item">
+      <div class="option-item" @click="openControlWindow">
         <SettingOutlined />
       </div>
-      <div class="option-item">
+      <div class="option-item" @click="closeCaptionWindow">
         <CloseOutlined />
       </div>
     </div>
@@ -24,30 +25,39 @@
         fontSize: captionStyle.fontSize + 'px',
         color: captionStyle.fontColor
       }">
-        {{ "This is a preview of subtitle styles." }}
+        <span v-if="captionData.length">{{ captionData[captionData.length-1].text }}</span>
+        <span v-else>{{ "This is a preview of subtitle styles." }}</span>
       </p>
       <p class="preview-translation" v-if="captionStyle.transDisplay" :style="{
         fontFamily: captionStyle.transFontFamily,
         fontSize: captionStyle.transFontSize + 'px',
         color: captionStyle.transFontColor
-      }">{{ "这是字幕样式预览(翻译)" }}</p>
+      }">
+        <span v-if="captionData.length">{{ captionData[captionData.length-1].translation }}</span>
+        <span v-else>{{ "这是字幕样式预览(翻译)" }}</span>
+      </p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PushpinOutlined, CloseOutlined, SettingOutlined } from '@ant-design/icons-vue';
+import { PushpinOutlined, PushpinFilled, CloseOutlined, SettingOutlined } from '@ant-design/icons-vue';
 import { ref, onMounted } from 'vue';
 import { useCaptionStyleStore } from '@renderer/stores/captionStyle';
+import { useCaptionLogStore } from '@renderer/stores/captionLog';
+import { storeToRefs } from 'pinia';
 const captionStyle = useCaptionStyleStore();
+const captionLog = useCaptionLogStore();
+const { captionData } = storeToRefs(captionLog);
 const caption = ref();
 const windowHeight = ref(100);
+const pinned = ref(true);
 
 onMounted(() => {
   const resizeObserver = new ResizeObserver(entries => {
     for (const entry of entries) {
-      if(windowHeight.value !== Math.floor(entry.contentRect.height)) {
-        windowHeight.value = Math.floor(entry.contentRect.height);
+      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)
       }
@@ -58,8 +68,17 @@ onMounted(() => {
   }
 });
 
+function pinCaptionWindow() {
+  pinned.value = !pinned.value;
+  window.electron.ipcRenderer.send('caption.pin.set', pinned.value)
+}
+
 function openControlWindow() {
-  window.electron.ipcRenderer.send('caption.controlWindow.create')
+  window.electron.ipcRenderer.send('caption.controlWindow.activate')
+}
+
+function closeCaptionWindow() {
+  window.electron.ipcRenderer.send('caption.window.close')
 }
 </script>
 
@@ -68,6 +87,8 @@ function openControlWindow() {
   width: 100%;
   user-select: none;
   border-radius: 8px;
+  box-sizing: border-box;
+  border: 1px solid #3333;
 }
 
 .title-bar {
@@ -98,7 +119,7 @@ function openControlWindow() {
 .caption-container p {
   text-align: center;
   margin: 0;
-  line-height: 2em;
+  line-height: 1.5em;
   padding: 0 10px 10px 10px;
 }
 </style>