# ai-chat-ui

**Repository Path**: Joseph11/aichat-ui

## Basic Information

- **Project Name**: ai-chat-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-03-16
- **Last Updated**: 2026-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI-CHAT-UI

一个基于 Vue 和 markstream-vue 构建的现代化 AI 对话界面，提供丰富的交互功能和精美的视觉体验。

## 页面展示

![](screenshots/img.png)
![](screenshots/img_1.png)
![](screenshots/img_2.png)
![](screenshots/img_3.png)
![](screenshots/img_4.png)
![](screenshots/img_5.png)
![](screenshots/img_6.png)

## ✨ 核心功能

| 功能    | 详细描述                                |
|-------|-------------------------------------|
| 对话历史  | 支持多对话管理、置顶、重命名、删除                   |
| 新建对话  | 快捷键 Ctrl+N 或点击按钮快速创建                |
| 页面布局  | 支持宽屏/标准模式切换，适配不同使用场景                |
| 附件上传  | 支持图片、文件上传和在线预览                      |
| 智能搜索  | 深度搜索/联网搜索，工具栏开关一键切换                 |
| 消息操作  | 消息栏支持点赞、点踩、复制操作                     |
| 精美UI  | 现代化设计，支持暗色主题，视觉体验优秀                 |
| 消息布局  | AI/用户消息左右分布（用户右侧，AI 左侧），符合使用习惯      |
| 多类型消息 | 支持文本、图片、视频、附件、推荐选项等多种消息类型展示         |
| 快捷键系统 | 完整的快捷键支持，提升操作效率                     |
| 流式输出  | 基于 markstream-vue 实现流畅的AI回答流式展示     |
| 渲染展示  | 支持mermaid、代码块、ECharts、Thinking等流式展示 |
| 对话搜索  | 模态框快速搜索历史对话内容                       |
| 全局设置  | 外观、对话默认值、功能开关、隐私设置等全局配置             |
| 对话设置  | 单个对话的模型、温度、提示词等个性化设置                |
| 主题切换  | 支持浅色/深色/跟随系统三种主题模式                  |
| 字体大小  | 小/中/大三档字体大小可选，适配不同阅读习惯              |
| 数据管理  | 导入/导出设置、清除数据，保障数据安全                 |
| 预设提示词 | 快速选择常用角色设定，提升对话效率                   |

## 🛠 技术栈

- **核心框架**: Vue

- **流式渲染**: markstream-vue

- **UI 设计**: 现代化响应式设计，支持暗色主题

- **交互体验**: 丰富的快捷键系统和消息操作

## 🚀 快速开始

```Bash

# 克隆仓库
git clone https://github.com/zll-it/ai-chat-ui.git

# 进入项目目录
cd ai-chat-ui

# 安装依赖
npm install

# 启动开发服务器
npm run dev

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

## 📋 使用说明

### 基础操作

- **新建对话**: `Ctrl+N` 快捷键或点击页面右上角 "+" 按钮

- **切换布局**: 点击页面右下角布局切换按钮

- **主题切换**: 设置面板中选择浅色/深色/跟随系统

- **搜索对话**: 使用页面顶部搜索框或快捷键 `Ctrl+K`

### 快捷键一览

| 操作     | 快捷键                 |
|--------|---------------------|
| 新建对话   | Ctrl+N              |
| 搜索对话   | Ctrl+K              |
| 复制当前消息 | Ctrl+C (消息 hover 时) |
| 切换布局   | Ctrl+Shift+L        |

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 💡 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！

---

<div align="center">

<sub>Made with ❤️ using Vue & markstream-vue</sub>

</div>