# 备份与恢复 - 布局与组件结构描述 ## 页面概览 **备份与恢复**是系统之家一级菜单下的二级页面，提供系统数据的备份、恢复和操作记录查询功能。 --- ## 1. 布局与组件结构 ### 1.1 整体布局结构 ``` Page (备份与恢复) ├── Tabs Component (选项卡容器) │ ├── Tab Panel 1: 操作记录 │ ├── Tab Panel 2: 备份 │ └── Tab Panel 3: 恢复 ``` **布局类型**: Tabs Layout (选项卡布局) **排列方向**: Horizontal Tabs (水平标签) **区域划分**: 3个独立的Tab Panel，通过标签切换 --- ### 1.2 Tab 1: 操作记录页面 #### 1.2.1 层级结构 ``` Tab Panel (操作记录) ├── Section: 查询区域 (Query Section) │ ├── Container: 时间范围筛选 │ │ ├── DatePicker: 开始时间 │ │ └── DatePicker: 结束时间 │ ├── Container: 条件筛选 │ │ ├── Input: 用户名称输入框 │ │ ├── Select: 对象下拉选择 │ │ ├── Select: 操作下拉选择 │ │ └── Select: 结果下拉选择 │ └── Button: 查询按钮 └── Section: 数据展示区域 (Data Display Section) ├── Table: 操作记录表格 │ ├── Column: 时间 │ ├── Column: 用户 │ ├── Column: 操作对象 │ ├── Column: 操作 │ └── Column: 结果 └── Pagination: 分页控件 ``` **布局特点**: - **Vertical Stack Layout**: 查询区域和数据展示区域垂直堆叠 - **Grid Layout**: 查询条件采用栅格布局，自适应排列 - **Fixed Header**: 表格标题固定，内容区可滚动 #### 1.2.2 组件详情 | 组件类型 | 实例 | 参数配置 | 说明 | |---------|------|---------|------| | **DatePicker** | 开始时间、结束时间 | showTime, format | 支持精确到秒的时间选择 | | **Input** | 用户名称 | placeholder="请输入用户名称" | 模糊搜索用户 | | **Select** | 对象、操作、结果 | allowClear, placeholder | 支持清空选择 | | **Button** | 查询 | type="primary" | 触发查询操作 | | **Table** | 操作记录表格 | - | 展示操作历史 | | **Pagination** | 分页 | pageSize=20, showSizeChanger | 支持切换每页条数 | | **Empty** | 暂无数据 | - | 空状态展示 | --- ### 1.3 Tab 2: 备份页面 #### 1.3.1 层级结构 ``` Tab Panel (备份) ├── Split View Layout (左右分割布局) │ ├── Left Panel: 选择备份文件 │ │ ├── Section Header: "选择备份文件" │ │ ├── List: 备份项目列表 │ │ │ ├── Checkbox + Label: 文件目录 │ │ │ ├── Checkbox + Label: 协议配置 │ │ │ ├── Checkbox + Label: 平板探测器 │ │ │ ├── Checkbox + Label: 发生器 │ │ │ ├── Checkbox + Label: 机架 │ │ │ ├── Checkbox + Label: 同步盒 │ │ │ ├── Checkbox + Label: PPACS节点 │ │ │ ├── Checkbox + Label: DICOM节点 │ │ │ ├── Checkbox + Label: 用户账户 │ │ │ ├── Checkbox + Label: 四角信息 │ │ │ └── Checkbox + Label: 配置数据库 │ │ └── Button: 备份 │ └── Right Panel: 数据回显 │ ├── Section Header: "数据回显" │ └── Status Display: 备份状态信息 │ └── Text: "备份状态：未开始" ``` **布局特点**: - **Split View**: 左右分割视图，左侧固定宽度，右侧占据剩余空间 - **Vertical List**: 备份项目垂直排列 - **Fixed Bottom**: 备份按钮固定在左侧面板底部 - **Scrollable**: 备份项目列表可滚动 #### 1.3.2 组件详情 | 组件类型 | 实例 | 参数配置 | 说明 | |---------|------|---------|------| | **Checkbox** | 11个备份项目 | defaultChecked=true | 默认全选 | | **List** | 备份项目列表 | - | 垂直列表布局 | | **Button** | 备份 | type="primary", size="large" | 底部固定按钮 | | **Panel** | 数据回显区域 | - | 展示备份进度和结果 | --- ### 1.4 Tab 3: 恢复页面 #### 1.4.1 层级结构 ``` Tab Panel (恢复) ├── Split View Layout (左右分割布局) │ ├── Left Panel: 选择恢复文件 │ │ ├── Section: 选择文件包 │ │ │ ├── Section Header: "选择文件包" │ │ │ ├── Input: 文件路径输入框 │ │ │ └── Button: 选择路径 │ │ ├── Divider: 分隔线 │ │ ├── Section: 选择恢复文件 │ │ │ ├── Section Header: "选择恢复文件" │ │ │ └── List: 恢复项目列表 │ │ │ ├── Checkbox + Label: 文件目录 │ │ │ ├── Checkbox + Label: 协议配置 │ │ │ ├── Checkbox + Label: 平板探测器 │ │ │ ├── Checkbox + Label: 发生器 │ │ │ ├── Checkbox + Label: 机架 │ │ │ ├── Checkbox + Label: 同步盒 │ │ │ ├── Checkbox + Label: PPACS节点 │ │ │ ├── Checkbox + Label: DICOM节点 │ │ │ ├── Checkbox + Label: 用户账户 │ │ │ ├── Checkbox + Label: 四角信息 │ │ │ └── Checkbox + Label: 配置数据库 │ │ └── Button: 恢复 │ └── Right Panel: 数据回显 │ ├── Section Header: "数据回显" │ └── Status Display: 恢复状态信息 │ └── Text: "恢复状态：未开始" ``` **布局特点**: - **Split View**: 与备份页面相同的左右分割布局 - **Vertical Stack**: 左侧面板内容垂直堆叠 - **Two-Section Left Panel**: 左侧分为"选择文件包"和"选择恢复文件"两个区域 - **Input Group**: 文件路径输入框与选择按钮组合 #### 1.4.2 组件详情 | 组件类型 | 实例 | 参数配置 | 说明 | |---------|------|---------|------| | **Input** | 文件路径 | placeholder="请选择文件包", readOnly | 只读输入框 | | **Button** | 选择路径 | - | 打开文件选择对话框 | | **Checkbox** | 11个恢复项目 | defaultChecked=false | 默认不选中 | | **List** | 恢复项目列表 | - | 垂直列表布局 | | **Button** | 恢复 | type="primary", size="large", disabled | 初始禁用状态 | | **Panel** | 数据回显区域 | - | 展示恢复进度和结果 | --- ## 2. Ant Design 组件选择理由 ### 2.1 Tabs 组件 **选择理由**: - **清晰的功能分组**: 备份、恢复、操作记录三个功能相关但独立，使用Tabs可以在同一页面组织，避免页面跳转 - **状态保持**: Tabs内置状态管理，切换时保持各Tab的状态 - **一致的视觉体验**: Ant Design的Tabs组件风格统一，与系统整体设计一致 - **易于扩展**: 如果未来需要添加新的功能模块（如"导入导出"），可以轻松添加新Tab ### 2.2 DatePicker 组件 **选择理由**: - **时间范围筛选**: 操作记录需要按时间范围查询，DatePicker提供了便捷的日期时间选择 - **格式化支持**: 支持自定义时间格式显示和解析 - **范围选择**: 可以使用RangePicker组件简化时间范围选择 - **验证功能**: 内置日期验证，防止选择无效时间范围 ### 2.3 Select 组件 **选择理由**: - **枚举值选择**: 对象、操作、结果都是预定义的枚举值，Select最适合 - **支持搜索**: 可以启用搜索功能，快速定位选项 - **清空选项**: allowClear属性方便用户重置筛选条件 - **多选支持**: 如果未来需要支持多条件筛选，可以轻松切换到多选模式 ### 2.4 Table 组件 **选择理由**: - **数据展示专业**: Ant Design的Table组件功能强大，支持排序、筛选、分页 - **固定表头**: 长列表场景下固定表头提升体验 - **空状态处理**: 内置Empty组件集成，无数据时自动显示友好提示 - **列配置**: 支持动态显示/隐藏列，满足不同用户需求 ### 2.5 Checkbox 组件 **选择理由**: - **多选场景**: 备份和恢复需要选择多个数据项，Checkbox最适合 - **全选/反选**: 可以方便实现全选、反选功能 - **状态清晰**: 选中/未选中状态视觉清晰 - **分组支持**: Checkbox.Group可以统一管理所有选项的值 ### 2.6 Button 组件 **选择理由**: - **操作触发**: 查询、备份、恢复等操作需要明确的触发点 - **状态反馈**: 支持loading状态，操作进行时提供视觉反馈 - **禁用控制**: 可以根据条件禁用按钮，防止误操作 - **视觉层级**: 通过type属性区分主要和次要操作 ### 2.7 Pagination 组件 **选择理由**: - **大数据集处理**: 操作记录可能很多，分页是必需的 - **跳转功能**: 支持快速跳转到指定页 - **条数切换**: showSizeChanger允许用户调整每页显示条数 - **总数显示**: 清晰显示总记录数，帮助用户了解数据规模 --- ## 3. 页面功能描述 ### 3.1 操作记录功能 #### 3.1.1 查询功能 - **时间范围筛选**: 用户可以选择开始和结束时间，查询特定时间段内的操作记录 - **多条件组合查询**: 支持按用户、操作对象、操作类型、操作结果多维度筛选 - **模糊搜索**: 用户名称支持模糊匹配 - **结果展示**: 以表格形式展示查询结果，包含时间、用户、操作对象、操作类型、结果等信息 #### 3.1.2 分页浏览 - **分页展示**: 大量记录分页显示，提升性能 - **页码跳转**: 快速跳转到指定页 - **条数调整**: 用户可以选择每页显示20/50/100条记录 #### 3.1.3 空状态处理 - **无数据提示**: 查询无结果时显示"暂无数据"提示 - **友好引导**: 提示用户调整筛选条件 ### 3.2 备份功能 #### 3.2.1 备份项目选择 - **全选/反选**: 默认全选所有备份项目，用户可以取消不需要的项目 - **分类清晰**: 备份项目按类型分类（配置类、硬件类、数据类） - **备份项目说明**: - 文件目录: 系统文件和用户数据 - 协议配置: 检查协议和体位配置 - 平板探测器: 探测器配置参数 - 发生器: 高压发生器配置 - 机架: 机架配置参数 - 同步盒: 同步盒配置 - PPACS节点: PACS服务器配置 - DICOM节点: DICOM网络配置 - 用户账户: 用户账号信息 - 四角信息: 图像四角显示配置 - 配置数据库: 系统配置数据库 #### 3.2.2 备份执行 - **一键备份**: 点击备份按钮开始备份操作 - **进度显示**: 右侧数据回显区域实时显示备份进度 - **状态反馈**: 显示当前备份状态（未开始、进行中、已完成、失败） - **备份文件生成**: 生成包含所选项目的备份文件包 #### 3.2.3 备份结果 - **成功提示**: 备份完成后显示成功信息和备份文件路径 - **失败处理**: 备份失败时显示错误原因，支持重试 - **日志记录**: 备份操作记录到操作记录中 ### 3.3 恢复功能 #### 3.3.1 备份文件选择 - **文件浏览**: 点击"选择路径"按钮打开文件选择对话框 - **备份包解析**: 选择备份文件后自动解析包含的备份项目 - **项目展示**: 在"选择恢复文件"列表中显示备份包中的可用项目 #### 3.3.2 恢复项目选择 - **按需恢复**: 用户可以选择性恢复部分项目，不必全部恢复 - **依赖检查**: 某些项目可能有依赖关系，系统应提示或自动选择依赖项 - **风险提示**: 恢复操作会覆盖现有配置，应有明确的风险提示 #### 3.3.3 恢复执行 - **确认对话框**: 执行恢复前弹出确认对话框，列出将要恢复的项目 - **进度显示**: 右侧数据回显区域实时显示恢复进度 - **分项反馈**: 每个项目恢复完成后显示状态（成功/失败） - **回滚机制**: 如果恢复失败，应能回滚到恢复前状态 #### 3.3.4 恢复结果 - **成功提示**: 恢复完成后显示成功信息 - **重启提示**: 某些配置恢复后需要重启系统才能生效 - **失败处理**: 部分项目恢复失败时显示详细错误信息 - **日志记录**: 恢复操作记录到操作记录中 --- ## 4. 功能思考与需求描述 ### 4.1 操作记录功能需求 #### 4.1.1 数据来源 - **系统级操作**: 备份、恢复、系统配置修改等重要操作 - **用户级操作**: 用户登录、权限变更等安全相关操作 - **记录内容**: 操作时间、操作用户、操作对象、操作类型、操作结果、详细信息 #### 4.1.2 查询性能 - **索引优化**: 时间、用户、操作对象等常用筛选字段应建立索引 - **分页加载**: 前端分页，避免一次加载大量数据 - **缓存策略**: 近期查询结果可以缓存，减少服务器压力 #### 4.1.3 权限控制 - **访问权限**: 只有管理员可以查看所有操作记录 - **数据隔离**: 普通用户只能查看自己的操作记录（如果开放） - **敏感信息**: 某些敏感操作记录可能需要额外的查看权限 ### 4.2 备份功能需求 #### 4.2.1 备份策略 - **增量备份**: 支持增量备份，只备份变更的数据 - **定时备份**: 支持设置定时自动备份 - **备份保留**: 设置备份文件保留策略（如最多保留10个备份） - **备份验证**: 备份完成后验证备份文件完整性 #### 4.2.2 备份范围 - **完整备份**: 包含所有选中项目的完整数据 - **配置备份**: 只备份配置信息，不包含大文件 - **数据备份**: 包含配置和数据文件 #### 4.2.3 备份安全 - **加密存储**: 备份文件可以加密存储，防止泄露 - **压缩优化**: 备份文件压缩，节省存储空间 - **完整性校验**: 使用校验和确保备份文件完整 #### 4.2.4 用户体验 - **预估时间**: 显示预计备份所需时间 - **可取消**: 备份过程中可以取消操作 - **后台执行**: 备份在后台执行，不阻塞用户其他操作 ### 4.3 恢复功能需求 #### 4.3.1 恢复策略 - **完整恢复**: 恢复所有选中的项目 - **部分恢复**: 允许只恢复部分项目 - **版本选择**: 如果有多个备份版本，允许用户选择恢复哪个版本 #### 4.3.2 恢复安全 - **备份当前状态**: 恢复前自动备份当前状态 - **验证备份文件**: 恢复前验证备份文件有效性 - **依赖检查**: 检查项目之间的依赖关系 - **冲突解决**: 处理恢复数据与现有数据的冲突 #### 4.3.3 恢复流程 - **文件解析**: 解析备份文件，显示可恢复项目 - **项目选择**: 用户选择要恢复的项目 - **风险确认**: 显示恢复将覆盖的配置，要求用户确认 - **执行恢复**: 按依赖顺序恢复各项目 - **结果反馈**: 显示每个项目的恢复结果 #### 4.3.4 异常处理 - **部分失败**: 某些项目恢复失败时，其他项目继续恢复 - **回滚机制**: 提供回滚到恢复前状态的选项 - **错误日志**: 详细记录恢复过程中的错误 --- ## 5. 后续实现建议 ### 5.1 状态管理 (Redux Slice) 建议创建 `backupRecoverySlice` 来管理备份与恢复的状态。 #### 5.1.1 Slice 结构 ```typescript // src/store/slices/backupRecoverySlice.ts interface BackupRecoveryState { // 当前激活的Tab activeTab: 'backup' | 'recovery' | 'logs'; // 操作记录 logs: { list: OperationLog[]; total: number; loading: boolean; filters: { startTime: string; endTime: string; username: string; object: string; operation: string; result: string; }; pagination: { current: number; pageSize: number; }; }; // 备份 backup: { selectedItems: string[]; // 选中的备份项目ID status: 'idle' | 'preparing' | 'backing-up' | 'success' | 'failed'; progress: { current: number; total: number; currentItem: string; }; result: { success: boolean; filePath?: string; errorMessage?: string; }; }; // 恢复 recovery: { backupFilePath: string; // 选择的备份文件路径 availableItems: string[]; // 备份文件中可用的项目 selectedItems: string[]; // 选中要恢复的项目 status: 'idle' | 'parsing' | 'restoring' | 'success' | 'failed'; progress: { current: number; total: number; currentItem: string; itemResults: Array<{ item: string; success: boolean; error?: string; }>; }; result: { success: boolean; needRestart: boolean; errorMessage?: string; }; }; } ``` #### 5.1.2 Actions ```typescript // 操作记录相关 - setLogsFilters: 设置筛选条件 - fetchLogs: 获取操作记录列表 - setLogsPagination: 设置分页参数 // 备份相关 - setBackupItems: 设置选中的备份项目 - startBackup: 开始备份 - updateBackupProgress: 更新备份进度 - backupComplete: 备份完成 - backupFailed: 备份失败 - resetBackup: 重置备份状态 // 恢复相关 - selectBackupFile: 选择备份文件 - parseBackupFile: 解析备份文件 - setRecoveryItems: 设置选中的恢复项目 - startRecovery: 开始恢复 - updateRecoveryProgress: 更新恢复进度 - recoveryComplete: 恢复完成 - recoveryFailed: 恢复失败 - resetRecovery: 重置恢复状态 ``` ### 5.2 API 接口设计 #### 5.2.1 操作记录接口 ```typescript // GET /api/system/operation-logs interface FetchLogsParams { startTime?: string; endTime?: string; username?: string; object?: string; operation?: string; result?: string; page: number; pageSize: number; } interface FetchLogsResponse { data: OperationLog[]; total: number; } ``` #### 5.2.2 备份接口 ```typescript // POST /api/system/backup interface BackupRequest { items: string[]; // 要备份的项目ID列表 } interface BackupResponse { success: boolean; filePath?: string; errorMessage?: string; } // WebSocket: /ws/backup-progress // 实时推送备份进度 interface BackupProgressMessage { current: number; total: number; currentItem: string; status: 'backing-up' | 'success' | 'failed'; } ``` #### 5.2.3 恢复接口 ```typescript // POST /api/system/parse-backup interface ParseBackupRequest { filePath: string; } interface ParseBackupResponse { success: boolean; availableItems: string[]; errorMessage?: string; } // POST /api/system/recovery interface RecoveryRequest { filePath: string; items: string[]; // 要恢复的项目ID列表 } interface RecoveryResponse { success: boolean; needRestart: boolean; errorMessage?: string; } // WebSocket: /ws/recovery-progress // 实时推送恢复进度 interface RecoveryProgressMessage { current: number; total: number; currentItem: string; status: 'restoring' | 'success' | 'failed'; itemResults: Array<{ item: string; success: boolean; error?: string; }>; } ``` ### 5.3 组件实现建议 #### 5.3.1 页面组件结构 ``` src/pages/system/BackupRecovery/ ├── index.tsx // 主页面组件 ├── OperationLogs.tsx // 操作记录Tab ├── Backup.tsx // 备份Tab ├── Recovery.tsx // 恢复Tab └── components/ ├── BackupItemList.tsx // 备份项目列表组件 ├── ProgressPanel.tsx // 进度显示面板组件 └── LogsTable.tsx // 操作记录表格组件 ``` #### 5.3.2 主页面组件 ```typescript // src/pages/system/BackupRecovery/index.tsx const BackupRecovery: React.FC = () => { const dispatch = useDispatch(); const { activeTab } = useSelector((state) => state.backupRecovery); const handleTabChange = (key: string) => { dispatch(setActiveTab(key)); }; return (
}, { key: 'backup', label: '备份', children: }, { key: 'recovery', label: '恢复', children: } ]} />
); }; ``` #### 5.3.3 备份项目列表组件 ```typescript // src/pages/system/BackupRecovery/components/BackupItemList.tsx interface BackupItemListProps { selectedItems: string[]; onChange: (selectedItems: string[]) => void; disabled?: boolean; } const BACKUP_ITEMS = [ { id: 'file-directory', label: '文件目录' }, { id: 'protocol-config', label: '协议配置' }, { id: 'detector', label: '平板探测器' }, { id: 'generator', label: '发生器' }, { id: 'frame', label: '机架' }, { id: 'sync-box', label: '同步盒' }, { id: 'pacs-node', label: 'PPACS节点' }, { id: 'dicom-node', label: 'DICOM节点' }, { id: 'user-account', label: '用户账户' }, { id: 'corner-info', label: '四角信息' }, { id: 'config-db', label: '配置数据库' }, ]; const BackupItemList: React.FC = ({ selectedItems, onChange, disabled = false }) => { return ( {BACKUP_ITEMS.map(item => ( {item.label} ))} ); }; ``` #### 5.3.4 进度显示面板组件 ```typescript // src/pages/system/BackupRecovery/components/ProgressPanel.tsx interface ProgressPanelProps { status: 'idle' | 'preparing' | 'backing-up' | 'restoring' | 'success' | 'failed'; progress?: { current: number; total: number; currentItem: string; }; result?: { success: boolean; message?: string; }; } const ProgressPanel: React.FC = ({ status, progress, result }) => { const getStatusText = () => { switch (status) { case 'idle': return '未开始'; case 'preparing': return '准备中...'; case 'backing-up': return '备份中...'; case 'restoring': return '恢复中...'; case 'success': return '完成'; case 'failed': return '失败'; default: return '未知状态'; } }; return (
{status.includes('backing') ? '备份' : '恢复'}状态： {getStatusText()}
{progress && (
正在处理：{progress.currentItem} ({progress.current}/{progress.total})
)} {result && ( )}
); }; ``` ### 5.4 关键交互流程 #### 5.4.1 备份流程 ```typescript 1. 用户选择备份项目 ├─> 默认全选所有项目 └─> 用户可以取消选择某些项目 2. 用户点击"备份"按钮 ├─> 验证是否选择了至少一个项目 ├─> 弹出确认对话框，显示将要备份的项目 └─> 用户确认后开始备份 3. 执行备份 ├─> dispatch(startBackup(selectedItems)) ├─> 调用 API: POST /api/system/backup ├─> 建立 WebSocket 连接监听进度 └─> 实时更新进度面板 4. 备份完成 ├─> 显示备份成功消息和文件路径 ├─> 记录操作日志 └─> 重置备份状态（可选） ``` #### 5.4.2 恢复流程 ```typescript 1. 用户选择备份文件 ├─> 点击"选择路径"按钮 ├─> 打开文件选择对话框 └─> 选择 .backup 文件 2. 解析备份文件 ├─> dispatch(parseBackupFile(filePath)) ├─> 调用 API: POST /api/system/parse-backup ├─> 显示备份包中可用的项目 └─> 启用恢复项目列表 3. 用户选择要恢复的项目 ├─> 勾选需要恢复的项目 └─> 启用"恢复"按钮 4. 执行恢复 ├─> 弹出风险确认对话框 ├─> 列出将被覆盖的配置项 ├─> 用户确认后开始恢复 ├─> dispatch(startRecovery({ filePath, selectedItems })) ├─> 调用 API: POST /api/system/recovery ├─> 建立 WebSocket 连接监听进度 └─> 实时更新进度面板 5. 恢复完成 ├─> 显示恢复结果（成功/失败项目列表） ├─> 如需重启，显示重启提示 ├─> 记录操作日志 └─> 重置恢复状态 ``` #### 5.4.3 操作记录查询流程 ```typescript 1. 页面加载 ├─> 设置默认时间范围（最近7天） ├─> 自动执行一次查询 └─> 显示最近操作记录 2. 用户修改筛选条件 ├─> 更新 filters state └─> 不立即查询（等待用户点击查询按钮） 3. 用户点击"查询"按钮 ├─> dispatch(fetchLogs(filters, pagination)) ├─> 调用 API: GET /api/system/operation-logs └─> 更新表格数据 4. 分页操作 ├─> 用户切换页码或调整每页条数 ├─> dispatch(setLogsPagination(newPagination)) └─> 重新查询数据 ``` ### 5.5 样式建议 ```scss // src/pages/system/BackupRecovery/styles.scss .backup-recovery-page { height: 100%; .ant-tabs { height: 100%; .ant-tabs-content { height: calc(100% - 46px); } } } // 操作记录Tab .operation-logs-tab { display: flex; flex-direction: column; height: 100%; gap: 16px; .query-section { background: #fff; padding: 16px; border-radius: 4px; .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; } } .data-section { flex: 1; background: #fff; padding: 16px; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; .ant-table-wrapper { flex: 1; } } } // 备份/恢复Tab（左右分割布局） .backup-tab, .recovery-tab { display: flex; height: 100%; gap: 16px; .left-panel { width: 480px; background: #fff; padding: 16px; border-radius: 4px; display: flex; flex-direction: column; .section-header { font-size: 16px; font-weight: 500; margin-bottom: 16px; } .backup-items-list { flex: 1; overflow-y: auto; margin-bottom: 16px; } .action-button { width: 100%; height: 48px; } } .right-panel { flex: 1; background: #fff; padding: 16px; border-radius: 4px; } } // 恢复Tab特殊样式 .recovery-tab { .file-selection { margin-bottom: 16px; .ant-input-group { display: flex; gap: 8px; } } .ant-divider { margin: 16px 0; } } // 进度面板 .progress-panel { .status-header { margin-bottom: 16px; } .progress-content { margin: 16px 0; .ant-progress { margin-bottom: 8px; } } } ``` ### 5.6 错误处理建议 ```typescript // 备份错误处理 - 磁盘空间不足：提示用户清理磁盘空间或选择其他位置 - 权限不足：提示用户以管理员身份运行 - 部分项目备份失败：显示失败项目列表，询问是否继续 - 备份文件损坏：提示用户重新备份 // 恢复错误处理 - 备份文件不存在或损坏：提示用户选择有效的备份文件 - 版本不兼容：提示备份文件版本与当前系统版本不匹配 - 依赖项缺失：自动选择缺失的依赖项或提示用户 - 恢复失败回滚：自动恢复到备份前状态 // 操作记录错误处理 - 查询超时：提示用户缩小查询范围 - 无权限：提示用户权限不足 - 网络错误：提供重试选项 ``` ### 5.7 性能优化建议 ```typescript 1. 操作记录表格虚拟滚动 - 使用 react-window 或 rc-virtual-list - 仅渲染可见行，提升大数据集性能 2. 备份/恢复进度更新 - WebSocket 推送间隔不少于 500ms - 避免过于频繁的状态更新 3. 文件选择对话框 - 使用 Electron 的 dialog.showOpenDialog - 限制文件类型为 .backup 4. 缓存策略 - 操作记录查询结果缓存 5 分钟 - 备份项目列表缓存，避免重复请求 5. 懒加载 - 操作记录Tab首次打开时才加载数据 - 减少初始渲染负担 ``` --- ## 6. 总结 **备份与恢复**页面是系统管理的核心功能，设计时重点考虑： 1. **功能分离**: 使用 Tabs 组件清晰分离备份、恢复、操作记录三大功能 2. **直观交互**: 左右分割布局便于用户同时查看操作和结果 3. **进度反馈**: 实时显示备份/恢复进度，提升用户体验 4. **安全保障**: 恢复前确认、备份验证、错误回滚等机制保障数据安全 5. **可追溯性**: 操作记录功能确保所有重要操作可追溯 6. **灵活性**: 支持选择性备份/恢复，满足不同场景需求 通过合理的状态管理、API 设计和组件架构，可以实现一个功能完善、交互友好的备份与恢复系统。