搭建新开窗口功能模板

electron/main/appManage.ts

@@ -69,6 +69,7 @@ export const setAppGlobalData = () => {
     asarPath,
     trayIcon: join(publicPath, `/icons/${isWin ? "icon.ico" : "tray.png"}`),
     indexHtml: join(distPath, "index.html"),
+    callingHtml: join(distPath, "index.html/#/calling"),
     splashHtml: join(distPath, "splash.html"),
     preload: join(__dirname, "../preload/index.js"),
   };

electron/main/windowManage.ts

@@ -1,5 +1,5 @@
 import { join } from "node:path";
-import { BrowserWindow, shell } from "electron";
+import { BrowserWindow, shell, ipcMain } from "electron";
 import { isLinux, isMac, isWin } from "../utils";
 import { destroyTray } from "./trayManage";
 import { getStore } from "./storeManage";
@@ -9,6 +9,7 @@ import { registerShortcuts, unregisterShortcuts } from "./shortcutManage";
 const url = process.env.VITE_DEV_SERVER_URL;
 let mainWindow: BrowserWindow | null = null;
 let splashWindow: BrowserWindow | null = null;
+let callingWindow: BrowserWindow | null = null;
 
 const store = getStore();
 
@@ -87,9 +88,38 @@ export function createMainWindow() {
       mainWindow?.hide();
     }
   });
+
+  ipcMain.on('calling-window', createCallingWindow)
   return mainWindow;
 }
 
+export function createCallingWindow(event, msg) {
+  if (callingWindow) {
+    return
+  }
+  callingWindow = new BrowserWindow({
+    title: "OpenIM calling -----",
+    icon: join(global.pathConfig.publicPath, "favicon.ico"),
+    modal: true,
+    titleBarStyle: "default",
+    webPreferences: {
+      preload: global.pathConfig.preload,
+    },
+  });
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    // Open devTool if the app is not packaged
+    callingWindow.loadURL(`${url}/#/calling`);
+  } else {
+    callingWindow.loadFile(global.pathConfig.callingHtml);
+  }
+  callingWindow.on('close',()=>{
+    callingWindow = null
+  })
+
+  return callingWindow;
+}
+
 export function splashEnd() {
   splashWindow?.close();
   mainWindow?.show();

electron/preload/index.ts

@@ -45,6 +45,9 @@ const ipcInvoke = (channel: string, ...arg: any) => {
 const ipcSendSync = (channel: string, ...arg: any) => {
   return ipcRenderer.sendSync(channel, ...arg);
 };
+const ipcSend = (channel: string, ...arg: any) => {
+  return ipcRenderer.send(channel, ...arg);
+};
 
 const saveFileToDisk = async ({
   file,
@@ -77,6 +80,7 @@ const Api: IElectronAPI = {
   unsubscribeAll,
   ipcInvoke,
   ipcSendSync,
+  ipcSend,
   saveFileToDisk,
 };
 

src/layout/TopSearchBar/index.tsx

@@ -57,6 +57,10 @@ const TopSearchBar = () => {
       chooseModalRef.current?.openOverlay();
     };
     const callRtcHandler = (inviteData: InviteData) => {
+      if (window.electronAPI?.ipcSend) {
+        window.electronAPI?.ipcSend("calling-window", { data: "test" });
+        return;
+      }
       if (rtcRef.current?.isOverlayOpen) return;
       setInviteData(inviteData);
       rtcRef.current?.openOverlay();

src/pages/calling/index.tsx

@@ -0,0 +1,7 @@
+export const Calling = () => {
+  return (
+    <div className="relative flex h-full flex-col">
+      <div>test calling routes with new window</div>
+    </div>
+  );
+};

src/routes/index.tsx

@@ -45,6 +45,13 @@ const router = createHashRouter([
           },
         ],
       },
+      {
+        path: "calling",
+        async lazy() {
+          const { Calling } = await import("@/pages/calling");
+          return { Component: Calling };
+        },
+      },
       {
         path: "login",
         async lazy() {

src/types/globalExpose.d.ts

@@ -12,6 +12,7 @@ export interface IElectronAPI {
   unsubscribeAll: (channel: string) => void;
   ipcInvoke: <T = unknown>(channel: string, ...arg: any) => Promise<T>;
   ipcSendSync: <T = unknown>(channel: string, ...arg: any) => T;
+  ipcSend: <T = unknown>(channel: string, ...arg: any) => void;
   saveFileToDisk: (params: {
     file: File;
     type: "fileCache" | "sentFileCache";