# 前端开发任务 - v2.1

**任务来源**: Agent Coordinator  
**创建时间**: 2026-04-03  
**优先级**: P0 - 紧急  
**截止时间**: 2026-04-13  

---

## 📋 任务概述

请开发金融数据中台 v2.1 的前端页面，包括告警管理、数据质量 Dashboard、WebSocket 测试工具。

---

## 📊 当前状态

| 模块 | 状态 |
|------|------|
| 后端开发 | ✅ 已完成（11 个文件，3500 行代码） |
| 前端开发 | ⏳ 待开始 |
| 测试 | ⏳ 待后端+前端完成后开始 |

---

## 🎯 开发任务

### 1. 告警管理页面（2 天）

**文件位置**: `frontend/src/views/alert/`

**页面清单**:
- `AlertList.vue` - 告警列表页面
- `AlertCreate.vue` - 创建告警表单
- `AlertEdit.vue` - 编辑告警表单
- `AlertHistory.vue` - 告警历史页面
- `AlertStats.vue` - 告警统计图表

**API 接口**:
```
POST   /api/v2/alert/rules          创建告警
GET    /api/v2/alert/rules          查询告警列表
GET    /api/v2/alert/rules/{id}     查询告警详情
PUT    /api/v2/alert/rules/{id}     更新告警
DELETE /api/v2/alert/rules/{id}     删除告警
POST   /api/v2/alert/rules/{id}/enable   启用告警
POST   /api/v2/alert/rules/{id}/disable  禁用告警
GET    /api/v2/alert/history        查询告警历史
GET    /api/v2/alert/statistics     查询告警统计
```

**页面功能**:
- 告警列表：表格展示，支持筛选（品种、类型、状态）
- 创建告警：表单（名称、品种、类型、条件、渠道、生效时间）
- 编辑告警：表单（同创建）
- 告警历史：表格展示触发记录
- 告警统计：图表（触发次数趋势、类型分布）

---

### 2. 数据质量 Dashboard（2 天）

**文件位置**: `frontend/src/views/quality/`

**页面清单**:
- `QualityDashboard.vue` - 质量概览页面
- `QualityIssues.vue` - 问题列表页面
- `QualityHistory.vue` - 质量趋势页面
- `QualityRules.vue` - 监控规则管理

**API 接口**:
```
GET    /api/v2/quality/score        查询质量评分
GET    /api/v2/quality/issues       查询问题列表
GET    /api/v2/quality/history      查询监控历史
GET    /api/v2/quality/statistics   查询监控统计
POST   /api/v2/quality/check        触发质量检查
POST   /api/v2/quality/rules        创建监控规则
GET    /api/v2/quality/rules        查询监控规则
PUT    /api/v2/quality/rules/{id}   更新监控规则
DELETE /api/v2/quality/rules/{id}   删除监控规则
```

**页面功能**:
- 质量概览：4 个评分卡片（完整性、准确性、及时性、一致性）
- 问题列表：表格展示，支持筛选（品种、指标、级别）
- 质量趋势：折线图（评分变化）
- 监控规则：规则管理（创建、编辑、删除）

---

### 3. WebSocket 测试工具（1 天）

**文件位置**: `frontend/src/views/tools/`

**页面清单**:
- `WebSocketTester.vue` - WebSocket 测试工具

**WebSocket 接口**:
```
连接地址: WS /api/v2/ws/quote?token={token}

操作:
- subscribe: {"action": "subscribe", "symbols": ["IF2406"]}
- unsubscribe: {"action": "unsubscribe", "symbols": ["IF2406"]}
- heartbeat: {"action": "heartbeat"}
- query: {"action": "query"}
```

**页面功能**:
- 连接管理：连接/断开按钮，状态显示
- 订阅管理：添加/取消订阅，订阅列表
- 消息日志：接收消息列表，发送消息输入框
- 统计信息：延迟、丢包、连接数

---

## 📁 参考文档

| 文档 | 路径 |
|------|------|
| PRD v2.1 | `/app/working/workspaces/product_manager/projects/20260330_kline_system/PRD_v2.1.md` |
| 架构设计 | `/app/working/workspaces/architect/projects/20260330_kline_system/ARCHITECTURE_DESIGN_v2.1.md` |
| 开发任务详情 | `/app/working/workspaces/developer/projects/20260330_kline_system/DEVELOPMENT_TASKS_V2.1.md` |
| 后端 API 文档 | `/app/working/workspaces/developer/projects/20260330_kline_system/backend/app/api/v2/` |

---

## 📝 完成标准

1. 页面功能完整，符合 PRD 要求
2. API 调用正确，数据展示准确
3. 页面交互流畅，用户体验良好
4. 代码结构清晰，可维护性好

---

## 📢 完成后通知

前端开发完成后，请通知 Agent Coordinator，将启动测试阶段。

---

**任务创建人**: Agent Coordinator  
**创建时间**: 2026-04-03  
**任务状态**: ✅ 已完成  
**完成时间**: 2026-04-05  

---

## ✅ 完成情况

### 1. 告警管理页面 ✅
- [x] AlertList.vue (11.6KB)
- [x] AlertCreate.vue (11.7KB)
- [x] AlertEdit.vue (16KB)
- [x] AlertHistory.vue (19.3KB)

### 2. 数据质量 Dashboard ✅
- [x] QualityDashboard.vue (11.2KB)
  - 4 个质量评分卡片
  - 总体质量评分
  - 问题统计
  - 质量趋势图表
  - 问题列表

### 3. WebSocket 测试工具 ✅
- [x] WebSocketTester.vue (14.1KB)
  - 连接管理
  - 订阅管理
  - 消息日志
  - 压力测试
  - 延迟测试

**前端总计**: 6 个文件，73KB 代码  
**下一步**: 启动测试阶段