From ec9a989214d6233cf754080fcca3a4ddedff852a Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 6 May 2024 16:14:44 +0800
Subject: [PATCH] Update card cover size and alignment in PluginAppCard and
 PluginCard components

---
 src/components/cards/PluginAppCard.vue  |  4 ++--
 src/components/cards/PluginCard.vue     | 18 ++++++++++--------
 src/views/plugin/PluginCardListView.vue |  4 ++--
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue
index 11392a95..b44abe89 100644
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -149,7 +149,7 @@ const dropdownItems = ref([
 </script>
 
 <template>
-  <VCard :width="props.width" :height="props.height" @click="installPlugin">
+  <VCard :width="props.width" :height="props.height" @click="installPlugin" class="flex flex-col">
     <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
       <div class="me-n3 absolute top-0 right-3">
         <IconBtn>
@@ -196,7 +196,7 @@ const dropdownItems = ref([
         </VChip>
       </div>
     </VCardText>
-    <VCardText class="flex items-center justify-start pb-2">
+    <VCardText class="flex align-self-baseline pb-2 w-full align-end">
       <span>
         <VIcon icon="mdi-account" class="me-1" />
         <a :href="props.plugin?.author_url" target="_blank" @click.stop>
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 99f6ccbc..ba390c6e 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -390,7 +390,7 @@ watch(
 
 <template>
   <!-- 插件卡片 -->
-  <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail">
+  <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail" class="flex flex-col">
     <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
       <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 left-1">
         <VIcon icon="mdi-new-box" class="text-white" />
@@ -429,20 +429,22 @@ watch(
         />
       </VAvatar>
     </div>
-    <span v-if="props.count" class="absolute bottom-1 right-2 flex items-center">
-      <VIcon icon="mdi-fire" />
-      <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
-    </span>
     <VCardItem class="py-2">
       <VCardTitle class="flex items-center flex-row">
         <VBadge v-if="props.plugin?.state" dot inline color="success" class="me-1 mb-1" />
-        {{ props.plugin?.plugin_name
-        }}<span class="text-sm ms-2 mt-1 text-gray-500">v{{ props.plugin?.plugin_version }}</span>
+        {{ props.plugin?.plugin_name }}
+        <span class="text-sm ms-2 mt-1 text-gray-500">v{{ props.plugin?.plugin_version }}</span>
       </VCardTitle>
     </VCardItem>
-    <VCardText>
+    <VCardText class="pb-1">
       {{ props.plugin?.plugin_desc }}
     </VCardText>
+    <VCardText class="flex justify-end align-self-baseline p-1 w-full align-end">
+      <span v-if="props.count" class="ms-3">
+        <VIcon icon="mdi-fire" />
+        <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
+      </span>
+    </VCardText>
   </VCard>
 
   <!-- 插件配置页面 -->
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index 0bf41419..d44a2b1a 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -341,7 +341,7 @@ onBeforeMount(async () => {
         <transition name="fade-slide" appear>
           <div>
             <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-            <div v-if="dataList.length > 0" class="grid gap-4 grid-plugin-card">
+            <div v-if="dataList.length > 0" class="grid gap-4 grid-plugin-card items-start">
               <template v-for="(data, index) in dataList" :key="`${data.id}_v${data.plugin_version}`">
                 <PluginCard
                   :count="PluginStatistics[data.id || '0']"
@@ -411,7 +411,7 @@ onBeforeMount(async () => {
                 </VCol>
               </VRow>
             </div>
-            <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card">
+            <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card items-start">
               <template v-for="(data, index) in sortedUninstalledList" :key="`${data.id}_v${data.plugin_version}`">
                 <PluginAppCard
                   v-if="deferApp(index)"