# 多模型对话

**Repository Path**: edia/multi-model-dialogue

## Basic Information

- **Project Name**: 多模型对话
- **Description**: 这是一个多模型对话的web端项目，用户可以同时配置和对话多个 AI 模型（如 GPT、Claude、Gemini 等），实现"一发多收"的对话体验。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-16
- **Last Updated**: 2026-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 多模型对话系统

✨ 一个现代化的多模型对话网页应用，支持同时与多个 AI 模型进行对话。

---

## 目录

- [项目概述](#项目概述)
- [功能特性](#功能特性)
- [快速开始](#快速开始)
- [使用指南](#使用指南)
- [支持的模型](#支持的模型)
- [项目结构](#项目结构)
- [开发指南](#开发指南)
- [常见问题](#常见问题)
- [贡献指南](#贡献指南)
- [许可证](#许可证)

---

## 项目概述

这是一个基于 Vue 3 构建的多模型对话客户端，用户可以同时配置和对话多个 AI 模型（如 GPT、Claude、Gemini 等），实现"一发多收"的对话体验。

**设计理念：**
- 🎯 **简单易用** - 无需后端服务，纯前端应用
- 🔧 **高度可配置** - 用户完全掌控模型配置
- ⚡ **高性能** - 并发请求，流式响应
- 🎨 **现代美观** - 简洁优雅的 UI 设计

---

## 功能特性

### 🤖 多模型支持
- ✅ 同时配置多个 AI 模型
- ✅ 支持 OpenAI 兼容接口的所有模型
- ✅ 一键切换模型激活状态
- ✅ 模型分组展示，颜色区分

### 💬 对话体验
- ✅ 实时流式输出（打字机效果）
- ✅ 并发发送消息到所有选中模型
- ✅ 消息历史记录
- ✅ Markdown 内容渲染

### 🔧 配置管理
- ✅ 预设模型模板（8+ 种主流模型）
- ✅ 自定义模型添加
- ✅ API Key 安全存储（IndexedDB）
- ✅ 多供应商配置管理
- ✅ 模型分组展示，颜色区分

### 🎨 用户界面
- ✅ 响应式设计，支持多面板分屏
- ✅ 现代化的 UI 风格
- ✅ 流畅的动画过渡
- ✅ 深色/浅色主题（可扩展）

---

## 快速开始

### 📦 开发者模式

```bash
# 1. 安装依赖
npm install

# 2. 启动开发服务器
npm run dev

# 3. 访问 http://localhost:3000

# 4. 构建生产版本
npm run build
```

---

## 使用指南

### 第一步：配置供应商

1. 点击首页顶部右上角的 **设置** 按钮，进入供应商配置页面
2. 添加你的模型供应商（OpenAI、Claude、Gemini 等）
3. 配置 API Key、接口地址等参数
4. 保存供应商配置

### 第二步：配置模型

1. 进入模型管理页面
2. 为每个供应商添加对应的模型
3. 启用/禁用你想要使用的模型
4. 可以自定义模型显示名称

### 第三步：选择对话模型

1. 返回聊天页面
2. 在顶部标签栏选择你想要同时对话的模型（可多选）
3. 被选中的模型会显示对应的聊天面板，可拖拽调整大小

### 第四步：开始对话

1. 在底部输入框中输入你的问题
2. 按 **Enter** 键发送（或点击发送按钮）
3. 所有选中的模型会同时收到消息并开始回复
4. 观察各个模型的回答，进行对比！

---

## 项目结构

```
multi-model-chat/
├── 📄 package.json             # 项目依赖配置
├── 📄 vite.config.js           # Vite 构建配置
├── 📄 tailwind.config.js       # Tailwind CSS 配置
├── 📄 postcss.config.js        # PostCSS 配置
├── 📄 index.html               # HTML 入口
├── 📁 src/
│   ├── 📄 main.js              # 应用入口
│   ├── 📄 App.vue              # 根组件
│   ├── 📄 style.css            # 全局样式
│   ├── 📁 api/                 # API 层
│   │   ├── 📄 db.js            # IndexedDB 封装
│   │   ├── 📄 providers.js     # 供应商 CRUD
│   │   ├── 📄 models.js        # 模型 CRUD
│   │   ├── 📄 http.js          # HTTP 请求封装
│   │   └── 📄 index.js         # API 统一导出
│   ├── 📁 components/          # Vue 组件
│   │   ├── 📄 ChatPanel.vue    # 聊天面板
│   │   ├── 📄 ChatInput.vue    # 输入框
│   │   └── 📄 MessageBubble.vue # 消息气泡
│   ├── 📁 composables/         # 组合式函数
│   │   └── 📄 useModels.js     # 模型数据管理
│   ├── 📁 data/                # 数据配置
│   │   ├── 📁 dictionarys/     # 字典数据
│   │   └── 📁 indexedDB/       # IndexedDB 表定义
│   ├── 📁 router/              # 路由配置
│   │   └── 📄 index.js         # 路由定义
│   ├── 📁 stores/              # Pinia 状态管理
│   │   └── 📄 chat.js          # 聊天状态
│   ├── 📁 utils/               # 工具函数
│   └── 📁 views/               # 页面组件
│       ├── 📄 ChatView.vue     # 聊天页面
│       ├── 📄 ModelsView.vue   # 模型列表页面
│       └── 📄 ProviderView.vue # 供应商配置页面
├── 📄 README.md                # 文档
```

## 开发指南

### 添加新的模型提供商

在 `src/api/` 目录中添加相应的 API 调用逻辑，在 `src/data/dictionarys/` 中添加提供商字典：

1. 在 `src/data/dictionarys/providers.js` 中添加新的提供商定义
2. 在 `src/api/http.js` 中实现 API 调用逻辑（已支持 OpenAI 兼容格式）
3. 使用 `src/api/providers.js` 和 `src/api/models.js` 管理配置

```javascript
// 示例：添加新的模型
import { modelAPI } from '../api'

await modelAPI.add({
  providerId: 1,
  viewName: '我的自定义模型',
  modelName: 'my-model-v1',
  enabled: true
})
```

### 数据持久化

项目使用 IndexedDB 进行本地数据存储，封装在 `src/api/db.js` 中：

- `STORE_PROVIDERS` - 供应商配置表
- `STORE_MODELS` - 模型配置表

所有 CRUD 操作通过 `src/api/providers.js` 和 `src/api/models.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 ⭐ 吧！

---

**最后更新**：2026-05-17  
**版本**：v1.0.0