cursor 前端cursor前端提示词工程
FANSEAcursor前端提示词工程
按以下流程来构建前端页面：
初始化页面布局
模板
【原型图片】+ 技术 + 布局情况（说详细，举例说明）+ 应用于PC/手机端
示例
【原型图片】
【prompt】
1
2
| 请根据提供的页面原型的截图，基于Vue2 + ElementPlus帮我制作 “小达智能体” 的页面，首先先完成页面的基本布局。 具体要求如下:
页面的顶部，包括三个导航栏：智能体、知识库、系统管理。点击导航栏，在导航栏下面要展示出对应的页面（可以使用vue路由），比如点击 "知识库"，核心展示区域就要展示知识库的页面.要求PC布局、样式精美
|
效果：
完成页内功能
模板
【原型图片】+ 页面设计思路 + 页面功能所需要用到的接口
示例1
【原型图片】
【prompt】
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| 请参考提供的页面原型的截图，按照以下要求完成导航栏知识库所展示的页面，要求样式精美
2.2知识库展示所有的知识库列表，每个知识库用圆角长方形展示，展示：知识库名称、描述、文档数、关联智能体数。点击进入知识库设置，知识库设置功能先定义好，暂时不用完成
2.1知识库页面定义一个新增知识库的按钮，新增窗口包含字段：name、description
调用后端可以参考以下接口：
- 本地环境基础URL: http://localhost:8080
1.查询智能体列表
- 请求方法: GET
- 请求路径: /knowledge/list/vo
- 请求参数: 无
- 响应示例:
{
"msg": "操作成功",
"code": 200,
"data": [
{
"name": "知识库1",
"description": "测试知识库",
"fileCount": 1,
"agentCount": 1
},
{
"name": "知识库2",
"description": "知识库2",
"fileCount": 0,
"agentCount": 0
}
]
}
2.新增智能体
知识库设置中的保存按钮参照以下接口：
- 本地环境基础URL: http://localhost:8080
- 请求方法: post
- 请求路径: /knowledge/add
- 请求参数:
* Body参数:
- name(字符串,必填)
- description(字符串,必填)
- 响应示例: {"msg":"操作成功","code":200,"data":null}
|
效果：
示例2
【原型图】
【prompt】
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| 文件列表的字段修改为：文件名称、文件大小、类型、状态、嵌入状态、操作
操作为每一个文档定义了两个按钮：文本嵌入、删除文件
注意：
- 文件大小后端上传的的单位为B需要前端转化为KB
- 状态：0-不可用、1-可用，定义为开关按钮
- 嵌入状态：0-未嵌入、1-失败，2-成功，美化图标
基于以下后端接口完成，基于知识库ID查询文件列表
3.1 文件嵌入
- 请求方法: POST
- 请求路径: /knowledge/file
- 请求参数:
* Query参数: fileId(整数,必填), knowledgeId(整数,可选)
- 响应示例: {"msg":"操作成功","code":200,"data":null}
2.3 删除文件
- 请求方法: DELETE
- 请求路径: /file/delete/{fileId}
- 请求参数: fileId(integer,整数)
- 响应示例: {"msg":"操作成功","code":200,"data":null}
2.2 上传文件到知识库
- 请求方法: POST
- 请求路径: /file/uploadToKnow/{knowledgeId}
- 请求参数:
* Path参数: knowledgeId(整数,必填)
* Body参数: file(二进制文件,必填)
- 响应示例:
* 成功: {"msg":"操作成功","code":200,"data":3}
* 失败: {"msg":"文件已存在!","code":500,"data":null}
3.5 查询知识库文档列表
- 请求方法: GET
- 请求路径: /knowledge/file/list
- 请求参数: knowledgeId(整数)
- 响应示例:
{
"msg":"操作成功",
"code":200,
"data":[
{
"id":3,
"fileName":"产品介绍.md",
"size":2567,
"status":1,
"type":"md",
"embeddingStatus":1,
"createTime":"2025-05-04T02:54:03.930+00:00",
"updateTime":"2025-05-04T02:56:15.045+00:00"
}
]
}
|
效果：
其他常用语句
