# qwenchats

**Repository Path**: TonyDon/qwenchats

## Basic Information

- **Project Name**: qwenchats
- **Description**: No description available
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-18
- **Last Updated**: 2026-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Qwen Chats 连接池管理系统

一个基于 Vue 3 + Vite 的现代化连接池管理系统，支持实时监控和管理外部连接，提供完整的聊天界面和连接状态监控功能。

## 📋 功能特性

### 🔗 连接池管理
- ✅ 支持外部传入连接信息（name, uri, desc, health）
- ✅ 内存缓存连接池，高效管理连接信息
- ✅ 30秒定时健康检查，自动检测连接状态
- ✅ 智能重试机制：非200状态时，间隔5秒重试5次
- ✅ 自动清理：重试失败后自动从连接池移除

### 📡 实时通信
- ✅ WebSocket 实时更新连接状态
- ✅ 新增连接时自动通知前端
- ✅ 连接状态变化实时同步
- ✅ 健康检查结果实时反馈

### 💬 聊天界面
- ✅ 全屏布局，左侧连接池列表，右侧聊天区域
- ✅ 连接卡片展示，支持搜索功能
- ✅ 选中连接后切换聊天上下文
- ✅ 消息发送与接收，支持AI模拟回复
- ✅ 输入框支持 shift+enter 换行，自动高度调整
- ✅ 商务蓝配色，现代美观的UI设计
- ✅ 支持粘贴图片自动上传
- ✅ 支持文件上传功能

### 🚀 部署与运维
- ✅ 单容器Docker部署
- ✅ Express代理服务，支持API和WebSocket代理
- ✅ 支持开发和生产环境
- ✅ 完整的API文档
- ✅ Git版本控制，支持Gitee远程仓库
- ✅ 环境变量配置，支持不同环境的灵活部署

## 🛠️ 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| 前端框架 | Vue | 3.5.24 |
| 构建工具 | Vite | 4.5.3 |
| UI组件库 | Ant Design Vue | 4.2.6 |
| 后端运行时 | Node.js | 18+ |
| 后端框架 | Express | 4.18.2 |
| WebSocket | ws | 8.19.0 |
| 容器化 | Docker | 最新 |

## 📦 快速开始

### 1. 环境准备

确保您的系统已安装以下软件：
- Node.js 18+
- npm 或 yarn
- Docker (可选，用于容器化部署)

### 2. 安装依赖

```bash
# 克隆仓库
git clone https://gitee.com/TonyDon/qwenchats.git
cd qwenchats

# 安装前端依赖
npm install

# 安装Express后端依赖
cd express
npm install
cd ..
```

### 3. 启动开发环境

```bash
# 启动前端开发服务器
npm run dev

# 在另一个终端启动Express代理服务
cd express
npm run start
```

**访问地址：**
- 前端：http://localhost:5173
- Express代理服务：http://localhost:3004

### 4. 构建生产版本

```bash
# 构建前端生产版本
npm run build
```

### 5. 生产环境运行

```bash
# 进入Express目录
cd express

# 启动服务
npm run start
```

## 🐳 Docker部署

### 1. 构建Docker镜像

```bash
docker build --pull --rm -f 'Dockerfile' -t 'qwenchats:latest' '.'
```

### 2. 运行Docker容器

```bash
# 基本运行
docker run -d -p 3004:3004 --name qwenchats qwenchats:latest

# 带环境变量运行（示例）
docker run -d -p 3004:3004 \
  -e VITE_API_URL=http://127.0.0.1:3004 \
  -e VITE_WS_URL=ws://127.0.0.1:3004 \
  -e VITE_ALLOWED_HOSTS=k3s.dev.com,localhost \
  --name qwenchats qwenchats:latest
```

### 3. 访问应用

- 前端：http://localhost:3004
- Express代理服务：http://localhost:3004

## 📖 API接口文档

### 1. Express代理服务接口

Express代理服务运行在 `http://0.0.0.0:3004`，提供以下接口：

#### 1.1 GET /preview - URL预览接口
- **功能**: 预览指定URL的内容，自动处理HTML中的相对路径
- **参数**: `url` - 要预览的目标URL
- **响应**: 处理后的HTML内容或原始数据

