前端页面开发
工作目标
在现有前端工程中,从页面需求到可验证实现完成当前明确范围内的业务页面。优先复用项目已有的组件、布局、路由、请求和样式能力;即使没有可直接参考的业务页面,也先遵循已发现的工程约定。
开始前
收到页面开发需求时,不要立即编码。先从仓库获取下列事实:
- 页面目录、入口和路由配置,以及权限或菜单关联方式;
- 已使用的 UI 组件库、页面布局和可复用业务组件;
- 请求封装、接口类型、错误处理方式及已有相关 API;
- 样式方案、主题或设计规范,以及相近页面的状态呈现方式;
- 当前任务相关的测试、lint、TypeScript 和 build 命令。
只询问无法从项目或需求中确认、且会影响功能或验收的事项。重点确认业务目标、页面用途、展示信息、用户操作、数据来源、接口契约、权限边界和验收条件;说明必要的默认假设。
先给出最小可行方案
在编码前,简要输出:
- 页面区域划分和主要组件;
- 页面状态,包括需要的加载、空数据和错误状态;
- 用户交互流程与数据流;
- 涉及的路由和 API,或尚待确认的契约;
- 预计新增或修改的文件及各自职责;
- 不属于本次需求的事项。
方案应基于已检查到的项目结构,采用满足当前验收的最小改动。不要为未知后续需求预先增加模块、通用抽象、新依赖、缓存、轮询、状态机、配置开关或兼容层。
实施顺序
按以下顺序推进,并在每一步保留项目已有约定:
- 明确需求和验收条件,完成页面结构设计;
- 使用静态 UI 或局部 Mock 数据搭建页面,先验证信息层级与布局;
- 根据反馈完成页面视觉调整;
- 实现已确认的用户交互;
- UI 确认后,使用项目现有请求封装和类型接入真实 API;
- 补齐当前页面必需的加载、空数据和错误状态;
- 运行与改动相称的 TypeScript、lint、测试或 build 验证。
在 UI 尚未确认前,不要把复杂接口编排耦合进页面。真实 API 的字段、参数、失败语义或权限规则不清楚时,应先定位现有契约或向用户澄清,不得臆造接口。
实现边界与验证
- 只实现当前明确需求;优先复用现有组件、布局和工程基础设施,不进行无关重构或顺手清理。
- 保持项目原有代码风格和数据流;新增文件仅在现有结构无法容纳当前页面时创建。
- 依据明确的用户行为和验收条件验证关键路径,并覆盖本次实现涉及的必要状态。
- 与本次任务无关的既有问题只报告,不擅自修复。最终说明实际改动、已执行验证、未执行检查及遗留风险。