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

pages/chat/ChatCardAI.vue

@@ -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;
+    }
 }
-</style>
+
+.loading-container {
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+}
+
+.loading-img {
+    margin-left: -4px;
+    width: 32px;
+    height: 32px;
+}
+
+</style>