zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 对话页面的调整与增加加载loading

Browse Source
This commit is contained in:
zoujing
2025-08-12 20:16:07 +08:00
parent 49e8332fc0
commit a4d0286f1e
4 changed files with 243 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
pages/chat/ChatCardAI.vue
View File

@@ -1,11 +1,14 @@
<template>
<view class="container">
<view class="chat-ai">
<ChatMarkdown :key="textKey" :text="processedText" />
<slot name="content"></slot>
<view class="container">
<view class="chat-ai">
<view class="loading-container" >
<image v-if="isLoading" class="loading-img" src="/static/msg_loading.svg" />
<ChatMarkdown :key="textKey" :text="processedText" />
</view>
<slot name="content"></slot>
</view>
<slot name="footer"></slot>
</view>
<slot name="footer"></slot>
</view>
</template>
<script setup>
@@ -13,10 +16,14 @@ import { defineProps, computed, ref, watch } from "vue";
import ChatMarkdown from "./ChatMarkdown.vue";
const props = defineProps({
text: {
type: String,
default: "",
},
text: {
type: String,
default: "",
},
isLoading: {
type: Boolean,
default: false,
},
});
// 用于强制重新渲染的key
@@ -24,50 +31,63 @@ const textKey = ref(0);
// 处理文本内容
const processedText = computed(() => {
if (!props.text) {
return "";
}
if (!props.text) {
return "";
}
// 确保文本是字符串类型
const textStr = String(props.text);
// 确保文本是字符串类型
const textStr = String(props.text);
// 处理加载状态的文本
if (textStr.includes("加载中") || textStr.includes("...")) {
return textStr;
}
// 处理加载状态的文本
if (textStr.includes("加载中") || textStr.includes("...")) {
return textStr;
}
return textStr;
});
// 监听text变化，强制重新渲染
watch(
() => props.text,
(newText, oldText) => {
if (newText !== oldText) {
textKey.value++;
}
},
{ immediate: true }
() => props.text,
(newText, oldText) => {
if (newText !== oldText) {
textKey.value++;
}
},
{ immediate: true }
);
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
max-width: 100%; // ✅ 限制最大宽度
overflow-x: hidden; // ✅ 防止横向撑开
display: flex;
flex-direction: column;
max-width: 100%; // ✅ 限制最大宽度
overflow-x: hidden; // ✅ 防止横向撑开
.chat-ai {
margin: 6px 12px;
padding: 0 12px;
.chat-ai {
margin: 6px 12px;
padding: 0 12px;
min-width: 80px;
background: rgba(255, 255, 255, 0.4);
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px 20px 20px 20px;
border: 1px solid;
border-color: #ffffff;
}
min-width: 90px;
background: rgba(255, 255, 255, 0.4);
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px 20px 20px 20px;
border: 1px solid;
border-color: #ffffff;
}
}
.loading-container {
display: flex;
align-items: center;
padding: 4px 0;
}
.loading-img {
margin-left: -4px;
width: 32px;
height: 32px;
}
</style>

126
pages/chat/ChatMainList.vue
View File

