From b9ec829747a36fd806c555e6144cf07bd8d1141e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 9 Oct 2024 20:44:30 +0800
Subject: [PATCH] fix ui

---
 src/components/cards/SubscribeShareCard.vue  | 23 ++++++++++++++++----
 src/views/subscribe/SubscribePopularView.vue |  4 ++--
 src/views/subscribe/SubscribeShareView.vue   |  4 ----
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/cards/SubscribeShareCard.vue b/src/components/cards/SubscribeShareCard.vue
index 3f7904a7..e371305d 100644
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/src/components/cards/SubscribeShareCard.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { formatDateDifference } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { SubscribeShare } from '@/api/types'
@@ -28,6 +29,9 @@ function imageLoadHandler() {
   imageLoaded.value = true
 }
 
+// 分享时间
+const dateText = ref(props.media && props.media?.date ? formatDateDifference(props.media.date) : '')
+
 // 计算backdrop图片地址
 const backdropUrl = computed(() => {
   const url = props.media?.backdrop || props.media?.poster
@@ -121,18 +125,29 @@ async function forkSubscribe() {
               </VImg>
             </div>
             <div class="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
-              <div class="text-sm font-medium text-white sm:pt-1">{{ props.media?.year }}</div>
               <div class="mr-2 min-w-0 text-lg font-bold text-white">
                 {{ props.media?.share_title }}
               </div>
+              <div class="text-sm font-medium text-gray-200 sm:pt-1">
+                {{ props.media?.share_comment }}
+              </div>
             </div>
           </VCardText>
           <VCardText class="flex justify-space-between align-center flex-wrap">
-            {{ props.media?.share_comment }}
+            <div class="flex align-center">
+              <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
+              <div class="text-subtitle-2 me-4 text-white">
+                {{ props.media?.share_user }}
+              </div>
+              <IconBtn v-if="props.media?.count" icon="mdi-fire" color="error" class="me-1" />
+              <span v-if="props.media?.count" class="text-subtitle-2 me-4 text-white">
+                {{ props.media?.count.toLocaleString() }}
+              </span>
+            </div>
           </VCardText>
           <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
-            <VIcon icon="mdi-account" class="me-1" />
-            {{ props.media?.share_user }}
+            <VIcon icon="mdi-calcdar" class="me-1" />
+            {{ dateText }}
           </VCardText>
         </div>
       </VCard>
diff --git a/src/views/subscribe/SubscribePopularView.vue b/src/views/subscribe/SubscribePopularView.vue
index 4f05378e..3c19b8c4 100644
--- a/src/views/subscribe/SubscribePopularView.vue
+++ b/src/views/subscribe/SubscribePopularView.vue
@@ -113,9 +113,9 @@ async function fetchData({ done }: { done: any }) {
     <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
       <div v-for="data in dataList" :key="data.tmdb_id || data.douban_id">
         <MediaCard :media="data" />
-        <div class="mt-2 flex flex-row justify-center align-center text-subtitle-2">
+        <div v-if="data.popularity" class="mt-2 flex flex-row justify-center align-center text-subtitle-2">
           <VIcon icon="mdi-fire" color="error" />
-          <span> {{ data.popularity }}</span>
+          <span> {{ data.popularity.toLocaleString() }}</span>
         </div>
       </div>
     </div>
diff --git a/src/views/subscribe/SubscribeShareView.vue b/src/views/subscribe/SubscribeShareView.vue
index 4174dd1e..d122f2be 100644
--- a/src/views/subscribe/SubscribeShareView.vue
+++ b/src/views/subscribe/SubscribeShareView.vue
@@ -107,10 +107,6 @@ async function fetchData({ done }: { done: any }) {
     <div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card mx-3" tabindex="0">
       <div v-for="data in dataList" :key="data.id">
         <SubscribeShareCard :media="data" />
-        <div class="mt-2 flex flex-row justify-center align-center text-subtitle-2">
-          <VIcon icon="mdi-fire" color="error" />
-          <span> {{ data.count }}</span>
-        </div>
       </div>
     </div>
     <NoDataFound