lanyuanxiaoyao
76b47006fe
- frontend-architecture-refactor: 拆分 hooks/组件、类型筛选器动态化 - http-checker-quality-hardening: ReDoS 防护、failure 格式修正、测试补全
70 lines
3.9 KiB
Markdown
70 lines
3.9 KiB
Markdown
## MODIFIED Requirements
|
||
|
||
### Requirement: 表格列定义
|
||
每个分组的 PrimaryTable SHALL 包含状态、名称、类型、可用率、最近状态条、延迟、间隔 7 列，不含分组列（同组内冗余）。列渲染不使用内联 style。列定义 SHALL 通过工厂函数动态生成。
|
||
|
||
#### Scenario: 状态列
|
||
- **WHEN** 表格渲染
|
||
- **THEN** 状态列 SHALL 使用 StatusDot 组件渲染，标题显示"#"，宽度 60px，fixed="left"，居中对齐，支持筛选（UP/DOWN/全部）。StatusDot SHALL 通过 CSS 类（`.status-dot--up` / `.status-dot--down`）控制颜色，不使用内联 style
|
||
|
||
#### Scenario: 名称列
|
||
- **WHEN** 表格渲染
|
||
- **THEN** 名称列 SHALL 显示目标名称，支持字母排序（zh-CN），ellipsis 超长名称自动省略并 Tooltip 显示全名
|
||
|
||
#### Scenario: 类型列
|
||
- **WHEN** 表格渲染
|
||
- **THEN** 类型列 SHALL 使用 TDesign Tag 组件（size=small, theme=primary, variant=light-outline）直接显示 target.type 原始文本，支持单选筛选
|
||
|
||
#### Scenario: 类型筛选器动态生成
|
||
- **WHEN** 表格渲染
|
||
- **THEN** 类型列的筛选器列表 SHALL 从 meta API 返回的 `checkerTypes` 动态生成，包含"全部"选项和每个 checker 类型选项（label 和 value 均为 type 原始文本）
|
||
|
||
#### Scenario: 可用率列
|
||
- **WHEN** 表格渲染
|
||
- **THEN** 可用率列 SHALL 使用 TDesign Progress 组件（theme=line, size=small）渲染，颜色通过 CSS 自定义属性 `--avail-N`（基于项目自定义色值）控制，每 10% 一档，label 显示百分比数值，支持排序（升序优先，最差排最前）。color-threshold 函数 SHALL 返回 CSS 自定义属性引用而非硬编码色值
|
||
|
||
#### Scenario: 最近状态列
|
||
- **WHEN** 表格渲染
|
||
- **THEN** 最近状态列 SHALL 使用 StatusBar 组件渲染采样色块，宽度 220px。StatusBar SHALL 通过 CSS 类（`.status-bar-block--up` / `.status-bar-block--down` / `.status-bar-block--empty`）控制色块颜色，不使用内联 style
|
||
|
||
#### Scenario: 延迟列
|
||
- **WHEN** 表格渲染
|
||
- **THEN** 延迟列 SHALL 显示最近一次检查的延迟毫秒数，右对齐。颜色 SHALL 通过 CSS 类实现：≤100ms 使用 `.latency-ok`、100-500ms 使用 `.latency-warn`、>500ms 使用 `.latency-error`。无数据 SHALL 使用 `.text-disabled` 类显示 "-"，数值 SHALL 使用 `.tabular-nums` 类等宽显示。不使用内联 style
|
||
|
||
#### Scenario: 间隔列
|
||
- **WHEN** 表格渲染
|
||
- **THEN** 间隔列 SHALL 显示检查间隔（如 "5s"、"30s"），居中对齐，宽度 72px
|
||
|
||
### Requirement: 列定义工厂函数
|
||
列定义 SHALL 通过工厂函数生成，接收动态参数。
|
||
|
||
#### Scenario: createTargetTableColumns 函数
|
||
- **WHEN** 需要生成表格列定义
|
||
- **THEN** 系统 SHALL 调用 `createTargetTableColumns(checkerTypes: string[])` 函数，返回 `PrimaryTableCol<TargetStatus>[]`
|
||
|
||
#### Scenario: checkerTypes 为空数组
|
||
- **WHEN** meta API 尚未返回或返回空数组
|
||
- **THEN** 类型列的筛选器 SHALL 仅包含"全部"选项
|
||
|
||
#### Scenario: 列定义缓存
|
||
- **WHEN** TargetBoard 组件渲染
|
||
- **THEN** 列定义 SHALL 通过 `useMemo` 缓存，仅在 `checkerTypes` 变化时重新生成
|
||
|
||
### Requirement: TargetGroup 接收 columns prop
|
||
TargetGroup 组件 SHALL 通过 prop 接收列定义，不再直接导入静态常量。
|
||
|
||
#### Scenario: columns prop
|
||
- **WHEN** TargetGroup 渲染
|
||
- **THEN** 组件 SHALL 接收 `columns: PrimaryTableCol<TargetStatus>[]` prop 并传递给 PrimaryTable
|
||
|
||
#### Scenario: TargetBoard 传递 columns
|
||
- **WHEN** TargetBoard 渲染子组件
|
||
- **THEN** TargetBoard SHALL 调用 `createTargetTableColumns` 生成列定义并传递给每个 TargetGroup
|
||
|
||
### Requirement: 列定义复用
|
||
所有分组的表格 SHALL 共享同一套列定义常量。
|
||
|
||
#### Scenario: 列定义提取为常量
|
||
- **WHEN** 多个分组表格渲染
|
||
- **THEN** 列定义 SHALL 从独立的 constants/target-table-columns.tsx 导入，不在组件中重复定义
|