基于 uni-app + Vue3 接入 DeepSeek 的智能对话应用

项目概述

🚀 基于 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>