# Salesforce 集成模块 - 前端页面建议文档

## 概述

本文档基于现有前端页面的分析，提供需要增加的页面建议，以确保 Salesforce 集成模块能够支持正常的业务使用。

## 现有前端页面

### 1. 配置中心页面
- **路径**: `vue/center/index.vue`
- **功能**: 系统配置管理的主入口
- **包含组件**:
  - 环境管理 (EnvironmentTab.vue)
  - 配置管理 (ConfigurationTab.vue)
  - 快照管理 (SnapshotTab.vue)

### 2. 认证中心页面
- **路径**: `vue/register/index.vue`
- **功能**: Salesforce 认证和登录管理
- **支持的登录方式**:
  - OAuth2 认证
  - 用户名密码认证
  - CLI 认证
  - Session ID 认证

## 推荐增加的页面

### 1. 数据同步任务管理页面

**页面路径**: `vue/sync-task/index.vue`

**功能描述**: 管理数据同步任务的创建、编辑、删除和执行

**核心功能**:
- 创建新的同步任务
- 编辑现有同步任务配置
- 删除同步任务
- 手动触发同步任务执行
- 配置同步规则（增量/全量）
- 设置同步计划（定时任务）
- 监控同步状态和进度
- 查看同步历史记录

**业务价值**: 确保 Salesforce 数据与本地系统保持同步，支持定时和手动同步

**页面组件**:
- 任务列表表格
- 任务创建/编辑对话框
- 同步进度条
- 同步历史记录列表
- 定时任务配置表单

**API 接口需求**:
- `GET /api/salesforce/sync-tasks` - 获取同步任务列表
- `POST /api/salesforce/sync-tasks` - 创建同步任务
- `PUT /api/salesforce/sync-tasks/{id}` - 更新同步任务
- `DELETE /api/salesforce/sync-tasks/{id}` - 删除同步任务
- `POST /api/salesforce/sync-tasks/{id}/execute` - 执行同步任务
- `GET /api/salesforce/sync-tasks/{id}/history` - 获取同步历史

---

### 2. 日志查看器页面

**页面路径**: `vue/logs/index.vue`

**功能描述**: 查看集成操作日志、错误日志和系统日志

**核心功能**:
- 按时间范围筛选日志
- 按日志类型筛选（操作日志、错误日志、系统日志）
- 按日志级别筛选（DEBUG、INFO、WARN、ERROR）
- 搜索日志内容
- 导出日志文件
- 查看详细错误堆栈
- 配置日志保留策略

**业务价值**: 快速定位和解决集成问题，便于故障排查

**页面组件**:
- 日志筛选器（时间、类型、级别）
- 日志列表表格
- 日志详情对话框
- 日志导出按钮
- 日志配置表单

**API 接口需求**:
- `GET /api/salesforce/logs` - 获取日志列表
- `GET /api/salesforce/logs/{id}` - 获取日志详情
- `POST /api/salesforce/logs/export` - 导出日志
- `PUT /api/salesforce/logs/config` - 更新日志配置

---

### 3. 批量操作管理页面

**页面路径**: `vue/bulk-operations/index.vue`

**功能描述**: 管理大批量数据的导入、导出和更新操作

**核心功能**:
- 上传 CSV/Excel 文件批量导入
- 配置批量操作规则
- 监控批量操作进度
- 查看批量操作结果
- 查看错误报告
- 下载批量操作结果文件
- 取消正在进行的批量操作

**业务价值**: 处理大批量数据迁移和更新，提高数据操作效率

**页面组件**:
- 批量操作列表表格
- 文件上传组件
- 批量操作配置表单
- 操作进度条
- 结果统计卡片
- 错误报告对话框

**API 接口需求**:
- `GET /api/salesforce/bulk-operations` - 获取批量操作列表
- `POST /api/salesforce/bulk-operations/import` - 创建批量导入任务
- `POST /api/salesforce/bulk-operations/export` - 创建批量导出任务
- `GET /api/salesforce/bulk-operations/{id}/status` - 获取操作状态
- `POST /api/salesforce/bulk-operations/{id}/cancel` - 取消操作
- `GET /api/salesforce/bulk-operations/{id}/result` - 下载操作结果

---

### 4. 连接状态监控页面

**页面路径**: `vue/monitoring/index.vue`

**功能描述**: 实时监控 Salesforce 连接状态和健康度

**核心功能**:
- 显示连接状态（在线/离线）
- 显示 API 调用统计
- 显示速率限制使用情况
- 显示响应时间监控
- 显示连接历史趋势图
- 连接测试功能
- 自动刷新状态

**业务价值**: 及时发现连接问题，保证服务可用性

**页面组件**:
- 连接状态卡片
- API 调用统计图表
- 速率限制进度条
- 响应时间趋势图
- 连接测试按钮
- 连接历史时间线

