SOP-102 截图清单
本目录包含 SOP-102（创建产品标签工作流）的测试截图。
📸 截图列表
主流程截图
| 编号 | 文件名 | 说明 | 拍摄时机 | 状态 |
|---|---|---|---|---|
| 01 | sop-102-01-customer-list.png |
客户列表页面 | 登录后进入客户页面 | ⬜ 待拍摄 |
| 02 | sop-102-02-policy-label-column.png |
政策标签列和"+"按钮 | 滚动到政策标签列 | ⬜ 待拍摄 |
| 03 | sop-102-03-create-dialog.png |
创建政策标签对话框 | 点击"+"按钮后 | ⬜ 待拍摄 |
| 04 | sop-102-04-flow-created.png |
工作流创建成功对话框 | 提交表单后 | ⬜ 待拍摄 |
| 05 | sop-102-05-dept-approval-1.png |
第一级部门审批 | 直属领导审批界面 | ⬜ 待拍摄 |
| 06 | sop-102-06-dept-approval-higher.png |
上级部门审批 | 上级领导审批界面 | ⬜ 待拍摄 |
| 07 | sop-102-07-finance-approval-1.png |
第一位财务审批 | 财务1审批界面 | ⬜ 待拍摄 |
| 08 | sop-102-08-finance-approval-2.png |
第二位财务审批 | 财务2审批界面 | ⬜ 待拍摄 |
| 09 | sop-102-09-flow-completed.png |
工作流完成状态 | 所有审批完成后 | ⬜ 待拍摄 |
| 10 | sop-102-10-approval-history.png |
审批历史记录 | 工作流详情页 | ⬜ 待拍摄 |
| 11 | sop-102-11-policy-label-active.png |
政策标签生效显示 | 返回客户列表查看 | ⬜ 待拍摄 |
异常场景截图
| 编号 | 文件名 | 说明 | 拍摄时机 | 状态 |
|---|---|---|---|---|
| 12 | sop-102-12-approval-rejected.png |
审批拒绝界面 | 审批人点击拒绝后 | ⬜ 待拍摄 |
📝 拍摄指南
基本要求
- 分辨率：建议使用 1920x1080 或更高分辨率
- 格式：PNG 格式（保证清晰度）
- 内容：确保关键信息清晰可见
- 标注：必要时使用红框或箭头标注关键元素
拍摄步骤
截图 01：客户列表页面
- 访问
http://localhost:3000/crm/customer - 确保页面完全加载
- 截取完整的客户列表界面，包括顶部导航和表格
截图 02：政策标签列和"+"按钮
- 在客户列表中定位到"客户政策标签"列
- 确保"+"按钮清晰可见
- 可以用红框标注"+"按钮位置
截图 03：创建政策标签对话框
- 点击"+"按钮后
- 截取完整的对话框
- 确保所有表单字段可见（政策名称、折扣率、生效日期）
截图 04：工作流创建成功对话框
- 提交表单后立即截图
- 捕获成功提示和工作流对话框
- 记录显示的工作流 ID
截图 05-08：审批流程
- 切换到对应审批人账号
- 在工作流详情页截图
- 确保显示：
- 工作流基本信息
- 当前审批节点
- 审批操作按钮（批准/拒绝）
截图 09：工作流完成状态
- 所有审批完成后
- 工作流状态显示为"已完成"或"生效"
- 截取工作流详情页面
截图 10：审批历史记录
- 在工作流详情页
- 切换到"审批历史"或"审核历史"标签
- 确保显示完整的审批链路
截图 11：政策标签生效显示
- 返回客户列表页面
- 定位到原客户行的政策标签列
- 确保新创建的标签清晰显示
截图 12：审批拒绝界面
- 在审批环节点击"拒绝"
- 截取拒绝确认对话框或结果页面
- 确保显示拒绝理由
🛠️ 拍摄工具
macOS
# 截取选定区域
Command + Shift + 4
# 截取整个窗口
Command + Shift + 4，然后按空格键
# 截取全屏
Command + Shift + 3
Windows
# 截图工具
Windows + Shift + S
# 或使用 Snipping Tool
Linux
# 使用 gnome-screenshot
gnome-screenshot -a
# 或使用 flameshot
flameshot gui
Chrome DevTools 截图
- 打开 DevTools (F12)
- Cmd+Shift+P (Mac) 或 Ctrl+Shift+P (Windows/Linux)
- 输入 "Capture screenshot"
- 选择：
- Capture full size screenshot (完整页面)
- Capture screenshot (可视区域)
- Capture node screenshot (选中元素)
✅ 质量检查清单
拍摄完成后，请检查：
- [ ] 所有截图文件名正确
- [ ] 图片清晰，关键信息可见
- [ ] 没有包含敏感信息（密码、真实客户数据等）
- [ ] 图片大小适中（建议 < 500KB）
- [ ] 所有主流程截图已完成
- [ ] 至少有一个异常场景截图
📂 文件组织
screenshots/
├── README.md # 本文件
├── sop-102-01-customer-list.png # 客户列表
├── sop-102-02-policy-label-column.png # 政策标签列
├── sop-102-03-create-dialog.png # 创建对话框
├── sop-102-04-flow-created.png # 工作流创建成功
├── sop-102-05-dept-approval-1.png # 第一级审批
├── sop-102-06-dept-approval-higher.png # 上级审批
├── sop-102-07-finance-approval-1.png # 财务审批1
├── sop-102-08-finance-approval-2.png # 财务审批2
├── sop-102-09-flow-completed.png # 工作流完成
├── sop-102-10-approval-history.png # 审批历史
├── sop-102-11-policy-label-active.png # 标签生效
└── sop-102-12-approval-rejected.png # 审批拒绝
📌 注意事项
- 隐私保护：不要截取包含真实客户信息、个人数据或敏感信息的屏幕
- 测试数据：使用明显的测试数据（如带有 "测试"、"QA"、"Demo" 等标识）
- 时间戳：可以在截图中包含时间戳，便于追溯
- 版本控制：如果需要更新截图，建议保留旧版本备份
- 文件命名：严格按照上述命名规范，便于文档引用
🔄 更新记录
| 日期 | 操作 | 说明 |
|---|---|---|
| 2025-12-22 | 创建 | 初始版本，定义截图清单和拍摄指南 |
提示：可以使用浏览器自动化工具（如 Playwright、Puppeteer）来自动化截图过程。