截图补充说明

📸 需要补充的截图

本文档列出了 SOP 文档中需要的截图及其拍摄要求。

客户创建 SOP 截图

1. customer-list-page.png

位置：customer-creation-e2e.md 第 36 行
用途：展示客户列表页面
拍摄要求： - 访问：http://localhost:3000/crm/customer - 确保登录成功 - 页面显示完整的客户列表表格 - 包含页面标题"客户" - 包含右上角的"创建客户"按钮 - 表格显示客户编号、名称、简称、电话等列

关键元素： - ✅ 左侧导航栏 - ✅ 页面标题 - ✅ 创建客户按钮（右上角） - ✅ 客户列表表格 - ✅ 分页控件

2. create-customer-dialog.png

位置：customer-creation-e2e.md 第 50 行
用途：展示客户创建对话框
拍摄要求： - 点击"创建客户"按钮后的弹出对话框 - 对话框标题显示"创建客户" - 显示所有表单字段： - 公司名称（必填） - 客户简称（必填） - 联系电话（必填） - 显示"创建"和"取消"按钮

关键元素： - ✅ 对话框标题 - ✅ 公司名称输入框 - ✅ 客户简称输入框 - ✅ 联系电话输入框 - ✅ 创建按钮 - ✅ 取消按钮

产品创建 SOP 截图

以下截图已存在，用于产品创建 SOP：

已有截图列表

  1. ✅ T1-step1-browser.png - 浏览器启动
  2. ✅ T1-step2-url.png - URL 输入
  3. ✅ T1-step3-login.png - 登录页面
  4. ✅ T1-step4-products.png - 产品列表页面
  5. ✅ T2-step1-create-button.png - 创建按钮
  6. ✅ T2-step2-product-tab.png - 产品标签页

🎯 截图拍摄步骤

方法 1：手动截图

  1. 启动 CRM 系统 bash cd /Users/hysios/Projects/crm/admin npm run dev

  2. 访问客户页面

  3. 打开浏览器访问 http://localhost:3000/crm/customer

  4. 登录系统

  5. 拍摄客户列表页面

  6. 确保页面完全加载
  7. 截图保存为 customer-list-page.png

  8. 移动到 app/docs/SOP/screenshots/ 目录

  9. 拍摄创建对话框

  10. 点击"创建客户"按钮
  11. 等待对话框完全显示
  12. 截图保存为 create-customer-dialog.png
  13. 移动到 app/docs/SOP/screenshots/ 目录

方法 2：使用浏览器工具自动截图

可以使用之前创建的浏览器工具来自动截图：

// 访问客户列表页
await browser.navigate('http://localhost:3000/crm/customer');
await browser.wait(2000);
await browser.screenshot('customer-list-page.png');

// 点击创建按钮
await browser.click('创建客户按钮');
await browser.wait(1000);
await browser.screenshot('create-customer-dialog.png');

方法 3：使用测试脚本

创建自动化测试脚本来截图：

# 运行 E2E 测试并自动截图
npm run test:e2e -- --screenshot

📋 截图检查清单

完成截图后，请确认：

  • [ ] customer-list-page.png 文件大小 > 0
  • [ ] create-customer-dialog.png 文件大小 > 0
  • [ ] 截图清晰，文字可读
  • [ ] 截图包含所有必要元素
  • [ ] 截图与文档描述匹配
  • [ ] 截图文件路径正确

🔗 相关文档

💡 提示

  1. 截图尺寸：建议使用 1920x1080 或更高分辨率
  2. 文件格式：PNG 格式，保证清晰度
  3. 命名规范：使用描述性的英文名称，用小写和连字符
  4. 隐私保护：确保截图中不包含敏感信息
  5. 版本控制：截图文件可以加入 Git 版本控制

🚀 快速操作

如果需要立即补充截图，执行以下步骤：

# 1. 确保服务运行
cd /Users/hysios/Projects/crm/admin
npm run dev

# 2. 访问页面
# 在浏览器中打开 http://localhost:3000/crm/customer

# 3. 截图并保存到 screenshots 目录
# 使用系统截图工具或浏览器开发者工具

注意：当前 customer-list-page.png 和 create-customer-dialog.png 文件已存在，但可能需要更新内容以确保与当前系统界面一致。