change plugincard style

src/components/cards/BackdropCard.vue

@@ -73,9 +73,3 @@ const getImgUrl = computed(() => {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.text-shadow {
-  text-shadow: 1px 1px #777;
-}
-</style>

src/components/cards/LibraryCard.vue

@@ -171,9 +171,3 @@ onMounted(async () => {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.text-shadow {
-  text-shadow: 1px 1px #777;
-}
-</style>

src/components/cards/PluginAppCard.vue

@@ -149,54 +149,51 @@ const dropdownItems = ref([
 </script>
 
 <template>
-  <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>
-          <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu activator="parent" close-on-content-click>
-            <VList>
-              <VListItem
-                v-for="(item, i) in dropdownItems"
-                v-show="item.show"
-                :key="i"
-                variant="plain"
-                @click="item.props.click"
-              >
-                <template #prepend>
-                  <VIcon :icon="item.props.prependIcon" />
-                </template>
-                <VListItemTitle v-text="item.title" />
-              </VListItem>
-            </VList>
-          </VMenu>
-        </IconBtn>
-      </div>
-      <VAvatar size="6rem">
-        <VImg
-          ref="imageRef"
-          :src="iconPath"
-          aspect-ratio="4/3"
-          cover
-          :class="{ shadow: isImageLoaded }"
-          @load="imageLoaded"
-          @error="imageLoadError = true"
-        />
-      </VAvatar>
+  <VCard :width="props.width" :height="props.height" @click="installPlugin">
+    <div class="me-n3 absolute bottom-0 right-3">
+      <IconBtn>
+        <VIcon icon="mdi-dots-vertical" />
+        <VMenu activator="parent" close-on-content-click>
+          <VList>
+            <VListItem
+              v-for="(item, i) in dropdownItems"
+              v-show="item.show"
+              :key="i"
+              variant="plain"
+              @click="item.props.click"
+            >
+              <template #prepend>
+                <VIcon :icon="item.props.prependIcon" />
+              </template>
+              <VListItemTitle v-text="item.title" />
+            </VListItem>
+          </VList>
+        </VMenu>
+      </IconBtn>
     </div>
-    <VCardTitle>
-      {{ props.plugin?.plugin_name }}
-      <span class="text-sm text-gray-500">v{{ props.plugin?.plugin_version }}</span>
-    </VCardTitle>
-    <VCardText class="pb-2">
-      <div>{{ props.plugin?.plugin_desc }}</div>
-      <div>
-        <VChip v-for="label in pluginLabels" variant="tonal" size="small" class="me-1 my-1" color="info" label>
-          {{ label }}
-        </VChip>
+    <div class="flex flex-row items-center pa-3 justify-between" :style="{ background: `${backgroundColor}` }">
+      <div class="flex-1 min-w-0">
+        <VCardTitle class="text-white px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
+          {{ props.plugin?.plugin_name }}
+          <span class="text-sm text-gray-200">v{{ props.plugin?.plugin_version }}</span>
+        </VCardTitle>
+        <VCardText class="text-white px-2">{{ props.plugin?.plugin_desc }}</VCardText>
       </div>
-    </VCardText>
-    <VCardText class="flex align-self-baseline pb-2 w-full align-end">
+      <div class="flex-shrink-0">
+        <VAvatar size="64">
+          <VImg
+            ref="imageRef"
+            :src="iconPath"
+            aspect-ratio="4/3"
+            cover
+            :class="{ shadow: isImageLoaded }"
+            @load="imageLoaded"
+            @error="imageLoadError = true"
+          />
+        </VAvatar>
+      </div>
+    </div>
+    <VCardText class="flex align-self-baseline py-3 w-full align-end">
       <span>
         <VIcon icon="mdi-account" class="me-1" />
         <a :href="props.plugin?.author_url" target="_blank" @click.stop>
@@ -220,15 +217,3 @@ const dropdownItems = ref([
     </VCard>
   </VDialog>
 </template>
-
-<style lang="scss" scoped>
-.card-cover-blurred::before {
-  position: absolute;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-  background: rgba(29, 39, 59, 48%);
-  content: '';
-  inset: 0;
-}
-</style>

src/components/cards/PluginCard.vue

@@ -383,58 +383,66 @@ watch(
 <template>
   <!-- 插件卡片 -->
   <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" />
-      </div>
-      <div class="me-n3 absolute top-0 right-3">
-        <IconBtn>
-          <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu activator="parent" close-on-content-click>
-            <VList>
-              <VListItem
-                v-for="(item, i) in dropdownItems"
-                v-show="item.show"
-                :key="i"
-                variant="plain"
-                :base-color="item.props.color"
-                @click="item.props.click"
-              >
-                <template #prepend>
-                  <VIcon :icon="item.props.prependIcon" />
-                </template>
-                <VListItemTitle v-text="item.title" />
-              </VListItem>
-            </VList>
-          </VMenu>
-        </IconBtn>
-      </div>
-      <VAvatar size="6rem">
-        <VImg
-          ref="imageRef"
-          :src="iconPath"
-          aspect-ratio="4/3"
-          cover
-          :class="{ shadow: isImageLoaded }"
-          @load="imageLoaded"
-          @error="imageLoadError = true"
-        />
-      </VAvatar>
+    <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 left-1">
+      <VIcon icon="mdi-new-box" class="text-white" />
     </div>
-    <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>
-      </VCardTitle>
-    </VCardItem>
-    <VCardText class="pb-1">
-      {{ props.plugin?.plugin_desc }}
-    </VCardText>
-    <VCardText class="flex justify-end align-self-baseline p-1 w-full align-end">
+    <div class="me-n3 absolute bottom-0 right-3">
+      <IconBtn>
+        <VIcon icon="mdi-dots-vertical" />
+        <VMenu activator="parent" close-on-content-click>
+          <VList>
+            <VListItem
+              v-for="(item, i) in dropdownItems"
+              v-show="item.show"
+              :key="i"
+              variant="plain"
+              :base-color="item.props.color"
+              @click="item.props.click"
+            >
+              <template #prepend>
+                <VIcon :icon="item.props.prependIcon" />
+              </template>
+              <VListItemTitle v-text="item.title" />
+            </VListItem>
+          </VList>
+        </VMenu>
+      </IconBtn>
+    </div>
+    <div class="flex flex-row items-center pa-3 justify-between" :style="{ background: `${backgroundColor}` }">
+      <div class="flex-1 min-w-0">
+        <VCardTitle class="text-white px-2 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 text-white">
+          {{ props.plugin?.plugin_desc }}
+        </VCardText>
+      </div>
+      <div class="flex-shrink-0">
+        <VAvatar size="64">
+          <VImg
+            ref="imageRef"
+            :src="iconPath"
+            aspect-ratio="4/3"
+            cover
+            :class="{ shadow: isImageLoaded }"
+            @load="imageLoaded"
+            @error="imageLoadError = true"
+          />
+        </VAvatar>
+      </div>
+    </div>
+    <VCardText class="flex align-self-baseline py-3 w-full align-end">
+      <span>
+        <VIcon icon="mdi-account" class="me-1" />
+        <a :href="props.plugin?.author_url" target="_blank" @click.stop>
+          {{ props.plugin?.plugin_author }}
+        </a>
+      </span>
       <span v-if="props.count" class="ms-3">
-        <VIcon icon="mdi-fire" />
-        <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
+        <VIcon icon="mdi-download" />
+        <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
       </span>
     </VCardText>
   </VCard>

src/styles/styles.scss

@@ -156,7 +156,7 @@
 }
 
 .grid-plugin-card {
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
   padding-block-end: 1rem;
 }
 
@@ -219,3 +219,17 @@
     background-color: transparent !important;
   }
 }
+
+.text-shadow {
+  text-shadow: 1px 1px #777;
+}
+
+.card-cover-blurred::before {
+  position: absolute;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  background: rgba(29, 39, 59, 48%);
+  content: '';
+  inset: 0;
+}