From f53beabdf676b5dea0289c3b530a63bbcd7534be Mon Sep 17 00:00:00 2001 From: YiLin <482244139@qq.com> Date: Thu, 16 Jul 2026 11:22:47 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E5=BC=8F=E8=BE=93=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/Chat/Chat.vue | 319 ++++++++++++------ unpackage/dist/dev/app-plus/app-service.js | 240 +++++++------ .../dist/dev/app-plus/pages/Chat/Chat.css | 36 +- 3 files changed, 399 insertions(+), 196 deletions(-) diff --git a/pages/Chat/Chat.vue b/pages/Chat/Chat.vue index 7f6120f..ba63d4c 100644 --- a/pages/Chat/Chat.vue +++ b/pages/Chat/Chat.vue @@ -34,23 +34,6 @@ - - - - - - - - - - AI 正在思考中... - - ⏹ 中断对话 - - - - - @@ -97,51 +80,60 @@ - - @@ -218,11 +210,16 @@ + + + - 拍照上传 - 上传文件 + 拍照上传 + 上传文件 @@ -233,14 +230,15 @@ - - - - - - - + + + + + + + @@ -381,7 +379,8 @@ html += '' 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()}` + html += + `<${tag}${align} style="padding:6px 10px;border:1px solid #ddd">${cell.trim()}` }) html += '' }) @@ -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 @@ \ No newline at end of file diff --git a/unpackage/dist/dev/app-plus/app-service.js b/unpackage/dist/dev/app-plus/app-service.js index c80f61d..079273b 100644 --- a/unpackage/dist/dev/app-plus/app-service.js +++ b/unpackage/dist/dev/app-plus/app-service.js @@ -5597,7 +5597,7 @@ This will fail in production.`); if (friendSocketStore.isConnected) return; if (!userToken.value || !UserId.value) { - formatAppLog("warn", "at pages/Chat/Chat.vue:310", "Token或UserId未准备好"); + formatAppLog("warn", "at pages/Chat/Chat.vue:308", "Token或UserId未准备好"); return; } friendSocketStore.connect({ @@ -5668,7 +5668,7 @@ This will fail in production.`); const html = t(content); return html; } catch (e2) { - formatAppLog("error", "at pages/Chat/Chat.vue:408", "解析失败", e2); + formatAppLog("error", "at pages/Chat/Chat.vue:407", "解析失败", e2); return content; } }; @@ -5709,17 +5709,29 @@ This will fail in production.`); }; const parseFileInfo = (content) => { if (!content || typeof content !== "string") - return { textContent: content || "", files: [] }; + return { + textContent: content || "", + files: [] + }; const match = content.match(/\[文件信息:(\[.*?\])\]/); if (!match) - return { textContent: content, files: [] }; + 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 (e2) { - formatAppLog("error", "at pages/Chat/Chat.vue:476", "解析文件信息失败:", e2); - return { textContent: content, files: [] }; + formatAppLog("error", "at pages/Chat/Chat.vue:484", "解析文件信息失败:", e2); + return { + textContent: content, + files: [] + }; } }; const selectNormalChat = async () => { @@ -5752,7 +5764,7 @@ This will fail in production.`); } takeUserConversations(); } catch (error) { - formatAppLog("error", "at pages/Chat/Chat.vue:518", "新建普通会话失败：", error); + formatAppLog("error", "at pages/Chat/Chat.vue:529", "新建普通会话失败：", error); uni.showToast({ title: "创建会话失败，请重试", icon: "none" @@ -5790,7 +5802,7 @@ This will fail in production.`); }; const previewFileArray = vue.ref([]); const uploadPhoto = () => { - formatAppLog("log", "at pages/Chat/Chat.vue:567", "点击了拍照上传"); + formatAppLog("log", "at pages/Chat/Chat.vue:578", "点击了拍照上传"); uni.chooseImage({ count: 1, sourceType: ["camera", "album"], @@ -5813,7 +5825,7 @@ This will fail in production.`); }); }, fail: (err) => { - formatAppLog("error", "at pages/Chat/Chat.vue:585", "选择图片失败", err); + formatAppLog("error", "at pages/Chat/Chat.vue:596", "选择图片失败", err); } }); }; @@ -5822,12 +5834,12 @@ This will fail in production.`); }; const fileList = vue.ref([]); const uploadFile = () => { - formatAppLog("log", "at pages/Chat/Chat.vue:596", "点击了上传文件"); + formatAppLog("log", "at pages/Chat/Chat.vue:607", "点击了上传文件"); chooseFile({ count: 5, type: "all", success: (res) => { - formatAppLog("log", "at pages/Chat/Chat.vue:601", "成功了"); + formatAppLog("log", "at pages/Chat/Chat.vue:612", "成功了"); fileList.value = res.tempFiles; previewFileArray.value.push(...res.tempFiles); uni.showToast({ @@ -5836,7 +5848,7 @@ This will fail in production.`); }); }, fail: (err) => { - formatAppLog("error", "at pages/Chat/Chat.vue:612", "选择失败:", err); + formatAppLog("error", "at pages/Chat/Chat.vue:623", "选择失败:", err); uni.showToast({ title: "选择失败", icon: "error" @@ -5871,6 +5883,7 @@ This will fail in production.`); const isSelfSent = vue.ref(false); const isUploading = vue.ref(false); const uploadedFiles = vue.ref([]); + const streamingMessageId = vue.ref(null); const showMessageModal = vue.ref(false); const detailMessageContent = vue.ref(""); const showMessageDetail = (message) => { @@ -5901,7 +5914,7 @@ This will fail in production.`); previewFileArray.value = []; } catch (err) { uni.hideLoading(); - formatAppLog("error", "at pages/Chat/Chat.vue:692", "文件上传失败:", err); + formatAppLog("error", "at pages/Chat/Chat.vue:704", "文件上传失败:", err); uni.showToast({ title: "文件上传失败，请重试", icon: "error" @@ -6012,6 +6025,20 @@ This will fail in production.`); socketStore.send(data); isThinking.value = true; isSelfSent.value = true; + 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({ @@ -6021,32 +6048,53 @@ This will fail in production.`); } }; const stopConversation = async () => { - formatAppLog("log", "at pages/Chat/Chat.vue:856", "中断对话 - 当前会话ID:", currentSessionId.value); + formatAppLog("log", "at pages/Chat/Chat.vue:873", "中断对话 - 当前会话ID:", currentSessionId.value); try { await socketStore.send({ type: "stop", conversation_id: currentSessionId.value }); - formatAppLog("log", "at pages/Chat/Chat.vue:862", "中断指令已发送成功"); + formatAppLog("log", "at pages/Chat/Chat.vue:879", "中断指令已发送成功"); } catch (err) { - formatAppLog("error", "at pages/Chat/Chat.vue:864", "中断指令发送失败:", err); + formatAppLog("error", "at pages/Chat/Chat.vue:881", "中断指令发送失败:", err); + } + if (streamingMessageId.value) { + allmessages.value = allmessages.value.filter((m) => m._id !== streamingMessageId.value); + streamingMessageId.value = null; } isThinking.value = false; socketStore.isThinking = false; isSelfSent.value = false; textMessage.value = ""; uploadedFiles.value = []; - uni.showToast({ title: "已中断", icon: "none", duration: 1500 }); + uni.showToast({ + title: "已中断", + icon: "none", + duration: 1500 + }); }; vue.watch(() => socketStore.isThinking, (newVal, oldVal) => { - formatAppLog("log", "at pages/Chat/Chat.vue:879", "isThinking 变化:", oldVal, "→", newVal, "messageString:", socketStore.messageString); + formatAppLog("log", "at pages/Chat/Chat.vue:905", "isThinking 变化:", oldVal, "→", newVal, "messageString:", socketStore.messageString); if (!oldVal && newVal) { - formatAppLog("log", "at pages/Chat/Chat.vue:882", "AI开始回复（跨设备同步），锁定输入框"); + formatAppLog("log", "at pages/Chat/Chat.vue:908", "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; } if (oldVal && !newVal) { - formatAppLog("log", "at pages/Chat/Chat.vue:889", "AI回复结束（正常/中断），解锁并刷新消息列表"); + formatAppLog("log", "at pages/Chat/Chat.vue:924", "AI回复结束（正常/中断），解锁并刷新消息列表"); + if (streamingMessageId.value) { + allmessages.value = allmessages.value.filter((m) => m._id !== streamingMessageId.value); + streamingMessageId.value = null; + } takeConversationMessages(); isThinking.value = false; isSelfSent.value = false; @@ -6068,6 +6116,19 @@ This will fail in production.`); }); } }); + vue.watch(() => socketStore.messageString, (newContent) => { + if (!streamingMessageId.value || !socketStore.isThinking) + return; + const idx = allmessages.value.findIndex((m) => m._id === streamingMessageId.value); + if (idx >= 0) { + const updated = { + ...allmessages.value[idx], + content: newContent + }; + allmessages.value.splice(idx, 1, updated); + scrollToBottom(); + } + }); const textMessage = vue.ref(""); const UserConversations = vue.ref([]); const currentSessionId = vue.ref(""); @@ -6081,15 +6142,15 @@ This will fail in production.`); UserData.value = await getUserInfo(userToken.value); UserId.value = UserData.value._id; UserAvatar.value = UserData.value.avatar || ""; - formatAppLog("log", "at pages/Chat/Chat.vue:932", "用户信息已加载:", UserId.value, UserAvatar.value); + formatAppLog("log", "at pages/Chat/Chat.vue:988", "用户信息已加载:", UserId.value, UserAvatar.value); } catch (error) { - formatAppLog("error", "at pages/Chat/Chat.vue:934", "获取用户信息失败:", error); + formatAppLog("error", "at pages/Chat/Chat.vue:990", "获取用户信息失败:", error); } }; const takeUserConversations = async () => { try { userToken.value = getToken(); - formatAppLog("log", "at pages/Chat/Chat.vue:942", "token:", userToken.value); + formatAppLog("log", "at pages/Chat/Chat.vue:998", "token:", userToken.value); UserConversations.value = await getUserConversations(userToken.value) || []; const savedSessionId = getCurrentSessionId(); if (savedSessionId && UserConversations.value.some((c) => c._id === savedSessionId)) { @@ -6099,7 +6160,7 @@ This will fail in production.`); } else { currentSessionId.value = ""; } - formatAppLog("log", "at pages/Chat/Chat.vue:954", "保存会话id：", currentSessionId.value); + formatAppLog("log", "at pages/Chat/Chat.vue:1010", "保存会话id：", currentSessionId.value); uni.setStorageSync("currentSessionId", currentSessionId.value); } catch (error) { uni.showToast({ @@ -6111,17 +6172,17 @@ This will fail in production.`); const FriendInfoList = vue.ref([]); const takeFriendList = async () => { try { - formatAppLog("log", "at pages/Chat/Chat.vue:969", "开始获取好友列表"); + formatAppLog("log", "at pages/Chat/Chat.vue:1025", "开始获取好友列表"); const friendList = await getChatFriend(UserId.value); - formatAppLog("log", "at pages/Chat/Chat.vue:972", "friendList:", friendList); + formatAppLog("log", "at pages/Chat/Chat.vue:1028", "friendList:", friendList); if (friendList && friendList.length) { FriendInfoList.value = await takeUserAvatar(friendList); } else { FriendInfoList.value = []; - formatAppLog("log", "at pages/Chat/Chat.vue:977", "好友列表为空"); + formatAppLog("log", "at pages/Chat/Chat.vue:1033", "好友列表为空"); } } catch (error) { - formatAppLog("error", "at pages/Chat/Chat.vue:980", "获取好友列表失败:", error); + formatAppLog("error", "at pages/Chat/Chat.vue:1036", "获取好友列表失败:", error); FriendInfoList.value = []; } finally { UserConversations.value = FriendInfoList.value; @@ -6148,17 +6209,17 @@ This will fail in production.`); }; }); } catch (err) { - formatAppLog("error", "at pages/Chat/Chat.vue:1010", "获取好友头像失败", err); + formatAppLog("error", "at pages/Chat/Chat.vue:1066", "获取好友头像失败", err); return friendList; } }; const GroupList = vue.ref([]); const takeGroupList = async () => { try { - formatAppLog("log", "at pages/Chat/Chat.vue:1020", "开始获取群聊列表"); + formatAppLog("log", "at pages/Chat/Chat.vue:1076", "开始获取群聊列表"); GroupList.value = await getGroup(UserId.value); } catch (error) { - formatAppLog("error", "at pages/Chat/Chat.vue:1025", "获取群聊列表失败:", error); + formatAppLog("error", "at pages/Chat/Chat.vue:1081", "获取群聊列表失败:", error); GroupList.value = []; } finally { UserConversations.value = GroupList.value; @@ -6170,22 +6231,22 @@ This will fail in production.`); return []; try { const memberIds = memberList.map((item) => item.groupContactId); - formatAppLog("log", "at pages/Chat/Chat.vue:1039", "请求头像的ID列表:", memberIds); + formatAppLog("log", "at pages/Chat/Chat.vue:1095", "请求头像的ID列表:", memberIds); const memberAvatarList = await getUserAvatar(userToken.value, memberIds); - formatAppLog("log", "at pages/Chat/Chat.vue:1041", "头像接口返回数据:", memberAvatarList); + formatAppLog("log", "at pages/Chat/Chat.vue:1097", "头像接口返回数据:", memberAvatarList); const userMap = new Map(memberAvatarList.map((user) => [user.user_id, user]) || []); - formatAppLog("log", "at pages/Chat/Chat.vue:1044", "userMap的keys:", Array.from(userMap.keys())); + formatAppLog("log", "at pages/Chat/Chat.vue:1100", "userMap的keys:", Array.from(userMap.keys())); return memberList.map((member) => { const memberId = member.groupContactId; const userInfo = userMap.get(memberId); - formatAppLog("log", "at pages/Chat/Chat.vue:1049", `查找 ${memberId} 的头像:`, userInfo); + formatAppLog("log", "at pages/Chat/Chat.vue:1105", `查找 ${memberId} 的头像:`, userInfo); return { ...member, avatar: (userInfo == null ? void 0 : userInfo.avatar) || null }; }); } catch (err) { - formatAppLog("error", "at pages/Chat/Chat.vue:1056", "获取群成员头像失败", err); + formatAppLog("error", "at pages/Chat/Chat.vue:1112", "获取群成员头像失败", err); return memberList; } }; @@ -6197,6 +6258,7 @@ This will fail in production.`); }; const allmessages = vue.ref([]); const scrollToView = vue.ref(""); + const bottomToggle = vue.ref(false); const isLoadingMore = vue.ref(false); const currentPage = vue.ref(1); const currentMessages = vue.computed(() => { @@ -6216,7 +6278,7 @@ This will fail in production.`); const takeFriendMessages = async () => { try { allmessages.value = await getFriendMessages(currentSessionId.value) || []; - formatAppLog("log", "at pages/Chat/Chat.vue:1102", "好友消息：", JSON.stringify(allmessages.value)); + formatAppLog("log", "at pages/Chat/Chat.vue:1159", "好友消息：", JSON.stringify(allmessages.value)); scrollToBottom(); } catch (error) { uni.showToast({ @@ -6228,12 +6290,12 @@ This will fail in production.`); const takeGroupMessages = async () => { try { allmessages.value = await getGroupMessages(currentSessionId.value) || []; - formatAppLog("log", "at pages/Chat/Chat.vue:1115", "群聊消息：", allmessages.value); + formatAppLog("log", "at pages/Chat/Chat.vue:1172", "群聊消息：", allmessages.value); const memberList = await getGroupMemberList(currentSessionId.value); - formatAppLog("log", "at pages/Chat/Chat.vue:1118", "获取到的群成员列表：", memberList); + formatAppLog("log", "at pages/Chat/Chat.vue:1175", "获取到的群成员列表：", memberList); if (memberList && memberList.length) { groupMemberList.value = await takeGroupMemberAvatar(memberList); - formatAppLog("log", "at pages/Chat/Chat.vue:1121", "群成员列表（带头像）：", groupMemberList.value); + formatAppLog("log", "at pages/Chat/Chat.vue:1178", "群成员列表（带头像）：", groupMemberList.value); } else { groupMemberList.value = []; } @@ -6250,13 +6312,14 @@ This will fail in production.`); const scrollToBottom = async () => { await vue.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"; } }; vue.watch(() => friendSocketStore.MessageReceived, (newId) => { - formatAppLog("log", "at pages/Chat/Chat.vue:1164", "收到了好友消息"); + formatAppLog("log", "at pages/Chat/Chat.vue:1223", "收到了好友消息"); if (newId) { - formatAppLog("log", "at pages/Chat/Chat.vue:1166", "ChatType:", ChatType.value); + formatAppLog("log", "at pages/Chat/Chat.vue:1225", "ChatType:", ChatType.value); switch (ChatType.value) { case 0: takeConversationMessages(); @@ -6271,7 +6334,7 @@ This will fail in production.`); friendSocketStore.MessageReceived = false; break; default: - formatAppLog("log", "at pages/Chat/Chat.vue:1182", "default 分支"); + formatAppLog("log", "at pages/Chat/Chat.vue:1241", "default 分支"); friendSocketStore.MessageReceived = false; break; } @@ -6333,7 +6396,7 @@ This will fail in production.`); onUnload(() => { socketStore.disconnect(); }); - const __returned__ = { friendSocketStore, handleFriendConnect, socketStore, ChatType, convertMarkdownTable, renderTable, pareseMarkdown, sanitizeContent, previewImage, openFile, formatFileSize, parseFileInfo, selectNormalChat, showNewChatModal, closeNewChatModal, isChatSidebar, handleChatSidebar, goWorkSpace, goCloudDatabase, logOut, previewFileArray, uploadPhoto, deleteImage, fileList, uploadFile, handleConnect, isThinking, isSelfSent, isUploading, uploadedFiles, showMessageModal, detailMessageContent, showMessageDetail, closeMessageDetail, sendMessage, sendFriendMessage, sendGroupMessage, sendAIMessage, stopConversation, textMessage, UserConversations, currentSessionId, userToken, UserId, UserAvatar, UserData, takeUserInfo, takeUserConversations, FriendInfoList, takeFriendList, takeTalkUserAvatar, takeUserAvatar, GroupList, takeGroupList, groupMemberList, takeGroupMemberAvatar, getGroupMemberAvatarById, allmessages, scrollToView, isLoadingMore, currentPage, currentMessages, takeConversationMessages, takeFriendMessages, takeGroupMessages, onScroll, scrollToBottom, computed: vue.computed, getCurrentInstance: vue.getCurrentInstance, nextTick: vue.nextTick, onMounted: vue.onMounted, ref: vue.ref, watch: vue.watch, get onShow() { + const __returned__ = { friendSocketStore, handleFriendConnect, socketStore, ChatType, convertMarkdownTable, renderTable, pareseMarkdown, sanitizeContent, previewImage, openFile, formatFileSize, parseFileInfo, selectNormalChat, showNewChatModal, closeNewChatModal, isChatSidebar, handleChatSidebar, goWorkSpace, goCloudDatabase, logOut, previewFileArray, uploadPhoto, deleteImage, fileList, uploadFile, handleConnect, isThinking, isSelfSent, isUploading, uploadedFiles, streamingMessageId, showMessageModal, detailMessageContent, showMessageDetail, closeMessageDetail, sendMessage, sendFriendMessage, sendGroupMessage, sendAIMessage, stopConversation, textMessage, UserConversations, currentSessionId, userToken, UserId, UserAvatar, UserData, takeUserInfo, takeUserConversations, FriendInfoList, takeFriendList, takeTalkUserAvatar, takeUserAvatar, GroupList, takeGroupList, groupMemberList, takeGroupMemberAvatar, getGroupMemberAvatarById, allmessages, scrollToView, bottomToggle, isLoadingMore, currentPage, currentMessages, takeConversationMessages, takeFriendMessages, takeGroupMessages, onScroll, scrollToBottom, computed: vue.computed, getCurrentInstance: vue.getCurrentInstance, nextTick: vue.nextTick, onMounted: vue.onMounted, ref: vue.ref, watch: vue.watch, get onShow() { return onShow; }, get onUnload() { return onUnload; @@ -6459,37 +6522,14 @@ This will fail in production.`); ]) ]) ])) : vue.createCommentVNode("v-if", true), - $setup.isThinking && $setup.isSelfSent ? (vue.openBlock(), vue.createElementBlock("view", { - key: 1, - class: "ncd-overlay", - onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => { - }, ["stop"])) - }, [ - vue.createElementVNode("view", { class: "ncd-card ai-card" }, [ - vue.createElementVNode("view", { class: "thinking-content" }, [ - vue.createElementVNode("view", { class: "loading-dots" }, [ - vue.createElementVNode("view", { class: "dot" }), - vue.createElementVNode("view", { class: "dot" }), - vue.createElementVNode("view", { class: "dot" }) - ]), - vue.createElementVNode("text", { class: "thinking-text" }, "AI 正在思考中..."), - vue.createElementVNode("view", { - class: "stop-thinking-btn", - onClick: $setup.stopConversation - }, [ - vue.createElementVNode("text", null, "⏹ 中断对话") - ]) - ]) - ]) - ])) : vue.createCommentVNode("v-if", true), $setup.showMessageModal ? (vue.openBlock(), vue.createElementBlock("view", { - key: 2, + key: 1, class: "ncd-overlay", onClick: $setup.closeMessageDetail }, [ vue.createElementVNode("view", { class: "ncd-card message-detail-card", - onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => { + onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => { }, ["stop"])) }, [ vue.createElementVNode("view", { class: "ncd-header" }, [ @@ -6530,11 +6570,11 @@ This will fail in production.`); vue.createVNode($setup["ChatSidebar"], { chatList: $setup.UserConversations, showNewChatModal: $setup.showNewChatModal, - "onUpdate:showNewChatModal": _cache[3] || (_cache[3] = ($event) => $setup.showNewChatModal = $event), + "onUpdate:showNewChatModal": _cache[2] || (_cache[2] = ($event) => $setup.showNewChatModal = $event), currentSessionId: $setup.currentSessionId, - "onUpdate:currentSessionId": _cache[4] || (_cache[4] = ($event) => $setup.currentSessionId = $event), + "onUpdate:currentSessionId": _cache[3] || (_cache[3] = ($event) => $setup.currentSessionId = $event), chatType: $setup.ChatType, - "onUpdate:chatType": _cache[5] || (_cache[5] = ($event) => $setup.ChatType = $event), + "onUpdate:chatType": _cache[4] || (_cache[4] = ($event) => $setup.ChatType = $event), onRefreshConversations: $setup.takeUserConversations }, null, 8, ["chatList", "showNewChatModal", "currentSessionId", "chatType"]) ], @@ -6614,17 +6654,25 @@ This will fail in production.`); 2 /* CLASS */ )) : vue.createCommentVNode("v-if", true), - message.content && String(message.content).trim() !== "" ? (vue.openBlock(), vue.createElementBlock("view", { + message.content && String(message.content).trim() !== "" || message._streaming ? (vue.openBlock(), vue.createElementBlock("view", { key: 1, class: vue.normalizeClass(["chat-content", { "chat-content-user": message.role === "user", "chat-content-assistant": message.role === "assistant" }]), onClick: ($event) => $setup.showMessageDetail(message) }, [ - $setup.parseFileInfo(message.content).textContent ? (vue.openBlock(), vue.createElementBlock("view", { + message._streaming && (!message.content || String(message.content).trim() === "") ? (vue.openBlock(), vue.createElementBlock("view", { key: 0, + class: "bubble-loading-dots" + }, [ + vue.createElementVNode("view", { class: "bubble-dot" }), + vue.createElementVNode("view", { class: "bubble-dot" }), + vue.createElementVNode("view", { class: "bubble-dot" }) + ])) : vue.createCommentVNode("v-if", true), + $setup.parseFileInfo(message.content).textContent ? (vue.openBlock(), vue.createElementBlock("view", { + key: 1, innerHTML: $setup.pareseMarkdown($setup.parseFileInfo(message.content).textContent) }, null, 8, ["innerHTML"])) : vue.createCommentVNode("v-if", true), $setup.parseFileInfo(message.content).files.length > 0 ? (vue.openBlock(), vue.createElementBlock("view", { - key: 1, + key: 2, class: "message-file-list" }, [ (vue.openBlock(true), vue.createElementBlock( @@ -6873,7 +6921,15 @@ This will fail in production.`); }), 128 /* KEYED_FRAGMENT */ - )) : vue.createCommentVNode("v-if", true) + )) : vue.createCommentVNode("v-if", true), + vue.createElementVNode("view", { + id: "chat-bottom-a", + style: { "height": "1rpx" } + }), + vue.createElementVNode("view", { + id: "chat-bottom-b", + style: { "height": "1rpx" } + }) ], 40, ["scroll-into-view"]), vue.createElementVNode( "view", @@ -6886,7 +6942,7 @@ This will fail in production.`); "view", { class: vue.normalizeClass(["chat-interactive-btn", { disabled: $setup.isThinking }]), - onClick: _cache[6] || (_cache[6] = ($event) => !$setup.isThinking && $setup.uploadPhoto()) + onClick: _cache[5] || (_cache[5] = ($event) => !$setup.isThinking && $setup.uploadPhoto()) }, "拍照上传", 2 @@ -6896,7 +6952,7 @@ This will fail in production.`); "view", { class: vue.normalizeClass(["chat-interactive-btn", { disabled: $setup.isThinking }]), - onClick: _cache[7] || (_cache[7] = ($event) => !$setup.isThinking && $setup.uploadFile()) + onClick: _cache[6] || (_cache[6] = ($event) => !$setup.isThinking && $setup.uploadFile()) }, "上传文件", 2 @@ -6944,30 +7000,24 @@ This will fail in production.`); class: "message-input", placeholder: $setup.isThinking ? $setup.isSelfSent ? "AI 正在回复中..." : "电脑正在运行，请稍后" : "输入消息...", disabled: $setup.isThinking, - "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => $setup.textMessage = $event), + "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => $setup.textMessage = $event), "auto-height": "" }, null, 8, ["placeholder", "disabled"]), [ [vue.vModelText, $setup.textMessage] ]), - $setup.isThinking && !$setup.isSelfSent ? (vue.openBlock(), vue.createElementBlock("view", { + $setup.isThinking ? (vue.openBlock(), vue.createElementBlock("view", { key: 0, class: "input-btn-group stop-message-btn", onClick: $setup.stopConversation }, [ vue.createElementVNode("view", { class: "iconfont icon-tingzhi" }) - ])) : (vue.openBlock(), vue.createElementBlock( - "view", - { - key: 1, - class: vue.normalizeClass(["input-btn-group send-message-btn", { disabled: $setup.isThinking }]), - onClick: _cache[9] || (_cache[9] = ($event) => !$setup.isThinking && $setup.sendMessage()) - }, - [ - vue.createElementVNode("view", { class: "iconfont icon-fasong" }) - ], - 2 - /* CLASS */ - )) + ])) : (vue.openBlock(), vue.createElementBlock("view", { + key: 1, + class: "input-btn-group send-message-btn", + onClick: _cache[8] || (_cache[8] = ($event) => $setup.sendMessage()) + }, [ + vue.createElementVNode("view", { class: "iconfont icon-fasong" }) + ])) ], 2 /* CLASS */ diff --git a/unpackage/dist/dev/app-plus/pages/Chat/Chat.css b/unpackage/dist/dev/app-plus/pages/Chat/Chat.css index 456ffe8..3695931 100644 --- a/unpackage/dist/dev/app-plus/pages/Chat/Chat.css +++ b/unpackage/dist/dev/app-plus/pages/Chat/Chat.css @@ -1671,7 +1671,9 @@ to { opacity: 1; transform: translateY(0); line-height: 1.4; margin: 0.375rem 0 0.25rem; } -.chat-content h4, .chat-content h5, .chat-content h6 { +.chat-content h4, +.chat-content h5, +.chat-content h6 { font-size: 1.0625rem; line-height: 1.5; margin: 0.3125rem 0 0.1875rem; @@ -1682,4 +1684,36 @@ to { opacity: 1; transform: translateY(0); font-size: 1.1875rem !important; line-height: 1.6; margin: 0.25rem 0; +} + +/* 流式气泡中的加载动画 */ +.bubble-loading-dots { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0.3125rem 0; +} +.bubble-dot { + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + background: #a0a0b8; + margin-right: 0.3125rem; + 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); +} } \ No newline at end of file