# ai-agent-front

**Repository Path**: lanceluot/ai-agent-front

## Basic Information

- **Project Name**: ai-agent-front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-24
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI Agent Frontend

这是一个基于Vue 3的AI智能体应用前端项目，包含旅游大师和超级智能体两个主要功能模块。

## 功能特点

- 旅游大师：专业的旅游咨询和行程规划助手
- 超级智能体：能够处理各种复杂任务的AI助手
- 响应式设计：适配各种屏幕尺寸
- 实时对话：流畅的用户交互体验

## 技术栈

- Vue 3
- Vue Router
- Pinia
- Axios
- Express (后端)
- OpenAI API

## 项目设置

### 前端设置

1. 安装依赖
```bash
npm install
```

2. 启动开发服务器
```bash
npm run dev
```

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

### 后端设置

1. 进入server目录
```bash
cd server
```

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

3. 配置环境变量
```bash
cp .env.example .env
```
然后编辑.env文件，添加你的OpenAI API密钥。

4. 启动开发服务器
```bash
npm run dev
```

## 项目结构

```
.
├── src/                    # 前端源代码
│   ├── assets/            # 静态资源
│   ├── components/        # Vue组件
│   ├── router/            # 路由配置
│   ├── stores/            # Pinia状态管理
│   ├── views/             # 页面视图
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── server/                # 后端源代码
│   ├── index.js          # 服务器入口
│   └── package.json      # 后端依赖
└── package.json          # 前端依赖
```

## 使用说明

1. 访问旅游大师：
   - 点击导航栏中的"旅游大师"
   - 输入你的旅游相关问题
   - 获取专业的旅游建议和规划

2. 访问超级智能体：
   - 点击导航栏中的"超级智能体"
   - 输入你需要帮助的任务
   - 获取专业的解决方案

## 注意事项

- 确保已正确配置OpenAI API密钥
- 后端服务器默认运行在3000端口
- 前端开发服务器默认运行在5173端口

## 技术细节

### 组件架构

1. ChatInterface组件
   - 核心聊天界面组件
   - 处理消息发送、接收和显示
   - 支持Markdown渲染
   - 自动滚动到底部

2. ChatMessage组件
   - 单条消息渲染
   - 区分用户和AI消息样式
   - 支持Markdown解析
   - 显示头像和时间戳

3. 视图组件
   - TravelMaster.vue: 旅游大师功能入口
   - SuperAgent.vue: 超级智能体功能入口
   - 共用ChatInterface组件

### 状态管理

1. travelStore
   - 管理旅游大师相关状态
   - 消息列表、加载状态、错误处理

2. superAgentStore
   - 管理超级智能体相关状态
   - 消息列表、加载状态、错误处理
   - 使用EventSource连接后端

### API接口

1. 旅游大师接口
   - 路径: /api/chat
   - 方法: POST
   - 参数: { message: string }
   - 返回: AI回复(SSE流)

2. 超级智能体接口
   - 路径: /api/super-agent
   - 方法: POST
   - 参数: { message: string }
   - 返回: AI回复(SSE流)

3. 健康检查
   - 路径: /health
   - 方法: GET
   - 返回: { status: "ok" }

### 前后端通信

1. 前端使用EventSource连接后端
2. 后端当前实现为普通HTTP API(需调整为SSE)
3. 消息格式:
   ```json
   {
     "role": "user|assistant",
     "content": "消息内容",
     "timestamp": "ISO时间戳"
   }
   ```

### 优化建议

1. 后端实现SSE协议以匹配前端预期
2. 添加消息持久化功能
3. 实现用户认证和会话管理
4. 添加消息历史记录功能
5. 优化移动端用户体验

## 贡献指南

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 文件