**API 接口需求**:
- `GET /api/salesforce/monitoring/status` - 获取实时状态
- `GET /api/salesforce/monitoring/usage` - 获取使用统计
- `GET /api/salesforce/monitoring/trends` - 获取趋势数据
- `POST /api/salesforce/monitoring/test` - 测试连接

---

### 5. 字段映射管理页面

**页面路径**: `vue/field-mapping/index.vue`

**功能描述**: 配置 Salesforce 对象字段与本地系统字段的映射关系

**核心功能**:
- 选择 Salesforce 对象
- 选择本地系统对象
- 配置字段映射规则
- 支持数据转换规则
- 映射验证和测试
- 导入/导出映射配置
- 映射模板管理

**业务价值**: 确保数据在两个系统间正确转换

**页面组件**:
- 对象选择器
- 字段映射表格
- 映射规则配置表单
- 数据转换规则编辑器
- 映射测试对话框
- 模板管理列表

**API 接口需求**:
- `GET /api/salesforce/field-mappings` - 获取映射列表
- `POST /api/salesforce/field-mappings` - 创建映射
- `PUT /api/salesforce/field-mappings/{id}` - 更新映射
- `DELETE /api/salesforce/field-mappings/{id}` - 删除映射
- `POST /api/salesforce/field-mappings/{id}/test` - 测试映射
- `POST /api/salesforce/field-mappings/import` - 导入映射
- `POST /api/salesforce/field-mappings/export` - 导出映射

---

### 6. 对象元数据浏览器页面

**页面路径**: `vue/metadata/index.vue`

**功能描述**: 浏览和查看 Salesforce 对象的元数据结构

**核心功能**:
- 查看所有可用的 Salesforce 对象
- 显示对象的字段定义
- 查看字段类型、长度、必填等属性
- 搜索和筛选对象
- 查看对象关系
- 刷新元数据缓存
- 导出元数据文档

**业务价值**: 帮助开发人员了解 Salesforce 数据结构

**页面组件**:
- 对象列表树形控件
- 对象详情面板
- 字段列表表格
- 搜索框
- 刷新按钮
- 导出按钮

**API 接口需求**:
- `GET /api/salesforce/metadata/objects` - 获取对象列表
- `GET /api/salesforce/metadata/objects/{name}` - 获取对象详情
- `GET /api/salesforce/metadata/objects/{name}/fields` - 获取字段列表
- `POST /api/salesforce/metadata/refresh` - 刷新元数据
- `POST /api/salesforce/metadata/export` - 导出元数据

---

### 7. API 使用统计页面

**页面路径**: `vue/api-statistics/index.vue`

**功能描述**: 统计和分析 API 调用情况

**核心功能**:
- API 调用次数统计
- 响应时间分析
- 错误率统计
- 按接口/操作分组统计
- 时间范围筛选
- 统计图表展示
- 数据导出

**业务价值**: 优化 API 使用，监控性能

**页面组件**:
- 统计概览卡片
- 调用次数图表
- 响应时间图表
- 错误率图表
- 接口列表表格
- 时间范围选择器
- 导出按钮

**API 接口需求**:
- `GET /api/salesforce/statistics/overview` - 获取统计概览
- `GET /api/salesforce/statistics/calls` - 获取调用统计
- `GET /api/salesforce/statistics/response-time` - 获取响应时间统计
- `GET /api/salesforce/statistics/errors` - 获取错误统计
- `POST /api/salesforce/statistics/export` - 导出统计数据

---

### 8. 测试调试控制台页面

**页面路径**: `vue/debug-console/index.vue`

**功能描述**: 提供 API 测试和调试工具

**核心功能**:
- 执行 SOQL 查询
- 测试 API 接口调用
- 查看请求和响应详情
- 保存常用测试用例
- 测试用例管理
- 请求历史记录
- 格式化响应数据

**业务价值**: 快速测试和验证集成功能

**页面组件**:
- SOQL 查询编辑器
- API 测试表单
- 请求/响应查看器
- 测试用例列表
- 历史记录列表
- 格式化工具栏

**API 接口需求**:
- `POST /api/salesforce/debug/soql` - 执行 SOQL 查询
- `POST /api/salesforce/debug/api` - 测试 API 调用
- `GET /api/salesforce/debug/test-cases` - 获取测试用例
- `POST /api/salesforce/debug/test-cases` - 保存测试用例
- `GET /api/salesforce/debug/history` - 获取历史记录

---

### 9. 通知告警设置页面

**页面路径**: `vue/notifications/index.vue`

**功能描述**: 配置系统通知和告警规则

