From 37ff49e593ed99bf6c0868deac51c113eb2dac30 Mon Sep 17 00:00:00 2001
From: himeditator <hironin@foxmail.com>
Date: Tue, 17 Jun 2025 14:16:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(caption):=20=E5=AE=9E=E7=8E=B0=E5=AD=97?=
 =?UTF-8?q?=E5=B9=95=E7=AA=97=E5=8F=A3=E5=9F=BA=E7=A1=80=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/caption.ts                    |  17 +++-
 src/renderer/src/views/CaptionPage.vue | 113 +++++++++++++++++++------
 2 files changed, 99 insertions(+), 31 deletions(-)

diff --git a/src/main/caption.ts b/src/main/caption.ts
index 5041e7d..cb03427 100644
--- a/src/main/caption.ts
+++ b/src/main/caption.ts
@@ -12,9 +12,13 @@ class CaptionWindow {
     this.window = new BrowserWindow({
       icon: icon,
       width: 900,
-      height: 320,
+      height: 100,
+      minWidth: 480,
       show: false,
-      // center: true,
+      frame: false,
+      transparent: true,
+      alwaysOnTop: true,
+      center: true,
       autoHideMenuBar: true,
       ...(process.platform === 'linux' ? { icon } : {}),
       webPreferences: {
@@ -57,7 +61,14 @@ class CaptionWindow {
     ipcMain.on('caption.controlWindow.create', () => {
       if(!controlWindow.window){
         controlWindow.createWindow()
-        console.log('caption.controlWindow.create')
+        console.log('GET caption.controlWindow.create')
+      }
+    })
+    // 字幕窗口高度发生变化
+    ipcMain.on('caption.windowHeight.change', (_, height) => {
+      console.log('GET caption.window.height.change', height)
+      if(this.window){
+        this.window.setSize(this.window.getSize()[0], height) 
       }
     })
   }
diff --git a/src/renderer/src/views/CaptionPage.vue b/src/renderer/src/views/CaptionPage.vue
index 3d5975a..dc0f187 100644
--- a/src/renderer/src/views/CaptionPage.vue
+++ b/src/renderer/src/views/CaptionPage.vue
@@ -1,47 +1,104 @@
 <template>
-  <a-button @click="test">打开控制窗口</a-button>
-  <div class="preview-container" :style="{
+  <div
+  class="caption-page"
+  ref="caption"
+  :style="{
     backgroundColor: captionStyle.backgroundRGBA
-  }">
-    <p class="preview-caption" :style="{
-      fontFamily: captionStyle.fontFamily,
-      fontSize: captionStyle.fontSize + 'px',
-      color: captionStyle.fontColor
-    }">
-      {{ "This is a preview of subtitle styles." }}
-    </p>
-    <p class="preview-translation" v-if="captionStyle.transDisplay" :style="{
-      fontFamily: captionStyle.transFontFamily,
-      fontSize: captionStyle.transFontSize + 'px',
-      color: captionStyle.transFontColor
-    }">这是字幕样式预览(翻译)</p>
+  }"
+  >
+    <div class="title-bar">
+      <div class="drag-area">&nbsp;</div>
+      <div class="option-item">
+        <PushpinOutlined class="option-icon" />
+      </div>
+      <div class="option-item">
+        <SettingOutlined />
+      </div>
+      <div class="option-item">
+        <CloseOutlined />
+      </div>
+    </div>
+    <div class="caption-container">
+      <p class="preview-caption" :style="{
+        fontFamily: captionStyle.fontFamily,
+        fontSize: captionStyle.fontSize + 'px',
+        color: captionStyle.fontColor
+      }">
+        {{ "This is a preview of subtitle styles." }}
+      </p>
+      <p class="preview-translation" v-if="captionStyle.transDisplay" :style="{
+        fontFamily: captionStyle.transFontFamily,
+        fontSize: captionStyle.transFontSize + 'px',
+        color: captionStyle.transFontColor
+      }">{{ "这是字幕样式预览(翻译)" }}</p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { PushpinOutlined, CloseOutlined, SettingOutlined } from '@ant-design/icons-vue';
+import { ref, onMounted } from 'vue';
 import { useCaptionStyleStore } from '@renderer/stores/captionStyle';
 const captionStyle = useCaptionStyleStore();
+const caption = ref();
+const windowHeight = ref(100);
 
-function test() {
+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);
+        console.log('INFO window height change', windowHeight.value);
+        window.electron.ipcRenderer.send('caption.windowHeight.change', windowHeight.value)
+      }
+    }
+  });
+  if (caption.value) {
+    resizeObserver.observe(caption.value);
+  }
+});
+
+function openControlWindow() {
   window.electron.ipcRenderer.send('caption.controlWindow.create')
 }
 </script>
 
 <style scoped>
-.preview-container {
-  line-height: 2em;
-  width: 60%;
-  text-align: center;
-  position: absolute;
-  padding: 20px;
-  border-radius: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 20px;
+.caption-page {
+  width: 100%;
+  user-select: none;
+  border-radius: 8px;
 }
 
-.preview-container p {
+.title-bar {
+  display: flex;
+  align-items: center;
+}
+
+.drag-area {
+  padding: 5px;
+  flex-grow: 1;
+  -webkit-app-region: drag;
+}
+
+.option-item {
+  display: inline-block;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.option-item:hover {
+  background-color: #2221;
+}
+
+.caption-container { 
+  -webkit-app-region: drag;
+}
+
+.caption-container p {
+  text-align: center;
   margin: 0;
-  line-height: 1.5em;
+  line-height: 2em;
+  padding: 0 10px 10px 10px;
 }
 </style>
\ No newline at end of file