更新 MessageCard.vue:优化图片显示和文本处理逻辑

This commit is contained in:
jxxghp
2025-01-09 08:22:12 +08:00
parent a5cd396de6
commit 51b0403f64
+5 -3
View File
@@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { isNullOrEmptyObject } from '@/@core/utils'
import type { Message } from '@/api/types' import type { Message } from '@/api/types'
import { formatDateDifference } from '@core/utils/formatters' import { formatDateDifference } from '@core/utils/formatters'
@@ -45,12 +46,13 @@ function replaceNewLine(value: string) {
</script> </script>
<template> <template>
<VCard variant="tonal" :width="props.width" :height="props.height" @click="openLink"> <VCard variant="tonal" :width="props.width" :height="props.height" @click="openLink" max-width="25rem">
<div v-if="props.message?.image" class="relative text-center card-cover-blurred"> <div v-if="props.message?.image" class="relative text-center card-cover-blurred">
<VImg <VImg
:src="props.message?.image" :src="props.message?.image"
aspect-ratio="4/3" aspect-ratio="3/2"
cover cover
position="top"
:class="{ shadow: isImageLoaded }" :class="{ shadow: isImageLoaded }"
@load="imageLoaded" @load="imageLoaded"
@error="imageLoadError = true" @error="imageLoadError = true"
@@ -72,7 +74,7 @@ function replaceNewLine(value: string) {
<p class="mb-0">{{ props.message?.text }}</p> <p class="mb-0">{{ props.message?.text }}</p>
</div> </div>
<VCardText v-if="props.message?.text && props.message?.action === 1" v-html="replaceNewLine(props.message?.text)" /> <VCardText v-if="props.message?.text && props.message?.action === 1" v-html="replaceNewLine(props.message?.text)" />
<VCardText v-if="props.message?.note"> <VCardText v-if="!isNullOrEmptyObject(props.message?.note)">
<VList> <VList>
<VListItem v-for="(value, key) in noteToJson()" :key="key" two-line> <VListItem v-for="(value, key) in noteToJson()" :key="key" two-line>
<VListItemTitle v-if="value.title_year" class="font-bold"> <VListItemTitle v-if="value.title_year" class="font-bold">