feat: add safe backup management and theme preferences

Add snapshot usage and protected cleanup, preserve unsaved profile edits, avoid holding SQL connections during snapshot deletion, and fix download filenames. Include regression tests and API documentation.

web/src/BackupPanel.tsx

@@ -1,6 +1,6 @@
 import { useState, type FormEvent, type ReactNode } from 'react';
-import { Download, HardDriveDownload, RotateCcw, Upload } from 'lucide-react';
-import { api, instancePath, type Instance, type Backup } from './api';
+import { Download, HardDriveDownload, RotateCcw, Trash2, Upload } from 'lucide-react';
+import { api, instancePath, type Instance, type Backup, type Snapshot } from './api';
 import { ResourceState, Empty, bytes, date, useAction, useResource } from './ui';
 import { useConfirm } from './components/ConfirmDialog';
 import { AlertBox } from './components/ui/alert';
@@ -9,14 +9,29 @@ import { buttonVariants } from './components/ui/button';
 import { inputClass } from './components/ui/input';
 import { cn } from './lib/utils';
 
-export function BackupPanel({instance, refresh}: {instance: Instance; refresh: () => Promise<void>}) {
+export function BackupPanel({instance, refresh, onRestored}: {instance: Instance; refresh: () => Promise<void>; onRestored: () => Promise<void>}) {
   const base = instancePath(instance.id);
-  const backups = useResource(() => api.request<Backup[]>(base + '/backups'));
+  const backups = useResource(() => api.request<Backup[]>(base + '/backups'), base);
+  const snapshots = useResource(() => api.request<Snapshot[]>(base + '/snapshots'), base);
   const action = useAction();
   const confirm = useConfirm();
   const [password, setPassword] = useState('');
   const [importPassword, setImportPassword] = useState(''), [file, setFile] = useState<File>();
   const [restoreTarget, setRestoreTarget] = useState<Backup>();
+  async function refreshStorage() {
+    await Promise.all([backups.refresh(), snapshots.refresh(), refresh()]);
+  }
+  async function remove(item: Backup | Snapshot, snapshot: boolean) {
+    if (snapshot && (item as Snapshot).protected) return;
+    if (!await confirm.ask({
+      title: snapshot ? '删除完整 home 快照' : '删除配置备份', danger: true, confirmLabel: '永久删除',
+      body: `确认永久删除 ${item.id}？此操作不可撤销，不影响当前 home。${snapshot ? '删除后将无法使用此快照回滚。' : '请先下载需要保留的配置包；删除配置包不会清理完整快照。'}`,
+    })) return;
+    await action.run(async () => {
+      try { await api.request(base + (snapshot ? '/snapshots?id=' : '/backups?id=') + encodeURIComponent(item.id), 'DELETE'); }
+      finally { await refreshStorage(); }
+    }, snapshot ? '快照已删除，空间占用已刷新' : '配置备份已删除');
+  }
 
   function createBackup(e: FormEvent) {
     e.preventDefault();
@@ -44,7 +59,10 @@ export function BackupPanel({instance, refresh}: {instance: Instance; refresh: (
       title: '恢复配置备份', danger: true, confirmLabel: '确认恢复',
       body: '确认覆盖当前配置？服务器将先保留当前 home 快照，随后按需停止实例并恢复原运行状态。',
     })) return false;
-    return action.run(async () => { await api.request(base + '/restore', 'POST', {backup_id: backup.id, password: originalPassword}); await refresh(); }, '配置恢复及插件验证完成，已恢复原运行状态。');
+    return action.run(async () => {
+      try { await api.request(base + '/restore', 'POST', {backup_id: backup.id, password: originalPassword}); await onRestored(); }
+      finally { await snapshots.refresh(); }
+    }, '配置恢复及插件验证完成，已恢复原运行状态。');
   }
 
   return <section aria-label="备份与恢复" className="grid gap-5">
@@ -71,6 +89,8 @@ export function BackupPanel({instance, refresh}: {instance: Instance; refresh: (
     </div>
 
     {!restoreTarget && action.feedback}
+    <h3 className="m-0 text-sm font-semibold">配置备份（.dshbak）</h3>
+    <p className="m-0 text-xs text-muted-foreground">仅包含指定配置与资源，不包含完整 home 或依赖；下方大小为加密配置包大小。</p>
     <ResourceState resource={backups} />
     {backups.data?.length === 0 && <Empty>暂无配置备份</Empty>}
     <div className="grid gap-2">
@@ -79,13 +99,33 @@ export function BackupPanel({instance, refresh}: {instance: Instance; refresh: (
           <p className="m-0 truncate font-mono text-xs">{b.id}</p>
           <p className="m-0 mt-0.5 text-xs text-muted-foreground">{date(b.created_at)} · {bytes(b.size)}</p>
         </div>
-        <div className="flex gap-1.5">
+        <div className="flex flex-wrap gap-1.5">
           <a className={cn(buttonVariants({variant: 'outline', size: 'sm'}))} href={'/api' + base + '/backups?download=' + encodeURIComponent(b.id)}><Download aria-hidden />下载</a>
           <button className={cn(buttonVariants({variant: 'secondary', size: 'sm'}))} disabled={action.busy} onClick={() => setRestoreTarget(b)}><RotateCcw aria-hidden />恢复</button>
+          <button className={cn(buttonVariants({variant: 'destructive', size: 'sm'}))} disabled={action.busy} onClick={() => void remove(b, false)}><Trash2 aria-hidden />删除配置包</button>
         </div>
       </div>)}
     </div>
 
+    <section aria-label="完整 home 快照" className="grid gap-3 border-t border-border pt-5">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h3 className="m-0 text-sm font-semibold">完整 home 快照</h3>
+        <button className={cn(buttonVariants({variant: 'outline', size: 'sm'}))} disabled={action.busy || snapshots.loading || backups.loading} onClick={() => void refreshStorage()}>刷新备份与占用</button>
+      </div>
+      <AlertBox variant="info">升级或恢复前保留的完整 home 副本，包含依赖及工作文件，会计入空间配额；不包含在上面的配置包大小中。快照暂不支持网页下载，需要导出时请联系管理员。删除不可撤销，待恢复实例的快照受保护。</AlertBox>
+      <ResourceState resource={snapshots} />
+      {snapshots.data && !snapshots.error && <p className="m-0 text-sm">快照占用（文件字节数）：{snapshots.data.some(s => s.size_error) ? '统计不完整，请查看各项错误' : bytes(snapshots.data.reduce((total, s) => total + s.size, 0))}</p>}
+      {snapshots.data?.length === 0 && <Empty>暂无完整 home 快照</Empty>}
+      {snapshots.data?.map(s => <div key={s.id} className="flex flex-wrap items-center gap-3 rounded-lg border border-border bg-card px-3.5 py-3">
+        <div className="min-w-0 flex-1">
+          <p className="m-0 break-all font-mono text-xs">{s.id}</p>
+          <p className="m-0 mt-1 text-xs text-muted-foreground">{date(s.created_at)} · {s.size_error ? '大小统计失败：' + s.size_error : bytes(s.size)}</p>
+          {s.protected && <p className="m-0 mt-1 text-xs text-destructive">受保护：{s.protection_reason || '实例需要恢复，请联系管理员'}</p>}
+        </div>
+        <button className={cn(buttonVariants({variant: 'destructive', size: 'sm'}))} disabled={action.busy || s.protected} onClick={() => void remove(s, true)}><Trash2 aria-hidden />删除快照</button>
+      </div>)}
+    </section>
+
     {restoreTarget && <RestoreDialog backup={restoreTarget} busy={action.busy} feedback={action.feedback} onClose={() => setRestoreTarget(undefined)} onSubmit={async password => {
       const ok = await restore(restoreTarget, password);
       if (ok) setRestoreTarget(undefined);