# Qyq Chat AI

> Qyq Chat AI 是 Vue 3 多模型聊天前端，介绍会话与模型联动、SSE 流式消息、图文上下文及当前功能限制。

原始页面：[Qyq Chat AI](http://docs.quyongqing.cn/projects/qyq-chat-ai.html)

`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 流式输出兼容多协议
-   聊天页默认态与详情态拆分
-   产品化布局与响应式交互

## 扩展方向

-   短信验证码登录能力

## 项目地址

[http://chat.quyongqing.cn/](http://chat.quyongqing.cn/)