3.0 KiB
3.0 KiB
Purpose
定义拨测系统前端 Dashboard 页面：总览统计卡片、Dashboard 数据查询、加载和错误状态处理。页面骨架布局见 dashboard-layout，分组表格布局见 target-table，目标详情 Drawer 见 target-detail-drawer，数据轮询和缓存见 tanstack-query-data-layer。
Requirements
Requirement: Dashboard 数据查询
Dashboard SHALL 通过 GET /api/dashboard 获取首屏总览统计和目标列表数据。
Scenario: 查询 Dashboard 数据
- WHEN 页面处于打开状态
- THEN 前端 SHALL 使用 TanStack Query 请求
GET /api/dashboard?window=24h&recentLimit=30
Scenario: 统计数据自动刷新
- WHEN 页面处于打开状态
- THEN Dashboard 数据 SHALL 通过 TanStack Query 的 refetchInterval=8000 自动刷新
Scenario: 元信息独立查询
- WHEN 页面需要 checker 类型列表
- THEN 前端 SHALL 继续通过
GET /api/meta独立查询 checkerTypes
Requirement: 总览统计卡片
Dashboard SHALL 在页面顶部使用单个 TDesign Card 组件内嵌一行居中的 Statistic 展示总览统计，包含总目标数、正常数、异常数和窗口异常事件数。
Scenario: 展示统计卡片
- WHEN 用户打开 Dashboard 页面
- THEN 页面顶部 SHALL 使用单个 TDesign Card（无 shadow、无 bordered）内嵌 TDesign Row/Col 布局展示 4 个居中的 Statistic：全部目标数（color=blue）、正常目标数（color=green）、异常目标数（color=red）、24h 异常事件数（color=orange）
Scenario: 指标居中显示
- WHEN SummaryCards 渲染
- THEN 每个 Statistic 所在的 Col SHALL 使用
.summary-stat-col类实现标题和数字居中对齐
Scenario: 异常事件数据来源
- WHEN SummaryCards 渲染 24h 异常事件数
- THEN 该数值 SHALL 使用 DashboardResponse.summary.incidents 字段，标题 SHALL 基于当前 window 展示为"24h 异常事件数"
Requirement: 页面加载与错误状态
Dashboard SHALL 使用 TDesign Skeleton 组件处理首次加载状态，使用 Alert 处理错误。
Scenario: 首次加载
- WHEN 页面首次加载且数据尚未返回
- THEN 页面 SHALL 使用 TDesign Skeleton 组件（animation="gradient"）展示页面骨架，模拟 Summary 区域和 Table 区域的大致结构
Scenario: API 请求失败
- WHEN 前端 API 请求失败
- THEN 页面 SHALL 使用 TDesign Alert 组件（theme=error）显示错误提示
Requirement: 前端构建产物拆分
前端生产构建 SHALL 将 vendor 依赖拆分为独立 chunk，利用浏览器并行加载和长期缓存。
Scenario: vendor chunk 拆分
- WHEN 执行前端生产构建
- THEN 构建产物 SHALL 包含独立的 vendor chunk（react、tdesign、recharts 各自独立），而非单个 bundle
Scenario: 业务代码变更不影响 vendor 缓存
- WHEN 仅修改业务代码（src/web/ 下非 node_modules 文件）并重新构建
- THEN vendor chunk 的文件名（含 hash）SHALL 保持不变，浏览器缓存 SHALL 继续有效