50 lines
2.3 KiB
Markdown
50 lines
2.3 KiB
Markdown
# D-04 · 前端表单校验与分页补全（Voucher/Channel/StorefrontAdmin）
|
||
|
||
| 字段 | 值 |
|
||
|---|---|
|
||
| 项目 | dealerhub · `Desktop/gj/dealerhub/frontend`（+ 必要的后端支持） |
|
||
| 优先级 | P1 · M3 |
|
||
| 建议模型 | glm-5.3-flash（主）/ deepseek-v4.1-flash（复核） |
|
||
| 依赖 | 无（与 D-03 并行安全——不同文件域） |
|
||
| 预估 | 1.5-2 天 |
|
||
|
||
## 一、背景（为什么做）
|
||
|
||
dealerhub 迭代 5 自列"下一轮最高价值项"第 4 条：**Voucher、Channel、StorefrontAdmin 三个模块的前端缺完整表单校验与分页**（`backend/PROGRESS_AGI_ITERATION_5.md`）。后端能力已存在（channel/storefront 等 app），前端没跟上——业务员用起来会踩空。
|
||
|
||
## 二、目标（交付物）
|
||
|
||
1. **盘点三模块现状**：Voucher（凭证）、Channel（渠道/电商转单）、StorefrontAdmin（商城管理）各页面的表单字段与列表——标出缺校验的字段、缺分页的列表。
|
||
2. **表单校验补全**：
|
||
- 必填、类型、长度、数值范围（金额为正、数量为正整数等）
|
||
- 日期逻辑（起止日期先后）
|
||
- 提交前统一校验 + 错误提示对齐各页面现有 UI 惯例
|
||
3. **分页补全**：三个模块的列表接入现有分页组件（对齐项目已有列表页的写法与参数）。
|
||
4. **前端单测**：复用项目 `npm test`（node --test）模式，为校验规则与分页参数拼接写断言（对齐 `src/utils/transaction.js` 的既有测试风格）。
|
||
|
||
## 三、验收标准
|
||
|
||
- [ ] 三模块的每个表单：非法输入（空必填/负金额/超长文本）在前端被拦截并给出提示（附手工验证记录）
|
||
- [ ] 三个列表：分页可翻页、页大小可调、总数据一致（与后端 total 对上）
|
||
- [ ] 前端单测新增 ≥6 条且全绿（`npm test`）
|
||
- [ ] `npm run build` 通过
|
||
- [ ] 与既有页面交互风格一致（不引入新 UI 库）
|
||
- [ ] 后端不改（若发现缺接口则记 PROGRESS 遗留，不顺手改）
|
||
|
||
## 四、验收命令（参考）
|
||
|
||
```bash
|
||
cd frontend && npm test && npm run build
|
||
# 手工：三模块各构造一组非法输入 + 翻页验证
|
||
```
|
||
|
||
## 五、边界
|
||
|
||
- 不重做页面（只补校验与分页）
|
||
- 不引入新依赖（如校验库——用手写规则对齐项目现状）
|
||
- 不改后端契约
|
||
|
||
## 六、交接
|
||
|
||
写 `PROGRESS_D-04.md`（含单测输出、手工验证记录）。
|