Appearance
Qyq Chat AI
qyq-chat-ai 是一个面向 AI 对话场景的前端项目，重点提供企业风格的聊天界面、模型选择、会话管理和用户交互体验。
项目定位
- 面向 AI 对话产品的前端应用
- 强调聊天体验、界面一致性和交互效率
- 适合作为多模型对话产品的前端壳层
核心能力
- 对话能力：支持聊天页、流式消息展示和会话切换
- 模型能力：支持模型选择、RAG 选择和文件选择等对话辅助能力
- 用户能力：包含登录弹窗、用户资料、头像下拉等常见账户功能
- 布局能力：包含侧边栏、顶部栏和聊天主区域的完整页面结构
技术栈
- Vue 3
- TypeScript
- Vite
- Element Plus
- Pinia
- Vue Router
- Axios
- UnoCSS
适合承载的场景
- AI 对话前端
- 多模型聊天产品
- 企业内部 AI 助手界面
- 需要快速落地的聊天类项目
技术亮点
1. 会话与模型联动
- 模型选择不是单独的 UI 状态，而是和当前会话绑定
- 切换会话时会自动同步当前会话模型，避免出现“界面显示一个模型、请求实际发到另一个模型”的错位
- 模型列表同时兼容文本、图像、视频等分类，后续扩模型时不需要推翻现有结构
2. 流式输出做了协议兼容
- 前端不是只吃一种固定格式的 SSE，而是兼容普通文本流、OpenAI 风格
delta、进度事件和思考链事件 - 流式过程中把
content、reasoning、progress等信息拆开处理，便于前端分别展示 - 输出阶段先插入 AI 空消息，再逐块追加内容，页面体验更稳定
3. 图文上下文统一走 Markdown
- 图片不是作为特殊页面结构硬编码，而是先上传，再转成 Markdown 图片链接拼进上下文
- 文本消息、图片消息、历史回显共用一套 Markdown 渲染链路
- 这种做法代码量更小，也方便和后端统一协议
4. 聊天页拆成默认页和详情页
- 默认页负责“先输入内容”
- 详情页负责“进入具体会话后真正发起流式请求”
- 这让新建会话和已有会话继续聊天分开处理，逻辑更清晰
5. 布局与交互偏产品化
- 侧边栏、顶部栏、主聊天区做了清晰拆分
- 支持会话分组、会话切换、模型标签展示、快捷键新建对话
- 响应式折叠和宽度监听也单独抽成了 hook，便于后续扩展
技术难点
1. 短信登录目前只完成协议预留
- 接口类型里已经预留了验证码登录和发送验证码能力
- 当前前端真正落地的是“手机号 + 密码登录”
- 如果后面补短信登录，还需要补发送验证码、倒计时、登录方式切换和异常提示这整套交互
2. 流式协议不统一
- 不同模型、不同后端返回的流式事件格式并不一致
- 前端现在已经做了较多兼容分支，这部分是能体现技术能力的点，但后续维护成本也高
3. 图文上下文目前偏务实方案
- 当前实现是“图片上传后转 Markdown 链接，再作为上下文发给后端”
- 这种方式简单有效，但还不是真正的多模态消息结构
- 如果后面后端统一升级成
messages[].content[]这类结构，这里需要再做一轮重构
4. 草稿跨页依赖本地存储
- 默认页和详情页之间的草稿传递依赖
localStorage - 文本草稿链路比较直接
- 文件草稿和跨页恢复相对复杂，后续如果继续增强，需要重点看一致性
项目特点
- 多模型切换与会话绑定
- 图文上下文统一处理
- SSE 流式输出兼容多协议
- 聊天页默认态与详情态拆分
- 产品化布局与响应式交互
扩展方向
- 短信验证码登录能力