llm-chat/README.md

# LLM 聊天网站

一个基于 Vue 3 + Node.js 构建的大语言模型聊天网站，支持与AI进行实时对话。

## 🚀 特性

- 🤖 **智能对话**: 基于大语言模型的自然语言处理
- 💬 **实时聊天**: 支持流式响应，实时显示AI回复
- 📚 **对话管理**: 自动保存对话历史，支持搜索和管理
- 🎨 **现代UI**: 响应式设计，支持亮色/暗色主题
- ⚡ **高性能**: LRU缓存优化，快速响应
- 🔒 **数据安全**: 本地SQLite数据库存储

## 🛠️ 技术栈

### 前端
- **Vue 3** - 渐进式JavaScript框架
- **Pinia** - 状态管理
- **Vue Router** - 路由管理
- **Element Plus** - UI组件库
- **Vite** - 构建工具
- **Axios** - HTTP客户端

### 后端
- **Node.js** - JavaScript运行时
- **Express** - Web框架
- **SQLite** - 轻量级数据库
- **LRU Cache** - 内存缓存
- **OpenAI兼容API** - 大语言模型接口

## 📦 项目结构

```
llm-chat-website/
├── package.json              # 根目录包管理
├── pnpm-workspace.yaml       # pnpm工作空间配置
├── README.md                 # 项目说明
├── .gitignore               # Git忽略文件
├── frontend/                # 前端项目
│   ├── src/
│   │   ├── components/      # Vue组件
│   │   ├── views/          # 页面视图
│   │   ├── stores/         # Pinia状态管理
│   │   ├── api/            # API接口
│   │   ├── router/         # 路由配置
│   │   ├── styles/         # 样式文件
│   │   └── utils/          # 工具函数
│   ├── package.json        # 前端依赖
│   └── vite.config.js      # Vite配置
└── backend/                # 后端项目
    ├── src/
    │   ├── routes/         # API路由
    │   ├── services/       # 业务服务
    │   ├── models/         # 数据模型
    │   ├── middleware/     # 中间件
    │   ├── config/         # 配置文件
    │   └── utils/          # 工具函数
    ├── database/           # 数据库文件
    ├── package.json        # 后端依赖
    └── server.js          # 服务器入口
```

## 🔧 安装与运行

### 环境要求

- Node.js >= 16.0.0
- pnpm >= 7.0.0

### 1. 克隆项目

```bash
git clone <repository-url>
cd llm-chat-website
```

### 2. 安装依赖

```bash
# 安装所有依赖
pnpm install:all
```

### 3. 配置环境变量

#### 后端配置

复制并编辑后端环境配置：

```bash
cd backend
cp .env.example .env
```

编辑 `.env` 文件，配置必要的环境变量：

```env
# 服务器配置
PORT=3000
NODE_ENV=development

# 数据库配置
DB_PATH=./database/chat.db

# LLM API配置 (必须配置)
LLM_API_BASE_URL=https://api.openai.com/v1
LLM_API_KEY=your_api_key_here
LLM_MODEL=gpt-3.5-turbo

# 缓存配置
CACHE_MAX_SIZE=500
CACHE_TTL=1800000

# 速率限制配置
RATE_LIMIT_WINDOW_MS=60000
RATE_LIMIT_MAX_REQUESTS=20

# CORS配置
CORS_ORIGIN=http://localhost:5173
```

#### 前端配置

前端环境变量已预配置，如需修改可编辑：
- `.env.development` - 开发环境
- `.env.production` - 生产环境

### 4. 启动项目

#### 开发模式（推荐）

```bash
# 同时启动前后端
pnpm dev
```

或者分别启动：

```bash
# 启动后端
pnpm dev:backend

# 启动前端（新终端）
pnpm dev:frontend
```

#### 生产模式

```bash
# 构建前端
pnpm build

# 启动后端服务
pnpm start
```

### 5. 访问应用

- 前端地址: http://localhost:5173
- 后端API: http://localhost:3000

## 🔑 API配置

### 支持的LLM服务

项目支持任何兼容OpenAI API格式的服务：

- **OpenAI**: 官方ChatGPT API
- **Azure OpenAI**: 微软Azure OpenAI服务
- **Claude API**: Anthropic Claude模型
- **本地部署**: Ollama、LocalAI等
- **第三方服务**: 各种OpenAI兼容的API服务

### 配置示例

#### OpenAI官方API
```env
LLM_API_BASE_URL=https://api.openai.com/v1
LLM_API_KEY=sk-your-openai-api-key
LLM_MODEL=gpt-3.5-turbo
```

#### Azure OpenAI
```env
LLM_API_BASE_URL=https://your-resource.openai.azure.com/openai/deployments/your-deployment
LLM_API_KEY=your-azure-api-key
LLM_MODEL=gpt-35-turbo
```

#### 本地Ollama
```env
LLM_API_BASE_URL=http://localhost:11434/v1
LLM_API_KEY=ollama
LLM_MODEL=llama2
```

## 📝 使用说明

### 基本功能

1. **新建对话**: 点击"新建对话"按钮开始聊天
2. **发送消息**: 在输入框输入问题，按Enter发送
3. **查看历史**: 在侧边栏查看所有对话历史
4. **搜索对话**: 使用搜索框快速找到相关对话
5. **管理对话**: 重命名、删除对话

### 快捷键

- `Ctrl + N`: 新建对话
- `Ctrl + K`: 快速搜索
- `Ctrl + B`: 切换侧边栏
- `Enter`: 发送消息
- `Ctrl + Enter`: 发送消息（可在设置中切换）
- `Esc`: 取消当前操作

### 高级功能

- **主题切换**: 支持亮色/暗色主题
- **响应式设计**: 完美适配移动端
- **导入导出**: 支持对话数据的导入导出
- **设置自定义**: 个性化界面和功能设置

## 🔧 开发指南

### 项目架构

#### 前端架构
- **组件化**: 模块化的Vue组件设计
- **状态管理**: 使用Pinia管理全局状态
- **API集成**: 统一的HTTP客户端和接口封装
- **响应式**: 移动端优先的响应式设计

#### 后端架构
- **RESTful API**: 标准的REST接口设计
- **分层架构**: 路由、服务、数据访问层分离
- **缓存优化**: LRU缓存提升性能
- **错误处理**: 完善的错误处理和日志记录

### 添加新功能

1. **新增API**: 在 `backend/routes/` 中添加路由
2. **业务逻辑**: 在 `backend/services/` 中实现业务逻辑
3. **前端接口**: 在 `frontend/src/api/` 中封装API调用
4. **状态管理**: 在 `frontend/src/stores/` 中添加状态管理
5. **UI组件**: 在 `frontend/src/components/` 中创建组件

### 测试

```bash
# 运行后端测试
cd backend && npm test

# 运行前端测试
cd frontend && npm test
```

## 🚀 部署

### Docker部署

```bash
# 构建镜像
docker build -t llm-chat-website .

# 运行容器
docker run -p 3000:3000 -v $(pwd)/data:/app/database llm-chat-website
```

### 传统部署

1. 构建前端资源：`pnpm build`
2. 配置Nginx代理前端静态文件
3. 使用PM2等工具管理后端进程
4. 配置SSL证书（推荐）

## 🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

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

### 开发规范

- 遵循ESLint配置
- 编写有意义的提交信息
- 添加必要的测试
- 更新相关文档

## 📄 许可证

本项目采用 [MIT](LICENSE) 许可证。

## 🆘 支持

如果您遇到问题或有建议，请：

1. 查看 [常见问题](docs/FAQ.md)
2. 提交 [Issue](../../issues)
3. 参与 [讨论](../../discussions)

## 🙏 致谢

感谢所有为这个项目做出贡献的开发者！

- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
- [Element Plus](https://element-plus.org/) - 优秀的Vue 3组件库
- [Express.js](https://expressjs.com/) - 快速、开放、极简的Web框架
- [SQLite](https://www.sqlite.org/) - 自包含的数据库引擎

---

⭐ 如果这个项目对您有帮助，请给我们一个星标！