数据备份测试

src/App.tsx

@@ -27,6 +27,7 @@ import ResourcesPage from './pages/ResourcesPage'
 import ChatHistoryPage from './pages/ChatHistoryPage'
 import NotificationWindow from './pages/NotificationWindow'
 import AccountManagementPage from './pages/AccountManagementPage'
+import BackupPage from './pages/BackupPage'
 
 import { useAppStore } from './stores/appStore'
 import { themes, useThemeStore, type ThemeId, type ThemeMode } from './stores/themeStore'
@@ -705,6 +706,7 @@ function App() {
               <Route path="/biz" element={<BizPage />} />
               <Route path="/contacts" element={<ContactsPage />} />
               <Route path="/resources" element={<ResourcesPage />} />
+              <Route path="/backup" element={<BackupPage />} />
               <Route path="/chat-history/:sessionId/:messageId" element={<ChatHistoryPage />} />
               <Route path="/chat-history-inline/:payloadId" element={<ChatHistoryPage />} />
             </Routes>

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import { NavLink, useLocation, useNavigate } from 'react-router-dom'
-import { Home, MessageSquare, BarChart3, FileText, Settings, Download, Aperture, UserCircle, Lock, LockOpen, ChevronUp, FolderClosed, Footprints, Users } from 'lucide-react'
+import { Home, MessageSquare, BarChart3, FileText, Settings, Download, Aperture, UserCircle, Lock, LockOpen, ChevronUp, FolderClosed, Footprints, Users, ArchiveRestore } from 'lucide-react'
 import { useAppStore } from '../stores/appStore'
 import * as configService from '../services/config'
 import { onExportSessionStatus, requestExportSessionStatus } from '../services/exportBridge'
@@ -412,6 +412,15 @@ function Sidebar({ collapsed }: SidebarProps) {
             )}
           </NavLink>
 
+          <NavLink
+            to="/backup"
+            className={`nav-item ${isActive('/backup') ? 'active' : ''}`}
+            title={collapsed ? '数据库备份' : undefined}
+          >
+            <span className="nav-icon"><ArchiveRestore size={20} /></span>
+            <span className="nav-label">数据库备份</span>
+          </NavLink>
+
 
         </nav>
 

src/pages/BackupPage.scss

@@ -0,0 +1,298 @@
+.backup-page {
+  height: 100%;
+  overflow: auto;
+  padding: 24px;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+}
+
+.backup-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 20px;
+
+  h1 {
+    margin: 0;
+    font-size: 26px;
+    font-weight: 700;
+    letter-spacing: 0;
+  }
+
+  p {
+    margin: 6px 0 0;
+    color: var(--text-secondary);
+    font-size: 14px;
+  }
+}
+
+.backup-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.resource-options {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin: -8px 0 18px;
+
+  label {
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    min-height: 36px;
+    padding: 8px 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    cursor: pointer;
+  }
+
+  input {
+    margin: 0;
+  }
+
+  svg {
+    color: var(--primary);
+  }
+}
+
+.primary-btn,
+.secondary-btn {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 9px 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.primary-btn {
+  background: var(--primary);
+  color: var(--on-primary);
+  border-color: var(--primary);
+}
+
+.secondary-btn {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+
+  &:not(:disabled):hover {
+    background: var(--bg-tertiary);
+  }
+}
+
+.backup-status-band {
+  min-height: 88px;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 18px;
+  padding: 16px 0;
+}
+
+.status-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.status-body {
+  min-width: 0;
+  flex: 1;
+}
+
+.status-title {
+  font-size: 15px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.status-detail {
+  color: var(--text-secondary);
+  font-size: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.progress-track {
+  margin-top: 12px;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--primary);
+  transition: width 0.2s ease;
+}
+
+.backup-summary,
+.restore-result {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.summary-item,
+.restore-result > div {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  padding: 14px;
+  min-height: 74px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  svg {
+    color: var(--primary);
+  }
+
+  span {
+    color: var(--text-secondary);
+    font-size: 12px;
+  }
+
+  strong {
+    color: var(--text-primary);
+    font-size: 20px;
+    line-height: 1.1;
+  }
+}
+
+.backup-detail {
+  border-top: 1px solid var(--border-color);
+  padding-top: 18px;
+}
+
+.detail-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+  }
+
+  span {
+    color: var(--text-secondary);
+    font-size: 12px;
+  }
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+
+  div {
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 12px;
+    background: var(--bg-secondary);
+    min-width: 0;
+  }
+
+  span {
+    display: block;
+    color: var(--text-secondary);
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  strong {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+  }
+}
+
+.db-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.db-row {
+  display: grid;
+  grid-template-columns: 110px 80px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+  padding: 9px 0;
+  font-size: 13px;
+
+  span {
+    color: var(--primary);
+    font-weight: 700;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  em {
+    color: var(--text-secondary);
+    font-style: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 760px) {
+  .backup-header {
+    flex-direction: column;
+  }
+
+  .backup-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .backup-summary,
+  .restore-result,
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .db-row {
+    grid-template-columns: 82px 64px minmax(0, 1fr);
+  }
+}

src/pages/BackupPage.tsx

@@ -0,0 +1,305 @@
+import { useEffect, useMemo, useState } from 'react'
+import { ArchiveRestore, Database, Download, File, FileArchive, Image, Upload, Video } from 'lucide-react'
+import './BackupPage.scss'
+
+type BackupManifest = NonNullable<Awaited<ReturnType<typeof window.electronAPI.backup.inspect>>['manifest']>
+type BackupProgress = Parameters<Parameters<typeof window.electronAPI.backup.onProgress>[0]>[0]
+
+function formatDate(value?: string): string {
+  if (!value) return '-'
+  try {
+    return new Date(value).toLocaleString()
+  } catch {
+    return value
+  }
+}
+
+function summarizeManifest(manifest?: BackupManifest | null) {
+  if (!manifest) return { dbCount: 0, tableCount: 0, rowCount: 0, resourceCount: 0 }
+  let tableCount = 0
+  let rowCount = 0
+  for (const db of manifest.databases || []) {
+    tableCount += db.tables?.length || 0
+    rowCount += (db.tables || []).reduce((sum, table) => sum + (table.rows || 0), 0)
+  }
+  const resourceCount =
+    (manifest.resources?.images?.length || 0) +
+    (manifest.resources?.videos?.length || 0) +
+    (manifest.resources?.files?.length || 0)
+  return { dbCount: manifest.databases?.length || 0, tableCount, rowCount, resourceCount }
+}
+
+function BackupPage() {
+  const [progress, setProgress] = useState<BackupProgress | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState('')
+  const [selectedArchive, setSelectedArchive] = useState('')
+  const [manifest, setManifest] = useState<BackupManifest | null>(null)
+  const [restoreSummary, setRestoreSummary] = useState<{ inserted: number; ignored: number; skipped: number } | null>(null)
+  const [resourceOptions, setResourceOptions] = useState({
+    includeImages: false,
+    includeVideos: false,
+    includeFiles: false
+  })
+
+  useEffect(() => {
+    return window.electronAPI.backup.onProgress(setProgress)
+  }, [])
+
+  const summary = useMemo(() => summarizeManifest(manifest), [manifest])
+  const percent = progress?.total && progress.total > 0
+    ? Math.min(100, Math.round(((progress.current || 0) / progress.total) * 100))
+    : (busy ? 8 : 0)
+
+  const handleCreateBackup = async () => {
+    if (busy) return
+    setBusy(true)
+    setProgress(null)
+    setMessage('')
+    setRestoreSummary(null)
+    try {
+      const hasResources = resourceOptions.includeImages || resourceOptions.includeVideos || resourceOptions.includeFiles
+      const extension = hasResources ? 'tar' : 'tar.gz'
+      const defaultPath = `weflow-db-backup-${new Date().toISOString().slice(0, 10)}.${extension}`
+      const result = await window.electronAPI.dialog.saveFile({
+        title: '保存数据库备份',
+        defaultPath,
+        filters: [{ name: 'WeFlow 数据库备份', extensions: hasResources ? ['tar'] : ['gz'] }]
+      })
+      if (result.canceled || !result.filePath) {
+        setMessage('已取消')
+        return
+      }
+      const created = await window.electronAPI.backup.create({
+        outputPath: result.filePath,
+        options: resourceOptions
+      })
+      if (!created.success) {
+        setProgress(null)
+        setMessage(created.error || '备份失败')
+        return
+      }
+      setSelectedArchive(created.filePath || result.filePath)
+      setManifest(created.manifest || null)
+      setMessage('备份完成')
+    } catch (error) {
+      setProgress(null)
+      setMessage(error instanceof Error ? error.message : String(error))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handlePickArchive = async () => {
+    if (busy) return
+    setBusy(true)
+    setProgress(null)
+    setMessage('')
+    setRestoreSummary(null)
+    try {
+      const result = await window.electronAPI.dialog.openFile({
+        title: '选择数据库备份',
+        properties: ['openFile'],
+        filters: [
+          { name: 'WeFlow 数据库备份', extensions: ['tar', 'gz', 'tgz'] },
+          { name: '所有文件', extensions: ['*'] }
+        ]
+      })
+      if (result.canceled || !result.filePaths?.[0]) {
+        setMessage('已取消')
+        return
+      }
+      const archivePath = result.filePaths[0]
+      const inspected = await window.electronAPI.backup.inspect({ archivePath })
+      if (!inspected.success) {
+        setProgress(null)
+        setMessage(inspected.error || '读取备份失败')
+        return
+      }
+      setSelectedArchive(archivePath)
+      setManifest(inspected.manifest || null)
+      setMessage('备份包已读取')
+    } catch (error) {
+      setProgress(null)
+      setMessage(error instanceof Error ? error.message : String(error))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleRestore = async () => {
+    if (busy || !selectedArchive) return
+    setBusy(true)
+    setProgress(null)
+    setMessage('')
+    setRestoreSummary(null)
+    try {
+      const restored = await window.electronAPI.backup.restore({ archivePath: selectedArchive })
+      if (!restored.success) {
+        setProgress(null)
+        setMessage(restored.error || '载入失败')
+        return
+      }
+      setRestoreSummary({
+        inserted: restored.inserted || 0,
+        ignored: restored.ignored || 0,
+        skipped: restored.skipped || 0
+      })
+      setMessage('载入完成')
+    } catch (error) {
+      setProgress(null)
+      setMessage(error instanceof Error ? error.message : String(error))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="backup-page">
+      <div className="backup-header">
+        <div>
+          <h1>数据库备份</h1>
+          <p>Snapshots 增量备份与载入</p>
+        </div>
+        <div className="backup-actions">
+          <button className="primary-btn" onClick={handleCreateBackup} disabled={busy}>
+            <Download size={16} />
+            <span>创建备份</span>
+          </button>
+          <button className="secondary-btn" onClick={handlePickArchive} disabled={busy}>
+            <FileArchive size={16} />
+            <span>选择备份</span>
+          </button>
+          <button className="secondary-btn" onClick={handleRestore} disabled={busy || !selectedArchive}>
+            <Upload size={16} />
+            <span>载入</span>
+          </button>
+        </div>
+      </div>
+
+      <section className="resource-options" aria-label="资源备份选项">
+        <label>
+          <input
+            type="checkbox"
+            checked={resourceOptions.includeImages}
+            disabled={busy}
+            onChange={(event) => setResourceOptions(prev => ({ ...prev, includeImages: event.target.checked }))}
+          />
+          <Image size={16} />
+          <span>图片</span>
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={resourceOptions.includeVideos}
+            disabled={busy}
+            onChange={(event) => setResourceOptions(prev => ({ ...prev, includeVideos: event.target.checked }))}
+          />
+          <Video size={16} />
+          <span>视频</span>
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={resourceOptions.includeFiles}
+            disabled={busy}
+            onChange={(event) => setResourceOptions(prev => ({ ...prev, includeFiles: event.target.checked }))}
+          />
+          <File size={16} />
+          <span>文件</span>
+        </label>
+      </section>
+
+      <div className="backup-status-band">
+        <div className="status-icon">
+          <ArchiveRestore size={22} />
+        </div>
+        <div className="status-body">
+          <div className="status-title">{progress?.message || message || '等待操作'}</div>
+          <div className="status-detail">{progress?.detail || selectedArchive || '未选择备份包'}</div>
+          {busy && (
+            <div className="progress-track">
+              <div className="progress-fill" style={{ width: `${percent}%` }} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <section className="backup-summary">
+        <div className="summary-item">
+          <Database size={18} />
+          <span>数据库</span>
+          <strong>{summary.dbCount}</strong>
+        </div>
+        <div className="summary-item">
+          <Database size={18} />
+          <span>表</span>
+          <strong>{summary.tableCount}</strong>
+        </div>
+        <div className="summary-item">
+          <Database size={18} />
+          <span>行</span>
+          <strong>{summary.rowCount.toLocaleString()}</strong>
+        </div>
+        <div className="summary-item">
+          <FileArchive size={18} />
+          <span>资源</span>
+          <strong>{summary.resourceCount.toLocaleString()}</strong>
+        </div>
+      </section>
+
+      {manifest && (
+        <section className="backup-detail">
+          <div className="detail-heading">
+            <h2>备份信息</h2>
+            <span>{formatDate(manifest.createdAt)}</span>
+          </div>
+          <div className="detail-grid">
+            <div>
+              <span>来源账号</span>
+              <strong>{manifest.source.wxid || '-'}</strong>
+            </div>
+            <div>
+              <span>版本</span>
+              <strong>{manifest.appVersion || '-'}</strong>
+            </div>
+            <div>
+              <span>资源</span>
+              <strong>
+                图片 {manifest.resources?.images?.length || 0} / 视频 {manifest.resources?.videos?.length || 0} / 文件 {manifest.resources?.files?.length || 0}
+              </strong>
+            </div>
+          </div>
+          <div className="db-list">
+            {manifest.databases.map(db => (
+              <div className="db-row" key={db.id}>
+                <span>{db.kind}</span>
+                <strong>{db.tables.length} 表</strong>
+                <em>{db.relativePath}</em>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {restoreSummary && (
+        <section className="restore-result">
+          <div>
+            <span>新增</span>
+            <strong>{restoreSummary.inserted.toLocaleString()}</strong>
+          </div>
+          <div>
+            <span>已存在</span>
+            <strong>{restoreSummary.ignored.toLocaleString()}</strong>
+          </div>
+          <div>
+            <span>跳过</span>
+            <strong>{restoreSummary.skipped.toLocaleString()}</strong>
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}
+
+export default BackupPage

src/types/electron.d.ts

@@ -21,6 +21,76 @@ export interface SocialSaveWeiboCookieResult {
   error?: string
 }
 
+export interface BackupProgress {
+  phase: 'preparing' | 'scanning' | 'exporting' | 'packing' | 'inspecting' | 'restoring' | 'done' | 'failed'
+  message: string
+  current?: number
+  total?: number
+  detail?: string
+}
+
+export interface BackupOptions {
+  includeImages?: boolean
+  includeVideos?: boolean
+  includeFiles?: boolean
+}
+
+export interface BackupManifest {
+  version: 1
+  type: 'weflow-db-snapshots'
+  createdAt: string
+  appVersion: string
+  source: {
+    wxid: string
+    dbRoot: string
+  }
+  options?: BackupOptions
+  databases: Array<{
+    id: string
+    kind: 'session' | 'contact' | 'emoticon' | 'message' | 'media' | 'sns'
+    dbPath: string
+    relativePath: string
+    tables: Array<{
+      name: string
+      snapshotPath: string
+      rows: number
+      columns: number
+      schemaSql?: string
+    }>
+  }>
+  resources?: {
+    images?: Array<{
+      kind: 'image' | 'video' | 'file'
+      id: string
+      md5?: string
+      sessionId?: string
+      createTime?: number
+      sourceFileName?: string
+      archivePath: string
+      targetRelativePath: string
+      ext?: string
+      size?: number
+    }>
+    videos?: Array<{
+      kind: 'image' | 'video' | 'file'
+      id: string
+      md5?: string
+      sourceFileName?: string
+      archivePath: string
+      targetRelativePath: string
+      size?: number
+    }>
+    files?: Array<{
+      kind: 'image' | 'video' | 'file'
+      id: string
+      sourceFileName?: string
+      archivePath: string
+      targetRelativePath: string
+      size?: number
+    }>
+  }
+}
+
 export interface ElectronAPI {
   window: {
     minimize: () => void
@@ -158,6 +228,27 @@ export interface ElectronAPI {
     close: () => Promise<boolean>
 
   }
+  backup: {
+    create: (payload: { outputPath: string; options?: BackupOptions }) => Promise<{
+      success: boolean
+      filePath?: string
+      manifest?: BackupManifest
+      error?: string
+    }>
+    inspect: (payload: { archivePath: string }) => Promise<{
+      success: boolean
+      manifest?: BackupManifest
+      error?: string
+    }>
+    restore: (payload: { archivePath: string }) => Promise<{
+      success: boolean
+      inserted?: number
+      ignored?: number
+      skipped?: number
+      error?: string
+    }>
+    onProgress: (callback: (progress: BackupProgress) => void) => () => void
+  }
   key: {
     autoGetDbKey: () => Promise<{ success: boolean; key?: string; error?: string; logs?: string[] }>
     autoGetImageKey: (manualDir?: string, wxid?: string) => Promise<{ success: boolean; xorKey?: number; aesKey?: string; verified?: boolean; error?: string }>
@@ -1220,4 +1311,3 @@ declare global {
 }
 
 export { }
-