已提供前后端代码路径 + 前端地址 → 直接开始
只提供了部分信息:
都没提供 → 先询问前后端代码路径,读完代码后再询问前端地址
访问前端页面时若需要登录:询问租户(如有)、用户名、密码,获取后登录再继续。
目标目录: <前端项目>/src/views/<模块路径>/
逐一阅读每个模块的:
index.vue:提取搜索字段、表格列、操作按钮(新增/编辑/删除/导出/提交审核等)、分页逻辑XxxForm.vue:提取所有表单字段(字段名、类型、是否必填、校验规则)、子表结构、多标签页detail.vue:提取展示字段、子表展示src/api/<模块>.ts:提取所有接口路径、请求参数、响应结构重点理解:
目标目录: <后端项目>/<模块目录>/
逐一阅读:
XxxDO.java:提取所有字段(字段名、类型、注解、注释)→ 核心表结构来源XxxController.java:提取所有接口路径、HTTP方法、参数XxxService.java / XxxServiceImpl.java:理解业务逻辑、状态流转、关联操作XxxBpmStatusListener.java(如有):理解审批流程、状态变更逻辑重点理解:
使用 agent-browser 逐一访问每个功能页面,截图保存到 screenshots/ 目录:
截图内容命名规范登录页00-login-page.png模块列表页NN-<模块>-list.png新增/编辑表单NN-<模块>-form.png表单多标签页(资质/服务等)NN-<模块>-form-<tab>.png详情页NN-<模块>-detail.png详情页子标签NN-<模块>-detail-<tab>.png
每个模块至少截:列表页 + 表单页 + 详情页。
在输出目录创建 notes/design_notes.md,按模块整理:
使用 Python python-docx 生成,参考脚本: scripts/build_design_doc.py
报告格式详见: references/doc-format.md
文档结构:
text
封面(系统名 + 模块名 + 生成时间,居中)
目录(Word TOC 域,1-3级,右键更新域)
1. 模块简介 ← Heading 1
模块范围、前端路由、后端接口前缀、代码位置
2. 功能模块详细设计 ← Heading 1
2.x 子模块名 ← Heading 2
2.x.1 功能描述与业务流程 ← Heading 3
功能说明段落
流程步骤列表(• 步骤1 → 步骤2 → ...)
2.x.2 页面截图 ← Heading 3
列表页截图 + 图注
表单页截图 + 图注(多标签页逐一截图)
详情页截图 + 图注
2.x.3 数据表结构 ← Heading 3
主表(7列表格)
子表1(7列表格)
子表2(7列表格)...
2.x.4 实现类 ← Heading 3
前端文件路径列表
后端文件路径列表
3. 总结说明 ← Heading 1
表结构7列格式(必须严格遵守): | 字段名 | 说明 | 类型 | 是否必填 | 默认值 | 约束 | 备注 |
先读代码,再看页面 — 代码是权威,页面是验证
表结构必须完整 — 主表+所有子表,一个不漏
流程描述要具体 — 不能只写"支持新增编辑删除",要写清楚每一步的触发条件和结果
截图要对应 — 每张截图放在对应模块的"页面截图"小节下,图注清晰
字段说明要准确 — 枚举值、关联关系、特殊约束都要在备注列说明清楚
输出目录结构: text
workspace/outputs/<模块>-design-doc-<日期>/
├── notes/design_notes.md
├── screenshots/
│ ├── 00-login-page.png
│ └── ...
└── <系统名>-<模块名>-设计文档-<日期>.docx