# Trae_webfront

**Repository Path**: pibeibei/trae_webfront

## Basic Information

- **Project Name**: Trae_webfront
- **Description**: webfrontdemo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-10
- **Last Updated**: 2025-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Trae AI 前端项目

这是 Trae AI 项目的前端部分，基于 Vue 3 + Vite 构建的现代化 Web 应用，提供了智能聊天、信息管理看板和模板系统等功能模块。

## 技术栈

- **Vue 3**：使用 Composition API 和 `<script setup>` 语法
- **Vite**：下一代前端构建工具，提供极速的开发体验
- **Element Plus**：基于 Vue 3 的组件库，提供丰富的 UI 组件
- **Vue Router**：官方路由管理器，实现 SPA 导航
- **Pinia**：新一代状态管理工具，支持数据持久化
- **Fetch API**：原生网络请求接口，实现前后端通信

## 环境要求

- Node.js >= 18.0.0（如果是 Node.js 16.x 版本请先升级）
- npm >= 7.0.0

## 快速开始

### 1. 克隆项目
```bash
git clone https://gitee.com/pibeibei/trae_webfront
cd trae_webfront
```

### 2. 安装依赖
```bash
npm install
```

### 3. 启动开发服务器
```bash
npm run dev
```
启动后访问：http://localhost:5173

### 4. 构建生产版本
```bash
npm run build
```

## 项目结构
```
trae_webfront/
├── public/             # 静态资源
├── src/
│   ├── assets/         # 项目资源文件
│   ├── components/     # 公共组件
│   ├── router/         # 路由配置
│   ├── stores/         # Pinia 状态管理
│   ├── styles/         # 全局样式
│   ├── utils/          # 工具函数
│   ├── views/          # 页面组件
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── .gitignore          # Git 忽略文件
├── index.html          # HTML 模板
├── package.json        # 项目依赖
├── vite.config.js      # Vite 配置
└── README.md           # 项目说明
```

## 功能模块

### 1. 聊天系统（ChatView）
- 支持文本和图片消息的发送与接收
- 实时消息同步和历史记录查看
- 消息选择功能，支持批量操作
- 图片消息预览功能
- 消息内容自动解析和格式化

### 2. 看板系统（KanbanView）
- 展示从聊天中选择的重要信息
- 支持多种消息类型的展示（文本、图片）
- 多选模式，支持批量操作
- 支持将选中内容转发至模板系统
- 数据持久化存储
- 分类和过滤功能

### 3. 模板系统（TemplateView）
- 模板创建和编辑功能
- 支持从看板导入内容
- 实时预览功能
- 模板管理和组织

## API 接口

### 消息相关接口
```javascript
// 获取消息列表（包含图片）
GET /feishu/get_messages_with_image

// 响应格式
{
  "messages": [
    {
      "msg_type": "text|image",
      "message_content": { ... },
      "timestamp": "..."
    }
  ]
}
```

## 开发指南

### 1. 代码规范
- 使用 ESLint 进行代码检查
- 遵循 Vue 3 组件编写规范
- 使用 TypeScript 类型注解（可选）

### 2. 组件开发
- 优先使用 Composition API
- 组件命名采用 PascalCase
- 页面组件放置在 views 目录
- 通用组件放置在 components 目录

### 3. 状态管理
- 使用 Pinia 进行状态管理
- 按功能模块划分 store
- 支持持久化存储的数据需实现序列化

## Git 使用指南


### 1. 代码提交流程
```bash
# 查看文件状态
git status

# 添加所有改动到暂存区
git add .

# 提交改动
git commit -m "提交说明"

# 推送到远程仓库
git push origin <分支名>
```

### 2. 分支管理
```bash
# 创建并切换到新分支
git checkout -b <分支名>

# 切换分支
git checkout <分支名>

# 查看所有分支
git branch

# 合并分支
git merge <分支名>
```

### 3. 常用操作
```bash
# 拉取远程更新
git pull origin <分支名>

# 查看提交历史
git log

# 撤销未提交的修改
git checkout -- <文件名>

# 撤销暂存区的修改
git reset HEAD <文件名>
```

### 4. 最佳实践
- 经常提交代码，保持提交粒度适中
- 编写清晰的提交信息
- 使用 .gitignore 忽略不需要版本控制的文件
- 在开发新功能时创建新的分支
- 定期同步主分支的更新

## 贡献指南

1. Fork 本仓库
2. 创建特性分支：`git checkout -b feature/AmazingFeature`
3. 提交改动：`git commit -m 'Add some AmazingFeature'`
4. 推送分支：`git push origin feature/AmazingFeature`
5. 提交 Pull Request

## 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件