feat: match settings card width to ops map and add backup download

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/api/client.ts

@@ -148,6 +148,26 @@ export async function restoreBackup(current_password: string, backup_name: strin
   return d;
 }
 
+export async function downloadBackup(backup_name: string): Promise<void> {
+  const r = await apiFetch(`/api/settings/backup/download/${encodeURIComponent(backup_name)}`);
+  if (!r.ok) {
+    const d = await r.json().catch(() => ({}));
+    throw new Error(d.detail || "download failed");
+  }
+  const blob = await r.blob();
+  const url = URL.createObjectURL(blob);
+  try {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = backup_name;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
 export async function logout(): Promise<void> {
   setToken(null);
   await fetch("/api/auth/logout", { method: "POST", credentials: "include" });

web/src/components/LoginGate.tsx

@@ -27,7 +27,7 @@ export default function LoginGate({ onOk }: Props) {
 
   return (
     <div className="center-page">
-      <form className="tile settings-card" onSubmit={submit}>
+      <form className="tile login-card" onSubmit={submit}>
         <div className="settings-title">登录</div>
         <div className="sub" style={{ marginBottom: "1rem" }}>
           比特骆驼行情采集分析

web/src/pages/Settings.tsx

@@ -2,6 +2,7 @@ import { FormEvent, useCallback, useEffect, useState } from "react";
 import {
   BackupInfo,
   createBackup,
+  downloadBackup,
   fetchAccountSettings,
   fetchBackupInfo,
   logout,
@@ -175,6 +176,24 @@ export default function SettingsPage() {
     }
   };
 
+  const runDownload = async () => {
+    if (!selectedBackup) {
+      setBackupErr("请选择要下载的备份");
+      return;
+    }
+    setBackupBusy(true);
+    setBackupErr(null);
+    setBackupMsg(null);
+    try {
+      await downloadBackup(selectedBackup);
+      setBackupMsg(`已开始下载：${selectedBackup}`);
+    } catch (ex) {
+      setBackupErr(String(ex));
+    } finally {
+      setBackupBusy(false);
+    }
+  };
+
   if (!ready) {
     return (
       <div className="layout">
@@ -192,8 +211,7 @@ export default function SettingsPage() {
       <div className="sub">系统设置</div>
       <AppNav />
 
-      <div className="center-page">
-        <div className="tile settings-card">
+      <div className="tile settings-card">
           <div className="settings-tabs">
             <button
               type="button"
@@ -212,7 +230,7 @@ export default function SettingsPage() {
           </div>
 
           {tab === "account" && (
-            <form onSubmit={submit}>
+            <form className="settings-form" onSubmit={submit}>
               <div className="settings-title">账户密码</div>
               {!authRequired && (
                 <p className="settings-hint">当前鉴权已关闭（AUTH_SECRET=disabled），请在 .env 中修改。</p>
@@ -275,7 +293,7 @@ export default function SettingsPage() {
           )}
 
           {tab === "backup" && (
-            <div>
+            <div className="settings-form">
               <div className="settings-title">数据备份与恢复</div>
               <p className="settings-hint">
                 备份目录：<code>{backupInfo?.backup_dir || "/root/market_intel_backups"}</code>
@@ -366,6 +384,14 @@ export default function SettingsPage() {
                 >
                   {backupBusy ? "处理中…" : "立即备份"}
                 </button>
+                <button
+                  type="button"
+                  className="btn-primary"
+                  disabled={backupBusy || !authRequired || !selectedBackup}
+                  onClick={runDownload}
+                >
+                  下载备份
+                </button>
                 <button
                   type="button"
                   className="btn-danger"
@@ -379,7 +405,6 @@ export default function SettingsPage() {
               </div>
             </div>
           )}
-        </div>
       </div>
     </div>
   );

web/src/styles.css

@@ -31,7 +31,9 @@ a { color: var(--accent); text-decoration: none; }
   min-height: 50vh;
   padding: 1.5rem 0 3rem;
 }
-.settings-card { width: 100%; max-width: 460px; }
+.settings-card { width: 100%; }
+.login-card { width: 100%; max-width: 420px; }
+.settings-form { max-width: 520px; }
 .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; }