**核心功能**:
- 配置告警触发条件（如同步失败、连接断开）
- 设置通知方式（邮件、短信、站内消息）
- 告警历史记录
- 告警级别配置
- 通知模板管理
- 通知测试功能

**业务价值**: 及时发现问题，减少业务影响

**页面组件**:
- 告警规则列表
- 告警规则配置表单
- 通知方式配置
- 告警历史表格
- 通知模板编辑器
- 测试通知按钮

**API 接口需求**:
- `GET /api/salesforce/notifications/rules` - 获取告警规则
- `POST /api/salesforce/notifications/rules` - 创建告警规则
- `PUT /api/salesforce/notifications/rules/{id}` - 更新告警规则
- `DELETE /api/salesforce/notifications/rules/{id}` - 删除告警规则
- `GET /api/salesforce/notifications/history` - 获取告警历史
- `POST /api/salesforce/notifications/test` - 测试通知

---

### 10. 用户权限管理页面

**页面路径**: `vue/permissions/index.vue`

**功能描述**: 管理用户对 Salesforce 集成功能的访问权限

**核心功能**:
- 配置用户角色和权限
- 设置数据访问范围
- 审计用户操作
- 权限模板管理
- 用户组管理
- 权限继承配置

**业务价值**: 确保数据安全和合规性

**页面组件**:
- 用户列表表格
- 角色列表表格
- 权限配置表单
- 数据访问范围配置
- 操作审计日志
- 权限模板管理

**API 接口需求**:
- `GET /api/salesforce/permissions/users` - 获取用户列表
- `GET /api/salesforce/permissions/roles` - 获取角色列表
- `POST /api/salesforce/permissions/roles` - 创建角色
- `PUT /api/salesforce/permissions/roles/{id}` - 更新角色
- `DELETE /api/salesforce/permissions/roles/{id}` - 删除角色
- `GET /api/salesforce/permissions/audit` - 获取审计日志

---

## 优先级建议

### 高优先级（必须实现）

这些页面是确保系统正常运行和业务连续性的核心功能：

1. **数据同步任务管理页面** - 核心业务功能，确保数据同步
2. **日志查看器页面** - 问题排查和故障诊断必备
3. **连接状态监控页面** - 实时监控连接状态，保证服务可用性

### 中优先级（建议实现）

这些页面可以显著提升用户体验和系统可维护性：

4. **批量操作管理页面** - 提高大容量数据处理效率
5. **字段映射管理页面** - 确保数据正确转换
6. **对象元数据浏览器页面** - 帮助开发人员了解数据结构

### 低优先级（可选实现）

这些页面提供增强功能，可根据实际需求选择性实现：

7. **API 使用统计页面** - 性能优化和监控
8. **测试调试控制台页面** - 开发和测试工具
9. **通知告警设置页面** - 增强的监控和告警
10. **用户权限管理页面** - 高级权限控制

---

## 实施建议

### 第一阶段（MVP）

实现高优先级的三个页面，确保核心功能可用：

1. 数据同步任务管理页面
2. 日志查看器页面
3. 连接状态监控页面

### 第二阶段（功能增强）

实现中优先级的三个页面，提升用户体验：

4. 批量操作管理页面
5. 字段映射管理页面
6. 对象元数据浏览器页面

### 第三阶段（完善优化）

根据实际需求和反馈，选择性实现低优先级页面：

7. API 使用统计页面
8. 测试调试控制台页面
9. 通知告警设置页面
10. 用户权限管理页面

---

## 技术建议

### 前端技术栈

基于现有项目，建议继续使用：

- **框架**: Vue 3
- **UI 组件库**: Element Plus
- **状态管理**: Pinia
- **路由**: Vue Router
- **HTTP 客户端**: Axios
- **图表库**: ECharts（用于监控和统计页面）

### 页面结构

建议每个页面采用统一的目录结构：

```
vue/
├── sync-task/
│   ├── index.vue              # 主页面
│   ├── components/
│   │   ├── TaskList.vue       # 任务列表组件
│   │   ├── TaskForm.vue       # 任务表单组件
│   │   └── TaskHistory.vue    # 历史记录组件
│   └── api.js                 # API 接口定义
├── logs/
├── bulk-operations/
├── monitoring/
├── field-mapping/
├── metadata/
├── api-statistics/
├── debug-console/
├── notifications/
└── permissions/
```

### API 设计原则

- 遵循 RESTful 设计规范
- 统一的响应格式
- 完善的错误处理
- 接口版本控制
- 请求参数验证
- 响应数据分页

---

## 总结

通过实现以上建议的页面，您的 Salesforce 集成模块将具备完整的功能，能够支持正常的业务使用和运维需求。建议按照优先级分阶段实施，确保核心功能优先可用，然后逐步完善和优化。

如有任何问题或需要进一步的讨论，请随时联系。
