高效开发前端页面 —— 优化提示词工程

我在使用trae开发一个工单系统的时候,有一个页面比较复杂,为了更好的与trae交互,准确告诉他我的需求,以便做出我期望的页面。经过几轮对话,我选择并设计出以下提示词,投喂trae后,果然不负众望,一次性开发出符合我需要的前端代码,对我后续持续完善交互、代码优化等打下坚实基础,感觉效率直接飞起来~。下面提出优化后的提示词(具体内容还需要根据数据字段进一步描述),供同学们参考:

1. 事件单的字段列表

  • 事件标题:文本输入框,必填,最大长度50个字符
  • 事件描述:多行文本输入框,必填,最大长度500个字符
  • 优先级:下拉选择框,必填,选项包括:低、中、高、紧急
  • 事件类型:下拉选择框,必填,选项包括:硬件故障、软件问题、网络问题、其他
  • 设备类型:下拉选择框,选填,选项包括:PC、服务器、网络设备、其他
  • 设备编号:文本输入框,选填
  • 联系人:文本输入框,必填
  • 联系电话:文本输入框,必填,格式验证
  • 预计解决时间:日期时间选择器,选填
  • 附件:文件上传,选填,支持多文件上传

2. 业务逻辑和流程

  • 流程:用户创建事件单 → 系统自动分配给对应部门 → 工程师处理 → 解决后用户确认 → 事件关闭
  • 关联实体:事件单需要关联用户(创建人)、部门(负责部门)、工程师(处理人)
  • 业务规则:紧急事件需要在2小时内响应,高优先级事件需要在4小时内响应

3. 状态管理

  • 状态列表:新建、待分配、处理中、待确认、已解决、已关闭、已驳回
  • 状态流转:
    • 新建 → 待分配
    • 待分配 → 处理中(分配给工程师)
    • 处理中 → 待确认(工程师提交解决方案)
    • 待确认 → 已解决(用户确认)
    • 已解决 → 已关闭(系统自动或人工)
    • 任何状态 → 已驳回(不符合要求)

4. API 接口

  • 创建事件单:POST /api/event/create,请求参数:title, description, priority, type, contactName, contactPhone 等
  • 获取事件单列表:GET /api/event/list,请求参数:page, pageSize, status, priority 等
  • 更新事件单:PUT /api/event/update,请求参数:id, status, handlerId, solution 等
  • 上传附件:POST /api/event/upload,请求参数:eventId, file

5. 权限管理

  • 普通用户:只能创建和查看自己的事件单
  • 部门管理员:可以查看和处理本部门的事件单
  • 系统管理员:可以查看和处理所有事件单,以及进行系统配置

6. 特殊需求

  • 需要支持上传附件,每个事件单最多上传5个文件,每个文件不超过10MB
  • 需要支持添加评论,工程师和用户可以在事件处理过程中添加评论
  • 需要关联资产系统,选择设备时可以从资产系统中选择
  • 需要邮件通知功能,事件状态变更时通知相关人员

7. UI/UX 要求

  • 设计风格:与现有系统保持一致,使用Element UI组件
  • 布局:左侧为事件单列表,右侧为事件详情和操作区域
  • 响应式设计:支持PC端和移动端
  • 交互效果:表单验证、状态变更动画、操作确认对话框
3 个赞

不错收藏起来了

3 个赞