# xy-electron-chat

**Repository Path**: dxy1848/xy-electron-chat

## Basic Information

- **Project Name**: xy-electron-chat
- **Description**: 对硅基流动提供的llmapi进行封装的ele客户端程序 需输入apikey 纯前端程序 可放心使用 支持主题切换 图片识别 快捷唤醒 轻量流畅
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-14
- **Last Updated**: 2026-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 序言 - AI 对话助手

基于 Electron + React 19 + Ant Design X 构建的桌面端 AI 对话应用，支持多模型切换、视觉理解、思维链展示等功能。

##  特性

-  **多模型支持** - 集成硅基流动 API，支持 Qwen、Kimi 等多个 AI 模型
-  **视觉理解** - 支持图片上传和粘贴，实现多模态对话
-  **思维链展示** - 可视化 AI 推理过程（支持 Thinking 模型）
-  **流式响应** - 实时显示 AI 回复，提升交互体验
-  **现代化 UI** - 基于 Ant Design X，支持亮色/暗色主题
-  **快捷唤起** - 全局快捷键 `Ctrl+Alt+Space` 快速唤出
-  **系统托盘** - 最小化到托盘，后台常驻
-  **API Key 管理** - 安全的本地存储，支持动态配置

##  快速开始

### 环境要求

- Node.js 18+
- pnpm 8+

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

### 构建应用

```bash
# Windows
pnpm build:win

# macOS
pnpm build:mac

# Linux
pnpm build:linux
```

##  使用指南

### 首次使用

