Skip to content

Home

Jump to bottom
Acai edited this page Jan 8, 2026 · 1 revision

Welcome to the Automation_Platform wiki! 需求文档&规划

📊 首页（仪表盘）功能分析

整体结构

首页是一个实时数据仪表盘，展示自动化测试平台的核心指标和执行概览。

首页布局
├── 页面标题和控制区
├── 4 个关键指标卡片（StatsCards）
├── 两个数据可视化图表
│   ├── 今日执行统计（甜甜圈图）
│   └── 历史趋势图（折线/柱状图）
└── 最近测试运行表格（RecentTests）

1️⃣ 页面标题和控制区 Home.tsx

功能：

  • 标题：显示"仪表盘"和"自动化测试数据概览"
  • 时间范围选择器：下拉菜单切换
    • 📅 近 7 天
    • 📅 近 30 天
    • 📅 近 90 天
  • 执行测试按钮：快速启动测试执行任务

实现特点：

  • 响应式设计（移动端转为竖排）
  • 自定义下拉菜单样式，带 Chevron 图标

2️⃣ 关键指标卡片 (StatsCards)

四大核心指标：

1️⃣ 自动化用例总数

  • 图标：Terminal（蓝色）
  • 值来源：totalCases
  • 点击操作：导航到 /cases 页面
  • 说明：统计项目中已创建的自动化用例总数，包含所有状态的用例

2️⃣ 今日执行总次数

  • 图标：CheckCircle（主色绿色）
  • 值来源：todayRuns
  • 说明：显示今天内完成的所有测试执行次数，用于评估团队工作量

3️⃣ 今日成功率%

  • 图标：AlertCircle（动态颜色）
    • ✅ 成功率 ≥ 80% → 绿色显示
    • ⚠️ 成功率 < 80% → 红色警示
  • 值来源：todaySuccessRate
  • 说明：基于今日完成的测试执行计算，快速识别问题

4️⃣ 当前运行中任务

  • 图标：Timer（警告色）
  • 值来源：runningTasks
  • 点击操作：导航到 /tasks 页面
  • 说明：当前正在执行或调度中的任务数，监控并发执行情况

共同特性：

  • ✅ 每 30 秒自动刷新一次数据
  • ✅ 数据加载时显示转圈菲动画
  • ✅ 悬浮提示按钮 (?) 提供详细说明
  • ✅ 趋势指标（可选）显示上升/下降
  • ✅ 支持深色/浅色模式

3️⃣ 今日执行统计（甜甜圈图）TodayExecution.tsx

功能：

显示今天内的测试用例执行结果分布

可视化元素：

甜甜圈图表

  • 🟢 成功（绿色）- 成功执行的用例百分比
  • 🔴 失败（红色）- 失败执行的用例百分比
  • 🟡 跳过（黄色）- 跳过的用例百分比

中心显示

  • 大数字：当日执行用例总数
  • 标签："测试用例"

下方图例

成功 XX%  |  失败 XX%  |  跳过 XX%

数据更新：

  • 自动刷新间隔：30 秒
  • 支持渐进式加载

4️⃣ 历史趋势图 (TrendChart) TrendChart.tsx

核心功能：

展示选定时间范围内的成功率趋势，采用 T-1 数据口径（不显示当天数据）

时间范围

时间范围 显示天数 说明
7d 7天 短期稳定性
30d 30天 月度趋势
90d 90天 季度趋势

两种图表类型（可切换）

1️⃣ 折线图 (Line Chart)

  • 平滑曲线显示成功率变化
  • 点击点位显示详细数据
  • 适合看趋势走势

2️⃣ 柱状图 (Bar Chart)

  • 每日成功率为一个柱子
  • 柱高表示成功率高低
  • 适合对比分析

交互功能

图表切换按钮

[🔄 Line Icon] [📊 Bar Icon]  ← 可点击切换

自定义 Tooltip

鼠标悬浮显示详细信息：

2026-01-04
─────────────────
执行用例总数: 150
成功用例数:  132 ✅
失败用例数:  18  ❌
成功率:      88.0% 🎯

X轴日期显示

  • 7 天：显示所有日期（月-日）
  • 30 天：显示主要日期（每隔几天）
  • 90 天：动态计算，防止日期重叠

Y轴

  • 范围：0-100%
  • 每 20% 显示一条网格线

统计摘要（图表下方）

显示三个关键指标：

┌─────────────────┬──────────────┬──────────────┐
│  平均成功率      │  总执行次数   │  总失败次数  │
│   87.5%         │     4,230    │     520      │
└─────────────────┴──────────────┴──────────────┘

错误处理

  • ❌ 数据加载失败时显示错误信息 + 重试按钮
  • ⏳ 数据为空时显示"暂无数据"
  • ⚙️ 加载中显示动画

5️⃣ 最近测试运行 (RecentTests) RecentTests.tsx

功能：

展示最近 10 条的测试执行记录，实时更新

表格列

