项目概述
🚀 基于 uni-app + Vue3 构建的跨端 AI 对话应用，接入 DeepSeek v4.1 大模型，支持 H5 / 小程序 / Android APP 多端编译
- 技术栈 ：基于 Uniapp + Vue3 ，接入 DeepSeek-V3 大模型，支持编译到 H5、小程序和 App 端。
- 核心功能：实现了流式输出（打字机效果）、代码高亮、多轮对话、会话本地存储、亮色/暗黑主题等。
- 实现要点 ：小程序端通过
uni.request 开启 enableChunked 实现流式，H5 和 App 端用 renderjs 的 fetch 实现。
平台兼容性
项目结构目录
uniapp-deepseek跨三端ai对话应用已经同步到我的原创作品集。
uniapp+deepseek+vue3跨端AI流式输出对话模板
快速开始
环境要求
- Node.js >= 18
- HBuilderX >= 5.24
- DeepSeek API Key
核心特性
🔄 流式对话引擎
| 能力 |
说明 |
| SSE 流式输出 |
基于 uni.request 的 enableChunked 模式，逐字渲染打字效果，延迟 < 100ms |
| 打字机动画 |
类似deepseek打字输出效果 |
| 多轮上下文 |
维护 messages 数组，自动携带历史对话，支持上下文窗口管理（token 裁剪） |
| 本地会话存储 |
基于 uni.setStorageSync 持久化会话列表，支持会话重命名、删除、导出 |
🧠 深度思考链（Reasoning Chain）
| 能力 |
说明 |
| 思维链展示 |
解析 DeepSeek v4.1 的 reasoning_content 字段，以可折叠面板展示推理过程 |
| 渐进式渲染 |
思考链与正文同步流式输出，思考中显示脉冲动画 |
| 状态标识 |
区分「思考中 / 已思考 」状态，UI 差异化呈现 |
📐 数学公式渲染（KaTeX）
| 能力 |
说明 |
| 行内/块级公式 |
支持 $...$ 行内公式与 $$...$$ 块级公式 |
📊 Mermaid 图表渲染（H5 端）
| 能力 |
说明 |
| 实时渲染 |
识别 ```````mermaid```` 代码块，调用 Mermaid.js 渲染为 SVG |
| 交互支持 |
支持缩放、平移，点击节点可触发回调 |
| 降级策略 |
非 H5 端自动降级为代码块展示 |
💻 代码块增强
| 能力 |
说明 |
| Sticky 顶部栏 |
代码块语言标识 + 复制按钮固定吸顶，滚动不消失 |
| 横向滚动 |
长代码行横向滚动，不破坏布局 |
| 行号显示 |
左侧行号列 |
| 语法高亮 |
基于 highlight.js 按需加载语言包，支持 50+ 语言 |
| 一键复制 |
点击复制按钮，写入系统剪贴板，带成功反馈 |
🔗 链接与图片
| 能力 |
说明 |
| 链接跳转 |
自动识别 URL，H5 端 _blank 新窗口打开，APP 端调用 plus.runtime.openURL，小程序端 navigateTo 内部页 |
| 图片预览 |
识别 Markdown 图片，点击调用 uni.previewImage 全屏预览，支持缩放、保存 |
🎨 样式修复（小程序端）
| 问题 |
修复方案 |
| 表格边框线丢失 |
使用 table + border-collapse + 内联 border 属性兜底 |
| 标签选择器失效 |
将 rich-text 组件替换为自定义 mp-html 组件，通过 tag-style 属性注入样式 |
| 深度选择器 |
使用 :deep() 穿透组件样式隔离 |
| rpx 兼容性 |
统一使用 rpx 单位，避免 px 在小程序端缩放异常 |
支持运行到web端以750px排版居中布局。
项目布局模板
<template>
<uv3-layout>
<!-- 导航栏 -->
<template #header>
<Toolbar :title="chatSession?.title" />
</template>
<view v-if="chatSession && !isEmpty(chatSession.data)" class="vu__chatview flexbox flex-col">
<scroll-view :scroll-into-view="scrollIntoView" scroll-y="true" @scrolltolower="onScrollToLower" @scroll="onScroll" style="height: 100%;">
<view class="vu__chatbot">
...
</view>
<view id="scrollbottom-placeholder" style="height: 1px;"></view>
</scroll-view>
<!-- 滚动到底部 -->
<view class="vu__scrollbottom" @click="scrollToBottom"><text class="iconfont ai-arrD fw-700"></text></view>
</view>
<!-- 欢迎信息 -->
<view v-else class="vu__welcomeinfo">
<view class="intro flex-c flex-col">
<view class="logo flex-c" style="gap: 15px;">
<view class="iconfont ai-deepseek" style="font-size: 40px;"></view>
<text style="color: #999; font-size: 20px;">+</text>
<image src="/static/uni.png" mode="widthFix" style="height: 30px; width: 30px;" />
</view>
<view class="name"><text class="txt text-gradient">嘿~ Uniapp-DeepSeek</text></view>
<view class="desc">我可以帮你写代码、答疑解惑、写作各种创意内容，请把你的任务交给我吧~</view>
</view>
<view class="prompt">
<view class="tip flex-c"><text class="flex1">试试这样问</text><view class="flex-c" @click="refreshPrompt">换一换<uni-icons type="refreshempty" color="#999" size="14" /></view></view>
<view v-for="(item,index) in promptList" :key="index">
<view class="option" @click="changePrompt(item.prompt)">{{item.emoji}} {{item.prompt}} <text class="arrow iconfont ai-arrR c-999"></text></view>
</view>
</view>
</view>
<template #footer>
<view :style="{'padding-bottom': keyboardHeight + 'px'}">
<ChatEditor ref="editorRef" v-model="promptValue" :scrollBottom="scrollToBottom" />
</view>
</template>
</uv3-layout>
</template>
至此，完成了从零搭建 Uniapp + Vue3 集成 DeepSeek-Flash 的实战项目。这套方案通过流式响应实现了丝滑的对话交互。希望这篇实战笔记能为你的 AI 应用开发提供新的思路，让我们一起在 跨端 AI 的浪潮中持续探索。