Trae是什么？
Trae是字节跳动推出的一款免费的AI集成的开发环境，集成了Claude3.5与GPT-4o等主流AI模型，提供AI问答、智能代码生成、智能代码补全，多模态输入等功能。支持界面全中文化，为中文开发者提供了高效的开发体验，关键还免费。
下载地址：Trae - Ship Faster with Trae
目录
扫描二维码关注公众号，回复：
17572308 查看本文章
1. Trae--模式
- “Chat”模式：进行聊天，有两大模型可选，会基于我们描述的需求，解释/修改/编写/代码，从代码中检测出一些常见错误。
- Builder模式：快速从零开始构建项目代码，给出准确需求
1.1.chat模式
输入框：
代码操作：
- 复制
- 插到光标所在处
- 添加到新文件，它会帮你创建一个文件并写入
- 应用到相应文件，它会将代码应用到相应的文件
上下文索引：
1.2.Builder模式
Builder模式可以从0帮你构建一个完整的项目，自动编写代码，在生成的过程中，它也会向你询问一些 意见，比如它生成了一行命令它会询问你“是否需要运行这行命令？”，你只需要点击即可
接下来它会自动帮你创建文件，一步一步的完成编写代码、创建文件等操作，在这过程中可能需要你运行它给出的命令，你只需点击运行即可，如果在运行命令的过程中出现任何报错它也会自动帮你修复
2.Trae--实战
接下来，在了解完Trae如何使用之后，我们现在将Trae运用到实际项目当中，真实体验一下Trae在项目中的效果，我们会使用Trae开发一个ChatBot，在这过程中我们会借助Trae的能力进行AI自动编写代码、Bug修复、描述问题、同时我们还会想它获取意见（比如结合项目应该使用什么XXX库）等等，帮助大家更好的了解Trae
## 角色
你是一位资深前端工程师，擅长使用 Vue 3 + Vite + TS + Tailwind CSS 开发现代 Web 应用。
## 核心需求
开发一个聊天页面，包含以下功能：
1. **布局**：
- 页面背景为白色，文字为黑色
- 使用 `main` 标签包裹内容，宽度在屏幕 >780px 时为 780px，否则为 100%
- `main` 标签有 20px 的横向内边距，高度为 100vh，内容超出时显示滚动条
2. **输入区域**：
- 底部固定定位，距离底部 20px
- 包含一个 `textarea` 输入框和一个发送按钮
- `textarea` 背景为白色，placeholder 为“你有什么要我帮助的吗？”
- 发送按钮为蓝色背景，使用 SVG 图标
- 输入区域整体有 1px 浅灰色边框，宽度为 100%（最大宽度为内容区域宽度）
3. **聊天列表**：
- 用户聊天气泡：蓝底白字，文字居右，宽度自适应内容
- AI 聊天气泡：白底黑字，1px 浅灰色边框，文字居左，宽度自适应内容
## 技术栈
- Vue 3 + Vite + pnpm
- Tailwind CSS（用于快速样式开发）
- 使用 SVG 图标（发送按钮）
## 输出要求
1. 使用 Tailwind CSS 实现样式
2. 确保布局和样式完全符合需求
