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

src/pages/ChatMain/ChatCardAi/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-start）并占满宽度 -->
+  <view class="chat-ai-row">
     <view class="container">
       <view class="chat-ai">
         <view class="container-content">
@@ -15,6 +17,7 @@
       </view>
       <slot name="footer"></slot>
     </view>
+  </view>
 </template>
 
 <script setup>

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 {
+  /* 气泡容器：内联块按内容自适应 */
+  display: inline-block;
+  box-sizing: border-box;
+  vertical-align: middle;
+  width: auto;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.chat-ai {
   margin: 6px 0;
-    padding: 0 12px; // 消息内容的内边距 左右20px
+  padding: 0 12px; // 消息内容的内边距 左右12px
-    min-width: 100px;
+  min-width: 0;
-    max-width: 100%; // ✅ 限制最大宽度
+  width: auto;
-    overflow: hidden; // ✅ 超出内容被切掉
+  max-width: 100%;
-    word-wrap: break-word; // ✅ 长单词自动换行
+  overflow: hidden;
-    word-break: break-all; // ✅ 强制换行
+  word-wrap: break-word;
-  }
+  word-break: break-all;
 }
 
 .container-content {

src/pages/ChatMain/ChatCardMine/index.vue

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

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" />