## Purpose 定义拨测系统前端 Dashboard 页面:总览统计卡片(含数据新鲜度)、Dashboard 数据查询、页面标题、加载和错误状态处理。分组表格布局见 `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 Statistic 组件展示总览统计,包含总目标数、正常数、异常数和窗口异常事件数,并展示数据新鲜度。 #### Scenario: 展示统计卡片 - **WHEN** 用户打开 Dashboard 页面 - **THEN** 页面顶部 SHALL 使用 TDesign Row/Col 布局展示 4 个 TDesign Card + Statistic 组合:全部目标数(color=blue)、正常目标数(color=green)、异常目标数(color=red)、24h 异常事件数(color=orange) #### Scenario: 异常事件数据来源 - **WHEN** SummaryCards 渲染 24h 异常事件数 - **THEN** 该数值 SHALL 使用 DashboardResponse.summary.incidents 字段,标题 SHALL 基于当前 window 展示为"24h 异常事件数" #### Scenario: 展示数据新鲜度 - **WHEN** Summary 数据包含 lastCheckTime - **THEN** 统计卡片行底部 SHALL 展示相对时间文本(如"最后更新: 3秒前"),使用 TDesign Typography.Text(theme="secondary") #### Scenario: 数据新鲜度警告 - **WHEN** lastCheckTime 距当前时间超过 60 秒 - **THEN** 相对时间文本 SHALL 使用警告色(--td-warning-color) #### Scenario: 无检查时间 - **WHEN** Summary 数据 lastCheckTime 为 null - **THEN** 数据新鲜度 SHALL 展示为"尚无检查数据"或等价占位文本 ### Requirement: 页面标题 Dashboard 页面 SHALL 使用 TDesign Typography 组件渲染标题和副标题。 #### Scenario: 页面标题渲染 - **WHEN** Dashboard 页面渲染 - **THEN** 页面标题 SHALL 使用 TDesign Typography.Title 组件(level="h1")渲染"DiAL",副标题 SHALL 使用 Typography.Text 组件(theme="secondary")渲染"统一拨测平台" ### Requirement: 页面加载与错误状态 Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。 #### Scenario: 首次加载 - **WHEN** 页面首次加载且数据尚未返回 - **THEN** 表格 SHALL 显示 TDesign Loading 加载状态 #### 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 继续有效