fix message ui

src/components/cards/DownloadingCard.vue

@@ -25,8 +25,8 @@ const isDownloading = ref(props.info?.state === 'downloading')
 
 // 监听props.info?.state的变化
 watch(() => props.info?.state, (newValue) => {
-  isDownloading.value = newValue === 'downloading';
-});
+  isDownloading.value = newValue === 'downloading'
+})
 
 // 图片是否加载完成
 const imageLoaded = ref(false)

src/components/cards/MessageCard.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Message } from '@/api/types'
+import { formatDateDifference } from '@core/utils/formatters'
 
 // 输入参数
 const props = defineProps({
@@ -24,12 +25,33 @@ function openLink() {
   if (props.message?.link)
     window.open(props.message.link, '_blank')
 }
+
+// 将note转换为json
+function noteToJson() {
+  if (props.message?.note) {
+    try {
+      return JSON.parse(props.message.note)
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }
+  return {}
+}
+
+// 将\n转换为html属性的换行符
+function replaceNewLine(value: string) {
+  if (!value)
+    return ''
+  return value.replace(/\n/g, '<br/>')
+}
 </script>
 
 <template>
   <VCard
     :width="props.width"
     :height="props.height"
+    variant="tonal"
     @click="openLink"
   >
     <div
@@ -45,7 +67,7 @@ function openLink() {
         @error="imageLoadError = true"
       />
     </div>
-    <VCardTitle v-if="props.message?.title">
+    <VCardTitle v-if="props.message?.title" class="whitespace-break-spaces">
       {{ props.message?.title }}
     </VCardTitle>
     <VAlert
@@ -56,8 +78,35 @@ function openLink() {
       <template #prepend />
       {{ props.message?.text }}
     </VAlert>
-    <VCardText v-if="props.message?.text && props.message?.action === 1">
-      {{ 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">
+      <VList>
+        <VListItem
+          v-for="(value, key) in noteToJson()"
+          :key="key"
+          two-line
+        >
+          <VListItemTitle v-if="value.title_year" class="font-bold">
+            {{ key + 1 }}. {{ value.title_year }}
+          </VListItemTitle>
+          <VListItemTitle v-if="value.enclosure" class="font-bold whitespace-break-spaces">
+            {{ key + 1 }}. {{ value.title }} {{ value.volume_factor }} ↑{{ value.seeders }}
+          </VListItemTitle>
+          <VListItemSubtitle v-if="value.type">
+            类型：{{ value.type }} 评分：{{ value.vote_average }}
+          </VListItemSubtitle>
+          <VListItemSubtitle v-if="value.enclosure" class="whitespace-break-spaces">
+            {{ value.description }}
+          </VListItemSubtitle>
+        </VListItem>
+      </VList>
     </VCardText>
+    <div class="text-end">
+      <span v-if="props.message?.action === 0" class="text-sm italic me-2">{{ props.message?.userid }}</span>
+      <span class="text-sm italic me-2">{{ formatDateDifference(props.message?.reg_time || props.message?.date || '') }}</span>
+    </div>
   </VCard>
 </template>