From 32aa5d0f69f4ef4b4b1c4af12b234f85af08fedf Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Thu, 9 Apr 2026 17:48:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(message):=20=E4=BD=BF=E7=94=A8=20Naive=20U?=
 =?UTF-8?q?I=20=E5=AE=9E=E7=8E=B0=E5=9B=BE=E7=89=87=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/message/MessageBubble.vue | 43 ++++++++++++++++++------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/message/MessageBubble.vue b/src/components/message/MessageBubble.vue
index d51b199..7101782 100644
--- a/src/components/message/MessageBubble.vue
+++ b/src/components/message/MessageBubble.vue
@@ -71,13 +71,22 @@
 
           <!-- 图片展示 -->
           <div v-if="message.content.images?.length" class="images-grid">
-            <div v-for="(image, index) in message.content.images" :key="image.id" class="image-item"
-              @click="$emit('preview-image', image, index)">
-              <img :src="image.url" :alt="image.name" loading="lazy" />
-              <div class="image-overlay">
-                <Maximize2 :size="18" />
+            <n-image-group>
+              <div v-for="image in message.content.images" :key="image.id" class="image-item">
+                <n-image
+                  class="message-image"
+                  :src="image.url"
+                  object-fit="cover"
+                  :img-props="{
+                    alt: image.name,
+                    loading: 'lazy',
+                  }"
+                />
+                <div class="image-overlay">
+                  <Maximize2 :size="18" />
+                </div>
               </div>
-            </div>
+            </n-image-group>
           </div>
 
           <!-- 单个视频 -->
@@ -129,7 +138,7 @@
       </div>
 
       <!-- 操作栏 -->
-      <MessageActions v-if="
+      <!-- <MessageActions v-if="
         message.role === 'assistant' &&
         !message.isStreaming &&
         !message.isError &&
@@ -137,7 +146,7 @@
         !isMessageSelectMode
       " :content="message.content.text || ''" :feedback="message.feedback" :show-regenerate="true"
         :is-hovered="isHovered" :is-new="isNew" :is-break="message.isBreak" @copy="handleCopy" @like="handleLike"
-        @dislike="handleDislike" @regenerate="$emit('regenerate')" @share="handleShareClick" />
+        @dislike="handleDislike" @regenerate="$emit('regenerate')" @share="handleShareClick" /> -->
     </div>
   </div>
 </template>
@@ -158,6 +167,7 @@ import {
   Play,
   Check,
 } from "@/components/icons";
+import { NImage, NImageGroup } from "naive-ui";
 import MessageActions from "./MessageActions.vue";
 import { formatFileSize, getFileIcon } from "@/utils/helpers";
 import type { Message, Suggestion, Attachment, VideoInfo } from "@/types/chat";
@@ -635,7 +645,12 @@ setCustomComponents("playground-demo", {
   overflow: hidden;
   cursor: pointer;
 
-  img {
+  :deep(.n-image) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :deep(.n-image img) {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -652,10 +667,11 @@ setCustomComponents("playground-demo", {
     color: white;
     opacity: 0;
     transition: opacity 0.2s ease;
+    pointer-events: none;
   }
 
   &:hover {
-    img {
+    :deep(.n-image img) {
       transform: scale(1.05);
     }
 
@@ -664,6 +680,13 @@ setCustomComponents("playground-demo", {
     }
   }
 }
+.images-grid{
+display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 12px;
+
+}
 
 .single-video {
   margin-top: 12px;