备份与恢复 - 布局与组件结构描述

页面概览

备份与恢复是系统之家一级菜单下的二级页面，提供系统数据的备份、恢复和操作记录查询功能。

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 结构

// 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

// 操作记录相关
- setLogsFilters: 设置筛选条件
- fetchLogs: 获取操作记录列表
- setLogsPagination: 设置分页参数

// 备份相关
- setBackupItems: 设置选中的备份项目
- startBackup: 开始备份
- updateBackupProgress: 更新备份进度
- backupComplete: 备份完成
- backupFailed: 备份失败
- resetBackup: 重置备份状态

// 恢复相关
- selectBackupFile: 选择备份文件
- parseBackupFile: 解析备份文件
- setRecoveryItems: 设置选中的恢复项目
- startRecovery: 开始恢复
- updateRecoveryProgress: 更新恢复进度
- recoveryComplete: 恢复完成
- recoveryFailed: 恢复失败
- resetRecovery: 重置恢复状态

5.2 API 接口设计

5.2.1 操作记录接口

// 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 备份接口

// 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 恢复接口

// 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 主页面组件

// 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 (
    <div className="backup-recovery-page">
      <Tabs 
        activeKey={activeTab} 
        onChange={handleTabChange}
        items={[
          {
            key: 'logs',
            label: '操作记录',
            children: <OperationLogs />
          },
          {
            key: 'backup',
            label: '备份',
            children: <Backup />
          },
          {
            key: 'recovery',
            label: '恢复',
            children: <Recovery />
          }
        ]}
      />
    </div>
  );
};

5.3.3 备份项目列表组件

// 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<BackupItemListProps> = ({
  selectedItems,
  onChange,
  disabled = false
}) => {
  return (
    <Checkbox.Group 
      value={selectedItems} 
      onChange={onChange}
      disabled={disabled}
    >
      <Space direction="vertical" style={{ width: '100%' }}>
        {BACKUP_ITEMS.map(item => (
          <Checkbox key={item.id} value={item.id}>
            {item.label}
          </Checkbox>
        ))}
      </Space>
    </Checkbox.Group>
  );
};

5.3.4 进度显示面板组件

// 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<ProgressPanelProps> = ({
  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 (
    <div className="progress-panel">
      <div className="status-header">
        <Text strong>
          {status.includes('backing') ? '备份' : '恢复'}状态：
          {getStatusText()}
        </Text>
      </div>
      
      {progress && (
        <div className="progress-content">
          <Progress 
            percent={Math.round((progress.current / progress.total) * 100)}
            status={status === 'failed' ? 'exception' : 'active'}
          />
          <Text type="secondary">
            正在处理：{progress.currentItem} ({progress.current}/{progress.total})
          </Text>
        </div>
      )}

      {result && (
        <Alert
          type={result.success ? 'success' : 'error'}
          message={result.message}
          showIcon
        />
      )}
    </div>
  );
};

5.4 关键交互流程

5.4.1 备份流程

1. 用户选择备份项目
   ├─> 默认全选所有项目
   └─> 用户可以取消选择某些项目

2. 用户点击"备份"按钮
   ├─> 验证是否选择了至少一个项目
   ├─> 弹出确认对话框，显示将要备份的项目
   └─> 用户确认后开始备份

3. 执行备份
   ├─> dispatch(startBackup(selectedItems))
   ├─> 调用 API: POST /api/system/backup
   ├─> 建立 WebSocket 连接监听进度
   └─> 实时更新进度面板

4. 备份完成
   ├─> 显示备份成功消息和文件路径
   ├─> 记录操作日志
   └─> 重置备份状态（可选）

5.4.2 恢复流程

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 操作记录查询流程

1. 页面加载
   ├─> 设置默认时间范围（最近7天）
   ├─> 自动执行一次查询
   └─> 显示最近操作记录

2. 用户修改筛选条件
   ├─> 更新 filters state
   └─> 不立即查询（等待用户点击查询按钮）

