Skip to content

PAGES_GUIDE.md

Latest commit

 

History

History
244 lines (187 loc) · 5.16 KB

PAGES_GUIDE.md

File metadata and controls

244 lines (187 loc) · 5.16 KB

🎉 完整页面系统已创建！

📋 可用页面

1. 登录页面

地址: http://localhost:5001/

功能:

  • 用户名密码登录
  • 错误提示
  • 自动跳转到仪表盘
  • 测试账号自动填充（admin/admin123）

2. 仪表盘页面

地址: http://localhost:5001/dashboard.html

功能:

  • 显示统计概览（总任务数、启用任务、运行中、测试结果）
  • 导航菜单
  • 使用指南

3. 任务管理页面

地址: http://localhost:5001/tasks.html

功能:

  • ✅ 查看任务列表

    • 显示所有任务
    • 任务类型筛选（压力测试/质量测试）
    • 任务状态筛选（空闲/运行中/成功/失败）

  • ✅ 任务操作

    • 查看详情（新增）
    • 编辑任务
    • 启用/禁用任务
    • 执行任务（执行后自动跳转到详情页）
    • 停止任务
    • 删除任务

  • ✅ 任务信息

    • 任务ID、名称、类型
    • 调度方式
    • 状态
    • 最后执行时间

4. 任务详情页面（新增）

地址: http://localhost:5001/task-detail.html?id={任务ID}

功能:

  • ✅ 任务基本信息

    • 任务名称、类型
    • 调度方式
    • 启用状态
    • 创建时间
    • 最后执行时间
    • 下次执行时间

  • ✅ 实时状态监控

    • 状态指示器（空闲/运行中/成功/失败）
    • 自动刷新功能（运行中时自动开启）
    • 手动刷新按钮

  • ✅ 配置信息展示

    • 压力测试：API URL、模型、并发数、请求数
    • 质量测试：API URL、Audit 路径

  • ✅ 执行历史

    • 显示最近20条执行记录
    • 压力测试：成功率、平均延迟、QPS
    • 质量测试：总分、通过率
    • 查看详细结果

  • ✅ 快捷操作

    • 编辑任务
    • 执行任务
    • 停止任务
    • 删除任务
    • 返回列表

5. 编辑任务页面

地址: http://localhost:5001/edit-task.html?id={任务ID}

功能:

  • ✅ 预填充现有任务数据
  • ✅ 修改任务名称
  • ✅ 修改任务配置
    • 压力测试：URL、API Key、Model、并发数、请求数
    • 质量测试：URL、API Key、Audit 路径
  • ✅ 修改调度设置
    • 手动执行
    • Cron 表达式
    • 固定间隔
  • ✅ 设置时间范围
    • 开始时间
    • 结束时间
  • ✅ 启用/禁用任务
  • ✅ 保存修改

注意: 任务类型不可修改

6. 创建任务页面

地址: http://localhost:5001/create-task.html

功能:

  • ✅ 基本信息

    • 任务名称
    • 任务类型选择（压力测试/质量测试）

  • ✅ 压力测试配置

    • API URL
    • API Key
    • 模型名称
    • 并发数
    • 请求数

  • ✅ 质量测试配置

    • API URL
    • API Key
    • Audit 路径

  • ✅ 调度设置

    • 手动执行
    • Cron 表达式
    • 固定间隔

  • ✅ 其他选项

    • 立即启用

7. 统计信息页面

地址: http://localhost:5001/statistics.html

功能:

  • ✅ 统计卡片

    • 总任务数
    • 启用任务
    • 运行中任务
    • 压力测试结果数
    • 质量测试结果数

  • ✅ 任务状态分布

    • 空闲/运行中/成功/失败
    • 数量和占比
    • 可视化进度条

  • ✅ 任务类型分布

    • 压力测试/质量测试
    • 数量和占比
    • 可视化进度条

  • ✅ 最近活动

    • 最近10条任务执行记录
    • 显示任务名称、类型、状态、执行时间

🎨 页面特性

统一设计风格

  • 渐变色主题（紫色系）
  • 卡片式布局
  • 响应式设计
  • 阴影和圆角效果

导航系统

  • 固定顶部导航栏
  • 统一的导航菜单
  • 当前页面高亮显示
  • 用户信息和登出按钮

交互体验

  • 表单验证
  • 错误提示
  • 成功提示
  • 确认对话框
  • 加载状态

🚀 使用流程

1. 登录

访问 http://localhost:5001，使用 admin/admin123 登录

2. 查看仪表盘

登录后自动跳转到仪表盘，查看统计概览

3. 创建任务

点击"创建任务"，填写任务信息并提交

4. 管理任务

在"任务管理"页面查看、执行、停止或删除任务

5. 查看统计

在"统计信息"页面查看详细的数据分析

📊 页面导航

登录页面 (/)
    ↓
仪表盘 (/dashboard.html)
    ├─ 任务管理 (/tasks.html)
    │   ├─ 任务详情 (/task-detail.html?id={ID})
    │   └─ 编辑任务 (/edit-task.html?id={ID})
    ├─ 创建任务 (/create-task.html)
    └─ 统计信息 (/statistics.html)

🎯 快速测试

  1. 登录: http://localhost:5001
  2. 创建任务: http://localhost:5001/create-task.html
  3. 查看任务: http://localhost:5001/tasks.html
  4. 编辑任务: 在任务列表点击"编辑"按钮
  5. 查看统计: http://localhost:5001/statistics.html

✨ 所有页面功能完整！

  • ✅ 登录页面
  • ✅ 仪表盘页面
  • ✅ 任务管理页面（查看、详情、编辑、执行、停止、删除）
  • ✅ 任务详情页面（实时监控、执行历史、快捷操作）
  • ✅ 任务编辑页面（修改任务配置）
  • ✅ 创建任务页面（压力测试、质量测试）
  • ✅ 统计信息页面（数据分析、可视化）

立即访问 http://localhost:5001 开始使用！ 🎊