feat: 调整了目录结构

src/pages/ChatMain/ChatCardAi/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <view class="container">
+    <view class="chat-ai">
+      <view class="container-content">
+        <image
+          v-if="isLoading"
+          class="loading-img"
+          src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif"
+          mode="aspectFit"
+        />
+        <ChatMarkdown :key="textKey" :text="processedText" />
+        <ChatLoading v-if="isLoading" />
+      </view>
+      <slot name="content"></slot>
+    </view>
+    <slot name="footer"></slot>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, computed, ref, watch } from "vue";
+import ChatMarkdown from "../ChatMarkdown/index.vue";
+import ChatLoading from "../ChatLoading/index.vue";
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 用于强制重新渲染的key
+const textKey = ref(0);
+
+// 处理文本内容
+const processedText = computed(() => {
+  if (!props.text) {
+    return "";
+  }
+
+  // 确保文本是字符串类型
+  const textStr = String(props.text);
+
+  // 处理加载状态的文本
+  if (textStr.includes("思考中") || textStr.includes("...")) {
+    return textStr;
+  }
+
+  return textStr;
+});
+
+// 监听text变化，强制重新渲染
+watch(
+  () => props.text,
+  (newText, oldText) => {
+    if (newText !== oldText) {
+      textKey.value++;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>

src/pages/ChatMain/ChatCardAi/styles/index.scss

@@ -0,0 +1,29 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%; // ✅ 限制最大宽度
+  overflow-x: hidden; // ✅ 防止横向撑开
+  padding-bottom: 12px;
+
+  .chat-ai {
+    margin: 6px 0;
+    padding: 0 12px; // 消息内容的内边距 左右20px
+    min-width: 100px;
+    max-width: 100%; // ✅ 限制最大宽度
+    overflow: hidden; // ✅ 超出内容被切掉
+    word-wrap: break-word; // ✅ 长单词自动换行
+    word-break: break-all; // ✅ 强制换行
+  }
+}
+
+.container-content {
+  display: flex;
+  align-items: center;
+  max-width: 100%; // ✅ 限制最大宽度
+}
+
+.loading-img {
+  margin-right: 8px;
+  width: 30px;
+  height: 25px;
+}