feat(renderer): 实现多窗口创建，实现多窗口通信

src/main/caption.ts

@@ -0,0 +1,66 @@
+import { shell, BrowserWindow, ipcMain } from 'electron'
+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'
+
+class CaptionWindow { 
+  window: BrowserWindow | undefined;
+  
+  public createWindow(): void { 
+    this.window = new BrowserWindow({
+      icon: icon,
+      width: 900,
+      height: 320,
+      show: false,
+      // center: true,
+      autoHideMenuBar: true,
+      ...(process.platform === 'linux' ? { icon } : {}),
+      webPreferences: {
+        preload: path.join(__dirname, '../preload/index.js'),
+        sandbox: false
+      }
+    })
+  
+    setTimeout(() => {
+      if (this.window) {
+        sendStyles(this.window);
+      }
+    }, 1000);
+
+    this.window.on('ready-to-show', () => {
+      this.window?.show()
+    })
+
+    this.window.on('closed', () => {
+      console.log('INFO caption window closed')
+      this.window = undefined
+    })
+
+    this.window.webContents.setWindowOpenHandler((details) => {
+      shell.openExternal(details.url)
+      return { action: 'deny' }
+    })
+  
+    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+      this.window.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/#/caption`)
+    } else {
+      this.window.loadFile(path.join(__dirname, '../renderer/index.html'), {
+        hash: 'caption'
+      })
+    }
+  }
+
+  public handleMessage() {
+    // 字幕窗口请求创建控制窗口
+    ipcMain.on('caption.controlWindow.create', () => {
+      if(!controlWindow.window){
+        controlWindow.createWindow()
+        console.log('caption.controlWindow.create')
+      }
+    })
+  }
+}
+
+export const captionWindow = new CaptionWindow()

src/main/control.ts

@@ -0,0 +1,73 @@
+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 { captionWindow } from './caption'
+
+class ControlWindow {
+  window: BrowserWindow | undefined;
+  
+  public createWindow(): void {
+    this.window = new BrowserWindow({
+      icon: icon,
+      width: 900,
+      height: 670,
+      show: false,
+      center: true,
+      autoHideMenuBar: true,
+      ...(process.platform === 'linux' ? { icon } : {}),
+      webPreferences: {
+        preload: path.join(__dirname, '../preload/index.js'),
+        sandbox: false
+      }
+    })
+
+    setTimeout(() => {
+      if (this.window) {
+        sendStyles(this.window);
+      }
+    }, 1000);
+    
+
+    this.window.on('ready-to-show', () => {
+      this.window?.show()
+    })
+  
+    this.window.on('closed', () => {
+      console.log('INFO control window closed')
+      this.window = undefined
+    })
+  
+    this.window.webContents.setWindowOpenHandler((details) => {
+      shell.openExternal(details.url)
+      return { action: 'deny' }
+    })
+  
+    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+      this.window.loadURL(process.env['ELECTRON_RENDERER_URL'])
+    } else {
+      this.window.loadFile(path.join(__dirname, '../renderer/index.html'))
+    }
+  }
+
+  public handleMessage() {
+    // 控制窗口样式更新
+    ipcMain.on('control.style.change', (_, args) => {
+      console.log('GET control.style.change', args)
+      setStyles(args)
+      if(captionWindow.window){
+        sendStyles(captionWindow.window)
+      }
+    })
+    // 控制窗口请求创建字幕窗口
+    ipcMain.on('control.captionWindow.create', () => {
+      if(!captionWindow.window){
+        captionWindow.createWindow()
+        console.log('GET control.captionWindow.create')
+      }
+    })
+  }
+}
+
+export const controlWindow = new ControlWindow()

src/main/data.ts

@@ -0,0 +1,42 @@
+import { BrowserWindow } from 'electron'
+
+export interface Styles {
+  fontFamily: string,
+  fontSize: number,
+  fontColor: string,
+  background: string,
+  opacity: number,
+  transDisplay: boolean,
+  transFontFamily: string,
+  transFontSize: number,
+  transFontColor: string
+}
+
+export let styles: Styles = {
+  fontFamily: 'sans-serif',
+  fontSize: 24,
+  fontColor: '#000000',
+  background: '#dbe2ef',
+  opacity: 50,
+  transDisplay: true,
+  transFontFamily: 'sans-serif',
+  transFontSize: 24,
+  transFontColor: '#000000'
+}
+
+export function setStyles(args: any) {
+  styles.fontFamily = args.fontFamily
+  styles.fontSize = args.fontSize
+  styles.fontColor = args.fontColor
+  styles.background = args.background
+  styles.opacity = args.opacity
+  styles.transDisplay = args.transDisplay
+  styles.transFontFamily = args.transFontFamily
+  styles.transFontSize = args.transFontSize
+  styles.transFontColor = args.transFontColor
+}
+
+export function sendStyles(window: BrowserWindow) {
+  window.webContents.send('caption.style.set', styles)
+  console.log('SNED caption.style.set')
+}

src/main/index.ts

@@ -1,73 +1,7 @@
-import { app, shell, BrowserWindow } from 'electron'
-import path from 'path'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import icon from '../../resources/icon.png?asset'
-
-let mainWindow: BrowserWindow | undefined
-let captionWindow: BrowserWindow | undefined
-function createMainWindow(): void {
-  mainWindow = new BrowserWindow({
-    icon: icon,
-    width: 900,
-    height: 670,
-    show: false,
-    center: true,
-    autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
-    webPreferences: {
-      preload: path.join(__dirname, '../preload/index.js'),
-      sandbox: false
-    }
-  })
-
-  mainWindow.on('ready-to-show', () => {
-    mainWindow?.show()
-  })
-
-  mainWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url)
-    return { action: 'deny' }
-  })
-
-  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
-  } else {
-    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
-  }
-}
-
-function createCaptionWindow(): void {
-  captionWindow = new BrowserWindow({
-    icon: icon,
-    width: 900,
-    height: 670,
-    show: false,
-    center: true,
-    autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
-    webPreferences: {
-      preload: path.join(__dirname, '../preload/index.js'),
-      sandbox: false
-    }
-  })
-
-  captionWindow.on('ready-to-show', () => {
-    captionWindow?.show()
-  })
-
-  captionWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url)
-    return { action: 'deny' }
-  })
-
-  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    captionWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/#/caption`)
-  } else {
-    captionWindow.loadFile(path.join(__dirname, '../renderer/index.html'), {
-      hash: 'caption'
-    })
-  }
-}
+import { app, BrowserWindow } from 'electron'
+import { electronApp, optimizer } from '@electron-toolkit/utils'
+import { controlWindow } from './control'
+import { captionWindow } from './caption'
 
 app.whenReady().then(() => {
   electronApp.setAppUserModelId('com.himeditator.autocaption')
@@ -76,11 +10,15 @@ app.whenReady().then(() => {
     optimizer.watchWindowShortcuts(window)
   })
 
-  createMainWindow()
-  createCaptionWindow()
+  controlWindow.handleMessage()
+  captionWindow.handleMessage()
+
+  controlWindow.createWindow()
 
   app.on('activate', function () {
-    if (BrowserWindow.getAllWindows().length === 0) createMainWindow()
+    if (BrowserWindow.getAllWindows().length === 0){
+      controlWindow.createWindow()
+    }
   })
 })