从实战开发中总结的前端页面开发提示词模板，涵盖布局说明、字段描述、业务流程、业务规则、异常处理和注意事项六大环节，对页面还原与落地做了针对性优化，并附设备告警处理完整示例。
前端页面开发提示词模板，整体描述分为6个环节，分别为布局说明、字段描述、业务流程、业务规则、异常处理和注意事项， 每个环节中不确定的可以标注说明。六个环节大部分是从实战开发中总结，对前端页面的还原和落地进行了针对性的优化。
模板
1. 布局说明
- 草图或设计稿：【文件或链接】
- 整体布局：【按从上到下、从左到右说明区域顺序】
- 区域 A：【所在位置】；使用【Table / Tree / Form 等】；包含【字段、节点或内容】；【操作】位于【位置】；在【条件】下显示。
- 区域 B：【所在位置】；使用【组件类型】；包含【字段、节点或内容】；【操作】位于【位置】；在【条件】下显示。
- 滚动与固定：【页面滚动、区域滚动、固定表头或操作列】
- 窄屏处理：【换行、隐藏、重排或局部横向滚动】
2. 字段描述
- 【B / Form】姓名（name）：类型为【string】，使用【输入框】，是否必填【否】，默认值【空】，支持【模糊查询】。
- Table：【列顺序、固定列、排序和分页】
- Tree：【节点标题、节点值、父子字段、选中和展开规则】
- Form：【字段顺序、控件、必填、默认值和校验】
- 通用格式：【日期格式、数值单位与精度、空值显示、枚举来源】
3. 业务流程
前置条件：【开始操作前需要满足的条件】
- 用户在【区域】执行【操作】，系统【响应及结果】。
- 用户填写或选择【字段名称（fieldName）】，系统【校验及结果】。
- 用户提交后，【数据或状态】更新为【结果】。
- 完成后页面【刷新、关闭、跳转或保留内容】。
4. 业务规则
- 状态流转：【当前状态】执行【操作】，满足【条件】后变为【处理后状态】。
- 条件规则：当【条件】满足时，系统应【处理】，结果为【结果】。
- 限制规则：当【限制条件】满足时，不得执行【操作】，并提示【文案】。
- 其他规则：【权限、数据范围、排序、分页或重复操作】
- 区域联动：【A 执行操作后，B 如何刷新、筛选、回填、重置或显隐】
5. 异常处理
- 提交失败：当【触发条件】时，提示【文案】，并【保留数据、回滚或允许重试】。
- 空数据：【展示及可执行操作】
- 加载失败：【提示及重试方式】
- 权限不足：【展示及处理方式】
- 数据冲突：【提示及刷新方式】
- 重复提交：【禁用或防重方式】
6. 注意事项
- 目标路由及目录：【路由、文件或目录】
- 接口及权限：【接口、类型文件和权限标识】
- 修改范围：【允许和禁止修改的内容】
- 实现要求：【需要复用的组件、特殊交互或性能要求】
- 项目约束：Vue 3、TypeScript、Vite、Ant Design Vue 4，遵循现有代码结构和样式方案。
- 验证要求：【业务流程、异常场景、TypeScript、Lint 和构建】
- 待确认项：【没有填写“无”】
示例：设备告警处理
1. 布局说明
- 草图：
设备告警处理页草图.jpg。 - 整体布局：A、B、C 自上而下排列，D 从右侧打开。
- 区域 A：位于页面顶部，使用 Statistic，显示待处理数量。
- 区域 B：位于 A 下方，使用 Form，包含状态和设备名称，查询和重置位于右侧。
- 区域 C：位于 B 下方，使用 Table，显示告警列表，查看操作固定在右侧。
- 区域 D：位于页面右侧，使用 Descriptions 和 Form，显示告警详情及处理字段，提交和关闭位于底部。
- 滚动与固定：C 的操作列固定并支持内部滚动；D 的内容区域滚动。
2. 字段描述
- 【B / Form】处理状态（status）：类型为 string[]，使用多选框，非必填，默认选择 pending、handling。
- 【B / Form】设备名称（deviceName）：类型为 string，使用输入框，非必填，支持模糊查询。
- 【C / Table】告警编号（alarmNo）：类型为 string，完整展示并支持复制。
- 【C / Table】告警内容（alarmContent）：类型为 string，最多显示两行。
- 【D / Form】处理说明（handleRemark）：类型为 string，使用文本域，必填，最多 500 字。
- 【D / Form】处理结果（handleResult）：类型为 string，使用单选框，必填，可选 recovered、repair_required。
- 通用格式：空值显示“--”，枚举来源于接口。
3. 业务流程
- 页面默认加载待处理告警。
- 在 C 点击“查看”，打开 D。
- 确认告警后，状态更新为处理中（handling）。
- 在 D 提交处理结果并关闭告警，状态更新为已关闭（closed）。
4. 业务规则
- 状态流转：待确认（pending）确认后变为处理中（handling）；提交结果后变为待关闭（waiting_close）；关闭后变为已关闭（closed）。
- 同一告警只能确认一次，重复确认时终止操作并刷新数据。
- 只有当前处理人可以提交处理结果。
- 已关闭告警只能查看。
- 区域联动：B 查询后刷新 C；C 查看后打开 D；D 提交后同步刷新 A、C、D。
5. 异常处理
- 查询失败：提示“告警加载失败”，保留查询条件并允许重新加载。
- 重复确认：提示“该告警已被其他人员确认”，终止操作并刷新数据。
- 提交失败：显示接口错误信息，保留录入内容并允许重试。
- 空数据：提供重置操作；权限不足：隐藏列表；请求处理中：禁用提交按钮。
6. 注意事项
- 目标路由及目录：
/monitor/alarm、src/views/monitor/alarm。 - 复用现有表格、权限和请求封装，不修改公共布局。
- 验证状态流转、异常场景、TypeScript、Lint 和构建。
- 接口定义参考已有功能，暂未实现的内容使用 TODO 标记。
- 待确认：接口定义和权限编码。
注意每个环节的描述信息一定要准确严谨！
评论交流
支持作者