105 lines
3.5 KiB
Markdown
105 lines
3.5 KiB
Markdown
# AI-CHAT-UI
|
||
|
||
一个基于 Vue 和 markstream-vue 构建的现代化 AI 对话界面，提供丰富的交互功能和精美的视觉体验。
|
||
|
||
## 页面展示
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## ✨ 核心功能
|
||
|
||
| 功能 | 详细描述 |
|
||
|-------|-------------------------------------|
|
||
| 对话历史 | 支持多对话管理、置顶、重命名、删除 |
|
||
| 新建对话 | 快捷键 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>
|