---
name: frontend-page
when: '新建页面, 前端页面, 新增组件, React组件, 页面开发, 前端模块, 表单页面, 列表页面'
scope:
  - frontend
products:
  - '*'
id: ka-artifact_template-frontend-page
asset_kind: artifact_template
lifecycle_status: active
authority: supporting
routes:
  - '*'
primary_triggers:
  - 新建页面
  - 前端页面
  - 新增组件
  - React组件
  - 页面开发
  - 前端模块
  - 表单页面
  - 列表页面
priority: P2
specificity: 3
version: 1.0.0
last_reviewed: '2026-05-22'
consumes: []
emits:
  - acceptance_report
secondary_triggers: []
negative_triggers: []
type: acceptance_template
status: active
---

## 验收项
- [AC-01] 组件有明确的 Props 类型定义，无 any 类型 (check: grep -c 'any\b' {file})
- [AC-02] API 调用封装在 service 层，不直接在组件中 fetch (check: grep -c 'fetch\|axios\.\|httpClient\.' {file})
- [AC-03] 表单有校验规则（必填/长度/格式） (check: grep -c 'required\|validator\|rules' {file})
- [AC-04] 列表页面有 loading 状态和空数据提示 (check: grep -c 'loading\|empty\|暂无数据\|skeleton' {file})
- [AC-05] 错误状态有用户友好提示，不直接展示技术错误信息 (check: grep -c 'message\.error\|notification\|Toast\|错误提示' {file})
- [AC-06] 分页列表使用服务端分页，无全量加载 (check: grep -c 'pagination\|pageSize\|current\|pageNum' {file})
- [AC-07] 无硬编码的 URL 或魔法字符串，API 路径使用常量管理 (check: grep -c "'/api/" {file})
- [AC-08] useEffect 依赖数组完整，无遗漏依赖警告 (check: grep -A1 'useEffect' {file} | grep -c '\[\]')
- [AC-09] 事件处理函数有类型注解 (check: grep -c 'React.MouseEvent\|React.ChangeEvent\|event:' {file})
- [AC-10] 生产代码无 console.log 调试输出 (check: grep -c 'console\.log' {file})
- [AC-11] 页面是否处理 loading/empty/error 三态 (check: grep -c 'loading\|empty\|error\|Spin\|Empty\|ErrorBoundary' {file})
- [AC-12] 接口调用是否有错误提示（toast/notification） (check: grep -c 'message\.error\|notification\.error\|Toast\|showError' {file})
- [AC-13] 表单是否有输入校验和错误提示 (check: grep -c 'form\.validate\|getFieldError\|validateFields\|help\|validateStatus' {file})
- [AC-14] 危险操作（删除/清空）是否有二次确认弹窗 (check: grep -c 'confirm\|Modal\.confirm\|popconfirm\|二次确认' {file})
- [AC-15] 列表页是否有分页（非一次性全量加载） (check: grep -c 'Pagination\|pagination\|onChange.*page\|onPageChange' {file})
- [AC-16] 是否支持响应式布局（移动端适配） (check: grep -c 'media\|responsive\|@media\|flex-wrap\|grid' {file})
- [AC-17] 图片是否有懒加载（大量图片场景） (check: grep -c 'lazy\|LazyLoad\|loading="lazy"\|IntersectionObserver' {file})
- [AC-18] 是否有无障碍支持（键盘导航、颜色对比度） (check: grep -c 'aria-\|role=\|tabIndex\|alt=\|htmlFor' {file})
