From f0b6e86e64c2f633ac59afcfd5ccb1e8c967d0aa Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Tue, 12 May 2026 15:50:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E6=B6=88=E6=81=AF=E6=A0=B7=E5=BC=8F=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ChatMain/ChatCardAi/index.vue       | 29 +++++++-------
 .../ChatMain/ChatCardAi/styles/index.scss     | 39 ++++++++++++-------
 src/pages/ChatMain/ChatCardMine/index.vue     |  9 +++--
 .../ChatMain/ChatCardMine/styles/index.scss   | 18 +++++++--
 .../ChatModule/DetailCardCompontent/index.vue |  2 +-
 5 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/src/pages/ChatMain/ChatCardAi/index.vue b/src/pages/ChatMain/ChatCardAi/index.vue
index a358876..f73b629 100644
--- a/src/pages/ChatMain/ChatCardAi/index.vue
+++ b/src/pages/ChatMain/ChatCardAi/index.vue
@@ -1,19 +1,22 @@
 <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" />
+  <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-start）并占满宽度 -->
+  <view class="chat-ai-row">
+    <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="content"></slot>
+      <slot name="footer"></slot>
     </view>
-    <slot name="footer"></slot>
   </view>
 </template>
 
diff --git a/src/pages/ChatMain/ChatCardAi/styles/index.scss b/src/pages/ChatMain/ChatCardAi/styles/index.scss
index e123f84..1e0cc94 100644
--- a/src/pages/ChatMain/ChatCardAi/styles/index.scss
+++ b/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;
-  max-width: 100%; // ✅ 限制最大宽度
-  overflow-x: hidden; // ✅ 防止横向撑开
-  padding-bottom: 12px;
+  align-items: center; /* 垂直居中气泡 */
+  justify-content: flex-start; /* 默认左对齐 */
+}
 
-  .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 {
+  /* 气泡容器：内联块按内容自适应 */
+  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; // 消息内容的内边距 左右12px
+  min-width: 0;
+  width: auto;
+  max-width: 100%;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-all;
 }
 
 .container-content {
diff --git a/src/pages/ChatMain/ChatCardMine/index.vue b/src/pages/ChatMain/ChatCardMine/index.vue
index adef34d..71ffe2d 100644
--- a/src/pages/ChatMain/ChatCardMine/index.vue
+++ b/src/pages/ChatMain/ChatCardMine/index.vue
@@ -1,7 +1,10 @@
 <template>
-  <view class="chat-mine bg-17294E">
-    <text class="font-size-15 color-white">{{ text }}</text>
-    <slot></slot>
+  <!-- 外层行容器：接收来自父组件的对齐类（如 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>
 
diff --git a/src/pages/ChatMain/ChatCardMine/styles/index.scss b/src/pages/ChatMain/ChatCardMine/styles/index.scss
index 2eb4d92..ed0beca 100644
--- a/src/pages/ChatMain/ChatCardMine/styles/index.scss
+++ b/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;
-  flex-direction: column;
-  max-width: 100%; // ✅ 限制最大宽度
-  overflow-x: hidden; // ✅ 防止横向撑开
+  /* 气泡为内联块，按内容宽度自适应；外层 `.chat-mine-row` 控制排列 */
+  display: inline-block;
+  box-sizing: border-box;
+  vertical-align: top;
+  width: auto;
+  max-width: 100%;
+  overflow-x: hidden;
 }
diff --git a/src/pages/ChatModule/DetailCardCompontent/index.vue b/src/pages/ChatModule/DetailCardCompontent/index.vue
index d707896..c699c74 100644
--- a/src/pages/ChatModule/DetailCardCompontent/index.vue
+++ b/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" />