lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
d873484938e65372cc0f35e57ff79c6953d46928
DiAL/openspec/specs/card-dashboard/spec.md
lanyuanxiaoyao d873484938 feat: 优化前端布局为流动式响应式设计 
- 移除 Dashboard max-width 限制，充分利用屏幕空间
- Summary Cards 和 Target Cards 改为 Flexbox wrap 流动布局
- 卡片固定宽度 280px，根据页面宽度自动调整单行数量
- 添加平滑过渡动画效果（0.3s ease）
- 移除移动端媒体查询覆盖规则
- 同步更新 card-dashboard 规格文档
2026-05-11 16:26:51 +08:00

3.7 KiB
Raw Blame History

Purpose

定义 Dashboard 的卡片式分组布局：按分组展示目标卡片、响应式网格、卡片内容结构和交互行为。

Requirements

Requirement: 分组卡片布局

Dashboard SHALL 按分组展示所有拨测目标，每个分组包含带统计的分组标题和固定宽度的卡片网格。

Scenario: 按分组展示目标

  • WHEN 用户打开 Dashboard 页面
  • THEN 页面 SHALL 按分组展示目标卡片，"默认分组" 排在最上面，其余分组按 YAML 配置顺序排列

Scenario: 分组标题带统计

  • WHEN 页面渲染某个分组
  • THEN 分组标题 SHALL 显示分组名称、该分组内目标总数、正常数和异常数，格式为 分组名 (N个, X UP / Y DOWN)

Scenario: "default" 分组显示名称

  • WHEN 分组名称为 "default"
  • THEN 分组标题 SHALL 显示 "默认分组"

Requirement: 响应式卡片网格

Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局，容器无最大宽度限制。

Scenario: Dashboard 容器占满宽度

  • WHEN 用户打开 Dashboard 页面
  • THEN Dashboard 容器 SHALL 占满浏览器宽度，不设置 max-width 限制

Scenario: 卡片固定宽度

  • WHEN 页面渲染卡片（包括 Summary Cards 和 Target Cards）
  • THEN 每个卡片 SHALL 固定宽度 280px，使用 flex-shrink: 0 防止收缩

Scenario: 流动式布局

  • WHEN 视口宽度变化
  • THEN 卡片网格 SHALL 使用 Flexbox wrap 自动换行，根据可用宽度调整单行卡片数量

Scenario: 卡片左对齐

  • WHEN 页面渲染卡片网格
  • THEN 卡片 SHALL 左对齐排列，右侧自然留白

Scenario: 统一间距

  • WHEN 页面渲染 Summary Cards 和 Target Cards
  • THEN 两种卡片网格 SHALL 使用相同的 gap 间距（16px）

Requirement: 目标卡片内容

每个目标卡片 SHALL 展示目标名称、当前状态、类型标签、状态条和迷你耗时趋势线。

Scenario: 卡片第一行内容

  • WHEN 卡片渲染
  • THEN 卡片第一行 SHALL 展示状态指示圆点（UP 绿色 / DOWN 红色）、目标名称和类型标签（HTTP / Command）

Scenario: 卡片状态指示圆点

  • WHEN 目标最近一次拨测 matched=true
  • THEN 卡片状态圆点 SHALL 显示为绿色
  • WHEN 目标最近一次拨测 matched=false
  • THEN 卡片状态圆点 SHALL 显示为红色

Scenario: 卡片状态条可视化

  • WHEN 卡片渲染且 recentSamples 数据可用
  • THEN 卡片 SHALL 展示一条 30 方块的状态条，每个采样点为一个色块：UP 显示绿色（#1fbf75），DOWN 显示红色（#e5484d），无数据显示灰色（#e2e8f0）

Scenario: 卡片迷你耗时趋势线

  • WHEN 卡片渲染且 recentSamples 中有 durationMs 数据
  • THEN 卡片 SHALL 展示基于 recharts 的迷你折线图（80x32px），展示最近 30 次检查的耗时趋势

Requirement: 卡片交互

卡片 SHALL 支持 hover 效果和点击打开模态框。

Scenario: 卡片 hover 效果

  • WHEN 鼠标悬停在卡片上
  • THEN 卡片 SHALL 显示上浮效果（阴影加深）

Scenario: 卡片点击打开详情

  • WHEN 用户点击某个目标卡片
  • THEN 系统 SHALL 打开该目标的详情模态框

Requirement: 平滑过渡动画

卡片 SHALL 具有平滑的交互过渡动画效果。

Scenario: 卡片悬停动画

  • WHEN 鼠标悬停在卡片上
  • THEN 卡片 SHALL 平滑过渡显示上浮效果（阴影加深、轻微上移），过渡时长 0.3s

Scenario: 布局变化过渡

  • WHEN 视口宽度变化导致卡片重新排列
  • THEN 卡片位置变化 SHALL 有平滑的过渡动画
View Git Blame Copy Permalink