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: #07080d;
      --bg2: #10131c;
      --card: rgba(16, 20, 32, .72);
      --line: rgba(94, 234, 212, .18);
      --text: #eef4ff;
      --muted: #8b95ab;
      --cyan: #5eead4;
      --cyan2: #22d3ee;
      --violet: #818cf8;
      --ok: #34d399;
      --warn: #fbbf24;
      --bad: #fb7185;
      --shadow: 0 24px 60px rgba(0, 0, 0, .45);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      color: var(--text);
      font-family: "Segoe UI Variable", "Microsoft YaHei UI", "Segoe UI", sans-serif;
      background:
        radial-gradient(900px 520px at 8% -10%, rgba(34, 211, 238, .18), transparent 55%),
        radial-gradient(780px 480px at 108% 8%, rgba(129, 140, 248, .2), transparent 50%),
        radial-gradient(640px 420px at 70% 110%, rgba(94, 234, 212, .1), transparent 50%),
        var(--bg);
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background-image:
        linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%);
    }
    .orb {
      position: fixed; border-radius: 50%; filter: blur(40px); pointer-events: none; z-index: 0;
      animation: float 12s ease-in-out infinite;
    }
    .orb.a { width: 220px; height: 220px; left: -40px; top: 120px; background: rgba(34, 211, 238, .16); }
    .orb.b { width: 280px; height: 280px; right: -80px; top: -40px; background: rgba(129, 140, 248, .18); animation-delay: -4s; }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(18px); }
    }
    .wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 28px 22px 48px; }
    .hero {
      display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
      margin-bottom: 22px;
    }
    .mark {
      width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
      display: grid; place-items: center;
      background: linear-gradient(145deg, rgba(94, 234, 212, .95), rgba(129, 140, 248, .85));
      box-shadow: 0 0 28px rgba(94, 234, 212, .35);
      color: #071018; font-weight: 800; font-size: 18px; letter-spacing: -.04em;
    }
    .brand { display: flex; gap: 14px; align-items: center; }
    .kicker {
      font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
      color: var(--cyan); margin: 0 0 4px;
    }
    h1 { font-size: 28px; margin: 0; letter-spacing: -.03em; font-weight: 700; }
    .sub { color: var(--muted); margin: 6px 0 0; font-size: 13px; line-height: 1.6; }
    .chips { display: flex; gap: 8px; flex-wrap: wrap; }
    .chip {
      font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
      border: 1px solid var(--line); color: var(--muted);
      padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.03);
    }
    .chip.on { color: var(--cyan); border-color: rgba(94, 234, 212, .4); }
    .layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
    @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
    .stack { display: flex; flex-direction: column; gap: 16px; }
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 20px 20px 18px;
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    .card::after {
      content: "";
      position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(94,234,212,.55), transparent);
    }
    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .row h2, .card > h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: .02em; }
    .step {
      width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
      font-size: 11px; font-weight: 700; color: #071018;
      background: linear-gradient(145deg, var(--cyan), var(--violet));
    }
    .head { display: flex; align-items: center; gap: 10px; }
    .head .hint { color: var(--muted); font-size: 12px; margin-left: 4px; }
    .btn {
      border: 0; border-radius: 12px; padding: 9px 14px; cursor: pointer;
      font-size: 13px; font-weight: 650; color: #071018;
      background: linear-gradient(180deg, #7ff5e0, #5eead4);
      box-shadow: 0 8px 22px rgba(94, 234, 212, .22);
      transition: transform .15s ease, filter .15s ease;
    }
    .btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
    .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
    .btn.ghost {
      background: transparent; color: var(--text);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: none;
    }
    .btn.go {
      width: 100%; padding: 14px 22px; font-size: 15px; letter-spacing: .12em;
      text-transform: uppercase;
      background: linear-gradient(90deg, #22d3ee, #818cf8 60%, #5eead4);
      color: #061018;
    }
    .form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 18px;
    }
    .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .field label { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
    .field input {
      background: rgba(7, 8, 13, .72);
      border: 1px solid rgba(255,255,255,.08);
      color: var(--text);
      border-radius: 12px; padding: 10px 12px; font-size: 14px; width: 100%;
      outline: none;
    }
    .field input:focus { border-color: rgba(94, 234, 212, .55); box-shadow: 0 0 0 3px rgba(94, 234, 212, .12); }
    .field .readonly { color: var(--muted); }
    .form-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
    .cfg-msg { display: block; margin: 0; min-height: 22px; font-size: 13px; font-weight: 600; flex: 1; }
    .picked {
      background: rgba(7, 8, 13, .65);
      border: 1px dashed rgba(94, 234, 212, .28);
      border-radius: 14px;
      padding: 16px 14px; font-size: 14px; word-break: break-all; min-height: 52px;
    }
    .picked.empty { color: var(--muted); }
    .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: 8px; background: rgba(255,255,255,.06); border-radius: 999px;
      overflow: hidden; margin: 12px 0 8px; position: relative;
    }
    .bar > span {
      display: block; height: 100%; width: 0;
      background: linear-gradient(90deg, #22d3ee, #818cf8, #5eead4);
      box-shadow: 0 0 16px rgba(34, 211, 238, .65);
      transition: width .4s;
    }
    .bar.indeterminate > span { width: 38% !important; animation: slide 1.2s infinite; }
    @keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
    .log {
      background: #05070c;
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 14px;
      padding: 14px; height: 100%; min-height: 280px; overflow: auto;
      font-family: Consolas, "Cascadia Mono", monospace;
      font-size: 12px; white-space: pre-wrap; color: #9fe8dc; line-height: 1.55;
    }
    .status { font-size: 13px; font-weight: 650; }
    .ok { color: var(--ok); } .bad { color: var(--bad); } .run { color: var(--warn); }
  </style>
</head>
<body>
  <div class="orb a"></div>
  <div class="orb b"></div>
  <div class="wrap">
    <div class="hero">
      <div class="brand">
        <div class="mark">M</div>
        <div>
          <p class="kicker">Neural Archive</p>
          <h1>MES 智能备份控制台</h1>
          <p class="sub">独立工具，仅支持 MySQL。填写连接后选择 U 盘或硬盘目录。数据边导出边压缩，完成前不要拔盘。</p>
        </div>
      </div>
      <div class="chips">
        <span class="chip on">Local Only</span>
        <span class="chip">MySQL</span>
        <span class="chip">Air-gapped</span>
      </div>
    </div>

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

        <div class="card">
          <div class="row">
            <div class="head"><span class="step">02</span><h2>归档目标</h2></div>
            <button class="btn" id="btnBrowse" type="button">浏览文件夹</button>
          </div>
          <div class="picked empty" id="picked">尚未选择保存位置</div>
          <p class="hint" id="spaceHint">插入 U 盘或移动硬盘后选择目录，无需手输路径。</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>

      <div class="card" style="min-height: 520px; display:flex; flex-direction:column;">
        <div class="row">
          <div class="head"><span class="step">03</span><h2>运行控制台</h2></div>
        </div>
        <div class="log" id="log">等待操作...</div>
      </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>