列名 说明 显示内容
状态 执行状态 彩色徽章（等待/运行/成功/失败/取消）
计划名称 任务/测试套件名称 字符串
耗时 执行时长 秒数或分钟（如 2m 34s）
执行者 运行人 头像 + 用户名
时间 相对时间 相对显示（刚刚/5分钟前/昨天/日期）
操作 更多操作 三点菜单（当前未实装）

状态标识

状态徽章设计

◉ 等待中     ← 灰色
◉ 运行中     ← 蓝色 (闪烁效果)
◉ 成功       ← 绿色
◉ 失败       ← 红色
◉ 已取消     ← 灰色

颜色配置

  • 等待中：灰色（#8B8B8B）
  • 运行中：蓝色（#3B82F6）- 带脉冲动画
  • 成功：绿色（#39E079）
  • 失败：红色（#FA5538）
  • 已取消：灰色

执行者头像

设计

  • 循环使用 8 种背景颜色
  • 显示用户名首字母或首两个字
    • 中文：取前 2 个字
    • 英文：取首字母，多个名字取首字母组合
  • 若无执行者显示"系统"

交互效果

  • 行 Hover：背景变浅（暗色模式下加亮）
  • 查看所有报告链接：页面右上角，导航到 /reports

数据刷新

  • 首次加载时获取数据
  • 自动刷新间隔：30 秒

📈 数据来源

API 接口调用

组件 API 方法 用途
StatsCards dashboardApi.getStats() 获取 4 个核心指标
TodayExecution dashboardApi.getTodayExecution() 获取今日执行统计
TrendChart dashboardApi.getTrend(days) 获取历史趋势数据
RecentTests dashboardApi.getRecentRuns(10) 获取最近 10 条运行记录

数据模型

// 核心指标
interface DashboardStats {
  totalCases: number;          // 用例总数
  todayRuns: number;           // 今日执行次数
  todaySuccessRate: number | null; // 今日成功率（%）
  runningTasks: number;        // 运行中任务数
}

// 今日执行
interface TodayExecutionData {
  total: number;      // 执行总数
  passed: number;     // 成功数
  failed: number;     // 失败数
  skipped: number;    // 跳过数
}

// 趋势数据
interface DailySummary {
  date: string;              // 日期（YYYY-MM-DD）
  totalExecutions: number;   // 执行次数
  passedCases: number;       // 成功数
  failedCases: number;       // 失败数
  skippedCases: number;      // 跳过数
  successRate: number;       // 成功率（%）
}

// 最近运行
interface RecentRun {
  id: number;
  suiteName: string;         // 测试套件名称
  status: TestStatus;        // 状态
  duration: number | null;   // 执行时长（秒）
  startTime: string;         // 开始时间
  executedBy: string | null; // 执行人
}

🎨 设计特点

响应式布局

  • 移动端（≤768px）：单列或 2 列
  • 平板（768-1024px）：2-4 列
  • 桌面（≥1024px）：完整 4 列 + 3 列图表

暗色模式支持

  • ✅ 所有组件都支持 dark: 类
  • ✅ 颜色对比度符合 WCAG AA 标准
  • ✅ 文本清晰可读

性能优化

  • ✅ 使用 useMemo 缓存计算结果
  • ✅ 自动刷新间隔 30 秒（可调整）
  • ✅ 图表组件使用 Recharts（轻量化）

无障碍支持

  • ✅ 语义化 HTML
  • ✅ 按钮和链接有 ARIA 标签
  • ✅ 颜色不是唯一的信息表达方式

🔄 自动更新机制

所有数据每 30 秒自动刷新一次：

useEffect(() => {
  fetchData();
  const interval = setInterval(fetchData, 30000); // 30秒
  return () => clearInterval(interval); // 清理
}, []);

📱 用户交互流程

用户访问首页
    ↓
[1] 加载四个指标卡片 (StatsCards)
    ├→ 可点击导航到 /cases
    └→ 可点击导航到 /tasks
    ↓
[2] 加载今日执行图表 (TodayExecution)
    └→ 显示甜甜圈图 + 百分比分布
    ↓
[3] 加载趋势图 (TrendChart)
    ├→ 选择时间范围 (7d/30d/90d)
    ├→ 切换图表类型 (折线/柱状)
    └→ 悬浮显示详细数据
    ↓
[4] 加载最近运行记录 (RecentTests)
    ├→ 可点击"查看所有报告" → /reports
    └→ 显示状态、执行者、时间等信息
    ↓
[每 30 秒] 自动刷新所有数据

💡 建议和潜在改进

建议 优先级 说明
添加"今日对比昨日"数据 中 显示环比/同比增长
支持自定义时间范围 中 不限于 7/30/90 天
导出报告功能 低 导出为 PDF/Excel
告警设置 高 成功率过低时发送通知
实时推送 高 WebSocket 实时更新，无需轮询
仪表盘个性化 低 允许用户自定义显示内容

Clone this wiki locally