feat: 长文本组件调整

This commit is contained in:
2026-03-25 16:33:35 +08:00
parent 14d2ad7b53
commit 00c58d47b9
5 changed files with 30 additions and 15 deletions

View File

@@ -26,7 +26,7 @@ export const CompName = {
// 打开地图卡片 // 打开地图卡片
openMapCard: "openMapCard", openMapCard: "openMapCard",
// 回答卡片 // 回答卡片
answerCard: "answerCard", longTextCard: "longTextCard",
}; };
/// 发送的指令类型 /// 发送的指令类型

View File

@@ -15,9 +15,15 @@
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId"> <view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
<template v-if="item.msgType === MessageRole.AI"> <template v-if="item.msgType === MessageRole.AI">
<ChatCardAI class="flex flex-justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" <ChatCardAI class="flex flex-justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
:text="item.msg || ''" :isLoading="item.isLoading"> :text="item.finish && item.componentName ? '' : item.msg || ''" :isLoading="item.isLoading">
<template #content v-if="item.toolCall"> <template #content v-if="item.toolCall || item.componentName">
<QuickBookingComponent v-if="item.toolCall.componentName === CompName.quickBookingCard" /> <AnswerComponent v-if="
item.componentName === CompName.longTextCard
" :answer-text="item.msg" />
<QuickBookingComponent v-if="
item.toolCall.componentName === CompName.quickBookingCard
" />
<DiscoveryCardComponent v-else-if=" <DiscoveryCardComponent v-else-if="
item.toolCall.componentName === CompName.discoveryCard item.toolCall.componentName === CompName.discoveryCard
" /> " />
@@ -27,15 +33,11 @@
<OpenMapComponent v-else-if=" <OpenMapComponent v-else-if="
item.toolCall.componentName === CompName.openMapCard item.toolCall.componentName === CompName.openMapCard
" /> " />
<AnswerComponent v-else-if="
item.toolCall.componentName === CompName.answerCard
" />
<Feedback v-else-if=" <Feedback v-else-if="
item.toolCall.componentName === CompName.feedbackCard item.toolCall.componentName === CompName.feedbackCard
" :toolCall="item.toolCall" /> " :toolCall="item.toolCall" />
<DetailCardCompontent v-else-if=" <DetailCardCompontent v-else-if="
item.toolCall.componentName === item.toolCall.componentName === CompName.pictureAndCommodityCard
CompName.pictureAndCommodityCard
" :toolCall="item.toolCall" /> " :toolCall="item.toolCall" />
<AddCarCrad v-else-if=" <AddCarCrad v-else-if="
item.toolCall.componentName === CompName.enterLicensePlateCard item.toolCall.componentName === CompName.enterLicensePlateCard
@@ -481,7 +483,7 @@ const handleWebSocketMessage = (data) => {
} }
// 优先使用 messageId 进行匹配 // 优先使用 messageId 进行匹配
const msgId = data.messageId || data.id || data.msgId; const msgId = data.messageId || data.id || data.msgId || data.replyMessageId;
let aiMsgIndex = -1; let aiMsgIndex = -1;
if (msgId && pendingMap.has(msgId)) { if (msgId && pendingMap.has(msgId)) {
aiMsgIndex = pendingMap.get(msgId); aiMsgIndex = pendingMap.get(msgId);
@@ -517,6 +519,7 @@ const handleWebSocketMessage = (data) => {
// 处理完成状态 // 处理完成状态
if (data.finish) { if (data.finish) {
chatMsgList.value[aiMsgIndex].finish = true;
const msg = chatMsgList.value[aiMsgIndex].msg; const msg = chatMsgList.value[aiMsgIndex].msg;
if (!msg || chatMsgList.value[aiMsgIndex].isLoading) { if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试"; chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试";
@@ -526,6 +529,11 @@ const handleWebSocketMessage = (data) => {
} }
} }
// 处理组件调用
if (data.componentName) {
chatMsgList.value[aiMsgIndex].componentName = data.componentName;
}
// 处理toolCall // 处理toolCall
if (data.toolCall) { if (data.toolCall) {
chatMsgList.value[aiMsgIndex].toolCall = data.toolCall; chatMsgList.value[aiMsgIndex].toolCall = data.toolCall;
@@ -755,6 +763,8 @@ const sendChat = async (message, isInstruct = false) => {
msg: "加载中", msg: "加载中",
isLoading: true, isLoading: true,
messageId: currentSessionMessageId, messageId: currentSessionMessageId,
componentName: "",
finish: false,
}; };
chatMsgList.value.push(aiMsg); chatMsgList.value.push(aiMsg);
// 添加AI消息后滚动到底部 // 添加AI消息后滚动到底部

View File

@@ -27,10 +27,15 @@ import { ref } from 'vue'
const isOverflow = ref(true) const isOverflow = ref(true)
// 直接根据文字长度判断超过约100个字符认为会溢出约3行 // 直接根据文字长度判断超过约100个字符认为会溢出约3行
const answerText = '建议一定要去「东华门」看角楼夕阳,那里是摄影师的私藏机位。御花园目前的玉兰花开得正好,别忘了抬头看看红墙上的猫。建议一定要去「东华门」看角楼夕阳,那里是摄影师的私藏机位。御花园目前的玉兰花开得正好,别忘了抬头看看红墙上的猫。' const props = defineProps({
answerText: {
type: String,
default: "",
}
});
// 简单判断12号字体3行约100个字符 // 简单判断12号字体3行约100个字符
isOverflow.value = answerText.length > 100 isOverflow.value = props.answerText.length > 100
</script> </script>

View File

@@ -313,7 +313,7 @@ export default {
border:none; border:none;
text-align:center; text-align:center;
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0)); background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
margin:4px 0; margin:10px 0;
`, `,
// 表格 // 表格
table: ` table: `

View File

@@ -215,7 +215,7 @@ export class WebSocketManager {
if (typeof messageData === "string") { if (typeof messageData === "string") {
// 处理心跳响应 // 处理心跳响应
if (MessageUtils.isPongMessage(messageData)) { if (MessageUtils.isPongMessage(messageData)) {
console.log("收到心跳响应:", messageData); // console.log("收到心跳响应:", messageData);
return; return;
} }
@@ -399,7 +399,7 @@ export class WebSocketManager {
}; };
this.sendMessage(heartbeatMessage); this.sendMessage(heartbeatMessage);
console.log("心跳消息已发送:", heartbeatMessage); // console.log("心跳消息已发送:", heartbeatMessage);
} catch (error) { } catch (error) {
console.error("发送心跳失败:", error); console.error("发送心跳失败:", error);
this.handleError(error); this.handleError(error);