3. 用户点击"查询"按钮
   ├─> dispatch(fetchLogs(filters, pagination))
   ├─> 调用 API: GET /api/system/operation-logs
   └─> 更新表格数据

4. 分页操作
   ├─> 用户切换页码或调整每页条数
   ├─> dispatch(setLogsPagination(newPagination))
   └─> 重新查询数据

5.5 样式建议

// 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 错误处理建议

// 备份错误处理
- 磁盘空间不足：提示用户清理磁盘空间或选择其他位置
- 权限不足：提示用户以管理员身份运行
- 部分项目备份失败：显示失败项目列表，询问是否继续
- 备份文件损坏：提示用户重新备份

// 恢复错误处理
- 备份文件不存在或损坏：提示用户选择有效的备份文件
- 版本不兼容：提示备份文件版本与当前系统版本不匹配
- 依赖项缺失：自动选择缺失的依赖项或提示用户
- 恢复失败回滚：自动恢复到备份前状态

// 操作记录错误处理
- 查询超时：提示用户缩小查询范围
- 无权限：提示用户权限不足
- 网络错误：提供重试选项

5.7 性能优化建议

1. 操作记录表格虚拟滚动
   - 使用 react-window 或 rc-virtual-list
   - 仅渲染可见行，提升大数据集性能

2. 备份/恢复进度更新
   - WebSocket 推送间隔不少于 500ms
   - 避免过于频繁的状态更新

3. 文件选择对话框
   - 使用 Electron 的 dialog.showOpenDialog
   - 限制文件类型为 .backup

4. 缓存策略
   - 操作记录查询结果缓存 5 分钟
   - 备份项目列表缓存，避免重复请求

5. 懒加载
   - 操作记录Tab首次打开时才加载数据
   - 减少初始渲染负担

6. 总结

备份与恢复页面是系统管理的核心功能，设计时重点考虑：

功能分离: 使用 Tabs 组件清晰分离备份、恢复、操作记录三大功能
直观交互: 左右分割布局便于用户同时查看操作和结果
进度反馈: 实时显示备份/恢复进度，提升用户体验
安全保障: 恢复前确认、备份验证、错误回滚等机制保障数据安全
可追溯性: 操作记录功能确保所有重要操作可追溯
灵活性: 支持选择性备份/恢复，满足不同场景需求

备份与恢复-布局与组件结构描述.md 29 KB Historia Raaka

备份与恢复 - 布局与组件结构描述

页面概览

1. 布局与组件结构

1.1 整体布局结构

1.2 Tab 1: 操作记录页面

1.2.1 层级结构

1.2.2 组件详情

1.3 Tab 2: 备份页面

1.3.1 层级结构

1.3.2 组件详情

1.4 Tab 3: 恢复页面

1.4.1 层级结构

1.4.2 组件详情

2. Ant Design 组件选择理由

2.1 Tabs 组件

2.2 DatePicker 组件

2.3 Select 组件

2.4 Table 组件

2.5 Checkbox 组件

2.6 Button 组件

2.7 Pagination 组件

3. 页面功能描述

3.1 操作记录功能

3.1.1 查询功能

3.1.2 分页浏览

3.1.3 空状态处理

3.2 备份功能

3.2.1 备份项目选择

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 备份策略

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)

5.1.1 Slice 结构

5.1.2 Actions

5.2 API 接口设计

5.2.1 操作记录接口

5.2.2 备份接口

5.2.3 恢复接口

5.3 组件实现建议

5.3.1 页面组件结构

5.3.2 主页面组件

5.3.3 备份项目列表组件

5.3.4 进度显示面板组件

5.4 关键交互流程

5.4.1 备份流程

5.4.2 恢复流程

5.4.3 操作记录查询流程

5.5 样式建议

5.6 错误处理建议

5.7 性能优化建议

6. 总结

备份与恢复-布局与组件结构描述.md 29 KB

Historia Raaka