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;
    }
    .form {
      display: grid;
      grid-template-columns: 72px 1fr 72px 1fr;
      gap: 10px 12px;
      align-items: center;
    }
    .form label { color: var(--muted); font-size: 13px; }
    .form input, .form select {
      background: #0f172a; border: 1px solid var(--line); color: var(--text);
      border-radius: 8px; padding: 8px 10px; font-size: 14px; width: 100%;
    }
    .form .readonly {
      background: #0b1220; color: var(--muted);
    }
    .cfg-msg { display: block; margin-top: 10px; min-height: 22px; font-size: 14px; font-weight: 600; }
    .ok { color: var(--ok); } .bad { color: var(--bad); } .run { color: var(--warn); }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>MES 数据库手动备份 · 选文件夹</h1>
    <p class="sub">独立工具，仅支持 MySQL。填写连接后，点「浏览文件夹」选择 U 盘或硬盘目录（不用手输、打开时不扫描磁盘）。数据会边导出边压缩，完成前不要拔盘。</p>

    <div class="card">
      <div class="row">
        <h2>1. MySQL 连接（可配置）</h2>
      </div>
      <div class="form">
        <label>类型</label>
        <input class="readonly" value="MySQL" readonly />
        <label>端口</label>
        <input id="dbPort" type="number" min="1" max="65535" value="3306" />
        <label>IP/主机</label>
        <input id="dbHost" type="text" placeholder="127.0.0.1 或 192.168.x.x" />
        <label>库名</label>
        <input id="dbName" type="text" placeholder="mes_cloud" />
        <label>账号</label>
        <input id="dbUser" type="text" autocomplete="off" />
        <label>密码</label>
        <input id="dbPass" type="password" autocomplete="new-password" />
      </div>
      <div class="form-actions">
        <button class="btn ghost" id="btnTest" type="button">测试连接</button>
        <button class="btn" id="btnSaveCfg" type="button">保存配置</button>
      </div>
      <div class="cfg-msg" id="cfgStatus">填写 IP、账号、密码后点「测试连接」</div>
    </div>

    <div class="card">
      <div class="row">
        <h2>2. 选择保存位置</h2>
        <button class="btn" id="btnBrowse" type="button">浏览文件夹...</button>
      </div>
      <p class="hint">打开页面不会扫描磁盘。插入 U 盘后点「浏览文件夹」，在系统窗口里选目录即可。</p>
      <div class="picked empty" id="picked">尚未选择。请点「浏览文件夹」。</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 dbBody() {
      return {
        engine: "mysql",
        host: ($("dbHost").value || "").trim(),
        port: parseInt($("dbPort").value || "3306", 10),
        database: ($("dbName").value || "").trim(),
        user: ($("dbUser").value || "").trim(),
        password: $("dbPass").value || ""
      };
    }
    function setCfgStatus(text, cls) {
      $("cfgStatus").className = "cfg-msg " + (cls || "");
      $("cfgStatus").textContent = text || "";
    }
    function loadConfig() {
      api("/api/config").then(function (j) {
        $("dbHost").value = j.host || "";
        $("dbPort").value = j.port || 3306;
        $("dbName").value = j.database || "";
        $("dbUser").value = j.user || "";
        $("dbPass").value = j.password || "";
      }).catch(function (e) {
        setCfgStatus(e.message, "bad");
      });
    }
    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) {
      opt = opt || {};
      var ctrl = new AbortController();
      var ms = opt.timeoutMs || 12000;
      var timer = setTimeout(function () { ctrl.abort(); }, ms);
      var fo = Object.assign({}, opt, { signal: ctrl.signal });
      delete fo.timeoutMs;
      return fetch(url, fo).then(function (r) {
        return r.text().then(function (t) {
          var j = {};
          try { j = t ? JSON.parse(t) : {}; } catch (e) { throw new Error(t || "接口无响应"); }
          if (!r.ok || j.ok === false) throw new Error(j.message || "请求失败");
          return j;
        });
      }).catch(function (e) {
        if (e.name === "AbortError") throw new Error("等待超时，请确认已关掉旧的备份窗口后重新打开页面");
        throw e;
      }).then(function (v) {
        clearTimeout(timer);
        return v;
      }, function (e) {
        clearTimeout(timer);
        throw e;
      });
    }

    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 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 () {});
    }

    $("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);
        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(Object.assign(dbBody(), {
          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");
      });
    };

    $("btnTest").onclick = function () {
      setCfgStatus("正在测试连接，请稍候…", "run");
      var b = dbBody();
      var q = "host=" + encodeURIComponent(b.host)
        + "&port=" + encodeURIComponent(b.port)
        + "&database=" + encodeURIComponent(b.database)
        + "&user=" + encodeURIComponent(b.user)
        + "&password=" + encodeURIComponent(b.password);
      api("/api/test?" + q, { timeoutMs: 15000 }).then(function (j) {
        setCfgStatus(j.message || "连接成功", "ok");
      }).catch(function (e) {
        setCfgStatus(e.message || "连接失败", "bad");
      });
    };
    $("btnSaveCfg").onclick = function () {
      setCfgStatus("正在保存...", "run");
      api("/api/config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(dbBody())
      }).then(function (j) {
        setCfgStatus(j.message || "已保存", "ok");
      }).catch(function (e) {
        setCfgStatus(e.message, "bad");
      });
    };

    loadConfig();
  </script>
</body>
</html>