fix: overlay改loadFile(不用data URL) + nodeIntegration开启 + taskbar进度条兜底
This commit is contained in:
yu
parent
bc4b349771
commit
9bfa4ac107
@ -1,9 +1,83 @@
|
||||
import { BrowserWindow, ipcMain, screen } from "electron";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { app } from "electron";
|
||||
|
||||
let overlayWindow: BrowserWindow | null = null;
|
||||
|
||||
function writeOverlayHtml(): string {
|
||||
const dir = path.join(app.getPath("temp"), "rpa-studio-overlay");
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
const file = path.join(dir, "overlay.html");
|
||||
const html = `<!DOCTYPE html>
|
||||
<html><head><style>
|
||||
*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
|
||||
body{width:320px;height:56px;background:#1E2530;color:#E8ECF2;font-family:'Segoe UI',sans-serif;display:flex;align-items:center;padding:0 12px;gap:10px;overflow:hidden;border-radius:8px;border:1px solid #3A4556}
|
||||
.spinner{width:14px;height:14px;border:2px solid #4A90D9;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.info{flex:1;min-width:0}
|
||||
.step{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#B8C4D4}
|
||||
.progress-bar{height:3px;background:#3A4556;border-radius:2px;margin-top:4px;overflow:hidden}
|
||||
.progress-fill{height:100%;background:#4A90D9;border-radius:2px;transition:width .3s ease}
|
||||
.meta{font-size:10px;color:#7A8898;flex-shrink:0;white-space:nowrap}
|
||||
.stop-btn{background:#3A2028;color:#E05252;border:1px solid #5A3038;border-radius:4px;padding:4px 8px;font-size:10px;cursor:pointer;flex-shrink:0}
|
||||
.stop-btn:hover{background:#4A2830}
|
||||
</style></head><body>
|
||||
<div class="spinner" id="spin"></div>
|
||||
<div class="info">
|
||||
<div class="step" id="step">准备运行…</div>
|
||||
<div class="progress-bar"><div class="progress-fill" id="fill" style="width:0%"></div></div>
|
||||
</div>
|
||||
<div class="meta" id="meta">0/0</div>
|
||||
<button class="stop-btn" id="stopBtn" onclick="stopRun()">停止</button>
|
||||
<script>
|
||||
const { ipcRenderer } = require("electron");
|
||||
let done = 0, total = 0, startTime = Date.now();
|
||||
let timer = setInterval(function() {
|
||||
var s = Math.floor((Date.now() - startTime) / 1000);
|
||||
document.getElementById("meta").textContent = done + "/" + total + " · " + s + "s";
|
||||
}, 1000);
|
||||
|
||||
ipcRenderer.on("run:event", function(_e, ev) {
|
||||
if (ev.type === "node.started" && ev.nodeLabel) {
|
||||
document.getElementById("step").textContent = ev.nodeLabel;
|
||||
}
|
||||
if (ev.type === "run.started") { startTime = Date.now(); }
|
||||
if (ev.type === "run.total" && ev.total) { total = ev.total; }
|
||||
if (ev.type === "node.finished") { done++; updateBar(); }
|
||||
if (ev.type === "run.finished") {
|
||||
clearInterval(timer);
|
||||
document.getElementById("spin").style.display = "none";
|
||||
var fill = document.getElementById("fill");
|
||||
fill.style.background = ev.status === "succeeded" ? "#4CAF50" : "#E05252";
|
||||
fill.style.width = "100%";
|
||||
document.getElementById("step").textContent =
|
||||
ev.status === "succeeded" ? "✓ 运行成功" :
|
||||
ev.status === "failed" ? "✗ 运行失败" : "已取消";
|
||||
document.getElementById("stopBtn").textContent = "关闭";
|
||||
document.getElementById("stopBtn").onclick = function() { ipcRenderer.send("overlay:close"); };
|
||||
setTimeout(function() { ipcRenderer.send("overlay:close"); }, ev.status === "succeeded" ? 3000 : 10000);
|
||||
}
|
||||
});
|
||||
|
||||
function updateBar() {
|
||||
var pct = total > 0 ? Math.round(done / total * 100) : 0;
|
||||
document.getElementById("fill").style.width = pct + "%";
|
||||
document.getElementById("meta").textContent = done + "/" + total;
|
||||
}
|
||||
|
||||
function stopRun() { ipcRenderer.send("overlay:stop"); }
|
||||
</script>
|
||||
</body></html>`;
|
||||
fs.writeFileSync(file, html, "utf8");
|
||||
return file;
|
||||
}
|
||||
|
||||
export function showRunOverlay(mainWindow: BrowserWindow | null): void {
|
||||
if (mainWindow && !mainWindow.isDestroyed()) mainWindow.minimize();
|
||||
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||
mainWindow.minimize();
|
||||
mainWindow.setProgressBar(0);
|
||||
}
|
||||
|
||||
if (overlayWindow && !overlayWindow.isDestroyed()) {
|
||||
overlayWindow.show();
|
||||
@ -30,9 +104,7 @@ export function showRunOverlay(mainWindow: BrowserWindow | null): void {
|
||||
skipTaskbar: true,
|
||||
alwaysOnTop: true,
|
||||
fullscreenable: false,
|
||||
enableLargerThanScreen: false,
|
||||
hasShadow: true,
|
||||
transparent: false,
|
||||
backgroundColor: "#1E2530",
|
||||
webPreferences: {
|
||||
contextIsolation: false,
|
||||
@ -41,73 +113,16 @@ export function showRunOverlay(mainWindow: BrowserWindow | null): void {
|
||||
}
|
||||
});
|
||||
overlayWindow.setAlwaysOnTop(true, "screen-saver");
|
||||
|
||||
const html = `<!DOCTYPE html>
|
||||
<html><head><style>
|
||||
*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
|
||||
body{width:320px;height:56px;background:#1E2530;color:#E8ECF2;font-family:-apple-system,'Segoe UI',sans-serif;display:flex;align-items:center;padding:0 12px;gap:10px;overflow:hidden;border-radius:8px;border:1px solid #3A4556}
|
||||
.spinner{width:14px;height:14px;border:2px solid #4A90D9;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.info{flex:1;min-width:0}
|
||||
.step{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#B8C4D4}
|
||||
.progress-bar{height:3px;background:#3A4556;border-radius:2px;margin-top:4px;overflow:hidden}
|
||||
.progress-fill{height:100%;background:#4A90D9;border-radius:2px;transition:width .3s ease}
|
||||
.meta{font-size:10px;color:#7A8898;flex-shrink:0;white-space:nowrap}
|
||||
.stop-btn{background:#3A2028;color:#E05252;border:1px solid #5A3038;border-radius:4px;padding:4px 8px;font-size:10px;cursor:pointer;flex-shrink:0}
|
||||
.stop-btn:hover{background:#4A2830}
|
||||
</style></head><body>
|
||||
<div class="spinner" id="spin"></div>
|
||||
<div class="info">
|
||||
<div class="step" id="step">\u51C6\u5907\u8FD0\u884C\u2026</div>
|
||||
<div class="progress-bar"><div class="progress-fill" id="fill" style="width:0%"></div></div>
|
||||
</div>
|
||||
<div class="meta" id="meta">0/0</div>
|
||||
<button class="stop-btn" id="stopBtn" onclick="stopRun()">\u505C\u6B62</button>
|
||||
<script>
|
||||
const { ipcRenderer } = require("electron");
|
||||
let done = 0, total = 0, startTime = Date.now();
|
||||
let timer = setInterval(() => {
|
||||
const s = Math.floor((Date.now() - startTime) / 1000);
|
||||
document.getElementById("meta").textContent = done + "/" + total + " \u00B7 " + s + "s";
|
||||
}, 1000);
|
||||
|
||||
ipcRenderer.on("run:event", (_e, ev) => {
|
||||
if (ev.type === "node.started" && ev.nodeLabel) {
|
||||
document.getElementById("step").textContent = ev.nodeLabel;
|
||||
}
|
||||
if (ev.type === "run.started") { startTime = Date.now(); }
|
||||
if (ev.type === "run.total" && ev.total) {
|
||||
total = ev.total;
|
||||
}
|
||||
if (ev.type === "node.finished" || ev.type === "node.skipped") {
|
||||
done++;
|
||||
const pct = total > 0 ? Math.round(done / total * 100) : 0;
|
||||
document.getElementById("fill").style.width = pct + "%";
|
||||
document.getElementById("meta").textContent = done + "/" + total;
|
||||
}
|
||||
if (ev.type === "run.finished") {
|
||||
clearInterval(timer);
|
||||
document.getElementById("spin").style.display = "none";
|
||||
const fill = document.getElementById("fill");
|
||||
fill.style.background = ev.status === "succeeded" ? "#4CAF50" : "#E05252";
|
||||
fill.style.width = "100%";
|
||||
document.getElementById("step").textContent =
|
||||
ev.status === "succeeded" ? "\u2713 \u8FD0\u884C\u6210\u529F" :
|
||||
ev.status === "failed" ? "\u2717 \u8FD0\u884C\u5931\u8D25" : "\u5DF2\u53D6\u6D88";
|
||||
document.getElementById("stopBtn").textContent = "\u5173\u95ED";
|
||||
document.getElementById("stopBtn").onclick = () => { ipcRenderer.send("overlay:close"); };
|
||||
setTimeout(() => { ipcRenderer.send("overlay:close"); }, ev.status === "succeeded" ? 3000 : 10000);
|
||||
}
|
||||
});
|
||||
|
||||
function stopRun() {
|
||||
ipcRenderer.send("overlay:stop");
|
||||
}
|
||||
</scr` + `ipt>
|
||||
</body></html>`;
|
||||
|
||||
overlayWindow.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(html)}`);
|
||||
overlayWindow.show();
|
||||
|
||||
const file = writeOverlayHtml();
|
||||
overlayWindow.loadFile(file);
|
||||
}
|
||||
|
||||
export function updateOverlayProgress(ratio: number): void {
|
||||
if (overlayWindow && !overlayWindow.isDestroyed()) {
|
||||
overlayWindow.setProgressBar(ratio >= 1 ? -1 : Math.max(0, Math.min(1, ratio)));
|
||||
}
|
||||
}
|
||||
|
||||
export function hideRunOverlay(mainWindow: BrowserWindow | null): void {
|
||||
@ -115,7 +130,10 @@ export function hideRunOverlay(mainWindow: BrowserWindow | null): void {
|
||||
overlayWindow.close();
|
||||
overlayWindow = null;
|
||||
}
|
||||
if (mainWindow && !mainWindow.isDestroyed()) mainWindow.restore();
|
||||
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||
mainWindow.setProgressBar(-1);
|
||||
mainWindow.restore();
|
||||
}
|
||||
}
|
||||
|
||||
export function registerOverlayIpc(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user