前言
这是一份面向前端研发的质量保障清单。内容按 B端（后台管理） 、C端（用户侧产品） 、公共能力 三大类整理。
一、开发阶段：提交测试前自检
基础原则
- 本地验证通过后，再提测
- 严格按 PRD + 设计稿逐项核对
二、公共检查项（B/C 端通用）
1. PRD 功能核对
- 按需求文档逐条拆解为 checklist 执行。
- 显隐逻辑、权限逻辑、状态流转是否完整。
- 默认值、空态、异常态是否覆盖。
2. 页面展示检查
- 日期格式、数字格式、单位格式是否统一。
- 中英文标点、空格是否规范。
- 超长文本是否截断、省略、换行合理。
- 文字和视觉一致（标题、文本、placeholder、错误提示、弹窗标题、弹窗内容、按钮文案、日期格式、文字之间是否存在空格、表格的item、表格标题、后端给的枚举、excel名称）
- 间距、宽高、中英文符号
- 文字样式（font-size、font-weight、font-family、line-height）
- 对齐（左对齐、右对齐、居中对齐、多行对齐、左右对齐
3. 浏览器与控制台
- Console 无 error。
- Warning 可控且可解释。
- Network 请求成功率正常。
4. 边界与异常场景
- 重复点击是否防抖。
- 请求失败是否提示清晰。
- 超大文件、大图片、长文本是否可处理。
- 页面刷新后数据是否丢失。
5. 接口校验
- 参数类型正确（number/string/null）。
- 缺省值兼容。
- 接口异常兜底。
- 回显数据与保存数据一致。
三、B端专项检查（后台管理系统）
1. 表单类场景
基础能力
- 必填校验是否生效。
- 最大长度、最小值、最大值、小数位限制是否正确。
- 修改后是否自动清除错误提示。
- 联动项是否同步更新。
弹窗场景
- 新建/编辑标题是否正确。
- 点击 X 与取消按钮是否执行同一套重置逻辑。
- 再次打开弹窗是否残留上次数据。
- 长弹窗是否支持滚动定位到报错项。
保存逻辑
- 保存后列表是否刷新。
- 保存后回显是否一致。
- 批量操作后勾选状态是否清空。
- 查询 -> 回显 -> 编辑 -> 保存链路是否正常。
2. 表格类场景
- 表头文案是否正确。
- 筛选条件与列表数据是否一致。
- 分页查询后重新搜索是否回第一页。
- 固定列 + 横向滚动是否正常。
- 大屏分辨率是否错位。
- 导出 Excel 标题与页面一致。
3. 多模块联动
- 模块 A 新增/删除是否影响模块 B。
- 新旧系统逻辑是否一致。
- 相似功能是否统一体验。
- 顺序操作不同，结果是否一致（A→B / B→A）。
- 查看C端是否显示正常
四、C端专项检查（用户侧产品）
1. 视觉还原
- 圆角、描边、阴影是否准确。
- 字体、字号、字重是否符合设计规范。
- 图片是否拉伸变形。
- 海报/头图裁切是否合理。
2. 交互体验
- Disabled 态样式统一。
- 点击态、Loading 态、空态完整。
- 底部按钮是否考虑安全区。
- 标签宽度自适应，不挤压变形。
3. 多端一致性
- App/H5/小程序是否同步修改。
- 安卓/iOS 表现是否一致。
- 英文换行、数字展示是否规范。
五、重构专项检查
原则：重构不是重写，结果必须一致。
重点关注：
- 页面功能与旧版本一致。
- 接口字段透传一致。
- 历史 case 回归通过。
- 新逻辑不影响旧逻辑。
例如：
- 旧逻辑自动勾选场次；新逻辑限制最多选 3 个，需要验证是否冲突。
六、书写单元测试用例
- 联动
- 初始化场景
- 查看代码梳理逻辑
- 根据prd分析可能存在的逻辑
- 新逻辑看是否被旧逻辑包含，如果新的场景符合旧逻辑的条件，则需要执行旧的逻辑
- 请求时（穷尽可能的结果，模拟接口错误，看提示是否正确，跳转是否正确,跳转后再刷新是否正确，loading是否正常）
- 多场景回归一个逻辑
- 保存->查看->再保存->再查看
七、工程化建设
推荐持续建设内容
- ESLint 规则补充（如 setup 禁止 this）。
- 通用组件沉淀。
- 自测脚本自动化。
- Cursor / AI Pre-check 流程。
- 单元测试（C端优先级高于 B端）。
