增加了系统启动等待效果

2025-12-13 14:10:45 +08:00 · 2025-12-13 14:10:45 +08:00 · c65a89ed6f
commit c65a89ed6f
parent 23f0fc9bba
2 changed files with 65 additions and 6 deletions
--- a/frontend/src/renderer/main/main.js
+++ b/frontend/src/renderer/main/main.js
@ -7,6 +7,7 @@ const { spawn } = require('child_process');
 let mainWindow;
 let localServer;
 let backendProcess;
+let splashWindow;
 // app.disableHardwareAcceleration();
 app.disableDomainBlockingFor3DAPIs();
 console.log('Electron version:', process.versions.electron);
@ -187,6 +188,16 @@ function stopBackendService() {
 }

 function createWindow() {
+  splashWindow = new BrowserWindow({
+    width: 480,
+    height: 320,
+    frame: false,
+    resizable: false,
+    alwaysOnTop: true,
+    backgroundColor: '#000000',
+    show: true
+  });
+  splashWindow.loadFile(path.join(__dirname, 'resources/loading.html'));
  mainWindow = new BrowserWindow({
    width: 1920,
    height: 1080,
@ -224,14 +235,14 @@ function createWindow() {
    }, 2000);
  }

-  // 窗口就绪后再显示，避免白屏/闪烁
-  mainWindow.once('ready-to-show', () => {
-    mainWindow.show();
-  });
-
  // 监听页面加载完成事件
  mainWindow.webContents.once('did-finish-load', () => {
    console.log('Page loaded completely');
+    if (splashWindow) {
+      splashWindow.close();
+      splashWindow = null;
+    }
+    mainWindow.show();
  });


@ -239,6 +250,10 @@ function createWindow() {
  // 添加加载失败的处理
  mainWindow.webContents.on('did-fail-load', (event, errorCode, errorDescription, validatedURL) => {
    console.log('Failed to load:', errorDescription, 'URL:', validatedURL);
+    if (splashWindow) {
+      splashWindow.close();
+      splashWindow = null;
+    }
    mainWindow.show(); // 即使加载失败也显示窗口
  });

@ -249,6 +264,10 @@ function createWindow() {
    }
      // 关闭后端服务
    stopBackendService();
+    if (splashWindow) {
+      splashWindow.close();
+      splashWindow = null;
+    }
  });
 }

--- a/frontend/src/renderer/main/resources/loading.html
+++ b/frontend/src/renderer/main/resources/loading.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Loading</title>
+  <style>
+    html, body { height: 100%; }
+    body {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #000000;
+      color: #ffffff;
+      font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
+    }
+    .wrap { display: flex; flex-direction: column; align-items: center; }
+    .spinner {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: conic-gradient(from 0deg, #ffffff 0deg, rgba(255,255,255,0.15) 90deg, rgba(255,255,255,0.15) 360deg);
+      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
+      mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
+      animation: spin 1s linear infinite;
+      margin-bottom: 16px;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .text { font-size: 30px; opacity: 0.9; letter-spacing: 0.5px; }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="spinner"></div>
+    <div class="text">系统启动中...</div>
+  </div>
+  </body>
+</html>