feat: 调整首页组件目录结构

pages/index/components/chat/ChatCardAi/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <view class="container">
+    <view class="chat-ai">
+      <view class="loading-container">
+        <image
+          v-if="isLoading"
+          class="loading-img"
+          src="/static/chat_msg_loading.gif"
+          mode="aspectFit"
+        />
+        <ChatMarkdown :key="textKey" :text="processedText" />
+        <DotLoading 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 DotLoading from "../../loading/DotLoading.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>

pages/index/components/chat/ChatCardAi/styles/index.scss

@@ -0,0 +1,34 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%; // ✅ 限制最大宽度
+  overflow-x: hidden; // ✅ 防止横向撑开
+
+  .chat-ai {
+    margin: 6px 12px;
+    padding: 0 12px;
+    max-width: 100%; // ✅ 限制最大宽度
+    min-width: 100px;
+    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;
+    overflow: hidden; // ✅ 超出内容被切掉
+    word-wrap: break-word; // ✅ 长单词自动换行
+    word-break: break-all; // ✅ 强制换行
+  }
+}
+
+.loading-container {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  max-width: 100%; // ✅ 限制最大宽度
+}
+
+.loading-img {
+  margin-right: 8px;
+  width: 30px;
+  height: 25px;
+}