feat(caption): 实现字幕窗口基础功能和样式

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) 
       }
     })
   }

src/renderer/src/views/CaptionPage.vue

@@ -1,47 +1,104 @@
 <template>
-  <a-button @click="test">打开控制窗口</a-button>
+  <div
-  <div class="preview-container" :style="{
+  class="caption-page"
+  ref="caption"
+  :style="{
     backgroundColor: captionStyle.backgroundRGBA
-  }">
+  }"
-    <p class="preview-caption" :style="{
+  >
-      fontFamily: captionStyle.fontFamily,
+    <div class="title-bar">
-      fontSize: captionStyle.fontSize + 'px',
+      <div class="drag-area">&nbsp;</div>
-      color: captionStyle.fontColor
+      <div class="option-item">
-    }">
+        <PushpinOutlined class="option-icon" />
-      {{ "This is a preview of subtitle styles." }}
+      </div>
-    </p>
+      <div class="option-item">
-    <p class="preview-translation" v-if="captionStyle.transDisplay" :style="{
+        <SettingOutlined />
-      fontFamily: captionStyle.transFontFamily,
+      </div>
-      fontSize: captionStyle.transFontSize + 'px',
+      <div class="option-item">
-      color: captionStyle.transFontColor
+        <CloseOutlined />
-    }">这是字幕样式预览(翻译)</p>
+      </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 {
+.caption-page {
-  line-height: 2em;
+  width: 100%;
-  width: 60%;
+  user-select: none;
-  text-align: center;
+  border-radius: 8px;
-  position: absolute;
-  padding: 20px;
-  border-radius: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 20px;
 }
 
-.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>