DiAL/openspec/changes/frontend-architecture-refactor/specs/target-detail-drawer/spec.md

MODIFIED Requirements

Requirement: 目标详情 Drawer

Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计信息和检查记录。Drawer 标题栏和内容不使用内联 style。Drawer 内容 SHALL 拆分为独立的 Tab 组件。

Scenario: 打开 Drawer

• WHEN 用户点击某个目标表格行
• THEN 系统 SHALL 从右侧滑出 Drawer（placement="right"），宽度为视口 60%

Scenario: Drawer 标题栏

• WHEN Drawer 渲染
• THEN 标题栏 SHALL 使用 TDesign Space 组件（align="center"）布局，包含 StatusDot、目标名称（TDesign Typography.Text strong）和类型标签（TDesign Tag，直接显示 target.type 原始文本），以及内建关闭按钮。不使用内联 style 的 flex 布局

Scenario: 关闭 Drawer

• WHEN 用户点击关闭按钮、ESC 键或遮罩层
• THEN Drawer SHALL 关闭

Scenario: Drawer 无底部按钮

• WHEN Drawer 渲染
• THEN Drawer SHALL 不显示底部操作栏（footer={false}）

Scenario: Drawer 数据同步

• WHEN Drawer 打开期间后台轮询刷新了 targets 数据
• THEN Drawer 中 selectedTarget 的状态 SHALL 随之同步更新

Scenario: 切换目标重置 Tab

• WHEN 用户从目标 A 切换到目标 B（点击不同的表格行）
• THEN Drawer SHALL 重置为概览 Tab，使用 key={target.id} 确保组件状态不残留

Scenario: Drawer 内容区间距

• WHEN Drawer 内容渲染
• THEN 时间选择器、Tabs 等区块之间的间距 SHALL 通过 TDesign Space 组件（direction="vertical", size={16}）统一管理，不使用内联 style 的 marginBottom

Requirement: 概览面板组件化

概览 Tab SHALL 作为独立组件 OverviewTab 实现，接收数据 props 进行渲染。

Scenario: OverviewTab 组件职责

• WHEN 概览 Tab 渲染
• THEN OverviewTab 组件 SHALL 负责统计卡片、趋势图、状态分布环形图和基本信息的渲染

Scenario: 统计计算使用纯函数

• WHEN OverviewTab 需要计算 totalChecks、upChecks、downChecks
• THEN 计算逻辑 SHALL 通过 utils/stats.ts 中的纯函数实现，并使用 useMemo 缓存结果

Scenario: OverviewTab props

• WHEN OverviewTab 渲染
• THEN 组件 SHALL 接收 target: TargetStatus、trendData: TrendPoint[]、trendLoading: boolean 作为 props

Requirement: 记录面板组件化

记录 Tab SHALL 作为独立组件 HistoryTab 实现。

Scenario: HistoryTab 组件职责

• WHEN 记录 Tab 渲染
• THEN HistoryTab 组件 SHALL 负责检查结果表格和分页的渲染

Scenario: HistoryTab props

• WHEN HistoryTab 渲染
• THEN 组件 SHALL 接收 historyData: HistoryResponse、historyLoading: boolean、onPageChange: (page: number) => void 作为 props

Scenario: 历史记录列定义外置

• WHEN HistoryTab 渲染表格
• THEN 列定义 SHALL 从 constants/history-table-columns.tsx 导入，不在组件内部定义

Requirement: TrendChart 简化

TrendChart 组件 SHALL 仅接收数据 props，不处理 loading 状态。

Scenario: TrendChart 无 loading prop

• WHEN TrendChart 渲染
• THEN 组件 SHALL 仅接收 data: TrendPoint[] prop，不接收 loading prop

Scenario: TrendChart 空数据

• WHEN TrendChart 接收空数组
• THEN 组件 SHALL 显示"暂无趋势数据"占位文本

Requirement: StatusDonut key 修复

StatusDonut 组件 SHALL 使用语义化的 key。

Scenario: Pie Cell key

• WHEN StatusDonut 渲染 Pie Cell 列表
• THEN 每个 Cell 的 key SHALL 使用 data item 的 name 字段，不使用数组索引

Requirement: StatusBar 参数化

StatusBar 组件 SHALL 支持可配置的格数。

Scenario: maxSlots prop

• WHEN StatusBar 渲染
• THEN 组件 SHALL 接收可选的 maxSlots prop（默认 30），根据该值渲染对应数量的格子

Scenario: 格子渲染逻辑

• WHEN StatusBar 渲染且 samples 数量少于 maxSlots
• THEN 多余的格子 SHALL 显示为 empty 状态