config/webpack.common.js

@@ -83,7 +83,8 @@ const Entry = () => ({
     },
 
     Electron: {
-        import: source("./Electron/Electron.ts")
+        import: source("./Electron/Electron.ts"),
+        dependOn: ["Service"]
     },
 });
 

config/webpack.electron.js

@@ -8,6 +8,7 @@ module.exports = (env) => {
     const config = {
 
         entry: {
+            Service: AllEntry.Service,
 			Electron: AllEntry.Electron,
         },
 

package.json

@@ -25,7 +25,9 @@
     "build-electron": "webpack --mode development --config ./config/webpack.electron.js",
     "release-electron": "webpack --mode production --no-devtool --config ./config/webpack.electron.js",
     "electron-cache": "set ELECTRON_SKIP_BINARY_DOWNLOAD=& set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/& set ELECTRON_CUSTOM_DIR={{ version }}& node ./node_modules/electron/install.js",
-    "electron-test": "electron"
+    "electron": "set LIVING_TOGETHER_BASE_PATH=./build& npx electron ./build/Electron.js",
+    "build-run-electron": "npm run build-desktop-web & npm run copy-fluent-icon & npm run build-electron & npm run electron",
+    "release-run-electron": "npm run release-desktop-web & npm run copy-fluent-icon & npm run release-electron & npm run electron"
   },
   "keywords": [
     "artwork",

source/Component/HeaderBar/HeaderBar.scss

@@ -7,6 +7,9 @@ div.header-bar {
     justify-content: space-between;
     user-select: none;
 
+    // 在 Electron 中用于拖拽窗口
+    -webkit-app-region: drag;
+
     div.title {
         padding-left: 3px;
     }
@@ -36,6 +39,9 @@ div.header-bar {
         min-width: 135px;
         display: flex;
 
+        // 在 Electron 中用于拖拽窗口
+        -webkit-app-region: no-drag;
+
         div.action-button {
             width: 45px;
             height: 45px;

source/Electron/Electron.ts

@@ -1,16 +1,44 @@
 import { app, BrowserWindow } from "electron";
+import { Service } from "@Service/Service";
+const ENV = process.env ?? {};
 
-async function main() {
+class ElectronApp {
+
+	public service: Service;
+
+	public serviceUrl: string = "http://127.0.0.1";
+
+	public constructor() {
+		this.service = new Service();
+	}
+
+	public async runService() {
+
+		let defaultPort: number | undefined = parseInt(ENV.LIVING_TOGETHER_DEFAULT_PORT ?? "");
+		if (isNaN(defaultPort)) defaultPort = undefined;
+
+		this.serviceUrl = await this.service.run(
+			ENV.LIVING_TOGETHER_BASE_PATH, defaultPort
+		);
+	}
+
+	public mainWindows?: BrowserWindow;
+
+	public async runMainThread() {
 
 		await app.whenReady();
 
-	const win = new BrowserWindow({
+		await this.runService();
+
+		this.mainWindows = new BrowserWindow({
 			width: 800,
-		height: 600
+			height: 600,
+			titleBarStyle: 'hidden',
+			frame: false,
 		});
 
-	win.loadURL("https://www.baidu.com");
+		this.mainWindows.loadURL(this.serviceUrl);
-
+	}
 }
 
-main();
+new ElectronApp().runMainThread();

source/Service/Service.ts

@@ -41,6 +41,8 @@ class Service {
 		this.app.listen(this.servicePort);
 
 		console.log("Service: service run in port " + this.servicePort);
+
+		return "http://127.0.0.1:" + this.servicePort + "/";
 	}
 }