AI-CHAT-UI

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

页面展示

✨ 核心功能

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

🛠 技术栈

• 核心框架: Vue

• 流式渲染: markstream-vue

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

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

🚀 快速开始

# 克隆仓库
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 文件

💡 贡献

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

---

_{Made with ❤️ using Vue & markstream-vue}