541 lines
12 KiB
Markdown
541 lines
12 KiB
Markdown
# 大语言模型聊天网站设计文档
|
||
|
||
## 概述
|
||
|
||
本项目是一个全栈大语言模型聊天网站，支持用户与AI进行实时对话。系统采用前后端分离架构，前端使用Vue.js构建用户界面，后端使用Node.js提供API服务，通过调用兼容OpenAI格式的第三方API实现智能对话功能。
|
||
|
||
### 核心特性
|
||
- 实时AI对话体验
|
||
- 对话历史记录与管理
|
||
- 用户会话状态保持
|
||
- 响应式Web界面
|
||
- 高性能缓存机制
|
||
- 轻量级本地数据存储
|
||
|
||
### 技术栈
|
||
- **前端**: Vue.js 3, Vue Router, Pinia, Axios, Element Plus
|
||
- **后端**: Node.js, Express.js, SQLite3, LRU-Cache
|
||
- **包管理**: pnpm
|
||
- **数据库**: SQLite (本地文件数据库)
|
||
- **第三方集成**: OpenAI兼容API服务
|
||
|
||
## 系统架构
|
||
|
||
### 整体架构图
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph "客户端"
|
||
A[Vue.js前端]
|
||
A1[聊天界面]
|
||
A2[历史记录]
|
||
A3[用户设置]
|
||
end
|
||
|
||
subgraph "服务端"
|
||
B[Node.js后端]
|
||
B1[Express路由]
|
||
B2[会话管理]
|
||
B3[缓存层]
|
||
B4[数据访问层]
|
||
end
|
||
|
||
subgraph "数据存储"
|
||
C[SQLite数据库]
|
||
C1[用户表]
|
||
C2[对话表]
|
||
C3[消息表]
|
||
end
|
||
|
||
subgraph "外部服务"
|
||
D[第三方LLM API]
|
||
D1[OpenAI兼容接口]
|
||
end
|
||
|
||
A -->|HTTP/WebSocket| B
|
||
B -->|SQL查询| C
|
||
B -->|API调用| D
|
||
B3 -->|LRU缓存| B2
|
||
```
|
||
|
||
### 数据流架构
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant U as 用户
|
||
participant F as Vue前端
|
||
participant B as Node.js后端
|
||
participant C as LRU缓存
|
||
participant DB as SQLite
|
||
participant API as 第三方LLM API
|
||
|
||
U->>F: 发送消息
|
||
F->>B: POST /api/chat/send
|
||
B->>C: 检查缓存
|
||
alt 缓存命中
|
||
C-->>B: 返回缓存结果
|
||
else 缓存未命中
|
||
B->>DB: 保存用户消息
|
||
B->>API: 调用LLM API
|
||
API-->>B: 返回AI回复
|
||
B->>DB: 保存AI回复
|
||
B->>C: 更新缓存
|
||
end
|
||
B-->>F: 返回对话结果
|
||
F-->>U: 显示AI回复
|
||
```
|
||
|
||
## 前端架构
|
||
|
||
### 组件层次结构
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[App.vue] --> B[Layout组件]
|
||
B --> C[Header组件]
|
||
B --> D[Sidebar组件]
|
||
B --> E[Main组件]
|
||
|
||
E --> F[ChatView]
|
||
E --> G[HistoryView]
|
||
E --> H[SettingsView]
|
||
|
||
F --> I[ChatInput]
|
||
F --> J[MessageList]
|
||
F --> K[TypingIndicator]
|
||
|
||
J --> L[MessageItem]
|
||
L --> M[UserMessage]
|
||
L --> N[AIMessage]
|
||
|
||
D --> O[ConversationList]
|
||
O --> P[ConversationItem]
|
||
```
|
||
|
||
### 组件定义
|
||
|
||
#### 核心聊天组件
|
||
|
||
**ChatView.vue** - 主聊天界面
|
||
- 管理当前对话状态
|
||
- 处理消息发送逻辑
|
||
- 实现消息流式显示
|
||
|
||
**MessageList.vue** - 消息列表容器
|
||
- 虚拟滚动优化
|
||
- 消息懒加载
|
||
- 自动滚动到底部
|
||
|
||
**ChatInput.vue** - 消息输入组件
|
||
- 多行文本输入
|
||
- 发送按钮状态管理
|
||
- 快捷键支持(Ctrl+Enter)
|
||
|
||
#### 布局组件
|
||
|
||
**Layout.vue** - 主布局容器
|
||
- 响应式布局设计
|
||
- 侧边栏展开/收缩
|
||
- 移动端适配
|
||
|
||
**Sidebar.vue** - 侧边栏组件
|
||
- 对话历史列表
|
||
- 新建对话按钮
|
||
- 对话搜索功能
|
||
|
||
### 状态管理架构
|
||
|
||
使用Pinia进行状态管理，主要包含以下Store:
|
||
|
||
**chatStore.js** - 聊天状态管理
|
||
```javascript
|
||
{
|
||
currentConversation: null,
|
||
messages: [],
|
||
isLoading: false,
|
||
isTyping: false
|
||
}
|
||
```
|
||
|
||
**conversationStore.js** - 对话管理
|
||
```javascript
|
||
{
|
||
conversations: [],
|
||
activeConversationId: null,
|
||
searchQuery: ''
|
||
}
|
||
```
|
||
|
||
**userStore.js** - 用户设置
|
||
```javascript
|
||
{
|
||
settings: {
|
||
theme: 'light',
|
||
fontSize: 'medium',
|
||
autoSave: true
|
||
}
|
||
}
|
||
```
|
||
|
||
### 路由配置
|
||
|
||
```javascript
|
||
const routes = [
|
||
{
|
||
path: '/',
|
||
component: Layout,
|
||
children: [
|
||
{ path: '', redirect: '/chat' },
|
||
{ path: '/chat/:id?', component: ChatView },
|
||
{ path: '/history', component: HistoryView },
|
||
{ path: '/settings', component: SettingsView }
|
||
]
|
||
}
|
||
]
|
||
```
|
||
|
||
### API集成层
|
||
|
||
**apiClient.js** - HTTP客户端封装
|
||
- Axios实例配置
|
||
- 请求/响应拦截器
|
||
- 错误处理机制
|
||
- 重试逻辑
|
||
|
||
**chatApi.js** - 聊天相关API
|
||
```javascript
|
||
export const chatApi = {
|
||
sendMessage: (conversationId, message) => {},
|
||
getConversations: () => {},
|
||
getMessages: (conversationId) => {},
|
||
createConversation: () => {},
|
||
deleteConversation: (id) => {}
|
||
}
|
||
```
|
||
|
||
## 后端架构
|
||
|
||
### API端点设计
|
||
|
||
#### 对话管理端点
|
||
|
||
| 方法 | 路径 | 描述 | 请求体 | 响应 |
|
||
|------|------|------|--------|------|
|
||
| POST | `/api/conversations` | 创建新对话 | `{ title?: string }` | `{ id, title, createdAt }` |
|
||
| GET | `/api/conversations` | 获取对话列表 | - | `[{ id, title, lastMessage, updatedAt }]` |
|
||
| GET | `/api/conversations/:id` | 获取对话详情 | - | `{ id, title, messages }` |
|
||
| DELETE | `/api/conversations/:id` | 删除对话 | - | `{ success: true }` |
|
||
|
||
#### 消息处理端点
|
||
|
||
| 方法 | 路径 | 描述 | 请求体 | 响应 |
|
||
|------|------|------|--------|------|
|
||
| POST | `/api/chat/send` | 发送消息 | `{ conversationId, message, stream? }` | `{ message, response }` |
|
||
| GET | `/api/messages/:conversationId` | 获取消息历史 | - | `[{ id, role, content, timestamp }]` |
|
||
|
||
### 数据模型设计
|
||
|
||
#### 数据库表结构
|
||
|
||
**conversations表**
|
||
```sql
|
||
CREATE TABLE conversations (
|
||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||
title TEXT NOT NULL DEFAULT '新对话',
|
||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||
);
|
||
```
|
||
|
||
**messages表**
|
||
```sql
|
||
CREATE TABLE messages (
|
||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||
conversation_id INTEGER NOT NULL,
|
||
role TEXT NOT NULL CHECK (role IN ('user', 'assistant')),
|
||
content TEXT NOT NULL,
|
||
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||
FOREIGN KEY (conversation_id) REFERENCES conversations(id) ON DELETE CASCADE
|
||
);
|
||
```
|
||
|
||
### 业务逻辑层
|
||
|
||
#### 对话服务 (ConversationService)
|
||
|
||
```javascript
|
||
class ConversationService {
|
||
// 创建新对话
|
||
async createConversation(title) {}
|
||
|
||
// 获取对话列表
|
||
async getConversations() {}
|
||
|
||
// 获取对话详情
|
||
async getConversationById(id) {}
|
||
|
||
// 删除对话
|
||
async deleteConversation(id) {}
|
||
|
||
// 更新对话标题
|
||
async updateConversationTitle(id, title) {}
|
||
}
|
||
```
|
||
|
||
#### 聊天服务 (ChatService)
|
||
|
||
```javascript
|
||
class ChatService {
|
||
constructor(llmApiClient, cache) {
|
||
this.llmApiClient = llmApiClient;
|
||
this.cache = cache;
|
||
}
|
||
|
||
// 处理用户消息
|
||
async processMessage(conversationId, userMessage) {
|
||
// 1. 保存用户消息到数据库
|
||
// 2. 构建上下文(包含历史消息)
|
||
// 3. 调用LLM API
|
||
// 4. 保存AI回复到数据库
|
||
// 5. 更新缓存
|
||
// 6. 返回结果
|
||
}
|
||
|
||
// 流式响应处理
|
||
async processStreamMessage(conversationId, userMessage) {}
|
||
}
|
||
```
|
||
|
||
#### LLM API客户端 (LLMApiClient)
|
||
|
||
```javascript
|
||
class LLMApiClient {
|
||
constructor(apiConfig) {
|
||
this.baseURL = apiConfig.baseURL;
|
||
this.apiKey = apiConfig.apiKey;
|
||
this.model = apiConfig.model;
|
||
}
|
||
|
||
// 调用聊天完成API
|
||
async createChatCompletion(messages, options = {}) {
|
||
const response = await fetch(`${this.baseURL}/chat/completions`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Authorization': `Bearer ${this.apiKey}`,
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
model: this.model,
|
||
messages: messages,
|
||
stream: options.stream || false,
|
||
max_tokens: options.maxTokens || 2000,
|
||
temperature: options.temperature || 0.7
|
||
})
|
||
});
|
||
return response;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 缓存策略
|
||
|
||
#### LRU缓存配置
|
||
|
||
```javascript
|
||
const LRU = require('lru-cache');
|
||
|
||
const cache = new LRU({
|
||
max: 500, // 最大缓存条目数
|
||
maxAge: 1000 * 60 * 30 // 30分钟过期
|
||
});
|
||
|
||
// 缓存键策略
|
||
const getCacheKey = (conversationId, messageHash) => {
|
||
return `conv:${conversationId}:msg:${messageHash}`;
|
||
};
|
||
```
|
||
|
||
#### 缓存使用场景
|
||
|
||
1. **对话上下文缓存** - 缓存最近的对话上下文，减少数据库查询
|
||
2. **API响应缓存** - 对相同输入的LLM响应进行缓存
|
||
3. **用户会话缓存** - 缓存用户会话信息
|
||
|
||
### 中间件系统
|
||
|
||
#### 请求日志中间件
|
||
|
||
```javascript
|
||
const requestLogger = (req, res, next) => {
|
||
console.log(`${new Date().toISOString()} - ${req.method} ${req.path}`);
|
||
next();
|
||
};
|
||
```
|
||
|
||
#### 错误处理中间件
|
||
|
||
```javascript
|
||
const errorHandler = (err, req, res, next) => {
|
||
console.error('Error:', err);
|
||
res.status(500).json({
|
||
error: 'Internal Server Error',
|
||
message: process.env.NODE_ENV === 'development' ? err.message : '服务器内部错误'
|
||
});
|
||
};
|
||
```
|
||
|
||
#### 速率限制中间件
|
||
|
||
```javascript
|
||
const rateLimit = require('express-rate-limit');
|
||
|
||
const chatRateLimit = rateLimit({
|
||
windowMs: 1 * 60 * 1000, // 1分钟
|
||
max: 20, // 限制每个IP每分钟最多20次请求
|
||
message: '请求过于频繁，请稍后再试'
|
||
});
|
||
```
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
chat-website/
|
||
├── package.json
|
||
├── pnpm-workspace.yaml
|
||
├── README.md
|
||
├── .gitignore
|
||
├── frontend/
|
||
│ ├── package.json
|
||
│ ├── vite.config.js
|
||
│ ├── index.html
|
||
│ ├── src/
|
||
│ │ ├── main.js
|
||
│ │ ├── App.vue
|
||
│ │ ├── components/
|
||
│ │ │ ├── layout/
|
||
│ │ │ │ ├── Layout.vue
|
||
│ │ │ │ ├── Header.vue
|
||
│ │ │ │ └── Sidebar.vue
|
||
│ │ │ ├── chat/
|
||
│ │ │ │ ├── ChatView.vue
|
||
│ │ │ │ ├── MessageList.vue
|
||
│ │ │ │ ├── MessageItem.vue
|
||
│ │ │ │ ├── ChatInput.vue
|
||
│ │ │ │ └── TypingIndicator.vue
|
||
│ │ │ └── common/
|
||
│ │ │ ├── Loading.vue
|
||
│ │ │ └── ErrorMessage.vue
|
||
│ │ ├── stores/
|
||
│ │ │ ├── index.js
|
||
│ │ │ ├── chat.js
|
||
│ │ │ ├── conversation.js
|
||
│ │ │ └── user.js
|
||
│ │ ├── api/
|
||
│ │ │ ├── client.js
|
||
│ │ │ ├── chat.js
|
||
│ │ │ └── conversation.js
|
||
│ │ ├── router/
|
||
│ │ │ └── index.js
|
||
│ │ ├── styles/
|
||
│ │ │ ├── main.css
|
||
│ │ │ ├── variables.css
|
||
│ │ │ └── components.css
|
||
│ │ └── utils/
|
||
│ │ ├── helpers.js
|
||
│ │ └── constants.js
|
||
│ └── public/
|
||
│ └── favicon.ico
|
||
└── backend/
|
||
├── package.json
|
||
├── app.js
|
||
├── server.js
|
||
├── config/
|
||
│ ├── database.js
|
||
│ └── llm.js
|
||
├── routes/
|
||
│ ├── index.js
|
||
│ ├── chat.js
|
||
│ └── conversations.js
|
||
├── services/
|
||
│ ├── ConversationService.js
|
||
│ ├── ChatService.js
|
||
│ └── LLMApiClient.js
|
||
├── models/
|
||
│ ├── database.js
|
||
│ ├── Conversation.js
|
||
│ └── Message.js
|
||
├── middleware/
|
||
│ ├── auth.js
|
||
│ ├── rateLimit.js
|
||
│ ├── logger.js
|
||
│ └── errorHandler.js
|
||
├── utils/
|
||
│ ├── cache.js
|
||
│ └── helpers.js
|
||
└── database/
|
||
├── schema.sql
|
||
└── chat.db
|
||
```
|
||
|
||
## 测试策略
|
||
|
||
### 前端测试
|
||
|
||
#### 单元测试 (Vitest)
|
||
- 组件逻辑测试
|
||
- Store状态管理测试
|
||
- 工具函数测试
|
||
|
||
#### 组件测试 (Vue Test Utils)
|
||
- 组件渲染测试
|
||
- 用户交互测试
|
||
- Props和Events测试
|
||
|
||
#### E2E测试 (Playwright)
|
||
- 完整对话流程测试
|
||
- 跨浏览器兼容性测试
|
||
- 移动端响应式测试
|
||
|
||
### 后端测试
|
||
|
||
#### 单元测试 (Jest)
|
||
|
||
**API端点测试**
|
||
```javascript
|
||
describe('Chat API', () => {
|
||
test('should send message successfully', async () => {
|
||
const response = await request(app)
|
||
.post('/api/chat/send')
|
||
.send({
|
||
conversationId: 1,
|
||
message: '你好'
|
||
});
|
||
|
||
expect(response.status).toBe(200);
|
||
expect(response.body).toHaveProperty('response');
|
||
});
|
||
});
|
||
```
|
||
|
||
**服务层测试**
|
||
```javascript
|
||
describe('ChatService', () => {
|
||
test('should process message correctly', async () => {
|
||
const chatService = new ChatService(mockApiClient, mockCache);
|
||
const result = await chatService.processMessage(1, '测试消息');
|
||
|
||
expect(result).toHaveProperty('userMessage');
|
||
expect(result).toHaveProperty('aiResponse');
|
||
});
|
||
});
|
||
```
|
||
|
||
#### 集成测试
|
||
- 数据库操作测试
|
||
- 第三方API集成测试
|
||
- 缓存机制测试
|
||
|
||
#### 性能测试
|
||
- API响应时间测试
|
||
- 并发请求处理测试
|
||
- 内存使用监控 |