@@ -42,6 +42,8 @@
item.msg ? item.msg.length : 0
}`"
:text="item.msg || ''"
,
:isLoading="item.isLoading"
>
<template #content v-if="item.toolCall">
<QuickBookingComponent
@@ -219,6 +221,7 @@ let loadingTimer = null;
const emits = defineEmits(["openDrawer"]);
const openDrawer = () => emits("openDrawer");
/// =============事件函数↓================
const handleTouchEnd = () => {
clearTimeout(timer.value);
timer.value = setTimeout(() => {
@@ -308,6 +311,32 @@ const sendMessageAction = (inputText) => {
setTimeoutScrollToBottom();
};
/// 添加通知
const addNoticeListener = () => {
uni.$on(SCROLL_TO_BOTTOM, () => {
setTimeout(() => {
scrollToBottom();
}, 200);
});
uni.$on(RECOMMEND_POSTS_TITLE, (value) => {
console.log("RECOMMEND_POSTS_TITLE:", value);
if (value && value.length > 0) {
handleReply(value);
}
});
uni.$on(SEND_COMMAND_TEXT, (value) => {
console.log("SEND_COMMAND_TEXT:", value);
if (value && value.length > 0) {
commonType = "Command.quickBooking";
sendMessage(value, true);
setTimeoutScrollToBottom();
}
});
};
/// =============生命周期函数↓================
onLoad(() => {
uni.getSystemInfo({
success: (res) => {
@@ -329,6 +358,38 @@ onMounted(async () => {
}
});
/// =============页面配置↓================
// 获取最近一次的会话id
const loadRecentConversation = async () => {
const res = await recentConversation();
if (res.code === 0) {
conversationId.value = res.data.conversationId;
}
};
// 加载历史消息的数据
let historyCurrentPageNum = 1;
const loadConversationMsgList = async () => {
const args = {
pageNum: historyCurrentPageNum++,
pageSize: 10,
conversationId: conversationId.value,
};
const res = await conversationMsgList(args);
};
// 获取首页数据
const getMainPageData = async () => {
const res = await mainPageData(sceneId.value);
if (res.code === 0) {
mainPageDataModel.value = res.data;
agentId.value = res.data.agentId;
initData();
setTimeoutScrollToBottom();
}
};
/// =============对话↓================
// 初始化WebSocket
const initWebSocket = () => {
// 清理旧实例
@@ -394,13 +455,12 @@ const handleWebSocketMessage = (data) => {
clearInterval(loadingTimer);
loadingTimer = null;
}
const aiMsgIndex = chatMsgList.value.length - 1;
if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) {
return;
}
//console.log("处理WebSocket消息:", data);
// 确保消息内容是字符串类型
if (data.content && typeof data.content !== "string") {
data.content = String(data.content);
@@ -435,6 +495,7 @@ const handleWebSocketMessage = (data) => {
console.log("全量消息内容:", msg);
if (!msg || msg === "加载中." || msg.startsWith("加载中")) {
chatMsgList.value[aiMsgIndex].msg = "未获取到内容，请重试";
chatMsgList.value[aiMsgIndex].isLoading = false;
if (data.toolCall) {
chatMsgList.value[aiMsgIndex].msg = "";
}
@@ -486,6 +547,7 @@ const initTypewriterManager = () => {
onContentUpdate: (content) => {
const aiMsgIndex = chatMsgList.value.length - 1;
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex]) {
chatMsgList.value[aiMsgIndex].isLoading = false;
chatMsgList.value[aiMsgIndex].msg = content;
}
},
@@ -493,6 +555,7 @@ const initTypewriterManager = () => {
onTypingComplete: (finalContent) => {
const aiMsgIndex = chatMsgList.value.length - 1;
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex]) {
chatMsgList.value[aiMsgIndex].isLoading = false;
chatMsgList.value[aiMsgIndex].msg = finalContent;
}
// 打字完成后最后一次滚动到底部
@@ -508,60 +571,6 @@ const resetMessageState = () => {
}
};
const addNoticeListener = () => {
uni.$on(SCROLL_TO_BOTTOM, () => {
setTimeout(() => {
scrollToBottom();
}, 200);
});
uni.$on(RECOMMEND_POSTS_TITLE, (value) => {
console.log("RECOMMEND_POSTS_TITLE:", value);
if (value && value.length > 0) {
handleReply(value);
}
});
uni.$on(SEND_COMMAND_TEXT, (value) => {
console.log("SEND_COMMAND_TEXT:", value);
if (value && value.length > 0) {
commonType = "Command.quickBooking";
sendMessage(value, true);
setTimeoutScrollToBottom();
}
});
};
// 获取最近一次的会话id
const loadRecentConversation = async () => {
const res = await recentConversation();
if (res.code === 0) {
conversationId.value = res.data.conversationId;
}
};
// 加载历史消息的数据
let historyCurrentPageNum = 1;
const loadConversationMsgList = async () => {
const args = {
pageNum: historyCurrentPageNum++,
pageSize: 10,
conversationId: conversationId.value,
};
const res = await conversationMsgList(args);
};
// 获取首页数据
const getMainPageData = async () => {
const res = await mainPageData(sceneId.value);
if (res.code === 0) {
mainPageDataModel.value = res.data;
agentId.value = res.data.agentId;
initData();
setTimeoutScrollToBottom();
}
};
// 初始化数据 首次数据加载的时候
const initData = () => {
const msg = {
@@ -671,6 +680,11 @@ const stopRequest = () => {
// 发送中断消息给服务器 (messageType=2)
sendWebSocketMessage(2, "stop_request", { silent: true });
if (loadingTimer) {
clearInterval(loadingTimer);
loadingTimer = null;
}
// 停止打字机效果
if (typewriterManager) {
typewriterManager.stopTypewriter();

118
pages/chat/ChatTopWelcome.vue
View File

@@ -1,69 +1,75 @@
<template>
<view class="top-bg-content">
<view class="top-item" >
<!-- :style="backgroundStyle" -->
<image class="top-item-left" :src="initPageImages.welcomeImageUrl"></image>
<image class="top-item-right" :src="initPageImages.logoImageUrl"></image>
</view>
<ChatCardAI v-if="welcomeContent.length" :text='welcomeContent'/>
</view>
<view class="top-bg-content">
<view class="top-item">
<!-- :style="backgroundStyle" -->
<image
class="top-item-left"
:src="initPageImages.welcomeImageUrl"
></image>
<image
class="top-item-right"
:src="initPageImages.logoImageUrl"
></image>
</view>
<ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
</view>
</template>
<script setup>
import { defineProps, computed, ref } from "vue";
import ChatCardAI from './ChatCardAI.vue';
import { defineProps, computed, ref } from "vue";
import ChatCardAI from "./ChatCardAI.vue";
const props = defineProps({
initPageImages: {
type: Object,
default: {
backgroundImageUrl: '',
logoImageUrl: '',
welcomeImageUrl: ''
}
},
welcomeContent: {
type: String,
default: '查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!'
}
})
// 计算背景样式
const backgroundStyle = computed(() => {
return {
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}
})
const props = defineProps({
initPageImages: {
type: Object,
default: {
backgroundImageUrl: "",
logoImageUrl: "",
welcomeImageUrl: "",
},
},
welcomeContent: {
type: String,
default:
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
},
});
// 计算背景样式
const backgroundStyle = computed(() => {
return {
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
};
});
</script>
<style lang="scss" scoped>
.top-bg-content {
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-direction: column;
}
.top-bg-content {
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-direction: column;
}
.top-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 32px;
margin-bottom: -6px;
}
.top-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 32px;
margin-bottom: -6px;
}
.top-item-left {
width: 118px;
height: 52px;
}
.top-item-left {
width: 118px;
height: 52px;
}
.top-item-right {
width: 130px;
height: 130px;
}
.top-item-right {
width: 130px;
height: 130px;
}
</style>

49
static/msg_loading.svg Normal file
View File

@@ -0,0 +1,49 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="100" height="100" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g transform="rotate(0 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.9166666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(30 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.8333333333333334s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(60 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.75s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.6666666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(120 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.5833333333333334s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(150 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.5s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.4166666666666667s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(210 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.3333333333333333s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(240 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.25s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.16666666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(300 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.08333333333333333s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g transform="rotate(330 50 50)">
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="0s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
</rect>
</g><g></g></g><!-- [ldio] generated by https://loading.io --></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB