vscode-workbench/PLANNING/tasks/D-04-前端表单校验与分页.md

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 遗留，不顺手改）

四、验收命令（参考）

cd frontend && npm test && npm run build
# 手工：三模块各构造一组非法输入 + 翻页验证

五、边界

• 不重做页面（只补校验与分页）
• 不引入新依赖（如校验库——用手写规则对齐项目现状）
• 不改后端契约

六、交接

写 PROGRESS_D-04.md（含单测输出、手工验证记录）。