优化多个组件的样式，调整卡片布局和间距，更新网格列数以适应不同屏幕尺寸

src/components/cards/PluginAppCard.vue

@@ -167,31 +167,35 @@ const dropdownItems = ref([
           }"
         >
           <div
-            class="relative flex flex-row items-start pa-3 justify-between grow"
             :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
           >
-            <div class="relative flex-1 min-w-0">
+            <VCardText class="pa-2 pb-1">
               <VCardTitle
-                class="text-white text-lg px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis ..."
+                class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
               >
+                <VBadge v-if="props.plugin?.state" dot inline color="success" />
                 {{ props.plugin?.plugin_name }}
-                <span class="text-sm text-gray-200">v{{ props.plugin?.plugin_version }}</span>
+                <span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
               </VCardTitle>
-              <VCardText class="text-white text-sm px-2 py-0 text-shadow overflow-hidden line-clamp-3 ...">
-                {{ props.plugin?.plugin_desc }}
-              </VCardText>
-            </div>
-            <div class="relative flex-shrink-0 self-center">
-              <VAvatar size="64">
-                <VImg
-                  ref="imageRef"
-                  :src="iconPath"
-                  aspect-ratio="4/3"
-                  cover
-                  @load="imageLoaded"
-                  @error="imageLoadError = true"
-                />
-              </VAvatar>
+            </VCardText>
+            <div class="relative flex flex-row items-start px-2 justify-between grow">
+              <div class="relative flex-1 min-w-0">
+                <VCardText class="text-white text-sm px-2 py-0 text-shadow overflow-hidden line-clamp-3 ...">
+                  {{ props.plugin?.plugin_desc }}
+                </VCardText>
+              </div>
+              <div class="relative flex-shrink-0 self-center pb-3">
+                <VAvatar size="48">
+                  <VImg
+                    ref="imageRef"
+                    :src="iconPath"
+                    aspect-ratio="4/3"
+                    cover
+                    @load="imageLoaded"
+                    @error="imageLoadError = true"
+                  />
+                </VAvatar>
+              </div>
             </div>
           </div>
           <VCardText class="flex flex-none align-self-baseline py-3 w-full align-end">

src/components/cards/PluginCard.vue

@@ -344,30 +344,35 @@ watch(
           }"
         >
           <div
-            class="relative flex flex-row items-start pa-3 justify-between grow"
             :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
           >
-            <div class="relative flex-1 min-w-0">
-              <VCardTitle class="text-white text-lg px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
+            <VCardText class="pa-2 pb-1">
+              <VCardTitle
+                class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
+              >
                 <VBadge v-if="props.plugin?.state" dot inline color="success" />
                 {{ props.plugin?.plugin_name }}
                 <span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
               </VCardTitle>
-              <VCardText class="px-2 py-0 text-white text-sm text-shadow overflow-hidden line-clamp-3 ...">
-                {{ props.plugin?.plugin_desc }}
-              </VCardText>
-            </div>
-            <div class="relative flex-shrink-0 self-center cursor-move">
-              <VAvatar size="64">
-                <VImg
-                  ref="imageRef"
-                  :src="iconPath"
-                  aspect-ratio="4/3"
-                  cover
-                  @load="imageLoaded"
-                  @error="imageLoadError = true"
-                />
-              </VAvatar>
+            </VCardText>
+            <div class="relative flex flex-row items-start px-2 justify-between grow">
+              <div class="relative flex-1 min-w-0">
+                <VCardText class="px-2 py-0 text-white text-sm text-shadow overflow-hidden line-clamp-3 ...">
+                  {{ props.plugin?.plugin_desc }}
+                </VCardText>
+              </div>
+              <div class="relative flex-shrink-0 self-center cursor-move pb-3">
+                <VAvatar size="48">
+                  <VImg
+                    ref="imageRef"
+                    :src="iconPath"
+                    aspect-ratio="4/3"
+                    cover
+                    @load="imageLoaded"
+                    @error="imageLoadError = true"
+                  />
+                </VAvatar>
+              </div>
             </div>
           </div>
           <VCardText class="flex flex-none align-self-baseline py-3 w-full align-end">

src/components/cards/SubscribeCard.vue

@@ -311,7 +311,7 @@ function onSubscribeEditRemove() {
               'opacity-70': subscribeState === 'S',
             }"
             rounded="0"
-            min-height="170"
+            min-height="150"
             @click="editSubscribeDialog"
             :ripple="false"
           >
@@ -347,7 +347,7 @@ function onSubscribeEditRemove() {
               />
             </template>
             <div>
-              <VCardText class="flex items-center py-3">
+              <VCardText class="flex items-center pt-3 pb-1">
                 <div class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md cursor-move" v-if="imageLoaded">
                   <VImg :src="posterUrl" aspect-ratio="2/3" cover>
                     <template #placeholder>
@@ -365,7 +365,7 @@ function onSubscribeEditRemove() {
                   </div>
                 </div>
               </VCardText>
-              <VCardText class="flex justify-space-between align-center flex-wrap py-3">
+              <VCardText class="flex justify-space-between align-center flex-wrap">
                 <div class="flex align-center">
                   <IconBtn
                     v-if="props.media?.total_episode"
@@ -384,7 +384,10 @@ function onSubscribeEditRemove() {
                   </span>
                 </div>
               </VCardText>
-              <VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+              <VCardText
+                v-if="lastUpdateText"
+                class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300 text-xs"
+              >
                 <VIcon icon="mdi-download" class="me-1" />
                 {{ lastUpdateText }}
               </VCardText>

src/components/cards/SubscribeShareCard.vue

@@ -108,7 +108,7 @@ function doDelete() {
             :key="props.media?.id"
             class="flex flex-col h-full"
             rounded="0"
-            min-height="170"
+            min-height="150"
             @click="showForkSubscribe"
           >
             <template #image>
@@ -122,8 +122,8 @@ function doDelete() {
               </VImg>
             </template>
             <div class="h-full flex flex-col">
-              <VCardText class="flex items-center pb-1 grow">
-                <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md" v-if="imageLoaded">
+              <VCardText class="flex items-center pa-3 pb-1 grow">
+                <div class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md" v-if="imageLoaded">
                   <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
                     <template #placeholder>
                       <div class="w-full h-full">
@@ -141,7 +141,7 @@ function doDelete() {
                   </div>
                 </div>
               </VCardText>
-              <VCardText class="flex justify-space-between align-center flex-wrap">
+              <VCardText class="flex justify-space-between align-center flex-wrap py-2">
                 <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">