# ai-chat-frontend

**Repository Path**: wingahi/ai-chat-frontend

## Basic Information

- **Project Name**: ai-chat-frontend
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-21
- **Last Updated**: 2025-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI Chat Frontend

## 项目概述
这是AI聊天应用的前端界面，使用Vue 3开发，提供与AI大模型交互的用户界面和文档转换功能，包括聊天记录展示、消息输入、模型选择、文本转文档、文档格式转换等功能。

## 项目特点
- 现代化UI设计，响应式布局
- 流畅的聊天体验，支持消息加载状态
- 多模型切换功能
- 聊天历史记录管理
- 深色/浅色主题切换
- 支持Markdown格式消息展示
- 完整的文档转换工具集
- 友好的用户操作界面和状态反馈

## 技术栈
- Vue 3
- Vue Composition API
- Axios
- Vite
- CSS/SCSS
- Font Awesome 图标库
- FileSaver.js (文件下载支持)

## 环境要求
- Node.js 16+
- npm 8+

## 配置说明
前端API配置位于`src/config.js`文件中：
```javascript
// ai-chat-frontend/src/config.js

export default {
  api: {
    baseUrl: 'http://localhost:8080',
    chatEndpoint: '/api/ai/chat',
    documentConvertEndpoint: '/api/document'
  },
  models: [
    { id: 'alibaba', name: '阿里AI' },
    { id: 'deepseek', name: 'DeepSeek' }
  ],
  defaultModel: 'alibaba'
};
```
如果后端服务运行在不同的地址或端口，请修改`baseUrl`的值。

## 运行步骤
1. 进入ai-chat-frontend目录:
   ```bash
   cd ai-chat-frontend
   ```
2. 安装依赖:
   ```bash
   npm install
   ```
3. 运行开发服务器:
   ```bash
   npm run dev
   ```
4. 在浏览器中访问:
   ```
   http://localhost:5173
   ```

## 构建生产环境
1. 构建静态文件:
   ```bash
   npm run build
   ```
2. 构建后的文件将位于`dist`目录中，可以部署到任何Web服务器

## 项目结构
- `src/App.vue`: 应用主组件
- `src/main.js`: 应用入口文件
- `src/config.js`: API配置文件
- `src/documentConverter/utils.js`: 文档转换相关工具函数
- `src/router/`: 路由配置
- `src/views/`: 页面组件
  - `ChatView.vue`: 聊天主界面
  - `ModelSelectionView.vue`: 模型选择界面
  - `HistoryView.vue`: 历史记录界面
  - `document/DocumentConversionTool.vue`: 文档转换工具界面
- `src/components/`: 自定义组件
  - `MessageList.vue`: 消息列表组件
  - `MessageInput.vue`: 消息输入组件
  - `ModelSelector.vue`: 模型选择器组件
  - `LoadingIndicator.vue`: 加载指示器组件
- `src/assets/`: 静态资源
- `src/styles/`: 全局样式
- `vite.config.js`: Vite配置文件

## 功能说明
### 聊天功能
1. 聊天界面：展示聊天记录，支持发送和接收消息
2. 模型选择：可以选择使用阿里AI或DeepSeek大模型
3. 消息输入：支持文本输入和发送
4. 加载状态：显示消息发送和接收的加载状态
5. 错误提示：当发生错误时显示提示信息
6. 历史记录：查看和管理历史聊天记录
7. 主题切换：支持深色和浅色主题

### 文档转换功能
1. 文本转换：将文本内容转换为Word或PPT文档（PDF转换已禁用）
2. Word转PDF：上传Word文档并转换为PDF格式
3. 图片转PDF：上传多张图片并合并为单个PDF文档
4. PPT转PDF：上传PowerPoint文档并转换为PDF格式
5. 转换状态显示：实时显示转换进度和结果
6. 文件下载：自动下载转换后的文档
7. 输入验证：对用户输入进行基本验证并提供友好提示

## 部署说明
1. 构建静态文件:
   ```bash
   npm run build
   ```
2. 将`dist`目录部署到Nginx、Apache或其他Web服务器
3. 配置Web服务器以支持前端路由(history模式)

## Nginx配置示例
```nginx
server {
    listen 80;
    server_name ai-chat.example.com;

    root /path/to/ai-chat-frontend/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 注意事项
1. 确保后端服务已启动并运行在配置的地址和端口
2. 如需修改后端API地址，请编辑`src/config.js`文件中的`baseUrl`
3. 生产环境中建议启用Gzip压缩和HTTP/2
4. 项目提供了基本功能，实际生产环境中应添加更多的错误处理和用户体验优化