# Chatgpt_frontend

**Repository Path**: wx6765/chatgpt_frontend

## Basic Information

- **Project Name**: Chatgpt_frontend
- **Description**: 模仿chatgpt的项目前端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://blog.ybyq.wang/archives/1154.html
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-23
- **Last Updated**: 2025-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GPT AI 聊天应用前端

基于Vue 3 + Vite构建的现代化AI聊天应用前端，支持多AI平台对话、图像生成、用户管理、管理员面板等功能。

## 🚀 项目特性

- **现代化UI**: 基于Vue 3 Composition API的响应式界面
- **多AI平台**: 支持OpenAI、阿里云通义千问、DeepSeek、豆包、Kimi等
- **实时对话**: 基于SSE的流式对话体验
- **图像生成**: 支持DALL-E和通义万相图像生成
- **用户系统**: 完整的登录注册、用户仪表板
- **管理员面板**: 用户管理、使用统计、系统监控
- **响应式设计**: 适配桌面端和移动端
- **定价页面**: 清晰的服务定价展示

## 📋 技术栈

- **框架**: Vue 3.4.38
- **构建工具**: Vite 5.4.3
- **状态管理**: Pinia 2.1.7
- **路由**: Vue Router 4.4.5
- **Markdown渲染**: Marked 16.3.0
- **开发工具**: @vitejs/plugin-vue 5.1.2

## 🏗️ 项目结构

```
src/
├── api/                    # API接口
│   └── client.js          # SSE客户端和HTTP请求封装
├── components/             # 通用组件
│   ├── SettingsModal.vue  # 设置模态框
│   ├── SideBar.vue        # 侧边栏导航
│   └── TopBar.vue         # 顶部导航栏
├── views/                  # 页面组件
│   ├── ChatPage.vue       # 聊天对话页面
│   ├── ImagePage.vue      # 图像生成页面
│   ├── LoginPage.vue      # 登录页面
│   ├── UserDashboard.vue  # 用户仪表板
│   ├── AdminPage.vue      # 管理员面板
│   └── PricingPage.vue    # 定价页面
├── router/                 # 路由配置
│   └── index.js           # 路由定义
├── store/                  # 状态管理
│   └── index.js           # Pinia store
├── assets/                 # 静态资源
│   └── styles.css         # 全局样式
├── App.vue                # 根组件
└── main.js                # 应用入口
```

## 🛠️ 本地开发

1. 安装依赖

```bash
npm i
```

2. 启动（默认代理到 http://localhost:8083）

```bash
npm run dev
```

如需自定义后端地址（开发态代理）：

```bash
# Windows PowerShell
$env:BACKEND_URL="http://127.0.0.1:8083"; npm run dev
# macOS/Linux
BACKEND_URL=http://127.0.0.1:8083 npm run dev
```

## ⚙️ 配置说明

### 环境变量

- `BACKEND_URL`: 后端服务地址，默认 `http://localhost:8083`

### 应用设置（右上角设置面板）

- **AI平台**: `openai`、`ali`、`deepseek`、`doubao`、`kimi`
- **对话模型**: 如 `gpt-4o-mini`、`qwen-turbo` 等
- **图片模型**: 如 `dall-e-3`、`wanx-v1` 等
- **后端地址**: API服务器地址配置

### 开发环境代理

开发环境通过Vite代理转发API请求到后端服务，避免跨域问题：

```javascript
// vite.config.js
proxy: {
  '/api': {
    target: process.env.BACKEND_URL || 'http://localhost:8083',
    changeOrigin: true
  }
}
```

## 📡 API接口约定

### 聊天接口
```http
GET /api/ai/chat/text/stream?platform=openai&model=xxx&message=xxx
```
- **响应**: Server-Sent Events (SSE)流
- **事件类型**: `delta`（内容片段）、`done`（结束标志）

### 图像生成接口
```http
POST /api/ai/create/image
Content-Type: application/json

{
  "platform": "openai",
  "model": "dall-e-3", 
  "prompt": "生成提示词",
  "size": "1024x1024"
}
```

### 用户认证接口
```http
POST /api/user/login
POST /api/user/register
GET /api/user/profile
```

### 管理员接口
```http
GET /api/admin/users
GET /api/admin/user-stats
GET /api/admin/usage-stats
```

## 🚀 生产部署

### 构建应用
```bash
npm run build
```

### Nginx配置示例
```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    # 前端静态文件
    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }
    
    # API代理到后端
    location /api/ {
        proxy_pass http://127.0.0.1:8083;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # SSE支持
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_read_timeout 3600s;
        proxy_send_timeout 3600s;
    }
}
```

### Docker部署
```dockerfile
# 构建阶段
FROM node:18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

## 🔧 开发指南

### 添加新页面
1. 在 `src/views/` 下创建Vue组件
2. 在 `src/router/index.js` 中添加路由配置
3. 在 `SideBar.vue` 中添加导航链接

### 调用API
使用封装的client进行API调用：
```javascript
import { createSSEClient, callImageAPI } from '@/api/client.js'

// SSE流式调用
const sseClient = createSSEClient('/api/ai/chat/text/stream', {
  platform: 'openai',
  model: 'gpt-4o-mini',
  message: '你好'
})

// HTTP调用
const result = await callImageAPI({
  platform: 'openai',
  model: 'dall-e-3',
  prompt: '一只可爱的猫'
})
```

### 状态管理
使用Pinia进行全局状态管理：
```javascript
import { useMainStore } from '@/store'

const store = useMainStore()
store.updateSettings({ platform: 'openai' })
```

## 📱 页面功能

- **聊天页面**: 支持多AI平台的实时流式对话
- **图像生成**: AI图像生成和历史记录
- **用户仪表板**: 个人使用统计和设置
- **管理员面板**: 用户管理和系统监控
- **定价页面**: 服务计划和价格展示
- **登录页面**: 用户认证和注册

## 🎨 UI特性

- 响应式布局，适配桌面和移动端
- 深色/浅色主题切换
- Markdown格式支持
- 代码高亮显示
- 图片预览和下载
- 实时消息流动画

## 🤝 贡献指南

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) 文件了解详情。

---

*最后更新: 2025年9月25日*