YiLin/phone-app------test1-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

流式输出

Browse Source
This commit is contained in:
YiLin
2026-07-16 11:22:47 +08:00
parent d6437419b1
commit f53beabdf6
3 changed files with 399 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
pages/Chat/Chat.vue
View File

@@ -34,23 +34,6 @@
</view>
</view>
<!-- ===== ai正在思考弹窗（仅本设备发起时显示） ===== -->
<view v-if="isThinking && isSelfSent" class="ncd-overlay" @click.stop>
<view class="ncd-card ai-card">
<view class="thinking-content">
<view class="loading-dots">
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
</view>
<text class="thinking-text">AI 正在思考中...</text>
<view class="stop-thinking-btn" @click="stopConversation">
<text>⏹ 中断对话</text>
</view>
</view>
</view>
</view>
<!-- ===== 消息详情弹窗 ===== -->
<view v-if="showMessageModal" class="ncd-overlay" @click="closeMessageDetail">
<view class="ncd-card message-detail-card" @click.stop>
@@ -97,51 +80,60 @@
</view>
<view class="main-chat">
<scroll-view class="chat-messages" direction="vertical" scroll-y :scroll-into-view="scrollToView"
:upper-threshold="0" :scroll-with-animation="true"
@scroll="onScroll">
<!-- 与AI的对话内容展示 -->
<template v-for="(message, index) in currentMessages" :key="index">
<view v-if="ChatType === 0 && message.role !== 'tool'" class="chat-message"
:id="'msg-' + index" :class="{'message-user':message.role==='user'}">
<!-- <view class="chat-avatar" :class="{'chat-avatar-user':message.role==='user'}">
:upper-threshold="0" :scroll-with-animation="true" @scroll="onScroll">
<!-- 与AI的对话内容展示 -->
<template v-for="(message, index) in currentMessages" :key="index">
<view v-if="ChatType === 0 && message.role !== 'tool'" class="chat-message" :id="'msg-' + index"
:class="{'message-user':message.role==='user'}">
<!-- <view class="chat-avatar" :class="{'chat-avatar-user':message.role==='user'}">
<image v-if="message.role === 'user' && UserData?.avatar" :src="UserData.avatar"
class="friend-avatar" mode="aspectFill"></image>
<view v-else-if="message.role === 'assistant'" class="iconfont icon-Robot"></view>
<view v-else class="iconfont icon-yonghuziliao"></view>
</view> -->
<view v-if="message.role ==='user'" class="chat-avatar"
:class="{'chat-avatar-user':message.role==='user'}">
<image v-if="message.role === 'user' && UserData?.avatar" :src="UserData.avatar"
class="friend-avatar" mode="aspectFill"></image>
<view v-else class="iconfont icon-yonghuziliao"></view>
<!-- <view v-if="message.role ==='assistant'" class="iconfont icon-Robot"></view> -->
<!-- <view v-if="message.role ==='user'" class="iconfont icon-yonghuziliao"></view> -->
</view>
<view class="chat-content" :class="{'chat-content-user':message.role==='user', 'chat-content-assistant':message.role==='assistant'}"
@click="showMessageDetail(message)"
v-if="message.content && String(message.content).trim() !== ''">
<!-- 文本内容 -->
<view v-if="parseFileInfo(message.content).textContent"
v-html="pareseMarkdown(parseFileInfo(message.content).textContent)"></view>
<!-- 文件卡片列表 -->
<view v-if="parseFileInfo(message.content).files.length > 0" class="message-file-list">
<view v-for="(file, idx) in parseFileInfo(message.content).files" :key="idx" class="file-item">
<!-- 图片：jpg/png/gif/webp 等 -->
<image
v-if="['jpg','jpeg','png','gif','webp','bmp'].includes(file.extendName.toLowerCase())"
:src="file.url" mode="widthFix" class="message-image"
@click="previewImage(file.url)"></image>
<!-- 普通文件：doc/xlsx/zip/pdf 等 -->
<view v-else class="message-file" @click="openFile(file.url)">
<view class="file-icon">📄</view>
<view class="file-name">{{ file.name }}</view>
<view class="file-size">{{ formatFileSize(file.fileSize) }}</view>
<view v-if="message.role ==='user'" class="chat-avatar"
:class="{'chat-avatar-user':message.role==='user'}">
<image v-if="message.role === 'user' && UserData?.avatar" :src="UserData.avatar"
class="friend-avatar" mode="aspectFill"></image>
<view v-else class="iconfont icon-yonghuziliao"></view>
<!-- <view v-if="message.role ==='assistant'" class="iconfont icon-Robot"></view> -->
<!-- <view v-if="message.role ==='user'" class="iconfont icon-yonghuziliao"></view> -->
</view>
<view class="chat-content"
:class="{'chat-content-user':message.role==='user', 'chat-content-assistant':message.role==='assistant'}"
@click="showMessageDetail(message)"
v-if="(message.content && String(message.content).trim() !== '') || message._streaming">
<!-- 流式加载中：显示跳动的点 -->
<view
v-if="message._streaming && (!message.content || String(message.content).trim() === '')"
class="bubble-loading-dots">
<view class="bubble-dot"></view>
<view class="bubble-dot"></view>
<view class="bubble-dot"></view>
</view>
<!-- 文本内容 -->
<view v-if="parseFileInfo(message.content).textContent"
v-html="pareseMarkdown(parseFileInfo(message.content).textContent)"></view>
<!-- 文件卡片列表 -->
<view v-if="parseFileInfo(message.content).files.length > 0" class="message-file-list">
<view v-for="(file, idx) in parseFileInfo(message.content).files" :key="idx"
class="file-item">
<!-- 图片：jpg/png/gif/webp 等 -->
<image
v-if="['jpg','jpeg','png','gif','webp','bmp'].includes(file.extendName.toLowerCase())"
:src="file.url" mode="widthFix" class="message-image"
@click="previewImage(file.url)"></image>
<!-- 普通文件：doc/xlsx/zip/pdf 等 -->
<view v-else class="message-file" @click="openFile(file.url)">
<view class="file-icon">📄</view>
<view class="file-name">{{ file.name }}</view>
<view class="file-size">{{ formatFileSize(file.fileSize) }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</template>
<!-- 与好友的对话内容展示 -->
<view v-if="ChatType === 1" class="chat-message" v-for="(message, index) in currentMessages"
:key="index" :id="'msg-' + index" :class="{'message-user':message.sender === UserId}">
@@ -218,11 +210,16 @@
</view>
</view>
</view>
<!-- 底部锚点：两个交替切换，确保流式时每次都能触发滚动到底部 -->
<view id="chat-bottom-a" style="height: 1rpx;"></view>
<view id="chat-bottom-b" style="height: 1rpx;"></view>
</scroll-view>
<view class="chat-interactive-container" :class="{ 'interactive-disabled': isThinking }">
<view class="chat-interactive-group">
<view class="chat-interactive-btn" :class="{ disabled: isThinking }" @click="!isThinking && uploadPhoto()">拍照上传</view>
<view class="chat-interactive-btn" :class="{ disabled: isThinking }" @click="!isThinking && uploadFile()">上传文件</view>
<view class="chat-interactive-btn" :class="{ disabled: isThinking }"
@click="!isThinking && uploadPhoto()">拍照上传</view>
<view class="chat-interactive-btn" :class="{ disabled: isThinking }"
@click="!isThinking && uploadFile()">上传文件</view>
</view>
<view class="image-list" v-if="previewFileArray.length > 0">
<view class="image-tags">
@@ -233,14 +230,15 @@
</view>
</view>
<view class="chat-input-container" :class="{ 'input-disabled': isThinking }">
<textarea class="message-input" :placeholder="isThinking ? (isSelfSent ? 'AI 正在回复中...' : '电脑正在运行，请稍后') : '输入消息...'" :disabled="isThinking"
v-model="textMessage" auto-height></textarea>
<view v-if="isThinking && !isSelfSent" class="input-btn-group stop-message-btn" @click="stopConversation">
<view class="iconfont icon-tingzhi"></view>
</view>
<view v-else class="input-btn-group send-message-btn" :class="{ disabled: isThinking }" @click="!isThinking && sendMessage()">
<view class="iconfont icon-fasong"></view>
</view>
<textarea class="message-input"
:placeholder="isThinking ? (isSelfSent ? 'AI 正在回复中...' : '电脑正在运行，请稍后') : '输入消息...'"
:disabled="isThinking" v-model="textMessage" auto-height></textarea>
<view v-if="isThinking" class="input-btn-group stop-message-btn" @click="stopConversation">
<view class="iconfont icon-tingzhi"></view>
</view>
<view v-else class="input-btn-group send-message-btn" @click="sendMessage()">
<view class="iconfont icon-fasong"></view>
</view>
</view>
</view>
</view>
@@ -381,7 +379,8 @@
html += '<tr>'
cells.forEach((cell, ci) => {
const align = alignments[ci] ? ` style="text-align:${alignments[ci]}"` : ''
html += `<${tag}${align} style="padding:6px 10px;border:1px solid #ddd">${cell.trim()}</${tag}>`
html +=
`<${tag}${align} style="padding:6px 10px;border:1px solid #ddd">${cell.trim()}</${tag}>`
})
html += '</tr>'
})
@@ -465,16 +464,28 @@
// 从消息 content 中提取文件信息
// 格式: [文件信息:[{...}]]
const parseFileInfo = (content) => {
if (!content || typeof content !== 'string') return { textContent: content || '', files: [] }
if (!content || typeof content !== 'string') return {
textContent: content || '',
files: []
}
const match = content.match(/\[文件信息:(\[.*?\])\]/)
if (!match) return { textContent: content, files: [] }
if (!match) return {
textContent: content,
files: []
}
try {
const files = JSON.parse(match[1])
const textContent = content.replace(match[0], '').trim()
return { textContent, files }
return {
textContent,
files
}
} catch (e) {
console.error('解析文件信息失败:', e)
return { textContent: content, files: [] }
return {
textContent: content,
files: []
}
}
}
@@ -544,7 +555,7 @@
url: '/pages/WorkSpace/WorkSpace'
})
}
// 跳转到云端数据库
const goCloudDatabase = () => {
// 保存当前会话id，确保从工作区返回时能恢复
@@ -621,7 +632,7 @@
const handleConnect = () => {
return new Promise((resolve, reject) => {
if (socketStore.isConnected) return resolve()
// 监听连接成功
const unwatch = watch(() => socketStore.isConnected, (connected) => {
if (connected) {
@@ -655,6 +666,7 @@
const isSelfSent = ref(false) // 是否当前设备发起的 AI 对话（用于区分弹窗/仅锁输入）
const isUploading = ref(false)
const uploadedFiles = ref([])
const streamingMessageId = ref(null) // 流式消息的临时 ID，用于实时更新 AI 回复
// 消息详情弹窗
const showMessageModal = ref(false)
@@ -830,18 +842,23 @@
}
socketStore.send(data)
isThinking.value = true
isSelfSent.value = true // 标记为当前设备发起
// // 10分钟超时
// aiResponseTimer = setTimeout(() => {
// uni.showToast({
// title: 'AI回复超时，请重试',
// icon: 'none'
// })
// isThinking.value = false
// isSelfSent.value = false
// textMessage.value = ''
// uploadedFiles.value = []
// }, 600000)
isSelfSent.value = true
// 立即添加用户消息到列表（使用完整的 messageContent，包含文件信息）
allmessages.value = [...allmessages.value, {
role: 'user',
content: messageContent
}]
// 添加流式消息气泡（加载中状态）
streamingMessageId.value = 'streaming-' + Date.now()
allmessages.value = [...allmessages.value, {
role: 'assistant',
content: '',
_streaming: true,
_id: streamingMessageId.value
}]
textMessage.value = ''
uploadedFiles.value = []
scrollToBottom()
} catch (error) {
isThinking.value = false
uni.showToast({
@@ -863,6 +880,11 @@
} catch (err) {
console.error('中断指令发送失败:', err)
}
// 移除流式消息占位
if (streamingMessageId.value) {
allmessages.value = allmessages.value.filter(m => m._id !== streamingMessageId.value)
streamingMessageId.value = null
}
// 立即关闭弹窗，清除超时
// clearTimeout(aiResponseTimer)
isThinking.value = false
@@ -871,22 +893,40 @@
textMessage.value = ''
uploadedFiles.value = []
// takeConversationMessages 由后端中断确认驱动（见 handleBusinessMessage）
uni.showToast({ title: '已中断', icon: 'none', duration: 1500 })
uni.showToast({
title: '已中断',
icon: 'none',
duration: 1500
})
}
// 全局监听 socketStore.isThinking：跨设备同步思考状态，锁/解锁输入框
watch(() => socketStore.isThinking, (newVal, oldVal) => {
console.log("isThinking 变化:", oldVal, "→", newVal, "messageString:", socketStore.messageString);
// false → true：后端开始回复（当前设备或其他设备触发），锁定输入框
// false → true：后端开始回复，锁定输入框
if (!oldVal && newVal) {
console.log('AI开始回复（跨设备同步），锁定输入框');
isThinking.value = true
// 非本设备发起时，也需要添加流式气泡
if (!streamingMessageId.value) {
streamingMessageId.value = 'streaming-' + Date.now()
allmessages.value = [...allmessages.value, {
role: 'assistant',
content: '',
_streaming: true,
_id: streamingMessageId.value
}]
}
return
}
// true → false：AI 回复结束或中断，解锁输入框并刷新消息列表
if (oldVal && !newVal) {
// clearTimeout(aiResponseTimer)
console.log('AI回复结束（正常/中断），解锁并刷新消息列表');
// 移除流式消息气泡，从服务器加载完整消息
if (streamingMessageId.value) {
allmessages.value = allmessages.value.filter(m => m._id !== streamingMessageId.value)
streamingMessageId.value = null
}
takeConversationMessages()
isThinking.value = false
isSelfSent.value = false
@@ -911,6 +951,22 @@
}
})
// 监听流式消息内容，实时更新 AI 回复（流式输出核心）
watch(() => socketStore.messageString, (newContent) => {
if (!streamingMessageId.value || !socketStore.isThinking) return
const idx = allmessages.value.findIndex(m => m._id === streamingMessageId.value)
if (idx >= 0) {
// 使用 splice 保证 Vue 响应式更新
const updated = {
...allmessages.value[idx],
content: newContent
}
allmessages.value.splice(idx, 1, updated)
scrollToBottom()
}
})
const textMessage = ref('')
// 获取用户历史会话列表
@@ -1071,6 +1127,7 @@
// const pageInfoNumber = 10;
const scrollToView = ref('')
const bottomToggle = ref(false)
// 加载状态和分页相关变量
const isLoadingMore = ref(false) // 是否正在加载更多
const currentPage = ref(1) // 当前页码（如果后端支持分页）
@@ -1155,7 +1212,9 @@
const scrollToBottom = async () => {
await nextTick();
if (currentMessages.value.length > 0) {
scrollToView.value = 'msg-' + (currentMessages.value.length - 1);
// 两个锚点交替切换，确保每次调用都能触发滚动
bottomToggle.value = !bottomToggle.value
scrollToView.value = bottomToggle.value ? 'chat-bottom-a' : 'chat-bottom-b'
}
}
@@ -1262,19 +1321,79 @@
<!-- v-html 渲染的 markdown 内容无法被 scoped 样式命中，需非 scoped 样式块 -->
<style lang="scss">
.chat-content {
h1 { font-size: 42rpx; line-height: 1.4; margin: 16rpx 0 10rpx; }
h2 { font-size: 38rpx; line-height: 1.4; margin: 14rpx 0 8rpx; }
h3 { font-size: 36rpx; line-height: 1.4; margin: 12rpx 0 8rpx; }
h4, h5, h6 { font-size: 34rpx; line-height: 1.5; margin: 10rpx 0 6rpx; }
.chat-content {
h1 {
font-size: 42rpx;
line-height: 1.4;
margin: 16rpx 0 10rpx;
}
/* 普通正文 */
p,
text,
span {
font-size: 38rpx !important;
line-height: 1.6;
margin: 8rpx 0;
h2 {
font-size: 38rpx;
line-height: 1.4;
margin: 14rpx 0 8rpx;
}
h3 {
font-size: 36rpx;
line-height: 1.4;
margin: 12rpx 0 8rpx;
}
h4,
h5,
h6 {
font-size: 34rpx;
line-height: 1.5;
margin: 10rpx 0 6rpx;
}
/* 普通正文 */
p,
text,
span {
font-size: 38rpx !important;
line-height: 1.6;
margin: 8rpx 0;
}
}
/* 流式气泡中的加载动画 */
.bubble-loading-dots {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10rpx 0;
}
.bubble-dot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #a0a0b8;
margin-right: 10rpx;
animation: bubbleDotBlink 1.2s infinite ease-in-out;
}
.bubble-dot:nth-child(2) {
animation-delay: 0.3s;
}
.bubble-dot:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes bubbleDotBlink {
0%,
100% {
opacity: 0.25;
transform: scale(0.7);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
}
</style>