feat(message): 使用 Naive UI 实现图片全屏预览

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;