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

pages/chat/ChatCardAI.vue

@@ -1,11 +1,14 @@
 <template>
-  <view class="container">
+    <view class="container">
-    <view class="chat-ai">
+        <view class="chat-ai">
-      <ChatMarkdown :key="textKey" :text="processedText" />
+            <view class="loading-container" >
-      <slot name="content"></slot>
+                <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: {
+    text: {
-    type: String,
+        type: String,
-    default: "",
+        default: "",
-  },
+    },
+    isLoading: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 // 用于强制重新渲染的key
@@ -24,50 +31,63 @@ const textKey = ref(0);
 
 // 处理文本内容
 const processedText = computed(() => {
-  if (!props.text) {
+    if (!props.text) {
-    return "";
+        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,
+    () => props.text,
-  (newText, oldText) => {
+    (newText, oldText) => {
-    if (newText !== oldText) {
+        if (newText !== oldText) {
-      textKey.value++;
+            textKey.value++;
-    }
+        }
-  },
+    },
-  { immediate: true }
+    { immediate: true }
 );
 </script>
 
 <style lang="scss" scoped>
 .container {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  max-width: 100%; // ✅ 限制最大宽度
+    max-width: 100%; // ✅ 限制最大宽度
-  overflow-x: hidden; // ✅ 防止横向撑开
+    overflow-x: hidden; // ✅ 防止横向撑开
 
-  .chat-ai {
+    .chat-ai {
-    margin: 6px 12px;
+        margin: 6px 12px;
-    padding: 0 12px;
+        padding: 0 12px;
 
-    min-width: 80px;
+        min-width: 90px;
-    background: rgba(255, 255, 255, 0.4);
+        background: rgba(255, 255, 255, 0.4);
-    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
-    border-radius: 4px 20px 20px 20px;
+        border-radius: 4px 20px 20px 20px;
-    border: 1px solid;
+        border: 1px solid;
-    border-color: #ffffff;
+        border-color: #ffffff;
-  }
+    }
 }
-</style>
+
+.loading-container {
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+}
+
+.loading-img {
+    margin-left: -4px;
+    width: 32px;
+    height: 32px;
+}
+
+</style>

pages/chat/ChatMainList.vue

@@ -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();

pages/chat/ChatTopWelcome.vue

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

static/msg_loading.svg

@@ -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>