# 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`（含单测输出、手工验证记录）。