1. 启动应用后，会提示输入硅基流动 API Key
  (可以通过我的邀请码注册 https://cloud.siliconflow.cn/i/lNSOIkGy 开发不易 感谢支持)
2. 前往 [硅基流动](https://cloud.siliconflow.cn/) 注册并获取 API Key
3. 输入 API Key 后即可开始使用

### 基本操作

- **发送消息**：输入文字后按 `Enter` 或点击发送按钮
- **取消生成**：点击"停止"按钮中断 AI 回复
- **切换模型**：点击顶部模型选择器切换不同的 AI 模型
- **清空对话**：点击顶部"清空对话"按钮
- **切换主题**：点击顶部主题切换按钮

### 视觉功能

选择支持视觉的模型（如 Kimi-K2.5）后：

1. **上传图片**：点击输入框左侧的 🖼️ 图标选择图片
2. **粘贴图片**：直接在输入框中按 `Ctrl+V` 粘贴图片
3. **删除图片**：点击图片卡片上的 ❌ 删除
4. **发送**：输入文字描述后发送，AI 会理解图片内容

支持格式：JPG、PNG、GIF、WebP（单张最大 5MB，最多 3 张）

### 快捷键

- `Ctrl+Alt+Space` - 全局唤起/隐藏窗口
- `Enter` - 发送消息
- `Ctrl+V` - 粘贴图片（视觉模型）

##  技术栈

### 核心框架

- **Electron 39** - 跨平台桌面应用框架
- **React 19** - 用户界面库
- **Vite 7** - 快速构建工具
- **electron-vite** - Electron 专用 Vite 配置

### UI 组件

- **Ant Design X** - AI 对话组件库
- **Ant Design 5** - 企业级 UI 组件库
- **Tailwind CSS 4** - 原子化 CSS 框架
- **shadcn/ui** - 高质量 React 组件

### 功能库

- **@ant-design/x-sdk** - AI 对话 SDK
- **@ant-design/x-markdown** - Markdown 渲染
- **react-syntax-highlighter** - 代码高亮

##  项目结构

```
xy/
├── src/
│   ├── main/                      # 主进程
│   │   └── index.js              # 窗口管理、托盘、快捷键
│   │
│   ├── preload/                   # 预加载脚本
│   │   └── index.js              # IPC 通信桥梁
│   │
│   └── renderer/                  # 渲染进程（前端）
│       ├── index.html            # HTML 入口
│       └── src/
│           ├── main.jsx          # React 入口
│           ├── App.jsx           # 根组件
│           │
│           ├── components/       # React 组件
│           │   ├── MessageInput.jsx      # 消息输入（支持图片上传）
│           │   ├── MessageList.jsx       # 消息列表（支持多模态）
│           │   ├── ModelSelector.jsx     # 模型选择器
│           │   ├── StatusBar.jsx         # 状态栏
│           │   ├── ApiKeySetup.jsx       # API Key 设置
│           │   └── ui/                   # shadcn/ui 组件
│           │
│           ├── hooks/            # React Hooks
│           │   ├── useChatManager.js     # 聊天管理
│           │   ├── useLocale.js          # 国际化
│           │   └── useMessageCleanup.js  # 消息清理
│           │
│           ├── providers/        # AI Provider
│           │   └── QwenChatProvider.js   # 硅基流动 API 封装
│           │
│           ├── config/           # 配置文件
│           │   ├── api.js        # API 配置
│           │   ├── models.js     # 模型列表
│           │   └── messageConfig.jsx     # 消息配置
│           │
│           ├── utils/            # 工具函数
│           │   ├── apiKey.js     # API Key 管理
│           │   └── imageUtils.js # 图片处理（Base64 转换）
│           │
│           ├── layout.jsx        # 布局组件（API Key 守卫）
│           └── assets/           # 静态资源
│
├── resources/                     # 应用资源
│   └── icon.png                  # 应用图标
│
├── electron.vite.config.mjs      # Vite 配置
├── electron-builder.yml          # 打包配置
├── components.json               # shadcn/ui 配置
├── tailwind.config.js            # Tailwind 配置
└── package.json                  # 项目依赖
```

## 🔧 核心功能实现

### 1. 多模态对话

使用 Ant Design X SDK 实现流式对话，支持文本和图片混合输入：

```javascript
// 纯文本消息
content: "你好"

// 多模态消息
content: [
  { type: "text", text: "这是什么？" },
  { type: "image_url", image_url: { url: "data:image/jpeg;base64,..." } }
]
```

### 2. 图片处理

- 使用 `FileReader` API 将图片转换为 Base64
- 支持拖拽、点击上传、粘贴三种方式
- 自动验证文件格式和大小

### 3. 思维链展示

解析 AI 响应中的 `<think>` 标签，分离思考过程和最终回复：

```javascript
// 原始响应
<think>分析问题...</think>这是答案

// 解析后
_reasoning: "分析问题..."
_content: "这是答案"
```

### 4. API Key 管理

- 使用 `localStorage` 安全存储
- 首次启动引导设置
- 支持在设置中修改

### 5. 全局快捷键

使用 Electron 的 `globalShortcut` API 注册全局快捷键：

```javascript
globalShortcut.register('CommandOrControl+Alt+Space', () => {
  mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
})
```

##  主题配置

应用支持亮色和暗色两种主题，使用 Tailwind CSS 的 `dark:` 前缀实现：

```javascript
// 切换主题
document.documentElement.classList.toggle('dark')
```

##  安全性

### Content Security Policy (CSP)

配置了严格的 CSP 策略，允许必要的资源加载：

```javascript
"default-src 'self'; 
 script-src 'self' 'unsafe-inline' 'unsafe-eval'; 
 style-src 'self' 'unsafe-inline'; 
 img-src 'self' data: blob: https:; 
 connect-src 'self' https://api.siliconflow.cn"
```

### API Key 存储

- 使用 `localStorage` 本地存储
- 不会上传到服务器
- 支持随时修改和删除

##  开发指南

### 添加新模型

在 `src/renderer/src/config/models.js` 中添加：

```javascript
{
  id: 'model-id',
  name: '模型名称',
  value: 'api-model-value',
  description: '模型描述',
  tags: ['标签1', '标签2'],
  supportsVision: true  // 是否支持视觉
}
```

### 自定义主题

修改 `tailwind.config.js` 中的颜色配置：

```javascript
theme: {
  extend: {
    colors: {
      background: 'hsl(var(--background))',
      foreground: 'hsl(var(--foreground))',
      // ...
    }
  }
}
```

### 添加新功能

1. 在 `src/renderer/src/components/` 创建组件
2. 在 `src/renderer/src/hooks/` 创建 Hook（如需要）
3. 在 `App.jsx` 中集成

##  常见问题

### 1. API Key 无效

- 检查 API Key 是否正确
- 确认硅基流动账户余额充足
- 在设置中重新输入 API Key

### 2. 图片上传失败

- 检查图片格式（支持 JPG、PNG、GIF、WebP）
- 确认图片大小不超过 5MB
- 检查是否选择了支持视觉的模型

### 3. 快捷键不生效

- 检查是否有其他应用占用了 `Ctrl+Alt+Space`
- 尝试重启应用
- 查看控制台是否有错误信息

### 4. 应用无法启动

- 删除 `node_modules` 重新安装依赖
- 检查 Node.js 版本是否符合要求
- 查看终端错误信息

##  许可证

MIT License

##  致谢

- [Ant Design X](https://x.ant.design/) - AI 对话组件库
- [硅基流动](https://cloud.siliconflow.cn/) - AI API 服务
- [Electron](https://www.electronjs.org/) - 跨平台框架
- [shadcn/ui](https://ui.shadcn.com/) - UI 组件库

##  联系方式
1848244690@qq.com


如有问题或建议，欢迎提交 Issue 或 Pull Request。