ai-chat-ui/README.md

3.5 KiB
Raw Blame History

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