feat: 对话页面的消息样式兼容调整

src/pages/ChatMain/ChatCardAi/index.vue

@@ -1,19 +1,22 @@
 <template>
-  <view class="container">
+  <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-start）并占满宽度 -->
-    <view class="chat-ai">
+  <view class="chat-ai-row">
-      <view class="container-content">
+    <view class="container">
-        <image
+      <view class="chat-ai">
-          v-if="isLoading"
+        <view class="container-content">
-          class="loading-img"
+          <image
-          src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif"
+            v-if="isLoading"
-          mode="aspectFit"
+            class="loading-img"
-        />
+            src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif"
-        <ChatMarkdown :key="textKey" :text="processedText" />
+            mode="aspectFit"
-        <ChatLoading v-if="isLoading" />
+          />
+          <ChatMarkdown :key="textKey" :text="processedText" />
+          <ChatLoading v-if="isLoading" />
+        </view>
+        <slot name="content"></slot>
       </view>
-      <slot name="content"></slot>
+      <slot name="footer"></slot>
     </view>
-    <slot name="footer"></slot>
   </view>
 </template>
 

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

@@ -1,19 +1,30 @@
-.container {
+.chat-ai-row {
+  width: 100%;
+  box-sizing: border-box;
   display: flex;
-  flex-direction: column;
+  align-items: center; /* 垂直居中气泡 */
-  max-width: 100%; // ✅ 限制最大宽度
+  justify-content: flex-start; /* 默认左对齐 */
-  overflow-x: hidden; // ✅ 防止横向撑开
+}
-  padding-bottom: 12px;
 
-  .chat-ai {
+.container {
-    margin: 6px 0;
+  /* 气泡容器：内联块按内容自适应 */
-    padding: 0 12px; // 消息内容的内边距 左右20px
+  display: inline-block;
-    min-width: 100px;
+  box-sizing: border-box;
-    max-width: 100%; // ✅ 限制最大宽度
+  vertical-align: middle;
-    overflow: hidden; // ✅ 超出内容被切掉
+  width: auto;
-    word-wrap: break-word; // ✅ 长单词自动换行
+  max-width: 100%;
-    word-break: break-all; // ✅ 强制换行
+  overflow-x: hidden;
-  }
+}
+
+.chat-ai {
+  margin: 6px 0;
+  padding: 0 12px; // 消息内容的内边距 左右12px
+  min-width: 0;
+  width: auto;
+  max-width: 100%;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-all;
 }
 
 .container-content {

src/pages/ChatMain/ChatCardMine/index.vue

@@ -1,7 +1,10 @@
 <template>
-  <view class="chat-mine bg-17294E">
+  <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-end） -->
-    <text class="font-size-15 color-white">{{ text }}</text>
+  <view class="chat-mine-row">
-    <slot></slot>
+    <view class="chat-mine bg-17294E">
+      <text class="font-size-15 color-white">{{ text }}</text>
+      <slot></slot>
+    </view>
   </view>
 </template>
 

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

@@ -1,10 +1,20 @@
+.chat-mine-row {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .chat-mine {
   margin: 0 12px 6px;
   padding: 8px 16px;
   border-radius: 15px;
 
-  display: flex;
+  /* 气泡为内联块，按内容宽度自适应；外层 `.chat-mine-row` 控制排列 */
-  flex-direction: column;
+  display: inline-block;
-  max-width: 100%; // ✅ 限制最大宽度
+  box-sizing: border-box;
-  overflow-x: hidden; // ✅ 防止横向撑开
+  vertical-align: top;
+  width: auto;
+  max-width: 100%;
+  overflow-x: hidden;
 }

src/pages/ChatModule/DetailCardCompontent/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="w-full">
+  <view class="w-full pb-12">
     <template v-if="toolCall.picture && toolCall.picture.length > 0">
       <ModuleTitle :title="图片详情" />
       <ImageSwiper :images="toolCall.picture" thumbnailBottom="12px" />