Frontend Dev Workflow

Overview

按“先分析、后实现、再沉淀”的方式推进前端需求开发，确保开发阶段与联调阶段都有可追踪的产物和统一规范。

Required Inputs

用户需提供：

1. 需求文档路径：{需求目录}/{需求文档}.md
2. 原型图目录（可选）：{需求目录}/imgs/
3. 页面入口（如已知）：src/views/...

Execution Flow

1. Receive Requirement

1. 主动读取需求文档，不等待逐条解释。
2. 抽取功能点、交互约束、字段口径、接口清单。
3. 标注风险项：字段未定、接口未可用、交互描述冲突。

2. Analyze and Align

1. 输出功能拆解（简单/中等/复杂）。
2. 询问是否有历史页面可复用；有则提取复用点（组件、方法、交互模式）。
3. 设计页面目录结构与组件边界（入口、tabs、弹窗、详情卡片等）。
4. 列出关键技术决策并确认（状态管理、枚举位置、接口文件位置等）。

3. Build Delivery Skill File

1. 在项目 Skill 目录生成需求专属 Skill（命名 {需求简称}.md）。
2. 内容模板见 skill-template.md。
3. 若有参考模块，补充 {需求目录}/开发参考文档.md。

4. Implement with Standards

1. 字段名以后端接口为准，避免前端自造字段。
2. mock 数据集中管理，不散落组件。
3. 每个方法必须写注释，至少包含：
• 功能作用
• 使用场景（触发时机/调用入口）
4. 方法内复杂分支、兼容口径、mock 兜底需加行内备注。
5. 仅为 mock 服务的方法，注释首行加 [MOCK-SERVICE] 标签。

5. Stage Outputs

按阶段产出文档：

1. 开发阶段文档：{需求目录}/开发阶段参考文档.md
2. 联调阶段文档：{需求目录}/联调阶段参考文档.md

模板与内容清单见 stage-doc-template.md。

6. Switch to Integration Phase

当用户说“进入联调阶段”时：

1. 以联调文档为主上下文。
2. 逐一替换 TODO 接口。
3. 核对字段名一致性。
4. 执行 mock 清理与回归检查。

Behavior Rules

1. 复用优先：先读历史实现，再写新实现。
2. 变更即更新：用户确认变更后，同步更新需求文档与阶段文档。
3. 收尾自查：输出“已完成 / 未完成 / 已知风险”三段清单。
4. 不在模板中写死业务字段；以文档与接口为准。

Quick Commands

# 检索 mock 专用方法
rg "\[MOCK-SERVICE\]" src/views/{模块名}/

# 模块格式化
npx eslint --fix src/views/{模块名}/