基于deepseek实现的ai问答小程序

掘金前端

土豆亿麻袋

2025年12月4日 19:02

功能预览

截屏2025-12-04 18.38.30.png

截屏2025-12-04 18.38.45.png

截屏2025-12-04 18.38.55.png

截屏2025-12-04 18.39.52.png

截屏2025-12-04 18.39.59.png

截屏2025-12-04 18.40.36.png

截屏2025-12-04 18.41.41.png

✨ 核心特性

🚀 流式数据处理

由于微信小程序这里对SSE的流式处理不支持，只有chunks的模式，故采用H5的方式来实现。
SSE（Server-Sent Events）流式接收：实现了完整的流式数据处理机制，在收到第一块数据时立即渲染
分块解析与缓冲：支持多行 SSE 事件的正确解析，处理不完整的数据块
实时渲染反馈：使用 requestAnimationFrame 优化渲染性能，避免频繁 DOM 更新导致的卡顿

💬 对话管理

消息追踪系统：自动生成唯一消息 ID，维护消息状态（pending/success/error）
会话隔离：支持多会话并行，可创建、切换、管理历史会话
消息快照存储：保存用户消息与 AI 回复的完整上下文

🎨 交互优化

思考中加载动画：AI 回复延迟时的优雅 UX——流式数据到达时即刻消失
自动滚动定位：智能滚动到最新消息，支持指定消息定位，避免内容变化导致的滚动位置偏移
消息操作面板：支持复制、点赞、重新生成等交互功能

🎯 多模型支持

模型切换器：支持在对话过程中动态选择不同 AI 模型
- 快速问答模式（deepseek-chat）
- 深度思考模式（deepseek-reasoner）

📝 Markdown 渲染

完整的 Markdown 支持：包括代码块、表格、列表、引用等
代码高亮：使用 highlight.js 实现多语言代码着色
HTML 安全渲染：配置化处理，支持链接自动新窗口打开

🎨 设计系统

现代渐变设计：渐变色（紫→紫→粉）贯穿整个应用
响应式布局：基于 CSS 变量的深浅主题支持
动画细节：平滑的消息滑入、加载转圈、脉冲效果等

🏗️ 项目结构

src/
├── components/              # Vue 组件库
│   ├── MessageItem.vue      # 单条消息渲染组件（含 Markdown 解析、操作面板）
│   ├── InputArea.vue        # 输入框及工具栏（含模型选择、录音、新建会话）
│   ├── HistroySessions.vue  # 历史会话管理弹窗
│   └── HelloWorld.vue       # 示例组件
├── utils/
│   ├── type.ts              # TypeScript 类型定义（ChatMessage、Session 等）
│   ├── request.ts           # HTTP 请求封装（get/post）
│   ├── streamRequest.ts     # SSE 流式请求实现
│   └── markdown.ts          # Markdown 渲染引擎配置
├── assets/                  # 静态资源
│   ├── regenerate-icon.svg  # 重新生成按钮图标
│   ├── copy-icon.svg        # 复制按钮图标
│   ├── like-icon.svg        # 点赞按钮图标
│   ├── thinking-icon.svg    # 思考中加载动画
│   └── logo1.png            # AI 角色头像
├── App.vue                  # 主应用组件（核心业务逻辑）
├── main.ts                  # 应用入口
└── style.scss               # 全局样式与设计系统变量

🔧 技术栈

技术	版本	用途
Vue	3.5.13	前端框架
TypeScript	5.8	类型安全
Vite	6.3.5	构建工具
Markdown-it	14.1.0	Markdown 渲染
highlight.js	内置	代码高亮
SCSS	1.94.2	样式预处理
Element Plus	2.10.4	UI 组件库（可选）
socket.io-client	4.8.1	WebSocket 支持（预留）

📥 快速开始

前置要求

Node.js >= 16
npm 或 yarn

安装依赖

npm install

开发服务器

npm run dev

访问 http://localhost:5173

生产构建

npm run build

构建输出到 dist/ 目录

预览构建结果

npm run preview

🎯 核心业务流程

对话流程

用户输入 → 发送消息
    ↓
创建 User Message (pending)
显示在消息列表 → 自动滚动到底部
    ↓
调用 streamFetch（POST /api/ai/chat）
Assistant Message 创建 (pending)
    ↓
SSE 数据流开始接收
    ├─ 第一块数据到达 → status 变为 success（思考中 icon 消失）
    ├─ 持续接收 → 实时渲染 Markdown 内容
    └─ 滚动到最新消息
    ↓
流结束 (onDone) → 最终更新消息状态
    ↓
用户可进行操作：复制、点赞、重新生成

会话管理流程

新建会话 → POST /api/ai/sessions
    ↓
获取 session.id → 用于后续对话上下文关联
    ↓
切换历史会话 → GET /api/ai/sessions/{id}/messages
    ↓
加载历史消息 → 等待 DOM 稳定 → 智能滚动到底部

🔐 API 接口约定

对话接口

POST /api/ai/chat
Body: {
  messages: Array<{ role: string; content: string }>,
  sessionId?: string | number,
  stream: true,
  model: string  // "deepseek-chat" | "deepseek-reasoner"
}
Response: 流式 SSE
  data: 文本块
  [可选] event: 事件类型
  [可选] id: 事件 ID

会话接口

POST /api/ai/sessions
Body: { title: string; summary?: string }
Response: { session: { id: string | number; ... } }

GET /api/ai/sessions/{id}/messages
Response: { messages: Array<HistoryMessage> }
  HistoryMessage = {
    role: "assistant" | "user",
    content: string,
    created_at?: string
  }

💡 亮点分析

1. 高性能流式渲染

使用 requestAnimationFrame 进行 Markdown 渲染节流，避免频繁重排/重绘
SSE 流数据的分块处理和缓冲机制确保即便数据包不完整也能正确解析
流式更新时的自动滚动采用两帧 rAF 等待，确保 CSS 动画和布局稳定

2. 响应式适配

使用rem单位做响应式适配，目前支持各种大小屏幕的设备，兼容PC端的良好显示。

关键代码

// 用于设置rem单位的字体大小(动态)
function setRem() {
    const baseWidth = 375; // 设计稿宽度
    const minFontSize = 6; // 最小字体
    const maxFontSize = 16; // 最大字体（PC屏或大屏限制）
    const html = document.documentElement;
    const width = html.clientWidth;

    let fontSize = (width / baseWidth) * 12;

    if (fontSize < minFontSize) fontSize = minFontSize;
    if (fontSize > maxFontSize) fontSize = maxFontSize;

    html.style.fontSize = fontSize + 'px';
}
setRem();
window.addEventListener('resize', setRem);


## 🔄 后续优化方向

*   [ ] 语音输入完整实现（当前预留）
*   [ ] 消息搜索与过滤
*   [ ] 导出对话记录（PDF、Markdown）
*   [ ] 数据加密传输
*   [ ] 更多 AI 模型集成

## 📄 相关文件说明

| 文件                 | 说明                               |
| ------------------ | -------------------------------- |
| `streamRequest.ts` | SSE 流式数据解析的核心实现，支持多行 data 字段     |
| `App.vue`          | 主业务逻辑，包含对话流程、会话管理、自动滚动优化         |
| `MessageItem.vue`  | 消息渲染与交互，思考中加载动画、Markdown 解析、操作按钮 |
| `InputArea.vue`    | 输入框、模型切换、会话操作                    |
| `markdown.ts`      | Markdown-it 配置，代码高亮、链接处理         |
| `style.scss`       | 全局设计系统，渐变、主题、动画                  |

阅读视图