#### 1.2 POST /chat - SSE聊天接口
- **功能**: 代理SSE聊天请求，转发到目标服务器
- **参数**: `target` - 目标服务器URL, `data` - 聊天数据
- **响应**: 流式SSE响应

#### 1.3 POST /upload - 文件上传接口
- **功能**: 代理文件上传请求，转发到目标服务器
- **参数**: `target` - 目标服务器URL, `data` - 上传数据
- **响应**: 上传结果

#### 1.4 GET /health - 健康检查接口
- **功能**: 检查Express服务的健康状态
- **响应**: 服务状态信息

#### 1.5 /api/* - API代理接口
- **功能**: 代理所有/api/*请求到连接管理服务
- **用途**: 访问连接管理服务的API接口

#### 1.6 /ws - WebSocket代理接口
- **功能**: 代理WebSocket连接到连接管理服务
- **用途**: 实时获取连接状态更新

### 2. 连接管理服务接口

连接管理服务运行在 `http://127.0.0.1:3004`（内网服务），通过Express代理访问：

#### 2.1 POST /api/connections - 添加连接
- **功能**: 添加新连接到连接池
- **参数**: `name`, `uri`, `desc`, `health`
- **响应**: 添加结果

#### 2.2 GET /api/connections - 获取所有连接
- **功能**: 获取连接池中的所有连接
- **响应**: 连接列表

#### 2.3 DELETE /api/connections/:name - 删除连接
- **功能**: 从连接池移除指定连接
- **参数**: `name` - 连接名称
- **响应**: 删除结果

#### 2.4 POST /api/chat - 聊天接口
- **功能**: 与指定连接进行聊天
- **参数**: `msg`, `uri` 等聊天数据
- **响应**: 流式SSE响应

#### 2.5 GET /api/status - 获取服务状态
- **功能**: 获取连接管理服务的状态信息
- **响应**: 服务状态

## 📁 项目结构

```
qwen_chats/
├── src/                    # 前端源代码
│   ├── assets/             # 静态资源
│   ├── components/         # Vue组件
│   │   ├── chat/           # 聊天相关组件
│   │   │   ├── ConnectionList.vue # 连接列表组件
│   │   │   ├── MessageList.vue # 消息列表组件
│   │   │   └── ChatInput.vue   # 聊天输入组件
│   │   └── common/         # 通用组件
│   ├── views/              # 页面视图
│   │   ├── Chat.vue        # 聊天主页面
│   │   └── ChatViewRouter.vue # 聊天视图路由组件
│   ├── services/           # 服务层
│   │   ├── modules/        # 服务模块
│   │   │   ├── base.js     # 基础API服务
│   │   │   ├── connection.js # 连接相关API
│   │   │   ├── message.js  # 消息相关API
│   │   │   └── proxy.js    # 代理相关API
│   │   └── ApiService.js   # API服务入口
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── express/                # Express代理服务
│   ├── doc/                # API文档
│   │   └── guide.md        # Express接口文档
│   ├── server.js           # 代理服务器
│   ├── proxy.js            # 代理逻辑
│   └── package.json        # 后端依赖
├── mock/                   # 模拟服务（开发环境使用）
│   └── registry.js         # 注册服务客户端
├── public/                 # 公共静态文件
├── .env                    # 开发环境变量
├── .env.production         # 生产环境变量
├── index.html              # 前端入口HTML
├── package.json            # 前端项目配置
├── vite.config.js          # Vite配置
├── Dockerfile              # Docker配置
└── README.md               # 项目说明文档
```

## 🔧 核心服务

### Express代理服务

Express代理服务是项目的核心，负责以下功能：

1. **静态文件服务**: 提供构建后的Vue项目
2. **API代理**: 代理/api/*请求到连接管理服务
3. **WebSocket代理**: 代理/ws请求到连接管理服务
4. **URL预览**: 提供/preview接口预览URL内容
5. **SSE聊天代理**: 提供/chat接口代理SSE聊天请求
6. **文件上传代理**: 提供/upload接口代理文件上传请求
7. **健康检查**: 提供/health接口检查服务状态

### WebSocket 事件

| 事件类型 | 描述 | 数据结构 |
|----------|------|----------|
| `init` | 初始化连接列表 | `{ connections: [] }` |
| `add` | 新增连接 | `{ connection: {} }` |
| `remove` | 移除连接 | `{ name: "连接名称" }` |
| `update` | 更新连接状态 | `{ connection: { name, status, lastCheck, retryCount } }` |

## 🚀 开发指南

### 开发环境要求
- Node.js 18+
- npm 或 yarn
- 现代浏览器

### 开发命令

```bash
# 启动前端开发服务器
npm run dev

# 启动Express代理服务
cd express
npm run start

# 构建生产版本
npm run build

# 预览生产构建
npm run preview
```

### 环境变量配置

#### 开发环境 (.env)
```
NODE_ENV=development
VITE_APP_ENV=development
VITE_APP_API_BASE_URL=/api
VITE_API_URL=http://127.0.0.1:3004
VITE_WS_URL=ws://127.0.0.1:3004
VITE_ALLOWED_HOSTS=localhost
```

#### 生产环境 (.env.production)
```
VITE_APP_ENV=production
VITE_APP_API_BASE_URL=/api
```

#### Docker环境变量
Docker容器中设置的环境变量：
```
NODE_ENV=production
VITE_APP_ENV=production
VITE_APP_API_BASE_URL=/api
VITE_API_URL=http://127.0.0.1:3004
VITE_WS_URL=ws://127.0.0.1:3004
VITE_ALLOWED_HOSTS=k3s.dev.com
```

#### 环境变量说明

| 环境变量 | 描述 | 默认值 |
|----------|------|--------|
| `NODE_ENV` | 运行环境 | `development` |
| `VITE_APP_ENV` | 应用环境 | `development` |
| `VITE_APP_API_BASE_URL` | API基础路径 | `/api` |
| `VITE_API_URL` | 连接管理服务API地址 | `http://127.0.0.1:3004` |
| `VITE_WS_URL` | 连接管理服务WebSocket地址 | `ws://127.0.0.1:3004` |
| `VITE_ALLOWED_HOSTS` | 允许的主机列表 | `localhost` |

## ❓ 常见问题

### 1. 连接池不更新

**解决方案**：
- 检查 WebSocket 连接是否正常
- 查看浏览器控制台是否有错误信息
- 确认Express代理服务和连接管理服务是否正常运行

### 2. 健康检查失败

**解决方案**：
- 检查 health URL 是否可访问
- 确认健康检查端点返回 200 状态
- 查看后端日志获取详细错误信息

### 3. 输入框高度问题

**解决方案**：
- 确保浏览器支持 CSS Grid 布局
- 检查是否有自定义 CSS 覆盖了默认样式
- 尝试刷新页面或清除缓存

### 4. WebSocket 连接问题

**解决方案**：
- 检查网络连接是否正常
- 确认Express代理服务和连接管理服务是否运行
- 查看浏览器控制台的 WebSocket 相关日志

### 5. 环境变量配置问题

**解决方案**：
- 确保所有必要的环境变量都已设置
- 检查环境变量格式是否正确
- 重启服务以应用新的环境变量

## 📝 更新日志

### v2.0.0 (2026-02-10)
- ✅ 重构项目结构，分离Express代理服务
- ✅ 实现API代理功能，支持访问内网连接管理服务
- ✅ 实现WebSocket代理功能，支持实时通信
- ✅ 优化Docker部署，支持单容器运行
- ✅ 添加环境变量配置，支持不同环境
- ✅ 完善API文档，添加使用示例
- ✅ 支持文件上传和图片粘贴功能
- ✅ 移除硬编码host，使用环境变量配置
- ✅ 修改Express服务器监听地址为0.0.0.0

### v1.0.0 (2026-02-09)
- ✅ 初始版本发布
- ✅ 连接池管理功能
- ✅ WebSocket 实时通信
- ✅ 完整聊天界面
- ✅ Docker 部署支持
- ✅ 健康检查与重试机制

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系方式

如有问题或建议，请通过以下方式联系：

- 项目地址：https://gitee.com/TonyDon/qwenchats
- 邮箱：tonydon@example.com

---

**Qwen Chats** - 高效、稳定、实时的连接池管理系统 🚀