|
|
@@ -0,0 +1,295 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8"/>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
|
+ <title>MES 数据库手动备份</title>
|
|
|
+ <style>
|
|
|
+ :root {
|
|
|
+ --bg: #0f172a; --card: #1e293b; --line: #334155; --text: #e2e8f0;
|
|
|
+ --muted: #94a3b8; --accent: #38bdf8; --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
|
|
|
+ }
|
|
|
+ * { box-sizing: border-box; }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
|
|
|
+ background: radial-gradient(1200px 600px at 10% -10%, #1e3a5f 0%, var(--bg) 45%);
|
|
|
+ color: var(--text); min-height: 100vh;
|
|
|
+ }
|
|
|
+ .wrap { max-width: 980px; margin: 0 auto; padding: 28px 20px 48px; }
|
|
|
+ h1 { font-size: 22px; margin: 0 0 6px; }
|
|
|
+ .sub { color: var(--muted); margin: 0 0 22px; font-size: 13px; line-height: 1.6; }
|
|
|
+ .card {
|
|
|
+ background: var(--card); border: 1px solid var(--line); border-radius: 14px;
|
|
|
+ padding: 18px; margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
|
|
|
+ .row h2 { margin: 0; font-size: 15px; }
|
|
|
+ .btn {
|
|
|
+ border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer;
|
|
|
+ font-size: 13px; color: #0f172a; background: var(--accent); font-weight: 600;
|
|
|
+ }
|
|
|
+ .btn:disabled { opacity: .45; cursor: not-allowed; }
|
|
|
+ .btn.ghost { background: #334155; color: var(--text); }
|
|
|
+ .btn.go { background: #22c55e; color: #052e16; padding: 12px 22px; font-size: 15px; }
|
|
|
+ .drives { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
|
|
|
+ .drive {
|
|
|
+ border: 1px solid var(--line); border-radius: 10px; padding: 12px;
|
|
|
+ cursor: pointer; background: #0f172a; text-align: left;
|
|
|
+ }
|
|
|
+ .drive:hover { border-color: var(--accent); }
|
|
|
+ .drive.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
|
|
|
+ .drive.usb { border-color: #6366f1; }
|
|
|
+ .drive .t { font-size: 12px; color: var(--muted); }
|
|
|
+ .drive .n { font-size: 16px; font-weight: 700; margin: 4px 0; }
|
|
|
+ .drive .s { font-size: 12px; color: var(--muted); }
|
|
|
+ .tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #334155; }
|
|
|
+ .tag.usb { background: #3730a3; color: #c7d2fe; }
|
|
|
+ .picked {
|
|
|
+ background: #0f172a; border: 1px dashed var(--line); border-radius: 10px;
|
|
|
+ padding: 14px 14px; font-size: 15px; word-break: break-all; min-height: 48px;
|
|
|
+ }
|
|
|
+ .picked.empty { color: var(--muted); }
|
|
|
+ .folders { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
|
|
|
+ .folder {
|
|
|
+ background: #0f172a; border: 1px solid var(--line); color: var(--text);
|
|
|
+ border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px;
|
|
|
+ }
|
|
|
+ .check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: 12px 0; }
|
|
|
+ .hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
|
|
|
+ .bar { height: 10px; background: #0f172a; border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
|
|
|
+ .bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #38bdf8); transition: width .4s; }
|
|
|
+ .bar.indeterminate > span { width: 40% !important; animation: slide 1.2s infinite; }
|
|
|
+ @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } }
|
|
|
+ .log {
|
|
|
+ background: #020617; border: 1px solid var(--line); border-radius: 10px;
|
|
|
+ padding: 12px; height: 200px; overflow: auto; font-family: Consolas, monospace;
|
|
|
+ font-size: 12px; white-space: pre-wrap; color: #cbd5e1;
|
|
|
+ }
|
|
|
+ .status { font-size: 13px; margin-left: 10px; }
|
|
|
+ .ok { color: var(--ok); } .bad { color: var(--bad); } .run { color: var(--warn); }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="wrap">
|
|
|
+ <h1>MES 数据库手动备份</h1>
|
|
|
+ <p class="sub">独立工具。点磁盘或点「浏览文件夹」选择保存位置(U 盘 / 移动硬盘 / 本机磁盘),不用手输路径。数据会边导出边压缩;库很大时请预留足够空间,完成前不要拔盘。</p>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="row">
|
|
|
+ <h2>1. 点选磁盘</h2>
|
|
|
+ <button class="btn ghost" id="btnRefresh" type="button">刷新磁盘</button>
|
|
|
+ </div>
|
|
|
+ <div class="drives" id="drives">正在读取磁盘...</div>
|
|
|
+ <p class="hint" id="dbHint"></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="row">
|
|
|
+ <h2>2. 保存位置(点选,不用输入)</h2>
|
|
|
+ <div>
|
|
|
+ <button class="btn ghost" id="btnUp" type="button">上一级</button>
|
|
|
+ <button class="btn" id="btnBrowse" type="button">浏览文件夹...</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="picked empty" id="picked">尚未选择。请点上方磁盘,或点「浏览文件夹」弹出系统窗口选择。</div>
|
|
|
+ <div class="folders" id="folders"></div>
|
|
|
+ <p class="hint" id="spaceHint"></p>
|
|
|
+ <label class="check">
|
|
|
+ <input id="keepOld" type="checkbox"/>
|
|
|
+ 同时删除该目录中超过 7 天的旧备份(U 盘建议不勾选)
|
|
|
+ </label>
|
|
|
+ <div class="bar" id="bar"><span id="barInner"></span></div>
|
|
|
+ <div class="hint" id="progHint"></div>
|
|
|
+ <button class="btn go" id="btnBackup" type="button">开始备份</button>
|
|
|
+ <span class="status" id="status"></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <h2>运行日志</h2>
|
|
|
+ <div class="log" id="log">等待操作...</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var selectedPath = "";
|
|
|
+ var parentPath = "";
|
|
|
+ var polling = null;
|
|
|
+ var dbBytes = 0;
|
|
|
+
|
|
|
+ function $(id) { return document.getElementById(id); }
|
|
|
+ function asArray(x) {
|
|
|
+ if (!x) return [];
|
|
|
+ return Object.prototype.toString.call(x) === "[object Array]" ? x : [x];
|
|
|
+ }
|
|
|
+ function gb(n) { return (n / 1073741824).toFixed(2); }
|
|
|
+ function mb(n) { return (n / 1048576).toFixed(1); }
|
|
|
+
|
|
|
+ function setStatus(text, cls) {
|
|
|
+ $("status").className = "status " + (cls || "");
|
|
|
+ $("status").textContent = text ? (" " + text) : "";
|
|
|
+ }
|
|
|
+ function setLog(lines) {
|
|
|
+ $("log").textContent = (lines && lines.length) ? lines.join("\n") : "等待操作...";
|
|
|
+ $("log").scrollTop = $("log").scrollHeight;
|
|
|
+ }
|
|
|
+ function setPicked(path) {
|
|
|
+ selectedPath = path || "";
|
|
|
+ var el = $("picked");
|
|
|
+ if (!selectedPath) {
|
|
|
+ el.className = "picked empty";
|
|
|
+ el.textContent = "尚未选择。请点上方磁盘,或点「浏览文件夹」弹出系统窗口选择。";
|
|
|
+ } else {
|
|
|
+ el.className = "picked";
|
|
|
+ el.textContent = selectedPath;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function api(url, opt) {
|
|
|
+ return fetch(url, opt).then(function (r) {
|
|
|
+ return r.text().then(function (t) {
|
|
|
+ var j = {};
|
|
|
+ try { j = JSON.parse(t); } catch (e) { throw new Error(t || "接口无响应"); }
|
|
|
+ if (!r.ok || j.ok === false) throw new Error(j.message || "请求失败");
|
|
|
+ return j;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadDrives() {
|
|
|
+ $("drives").textContent = "正在读取磁盘...";
|
|
|
+ api("/api/drives").then(function (j) {
|
|
|
+ dbBytes = j.dbBytes || 0;
|
|
|
+ if (dbBytes > 0) {
|
|
|
+ $("dbHint").textContent = "当前数据库约 " + gb(dbBytes) + " GB。建议目标盘剩余空间大于该值。备份采用 gzip 压缩,边导边压。";
|
|
|
+ }
|
|
|
+ var html = "";
|
|
|
+ asArray(j.drives).forEach(function (d) {
|
|
|
+ var cls = "drive" + (d.removable ? " usb" : "");
|
|
|
+ var space = d.ready ? ("剩余 " + d.freeGB + " GB / 共 " + d.sizeGB + " GB") : "未就绪";
|
|
|
+ html += '<button type="button" class="' + cls + '" data-path="' + d.path + '" data-free="' + (d.freeBytes || 0) + '">'
|
|
|
+ + '<div class="t"><span class="tag' + (d.removable ? " usb" : "") + '">' + d.type + "</span></div>"
|
|
|
+ + '<div class="n">' + d.letter + " " + (d.name || "") + "</div>"
|
|
|
+ + '<div class="s">' + space + "</div></button>";
|
|
|
+ });
|
|
|
+ $("drives").innerHTML = html || "没有发现可用磁盘";
|
|
|
+ Array.prototype.forEach.call($("drives").querySelectorAll(".drive"), function (el) {
|
|
|
+ el.onclick = function () {
|
|
|
+ Array.prototype.forEach.call($("drives").querySelectorAll(".drive"), function (x) { x.classList.remove("on"); });
|
|
|
+ el.classList.add("on");
|
|
|
+ var p = el.getAttribute("data-path");
|
|
|
+ setPicked(p + "MES_DB_Backup");
|
|
|
+ showSpace(parseInt(el.getAttribute("data-free") || "0", 10));
|
|
|
+ loadFolders(p);
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }).catch(function (e) {
|
|
|
+ $("drives").textContent = "读取磁盘失败:" + e.message;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function showSpace(freeBytes) {
|
|
|
+ if (!freeBytes) { $("spaceHint").textContent = ""; return; }
|
|
|
+ var msg = "该磁盘剩余 " + gb(freeBytes) + " GB。";
|
|
|
+ if (dbBytes > 0 && freeBytes < dbBytes * 1.2) {
|
|
|
+ msg += " 空间可能不够,建议换更大的盘。";
|
|
|
+ }
|
|
|
+ $("spaceHint").textContent = msg;
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadFolders(path) {
|
|
|
+ if (!path) return;
|
|
|
+ api("/api/folders?path=" + encodeURIComponent(path)).then(function (j) {
|
|
|
+ var d = j.data || {};
|
|
|
+ parentPath = d.parent || "";
|
|
|
+ var html = "";
|
|
|
+ asArray(d.folders).forEach(function (f) {
|
|
|
+ html += '<button class="folder" type="button" data-path="' + f.path.replace(/"/g, "") + '">📁 ' + f.name + "</button>";
|
|
|
+ });
|
|
|
+ $("folders").innerHTML = html || '<span style="color:#94a3b8;font-size:13px;">该目录下没有子文件夹,将备份到上面显示的位置</span>';
|
|
|
+ Array.prototype.forEach.call($("folders").querySelectorAll(".folder"), function (el) {
|
|
|
+ el.onclick = function () {
|
|
|
+ var p = el.getAttribute("data-path");
|
|
|
+ setPicked(p);
|
|
|
+ loadFolders(p);
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }).catch(function (e) {
|
|
|
+ $("folders").innerHTML = '<span style="color:#f87171;font-size:13px;">' + e.message + "</span>";
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function pollStatus() {
|
|
|
+ api("/api/status").then(function (j) {
|
|
|
+ setLog(asArray(j.log));
|
|
|
+ var written = j.writtenBytes || 0;
|
|
|
+ var est = j.dbBytes || dbBytes || 0;
|
|
|
+ $("bar").className = "bar" + (j.running && (!est || written < 1024) ? " indeterminate" : "");
|
|
|
+ var pct = 0;
|
|
|
+ if (est > 0 && written > 0) {
|
|
|
+ pct = Math.max(2, Math.min(99, Math.round(written / est * 100)));
|
|
|
+ } else if (!j.running && j.result === "ok") {
|
|
|
+ pct = 100;
|
|
|
+ }
|
|
|
+ $("barInner").style.width = pct + "%";
|
|
|
+ if (j.running) {
|
|
|
+ $("btnBackup").disabled = true;
|
|
|
+ $("progHint").textContent = "已写入 " + mb(written) + " MB" + (j.fileName ? ("(" + j.fileName + ")") : "") + ",请勿拔盘";
|
|
|
+ setStatus("正在备份,数据量大时可能需要较长时间...", "run");
|
|
|
+ } else {
|
|
|
+ $("btnBackup").disabled = false;
|
|
|
+ $("bar").className = "bar";
|
|
|
+ if (j.result === "ok") {
|
|
|
+ $("barInner").style.width = "100%";
|
|
|
+ $("progHint").textContent = "完成,文件约 " + mb(written) + " MB:" + (j.fileName || "");
|
|
|
+ setStatus("备份完成", "ok");
|
|
|
+ } else if (j.result === "error") {
|
|
|
+ setStatus(j.error || "备份失败", "bad");
|
|
|
+ }
|
|
|
+ if (polling) { clearInterval(polling); polling = null; }
|
|
|
+ }
|
|
|
+ }).catch(function () {});
|
|
|
+ }
|
|
|
+
|
|
|
+ $("btnRefresh").onclick = loadDrives;
|
|
|
+ $("btnUp").onclick = function () {
|
|
|
+ if (parentPath) {
|
|
|
+ setPicked(parentPath);
|
|
|
+ loadFolders(parentPath);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ $("btnBrowse").onclick = function () {
|
|
|
+ setStatus("请在弹出的系统窗口中选择文件夹(窗口可能在浏览器后面)", "run");
|
|
|
+ api("/api/browse", { method: "POST" }).then(function (j) {
|
|
|
+ if (j.cancelled) { setStatus("", ""); return; }
|
|
|
+ setPicked(j.path);
|
|
|
+ showSpace(j.freeBytes || 0);
|
|
|
+ loadFolders(j.path);
|
|
|
+ setStatus("已选择保存位置", "ok");
|
|
|
+ }).catch(function (e) {
|
|
|
+ setStatus(e.message, "bad");
|
|
|
+ });
|
|
|
+ };
|
|
|
+ $("btnBackup").onclick = function () {
|
|
|
+ if (!selectedPath) { setStatus("请先点选磁盘或浏览文件夹", "bad"); return; }
|
|
|
+ $("btnBackup").disabled = true;
|
|
|
+ setStatus("正在启动备份...", "run");
|
|
|
+ $("bar").className = "bar indeterminate";
|
|
|
+ api("/api/backup", {
|
|
|
+ method: "POST",
|
|
|
+ headers: { "Content-Type": "application/json" },
|
|
|
+ body: JSON.stringify({ path: selectedPath, keepDays: $("keepOld").checked ? 7 : 0 })
|
|
|
+ }).then(function () {
|
|
|
+ if (polling) clearInterval(polling);
|
|
|
+ polling = setInterval(pollStatus, 1000);
|
|
|
+ pollStatus();
|
|
|
+ }).catch(function (e) {
|
|
|
+ $("btnBackup").disabled = false;
|
|
|
+ $("bar").className = "bar";
|
|
|
+ setStatus(e.message, "bad");
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ loadDrives();
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|