新增多个窗口创建功能，支持编辑器和播放器窗口，并添加文件选择对话框

src/main/index.ts

@@ -1,20 +1,24 @@
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, dialog } from 'electron'
-import { join } from 'path'
+import * as path from 'path'
+// const path = require('path')
+// import { path.join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
+import * as fs from 'fs'
 
 function createWindow(): void {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 960,
+    width: 720,
-    height: 700,
+    height: 480,
     show: false,
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
-      preload: join(__dirname, '../preload/index.js'),
+      preload: path.join(__dirname, '../preload/index.js'),
-      sandbox: false
+      sandbox: false,
-    },
+      nodeIntegration: true
+    }
     // titleBarStyle: 'hidden',
     // titleBarOverlay: {
     //   color: 'rgba(0,0,0,0)',
@@ -23,6 +27,9 @@ function createWindow(): void {
     // }
   })
 
+  mainWindow.setAspectRatio(720 / 480) // 固定宽高比
+  mainWindow.setMinimumSize(720, 480) // 最小尺寸
+
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
   })
@@ -32,21 +39,102 @@ function createWindow(): void {
     return { action: 'deny' }
   })
 
+  const route = 'mainpage'
+
   // HMR for renderer base on electron-vite cli.
   // Load the remote URL for development or the local html file for production.
   if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+    // 🚧 Use ['ENV_NAME'] avoid vite:define plugin
+    const url = process.env['ELECTRON_RENDERER_URL']
+
+    mainWindow.loadURL(`${url}#/${route}`)
   } else {
-    mainWindow.loadFile(join(__dirname, '../renderer/index.html#'))
+    mainWindow.loadFile(path.resolve(__dirname, '../renderer/index.html'), { hash: route })
   }
 }
 
+function createEditorWindow(): void {
+  const editorWindow = new BrowserWindow({
+    width: 920,
+    height: 700,
+    show: false,
+    autoHideMenuBar: true,
+    titleBarStyle: 'default',
+    webPreferences: {
+      preload: path.join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  })
+
+  editorWindow.on('ready-to-show', () => {
+    editorWindow.show()
+  })
+
+  editorWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  const route = 'editor'
+
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    const url = process.env['ELECTRON_RENDERER_URL']
+    editorWindow.loadURL(`${url}#/${route}`)
+  } else {
+    editorWindow.loadFile(path.resolve(__dirname, '../renderer/index.html'), { hash: route })
+  }
+}
+
+function createPlayerWindow(configPath: string): void {
+  const playerWindow = new BrowserWindow({
+    width: 1920,
+    height: 1080,
+    fullscreen: true,
+    autoHideMenuBar: true,
+    webPreferences: {
+      preload: path.join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  })
+
+  playerWindow.on('ready-to-show', () => {
+    playerWindow.show()
+  })
+
+  playerWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  const route = 'playerview'
+
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    const url = process.env['ELECTRON_RENDERER_URL']
+    playerWindow.loadURL(`${url}#/${route}`)
+  } else {
+    playerWindow.loadFile(path.resolve(__dirname, '../renderer/index.html'), { hash: route })
+  }
+
+  // 读取配置文件并发送给渲染进程
+  fs.readFile(configPath, 'utf-8', (err, data) => {
+    if (err) {
+      console.error('Failed to read config file:', err)
+      return
+    }
+    // 延迟发送事件，确保渲染进程有足够时间挂载组件
+    setTimeout(() => {
+      playerWindow.webContents.send('load-config', data)
+      console.log('Config file loaded:', data)
+    }, 1000) // 延迟1秒
+  })
+}
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
   // Set app user model id for windows
-  electronApp.setAppUserModelId('com.electron')
+  electronApp.setAppUserModelId('org.examaware')
 
   // Default open or close DevTools by F12 in development
   // and ignore CommandOrControl + R in production.
@@ -58,6 +146,27 @@ app.whenReady().then(() => {
   // IPC test
   ipcMain.on('ping', () => console.log('pong'))
 
+  // Handle open editor window request
+  ipcMain.on('open-editor-window', () => {
+    createEditorWindow()
+  })
+
+  ipcMain.on('open-player-window', (event, configPath) => {
+    createPlayerWindow(configPath)
+  })
+
+  ipcMain.handle('select-file', async () => {
+    const result = await dialog.showOpenDialog({
+      properties: ['openFile'],
+      filters: [{ name: 'JSON Files', extensions: ['json'] }]
+    })
+    if (result.canceled) {
+      return null
+    } else {
+      return result.filePaths[0]
+    }
+  })
+
   createWindow()
 
   app.on('activate', function () {

src/preload/index.ts

@@ -1,8 +1,11 @@
 import { contextBridge } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
+import { fileApi } from '../main/fileUtils'
 
 // Custom APIs for renderer
-const api = {}
+const api = {
+  fileApi
+}
 
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise