mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-04-26 07:26:46 +00:00
数据备份测试
This commit is contained in:
cc
298
src/pages/BackupPage.scss
Normal file
298
src/pages/BackupPage.scss
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
305
src/pages/BackupPage.tsx
Normal file
305
src/pages/BackupPage.tsx
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user