style: Update DownloaderCard and MediaServerCard to improve UI consistency

src/components/cards/MediaServerCard.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { MediaServerConf } from '@/api/types'
+import { MediaServerConf, MediaStatistic } from '@/api/types'
 import emby_image from '@images/logos/emby.png'
 import jellyfin_image from '@images/logos/jellyfin.png'
 import plex_image from '@images/logos/plex.png'
+import api from '@/api'
 
 // 定义输入
 const props = defineProps({
@@ -15,6 +16,25 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'change'])
 
+// 媒体统计数据
+const infoItems = ref([
+  {
+    avatar: 'mdi-movie-roll',
+    title: '电影',
+    amount: '0',
+  },
+  {
+    avatar: 'mdi-television-box',
+    title: '电视剧',
+    amount: '0',
+  },
+  {
+    avatar: 'mdi-account',
+    title: '用户',
+    amount: '0',
+  },
+])
+
 // 媒体服务器详情弹窗
 const mediaServerInfoDialog = ref(false)
 
@@ -59,6 +79,43 @@ const getIcon = computed(() => {
 function onClose() {
   emit('close')
 }
+
+// 调用API加载媒体统计数据
+async function loadMediaStatistic() {
+  try {
+    const res: MediaStatistic = await api.get('dashboard/statistic', {
+      params: {
+        name: props.mediaserver.name,
+      },
+    })
+
+    if (res) {
+      infoItems.value = [
+        {
+          avatar: 'mdi-movie-roll',
+          title: '电影',
+          amount: res.movie_count.toLocaleString(),
+        },
+        {
+          avatar: 'mdi-television-box',
+          title: '电视剧',
+          amount: res.tv_count.toLocaleString(),
+        },
+        {
+          avatar: 'mdi-account',
+          title: '用户',
+          amount: res.user_count.toLocaleString(),
+        },
+      ]
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+onMounted(() => {
+  loadMediaStatistic()
+})
 </script>
 <template>
   <div>
@@ -67,9 +124,13 @@ function onClose() {
       <VCardText class="flex justify-space-between align-center gap-3">
         <div class="align-self-start">
           <div class="text-h6 mb-1">{{ mediaserver.name }}</div>
-          <div class="text-body-1 mb-3"></div>
+          <div class="text-body-1 mt-5 flex flex-wrap">
+            <span v-for="item in infoItems" :key="item.title" class="me-2 mb-1">
+              <VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }}
+            </span>
+          </div>
         </div>
-        <VImg :src="getIcon" cover class="mt-5 me-7" max-width="4rem" />
+        <VImg :src="getIcon" cover class="mt-5 me-3" max-width="4rem" />
       </VCardText>
     </VCard>
     <VDialog v-model="mediaServerInfoDialog" scrollable max-width="40rem">