feat: 加载中动画调整

pages/chat/ChatCardAI.vue

@@ -2,13 +2,14 @@
   <view class="container">
     <view class="chat-ai">
       <view class="loading-container">
-        <!-- <image
+        <image
           v-if="isLoading"
           class="loading-img"
           src="/static/msg_loading.svg"
-        /> -->
-        <loading v-if="isLoading" />
+        />
+        <!-- <loading v-if="isLoading" /> -->
         <ChatMarkdown :key="textKey" :text="processedText" />
+        <DotLoading v-if="isLoading" />
       </view>
       <slot name="content"></slot>
     </view>
@@ -20,6 +21,7 @@
 import { defineProps, computed, ref, watch } from "vue";
 import ChatMarkdown from "./ChatMarkdown.vue";
 import loading from "@/pages/loading/loading.vue";
+import DotLoading from "@/pages/loading/DotLoading.vue";
 
 const props = defineProps({
   text: {

pages/chat/ChatMainList.vue

@@ -203,8 +203,6 @@ let typewriterManager = null;
 // 当前会话的消息ID，用于保持发送和终止的messageId一致
 let currentSessionMessageId = null;
 
-let loadingTimer = null;
-
 // 打开抽屉
 const emits = defineEmits(["openDrawer"]);
 const openDrawer = () => emits("openDrawer");
@@ -456,11 +454,6 @@ const initWebSocket = () => {
 
 // 处理WebSocket消息
 const handleWebSocketMessage = (data) => {
-  if (loadingTimer) {
-    clearInterval(loadingTimer);
-    loadingTimer = null;
-  }
-
   const aiMsgIndex = chatMsgList.value.length - 1;
   if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) {
     return;
@@ -484,8 +477,6 @@ const handleWebSocketMessage = (data) => {
 
   // 处理完成状态
   if (data.finish) {
-    clearInterval(loadingTimer);
-    loadingTimer = null;
     // 等待打字机完成后处理其他数据
     const waitForTypingComplete = () => {
       const status = typewriterManager
@@ -498,7 +489,7 @@ const handleWebSocketMessage = (data) => {
 
       const msg = chatMsgList.value[aiMsgIndex].msg;
       console.log("全量消息内容:", msg);
-      if (!msg || msg === "加载中." || msg.startsWith("加载中")) {
+      if (!msg || msg === "加载中" || msg.startsWith("加载中")) {
         chatMsgList.value[aiMsgIndex].msg = "未获取到内容，请重试";
         chatMsgList.value[aiMsgIndex].isLoading = false;
         if (data.toolCall) {
@@ -644,7 +635,7 @@ const sendChat = (message, isInstruct = false) => {
   const aiMsg = {
     msgId: `msg_${chatMsgList.value.length}`,
     msgType: MessageRole.AI,
-    msg: "加载中.",
+    msg: "加载中",
     isLoading: true,
     msgContent: {
       type: MessageType.TEXT,
@@ -654,14 +645,6 @@ const sendChat = (message, isInstruct = false) => {
   chatMsgList.value.push(aiMsg);
   const aiMsgIndex = chatMsgList.value.length - 1;
 
-  // 动态加载中动画
-  let dotCount = 1;
-  loadingTimer && clearInterval(loadingTimer);
-  loadingTimer = setInterval(() => {
-    dotCount = (dotCount % 3) + 1;
-    chatMsgList.value[aiMsgIndex].msg = "加载中" + ".".repeat(dotCount);
-  }, 400);
-
   // 发送消息
   const success = sendWebSocketMessage(messageType, messageContent);
   if (!success) {
@@ -679,11 +662,6 @@ const stopRequest = () => {
   // 发送中断消息给服务器 (messageType=2)
   sendWebSocketMessage(2, "stop_request", { silent: true });
 
-  if (loadingTimer) {
-    clearInterval(loadingTimer);
-    loadingTimer = null;
-  }
-
   // 停止打字机效果
   if (typewriterManager) {
     typewriterManager.stopTypewriter();

pages/loading/DotLoading.vue

@@ -0,0 +1,48 @@
+<template>
+  <view class="wave">
+    <view class="dot"></view>
+    <view class="dot"></view>
+    <view class="dot"></view>
+  </view>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped>
+.wave {
+  position: relative;
+  text-align: center;
+  width: 32px;
+  // background-color: #ff0000;
+
+  .dot {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    margin-right: 4px;
+    background: #333333;
+    animation: wave 1.3s linear infinite;
+
+    &:nth-child(2) {
+      animation-delay: -1.1s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.9s;
+    }
+  }
+}
+
+@keyframes wave {
+  0%,
+  60%,
+  100% {
+    transform: initial;
+  }
+
+  30% {
+    transform: translateY(-6px);
+  }
+}
+</style>