# 多模型对话
**Repository Path**: edia/multi-model-dialogue
## Basic Information
- **Project Name**: 多模型对话
- **Description**: 一个现代化的多模型对话网页应用，支持同时与多个 AI 模型进行对话。实现"一发多收"的对话体验。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-05-16
- **Last Updated**: 2026-07-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 多模型对话系统
✨ 一个现代化的多模型对话网页应用，支持同时与多个 AI 模型进行对话。
---
## 目录
- [项目概述](#项目概述)
- [功能特性](#功能特性)
- [快速开始](#快速开始)
- [使用指南](#使用指南)
- [项目结构](#项目结构)
- [开发指南](#开发指南)
- [常见问题](#常见问题)
- [贡献指南](#贡献指南)
- [许可证](#许可证)
---
## 项目概述
这是一个基于 Vue 3 和本机 Node 代理构建的多模型对话客户端，用户可以同时配置和对话多个 AI 模型（如 GPT、Claude、Gemini 等），实现"一发多收"的对话体验。
## 界面预览
#### 多模型对话
#### 供应商管理
#### 模型管理
#### 手机端预览
| 多模型对话 | 供应商管理 | 模型管理 |
|:---:|:---:|:---:|
| 
| 
| 
|
**设计理念：**
- 🎯 **简单易用** - 无需云端业务后端，本机即可运行
- 🔧 **高度可配置** - 用户完全掌控模型配置
- ⚡ **高性能** - 并发请求，流式响应
- 🎨 **现代美观** - 简洁优雅的 UI 设计
- 🏠 **本地优先** - 业务数据保存在浏览器 IndexedDB，经本机同源代理请求模型服务
---
## 功能特性
### 🤖 多模型支持
- ✅ 同时配置多个 AI 模型
- ✅ 支持 OpenAI 兼容与 Anthropic Messages 文本模型
- ✅ 支持 OpenAI Images API 兼容的图片生成与单图编辑模型
- ✅ 支持默认关闭的联网搜索开关（本机先获取搜索上下文，再发送给模型）
- ✅ 一键切换模型激活状态
- ✅ 模型分组展示，颜色区分
### 💬 对话体验
- ✅ 实时流式输出（打字机效果）
- ✅ 并发发送消息到所有选中模型
- ✅ 消息历史记录
- ✅ Markdown 内容渲染
### 🔧 配置管理
- ✅ 自定义模型添加
- ✅ API Key 安全存储（IndexedDB）
- ✅ 多供应商配置管理
- ✅ 模型分组展示，颜色区分
### 🎨 用户界面
- ✅ 响应式设计，支持多面板分屏
- ✅ 现代化的 UI 风格
- ✅ 流畅的动画过渡
- ✅ 深色/浅色主题（可扩展）
- ✅ 手机端适配
---
## 快速开始
### 📦 开发者模式
```bash
# 1. 安装依赖
npm install
# 2. 启动开发服务器
npm run dev
# 3. 访问 http://127.0.0.1:3002
# 4. 构建生产版本
npm run build
```
---
## 使用指南
### 第一步：配置供应商
1. 点击首页顶部右上角的 **设置** 按钮，进入供应商配置页面
2. 添加你的模型供应商（OpenAI、Claude、Gemini 等）
3. 配置 API Key、接口地址等参数
4. 保存供应商配置
### 第二步：配置模型
1. 进入模型管理页面
2. 为每个供应商添加对应的模型
3. 启用/禁用你想要使用的模型
4. 可以自定义模型显示名称
### 第三步：选择对话模型
1. 返回聊天页面
2. 在顶部标签栏选择你想要同时对话的模型（可多选）
3. 被选中的模型会显示对应的聊天面板，可拖拽调整大小
### 第四步：开始对话
1. 在底部输入框中输入你的问题
2. 需要实时信息时，可开启输入栏中的 **联网搜索**（默认关闭，会先由本机代理获取搜索上下文）
3. 按 **Enter** 键发送（或点击发送按钮）
4. 所有选中的模型会同时收到消息并开始回复
5. 观察各个模型的回答，进行对比！
### 联网搜索说明
- 联网搜索默认关闭，只有开启后才会触发。
- 开启后，本机代理会先根据当前用户问题获取搜索/天气上下文，再把这些资料随聊天请求发送给模型。
- API Key 不会发送给搜索服务；搜索关键词和用于回答的搜索上下文会参与本次模型请求。
---
## 项目结构
```
multi-model-dialogue/
├── docs/
│ └── images/ # 页面预览图
├── public/
│ └── favicon.svg # 站点图标
├── server/
│ ├── chat-proxy.js # 聊天代理
│ ├── image-proxy.js # 图片代理
│ ├── model-fetch.js # 供应商模型列表拉取
│ ├── provider-latency.js # 供应商请求地址测速
│ └── web-search.js # 联网搜索上下文
├── src/
│ ├── api/ # 跨页面底层访问能力
│ ├── composables/ # 共享组合式函数
│ ├── data/ # 字典和 IndexedDB 表定义
│ ├── router/ # 页面路由
│ ├── stores/ # Pinia 状态管理
│ ├── utils/ # 纯工具函数
│ ├── views/ # 页面目录（chat、models、providers）
│ ├── App.vue # 根组件
│ ├── main.js # Vue 应用入口
│ └── style.css # 全局样式
├── test/ # Node 测试（*.test.js）
├── .gitignore # Git 忽略规则
├── AGENTS.md # 编码代理协作和项目约束
├── LICENSE # 开源许可证
├── README.md # 项目说明文档
├── index.html # HTML 入口
├── package-lock.json # npm 依赖版本锁定
├── package.json # 项目依赖和脚本
├── postcss.config.js # PostCSS 配置
├── server.js # 本机服务入口和同源 API 路由
├── tailwind.config.js # Tailwind CSS 配置
└── vite.config.js # Vite 配置和开发期 API 插件
```
## 开发指南
在对应页面目录的 `api.js` 中添加数据接口，在 `src/data/dictionarys/` 中添加提供商字典：
1. 在 `src/data/dictionarys/providers.js` 中添加新的提供商定义
2. 在 `src/api/http.js` 中复用通用 HTTP 调用逻辑
3. 使用 `src/views/providers/api.js` 和 `src/views/models/api.js` 管理配置
### 数据持久化
项目使用 IndexedDB 进行本地数据存储，封装在 `src/api/db.js` 中：
- `STORE_PROVIDERS` - 供应商配置表
- `STORE_MODELS` - 模型配置表
所有 CRUD 操作通过 `src/views/providers/api.js` 和 `src/views/models/api.js` 进行。
### 自定义主题
修改 `tailwind.config.js` 中的颜色配置：
```javascript
theme: {
extend: {
colors: {
primary: {
500: '#your-color', // 更改主色调
}
}
}
}
```
---
## 常见问题
### Q: API Key 安全吗？
A: 完全安全。所有配置都保存在浏览器的 `indexedDB` 中，**不会发送到任何第三方服务器**，只有在调用模型 API 时才会直接发送到对应的模型提供商。
### Q: 为什么响应很慢？
A: 响应速度取决于你使用的模型服务商的网络连接。建议：
- 选择网络延迟较低的模型
- 检查网络连接
- 考虑使用 API 代理
### Q: 可以添加自定义模型吗？
A: 当然可以！只要模型兼容 OpenAI API 格式：
1. 点击「配置」→ 添加任意预设模型
2. 修改「接口地址」为你的 API 地址
3. 修改「模型名称」为你的模型名
4. 输入 API Key 即可
### Q: 消息历史会保存吗？
A: 目前消息历史保存在内存中，刷新页面会清空。模型和供应商配置持久化存储在 IndexedDB 中。
---
## 技术栈
| 技术 | 版本 | 用途 |
|------|------|------|
| Vue | 3.4+ | 前端框架 |
| Pinia | 2.1+ | 状态管理 |
| Vue Router | 4.x | 路由管理 |
| Vite | 5.0+ | 构建工具 |
| Tailwind CSS | 3.4+ | CSS 框架 |
| Element Plus | 2.x | UI 组件库 |
| Lucide Vue Next | - | 图标库 |
| idb | 8.x | IndexedDB 封装 |
---
## 贡献指南
欢迎贡献代码、报告问题或提出建议！
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](LICENSE) 文件
---
## 📮 联系与支持
- 发现 Bug？请提交 Issue
- 有新功能想法？欢迎讨论
- 觉得好用？给个 Star ⭐ 吧！