kexueadmin
/
ai-chat-ui
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
肖应宇 2026-04-09 17:48:38 +08:00
parent db13c1a4e0
commit 32aa5d0f69
1 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/message/MessageBubble.vue
View File

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