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,11 +149,10 @@ const dropdownItems = ref([
 </script>
 
 <template>
-  <VCard :width="props.width" :height="props.height" @click="installPlugin" class="flex flex-col">
+  <VCard :width="props.width" :height="props.height" @click="installPlugin">
-    <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
+    <div class="me-n3 absolute bottom-0 right-3">
-      <div class="me-n3 absolute top-0 right-3">
       <IconBtn>
-          <VIcon icon="mdi-dots-vertical" class="text-white" />
+        <VIcon icon="mdi-dots-vertical" />
         <VMenu activator="parent" close-on-content-click>
           <VList>
             <VListItem
@@ -172,7 +171,16 @@ const dropdownItems = ref([
         </VMenu>
       </IconBtn>
     </div>
-      <VAvatar size="6rem">
+    <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>
+      <div class="flex-shrink-0">
+        <VAvatar size="64">
           <VImg
             ref="imageRef"
             :src="iconPath"
@@ -184,19 +192,8 @@ const dropdownItems = ref([
           />
         </VAvatar>
       </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>
-    </VCardText>
+    <VCardText class="flex align-self-baseline py-3 w-full align-end">
-    <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>
@@ -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,13 +383,12 @@ 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">
+    <div class="me-n3 absolute bottom-0 right-3">
       <IconBtn>
-          <VIcon icon="mdi-dots-vertical" class="text-white" />
+        <VIcon icon="mdi-dots-vertical" />
         <VMenu activator="parent" close-on-content-click>
           <VList>
             <VListItem
@@ -409,7 +408,19 @@ watch(
         </VMenu>
       </IconBtn>
     </div>
-      <VAvatar size="6rem">
+    <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"
@@ -421,20 +432,17 @@ watch(
           />
         </VAvatar>
       </div>
-    <VCardItem class="py-2">
+    </div>
-      <VCardTitle class="flex items-center flex-row">
+    <VCardText class="flex align-self-baseline py-3 w-full align-end">
-        <VBadge v-if="props.plugin?.state" dot inline color="success" class="me-1 mb-1" />
+      <span>
-        {{ props.plugin?.plugin_name }}
+        <VIcon icon="mdi-account" class="me-1" />
-        <span class="text-sm ms-2 mt-1 text-gray-500">v{{ props.plugin?.plugin_version }}</span>
+        <a :href="props.plugin?.author_url" target="_blank" @click.stop>
-      </VCardTitle>
+          {{ props.plugin?.plugin_author }}
-    </VCardItem>
+        </a>
-    <VCardText class="pb-1">
+      </span>
-      {{ 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" />
+        <VIcon icon="mdi-download" />
-        <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
+        <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;
+}