mescloud/scripts/backup-ui.html

<!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>