TraeWindows版本发布！！！
终于等到这一天！！！早就眼馋Trae很久了，Windows版本终于在众望所归的呼声中发布了！！ 我几乎是第一时间将其下载了下来 。在体验了一圈上手后，我有了一个大胆的想法——将一个小项目从项目搭建到功能实现全权交给AI。真的很有趣，书写足够详细的提示词，我只需要点一点执行按钮，所有的东西AI都会给我做好并“ 端上餐桌”。
项目规划
我想要实现一个AI在线生成表情包的网站 ，它要拥有至少三个页面，首页、后端登录页、后端管理页。
UI原型设计
- 首页是一个拥有标题栏，表情包生成模版列表，生成表情包的弹窗。标题栏是拥有白色半透明模糊背景的，字体颜色是蓝色加任意色组成的渐变色。表情包生成模版列表是一个，一行五列并自适应屏幕的宫格布局。列表项是卡片形式，内部拥有三个元素：封面图片、标题、提示词【限制两行】。生成表情包弹窗内部拥有五个元素：预览图片、提示词多行输入框、图片风格选择器、配图输入框，立即生成按钮。
- 后端登录页是一个居中的卡片，拥有标题、账号输入、密码输入、立即登录按钮。
- 后端管理页由上下两个部分组成，Top部分由四个输入框加一个提交按钮组成，用于新增提示词模版。Bottom部分是一个宫格列表，一行四列自适应屏幕宽度，用于展示提示词信息，内部拥有封面图片、标题文本、提示词文本、配图文本，以及两个操作按钮，删除和编辑。 ![[UI原型关系图.canvas|UI原型关系图]]
后端接口设计
我希望拥有三个接口：
- 一是提示词模板列表API：api/prompt，拥有增删查改功能。
- 二是提示词优化API：api/logo/prompt，调用扣子工作流API，仅拥有POST。
- 三是表情包生成API：api/logo，调用扣子工作流API，仅拥有POST。
技术选型
使用Nextjs加shadcnUI加扣子工作流API。 因为Nextjs作为全站框架，开发效率高 ，而shadcnUI框架设计高端大气且易于使用。扣子工作流API更是及响应速度快和极高的性价比于一身深受大家喜爱。
提示词编写
## 要求
【不要私自更改Shell命令，不要做提示词以外的事情。】
## 项目搭建
请你搭建一个在线生成表情包的网站，使用`npx shadcn@latest init`创建项目框架
## 安装并配置依赖
- zustand
- axios
- lucide-react
【shadcn中所有的组件必须通过`npx shadcn@latest add someComponent`引入后才可使用！！！】
【额外还需要一个依赖：`npm i class-variance-authority`】
【除此之外的任何依赖都别装】
## 前端
前端将会拥有三个页面：
- 首页--一个拥有标题栏还有表情包生成模板列表的页面，标题栏是拥有blur的白色透明背景，表情包生成模板列表是一个卡片形式的宫格列表，会根据屏幕尺寸自适应：【xl:grid-cols-5】，卡片内部有三个元素：封面图，标题，提示词内容【max-line-2】。点击卡片后会弹出一个dialog窗口，窗口内部有一个Image用于预览模板图片和生成产生的图片，还有两个输入框，提示词多文本输入，配文文本输入，以及一个立即生成按钮。点击按钮将会调用生成表情包的后端接口生成图片并将返回的图片显示出来：点击立即生成按钮后，要禁用按钮，在图片预览区域显示一个遮罩，正在努力生成中...的加载效果，还有秒数记录，生成结束后显示另一个遮罩，生成成功！！显示生成的图片，遮罩两秒后消失，按钮解禁。鼠标悬停图片预览区域会显示另一个下载遮罩，下载遮罩在生成期间禁止显示。点击下载遮罩后会立即下载图片：直接下载不要跳转。
- 登录页面--一个卡片形式的登录页面，拥有两个input，账号和密码，模拟登录即可，账号密码均为：admin，登录成功后跳转至admin后端管理页面。
- 后端管理页面--一个拥有标题栏，还有五个表单元素，一个模板列表的页面。结合API接口：/api/prompt可实现模板列表的增删改查。标题栏标题显示“后台管理”， 五个表单分别为图片链接、提示词、图片配文、提交按钮。列表为一行两个元素的宫格布局，通过接口获取数据进行渲染，列表项内部元素有图片，提示词以及图片配文的显示文本，还有两个按钮：编辑和删除，结合接口实现相应功能。
## 前后端API
- 需要实现一个API接口：/api/prompt，CURD形式的接口，使用fs对本地文件：/public/data.json进行操作从而实现增删查改。
- 需要实现一个API接口：/api/logo/prompt，POST即可，用于调用coze工作流API进行提示词优化并返回，使用axios作为请求库。
- 需要实现一个API接口：/api/logo，POST即可，用于接收/api/logo/prompt返回的提示词进行调用coze工作流API，从而实现表情包生成并返回图片地址，使用axios作为请求库。
前端设计稿
【请根据设计稿进行布局编写】
// 如何调用 coze 工作流 API：
const res = await axios.post("https://api.coze.cn/v1/workflow/run", {
workflow_id: '7470848116120879119',
parameters: {
input: processedPrompt
}
}, {
headers: {
"Authorization": "Bearer " + process.env.NEXT_PUBLIC_COZE_API_KEY,
"Content-Type": 'application/json'
}
})
项目时间安排表
| 阶段 | 时间 | 备注 | 负责人 |
|---|---|---|---|
| 需求分析与设计 | 第1天 | 完成需求文档和UI原型设计以及提示词编写 | shuang |
| 前端开发 | 第1-2天 | 完成前端用户界面和后端管理界面开发 | shuang |
| 后端开发 | 第2-3天 | 完成后端API接口和数据库设计 | shuang |
| AI集成 | 第4天 | 集成Trae-AI-IDE的AI生成服务 | shuang |
| 测试与优化 | 第4-5天 | 进行功能测试、性能测试和安全性测试 | shuang |
| 部署上线 | 第6天 | 将网站部署到服务器，正式上线 | shuang |
| 项目复盘汇总 | 第七天 | 将整个网站的实现过程进行梳理汇总，好记性不如烂笔头。 | shuang |
