feat: add settings tabs, auto backup, and show latest 5 backups

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-02 09:15:21 +08:00
parent 52ebbfbeae
commit 458cc42dd5
12 changed files with 621 additions and 190 deletions
@@ -97,6 +97,12 @@ export type BackupInfo = {
  db_path: string;
  writable: boolean;
  backups: BackupItem[];
+  auto_enabled: boolean;
+  interval_hours: number;
+  keep_count: number;
+  display_limit: number;
+  latest_backup_ms: number | null;
+  next_due_ms: number | null;
 };

 export async function fetchBackupInfo(): Promise<BackupInfo> {
@@ -105,6 +111,21 @@ export async function fetchBackupInfo(): Promise<BackupInfo> {
  return r.json();
 }

+export async function updateAutoBackup(body: {
+  current_password: string;
+  enabled: boolean;
+  interval_hours: number;
+}): Promise<BackupInfo & { ok: boolean; message: string }> {
+  const r = await apiFetch("/api/settings/backup/auto", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  const d = await r.json().catch(() => ({}));
+  if (!r.ok) throw new Error(d.detail || "save auto backup failed");
+  return d;
+}
+
 export async function createBackup(current_password: string): Promise<{ ok: boolean; message: string; name: string; path: string }> {
  const r = await apiFetch("/api/settings/backup", {
    method: "POST",
@@ -7,17 +7,21 @@ import {
  logout,
  restoreBackup,
  updateAccountSettings,
+  updateAutoBackup,
 } from "../api/client";
 import AppNav from "../components/AppNav";
 import LoginGate from "../components/LoginGate";

+type TabKey = "account" | "backup";
+
 function fmtBytes(n: number): string {
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
  return `${(n / (1024 * 1024)).toFixed(2)} MB`;
 }

-function fmtTime(ms: number): string {
+function fmtTime(ms: number | null | undefined): string {
+  if (ms == null) return "—";
  try {
    return new Date(ms).toLocaleString("zh-CN", { hour12: false });
  } catch {
@@ -26,6 +30,7 @@ function fmtTime(ms: number): string {
 }

 export default function SettingsPage() {
+  const [tab, setTab] = useState<TabKey>("account");
  const [needLogin, setNeedLogin] = useState(false);
  const [ready, setReady] = useState(false);
  const [username, setUsername] = useState("admin");
@@ -41,15 +46,26 @@ export default function SettingsPage() {
  const [backupInfo, setBackupInfo] = useState<BackupInfo | null>(null);
  const [backupPassword, setBackupPassword] = useState("");
  const [selectedBackup, setSelectedBackup] = useState("");
+  const [autoEnabled, setAutoEnabled] = useState(true);
+  const [intervalHours, setIntervalHours] = useState(24);
  const [backupMsg, setBackupMsg] = useState<string | null>(null);
  const [backupErr, setBackupErr] = useState<string | null>(null);
  const [backupBusy, setBackupBusy] = useState(false);

+  const applyBackupInfo = useCallback((info: BackupInfo) => {
+    setBackupInfo(info);
+    setAutoEnabled(!!info.auto_enabled);
+    setIntervalHours(Number(info.interval_hours) || 24);
+    setSelectedBackup((prev) => {
+      if (prev && info.backups.some((b) => b.name === prev)) return prev;
+      return info.backups[0]?.name || "";
+    });
+  }, []);
+
  const loadBackupInfo = useCallback(async () => {
    const info = await fetchBackupInfo();
-    setBackupInfo(info);
-    setSelectedBackup((prev) => prev || info.backups[0]?.name || "");
-  }, []);
+    applyBackupInfo(info);
+  }, [applyBackupInfo]);

  useEffect(() => {
    Promise.all([fetchAccountSettings(), fetchBackupInfo()])
@@ -57,8 +73,7 @@ export default function SettingsPage() {
        setUsername(account.username);
        setNewUsername(account.username);
        setAuthRequired(account.auth_required);
-        setBackupInfo(backup);
-        setSelectedBackup(backup.backups[0]?.name || "");
+        applyBackupInfo(backup);
        setNeedLogin(false);
        setReady(true);
      })
@@ -68,7 +83,7 @@ export default function SettingsPage() {
        else setErr(m);
        setReady(true);
      });
-  }, []);
+  }, [applyBackupInfo]);

  const submit = async (e: FormEvent) => {
    e.preventDefault();
@@ -104,6 +119,26 @@ export default function SettingsPage() {
    }
  };

+  const saveAuto = async () => {
+    setBackupBusy(true);
+    setBackupErr(null);
+    setBackupMsg(null);
+    try {
+      const res = await updateAutoBackup({
+        current_password: backupPassword,
+        enabled: autoEnabled,
+        interval_hours: intervalHours,
+      });
+      setBackupMsg(res.message || "自动备份设置已保存");
+      applyBackupInfo(res);
+      await loadBackupInfo();
+    } catch (ex) {
+      setBackupErr(String(ex));
+    } finally {
+      setBackupBusy(false);
+    }
+  };
+
  const runBackup = async () => {
    setBackupBusy(true);
    setBackupErr(null);
@@ -154,137 +189,196 @@ export default function SettingsPage() {
  return (
    <div className="layout">
      <div className="brand">比特骆驼行情采集分析</div>
-      <div className="sub">系统设置 · 账号与数据</div>
+      <div className="sub">系统设置</div>
      <AppNav />

      <div className="center-page">
-        <div className="settings-stack">
-          <form className="tile settings-card" onSubmit={submit}>
-            <div className="settings-title">账号设置</div>
-            {!authRequired && (
-              <p className="settings-hint">当前鉴权已关闭（AUTH_SECRET=disabled），请在 .env 中修改。</p>
-            )}
-
-            <label className="field">
-              <span className="label">用户名</span>
-              <input
-                className="field-input"
-                value={newUsername}
-                onChange={(e) => setNewUsername(e.target.value)}
-                autoComplete="username"
-                disabled={!authRequired}
-              />
-            </label>
-
-            <label className="field">
-              <span className="label">当前密码</span>
-              <input
-                className="field-input"
-                type="password"
-                value={currentPassword}
-                onChange={(e) => setCurrentPassword(e.target.value)}
-                autoComplete="current-password"
-                disabled={!authRequired}
-              />
-            </label>
-
-            <label className="field">
-              <span className="label">新密码（留空则不修改）</span>
-              <input
-                className="field-input"
-                type="password"
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-                autoComplete="new-password"
-                disabled={!authRequired}
-              />
-            </label>
-
-            <label className="field">
-              <span className="label">确认新密码</span>
-              <input
-                className="field-input"
-                type="password"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                autoComplete="new-password"
-                disabled={!authRequired}
-              />
-            </label>
-
-            {err && <p className="form-err">{err}</p>}
-            {msg && <p className="form-ok">{msg}</p>}
-
-            <button className="btn-primary" type="submit" disabled={busy || !authRequired || !currentPassword}>
-              {busy ? "保存中…" : "保存账号"}
+        <div className="tile settings-card">
+          <div className="settings-tabs">
+            <button
+              type="button"
+              className={tab === "account" ? "active" : ""}
+              onClick={() => setTab("account")}
+            >
+              账户密码
+            </button>
+            <button
+              type="button"
+              className={tab === "backup" ? "active" : ""}
+              onClick={() => setTab("backup")}
+            >
+              数据备份与恢复
            </button>
-          </form>
-
-          <div className="tile settings-card">
-            <div className="settings-title">数据备份与恢复</div>
-            <p className="settings-hint">
-              备份目录：<code>{backupInfo?.backup_dir || "/root/market_intel_backups"}</code>
-            </p>
-            {!backupInfo?.writable && (
-              <p className="form-err">备份目录不可写，请检查服务器 /root/market_intel_backups 权限与 Docker 挂载。</p>
-            )}
-
-            <label className="field">
-              <span className="label">当前密码（备份/恢复需验证）</span>
-              <input
-                className="field-input"
-                type="password"
-                value={backupPassword}
-                onChange={(e) => setBackupPassword(e.target.value)}
-                autoComplete="current-password"
-                disabled={!authRequired}
-              />
-            </label>
-
-            {backupInfo && backupInfo.backups.length > 0 ? (
-              <label className="field">
-                <span className="label">选择备份</span>
-                <select
-                  className="field-input"
-                  value={selectedBackup}
-                  onChange={(e) => setSelectedBackup(e.target.value)}
-                  disabled={!authRequired}
-                >
-                  {backupInfo.backups.map((b) => (
-                    <option key={b.name} value={b.name}>
-                      {b.name} · {fmtBytes(b.size_bytes)} · {fmtTime(b.modified_ms)}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            ) : (
-              <p className="settings-hint">尚无备份文件</p>
-            )}
-
-            {backupErr && <p className="form-err">{backupErr}</p>}
-            {backupMsg && <p className="form-ok">{backupMsg}</p>}
-
-            <div className="btn-row">
-              <button
-                type="button"
-                className="btn-primary"
-                disabled={backupBusy || !authRequired || !backupPassword || !backupInfo?.writable}
-                onClick={runBackup}
-              >
-                {backupBusy ? "处理中…" : "立即备份"}
-              </button>
-              <button
-                type="button"
-                className="btn-danger"
-                disabled={
-                  backupBusy || !authRequired || !backupPassword || !selectedBackup || !backupInfo?.writable
-                }
-                onClick={runRestore}
-              >
-                恢复选中备份
-              </button>
-            </div>
          </div>
+
+          {tab === "account" && (
+            <form onSubmit={submit}>
+              <div className="settings-title">账户密码</div>
+              {!authRequired && (
+                <p className="settings-hint">当前鉴权已关闭（AUTH_SECRET=disabled），请在 .env 中修改。</p>
+              )}
+
+              <label className="field">
+                <span className="label">用户名</span>
+                <input
+                  className="field-input"
+                  value={newUsername}
+                  onChange={(e) => setNewUsername(e.target.value)}
+                  autoComplete="username"
+                  disabled={!authRequired}
+                />
+              </label>
+
+              <label className="field">
+                <span className="label">当前密码</span>
+                <input
+                  className="field-input"
+                  type="password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  autoComplete="current-password"
+                  disabled={!authRequired}
+                />
+              </label>
+
+              <label className="field">
+                <span className="label">新密码（留空则不修改）</span>
+                <input
+                  className="field-input"
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  autoComplete="new-password"
+                  disabled={!authRequired}
+                />
+              </label>
+
+              <label className="field">
+                <span className="label">确认新密码</span>
+                <input
+                  className="field-input"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  autoComplete="new-password"
+                  disabled={!authRequired}
+                />
+              </label>
+
+              {err && <p className="form-err">{err}</p>}
+              {msg && <p className="form-ok">{msg}</p>}
+
+              <button className="btn-primary" type="submit" disabled={busy || !authRequired || !currentPassword}>
+                {busy ? "保存中…" : "保存账号"}
+              </button>
+            </form>
+          )}
+
+          {tab === "backup" && (
+            <div>
+              <div className="settings-title">数据备份与恢复</div>
+              <p className="settings-hint">
+                备份目录：<code>{backupInfo?.backup_dir || "/root/market_intel_backups"}</code>
+                <br />
+                列表仅显示最近 {backupInfo?.display_limit ?? 5} 条；磁盘最多保留 {backupInfo?.keep_count ?? 30} 份。
+              </p>
+              {!backupInfo?.writable && (
+                <p className="form-err">备份目录不可写，请检查服务器 /root/market_intel_backups 权限与 Docker 挂载。</p>
+              )}
+
+              <div className="auto-box">
+                <label className="check-row">
+                  <input
+                    type="checkbox"
+                    checked={autoEnabled}
+                    onChange={(e) => setAutoEnabled(e.target.checked)}
+                    disabled={!authRequired}
+                  />
+                  <span>启用自动备份</span>
+                </label>
+                <label className="field">
+                  <span className="label">备份间隔（小时）</span>
+                  <input
+                    className="field-input"
+                    type="number"
+                    min={1}
+                    max={168}
+                    value={intervalHours}
+                    onChange={(e) => setIntervalHours(Number(e.target.value) || 24)}
+                    disabled={!authRequired || !autoEnabled}
+                  />
+                </label>
+                <p className="settings-hint" style={{ marginBottom: 0 }}>
+                  最近备份：{fmtTime(backupInfo?.latest_backup_ms)}
+                  {autoEnabled ? ` · 下次约：${fmtTime(backupInfo?.next_due_ms)}` : ""}
+                </p>
+              </div>
+
+              <label className="field">
+                <span className="label">当前密码（操作需验证）</span>
+                <input
+                  className="field-input"
+                  type="password"
+                  value={backupPassword}
+                  onChange={(e) => setBackupPassword(e.target.value)}
+                  autoComplete="current-password"
+                  disabled={!authRequired}
+                />
+              </label>
+
+              {backupInfo && backupInfo.backups.length > 0 ? (
+                <label className="field">
+                  <span className="label">选择备份（最近 {backupInfo.display_limit} 条）</span>
+                  <select
+                    className="field-input"
+                    value={selectedBackup}
+                    onChange={(e) => setSelectedBackup(e.target.value)}
+                    disabled={!authRequired}
+                  >
+                    {backupInfo.backups.map((b) => (
+                      <option key={b.name} value={b.name}>
+                        {b.name} · {fmtBytes(b.size_bytes)} · {fmtTime(b.modified_ms)}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              ) : (
+                <p className="settings-hint">尚无备份文件</p>
+              )}
+
+              {backupErr && <p className="form-err">{backupErr}</p>}
+              {backupMsg && <p className="form-ok">{backupMsg}</p>}
+
+              <div className="btn-row">
+                <button
+                  type="button"
+                  className="btn-primary"
+                  disabled={backupBusy || !authRequired || !backupPassword}
+                  onClick={saveAuto}
+                >
+                  保存自动备份
+                </button>
+                <button
+                  type="button"
+                  className="btn-primary"
+                  disabled={backupBusy || !authRequired || !backupPassword || !backupInfo?.writable}
+                  onClick={runBackup}
+                >
+                  {backupBusy ? "处理中…" : "立即备份"}
+                </button>
+                <button
+                  type="button"
+                  className="btn-danger"
+                  disabled={
+                    backupBusy || !authRequired || !backupPassword || !selectedBackup || !backupInfo?.writable
+                  }
+                  onClick={runRestore}
+                >
+                  恢复选中备份
+                </button>
+              </div>
+            </div>
+          )}
        </div>
      </div>
    </div>
@@ -31,11 +31,48 @@ a { color: var(--accent); text-decoration: none; }
  min-height: 50vh;
  padding: 1.5rem 0 3rem;
 }
-.settings-card { width: 100%; max-width: 420px; }
-.settings-stack { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 1.25rem; }
-.settings-title { font-size: 1.15rem; font-weight: 650; margin-bottom: 0.25rem; }
+.settings-card { width: 100%; max-width: 460px; }
+.settings-title { font-size: 1.15rem; font-weight: 650; margin: 0.25rem 0 0.85rem; }
 .settings-hint { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 0 0 1rem; }
 .settings-hint code { color: var(--text); font-size: 0.82rem; }
+.settings-tabs {
+  display: flex;
+  gap: 0;
+  margin: -0.25rem -0.15rem 1.1rem;
+  border-bottom: 1px solid #243041;
+}
+.settings-tabs button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  padding: 0.65rem 0.95rem;
+  cursor: pointer;
+  font-size: 0.92rem;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.settings-tabs button.active {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+  font-weight: 600;
+}
+.auto-box {
+  background: #0c1117;
+  border: 1px solid #243041;
+  border-radius: 8px;
+  padding: 0.85rem 0.95rem;
+  margin-bottom: 1rem;
+}
+.check-row {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin-bottom: 0.75rem;
+  color: var(--text);
+  font-size: 0.92rem;
+}
+.check-row input { width: auto; accent-color: var(--accent); }
 .btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }
 .btn-danger {
  padding: 0.55rem 1.2rem;