From c129a37ccf94380065a6d125f7422769b08d8502 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 12 Aug 2024 18:09:53 +0800
Subject: [PATCH] style: Update PluginAppCard and PluginCard to improve UI
 consistency

---
 src/components/cards/PluginAppCard.vue | 17 +++++++++++++----
 src/components/cards/PluginCard.vue    | 13 ++++++++++---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue
index 46b37395..70e015c5 100644
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -171,15 +171,24 @@ const dropdownItems = ref([
         </VMenu>
       </IconBtn>
     </div>
-    <div class="flex flex-row items-start pa-3 justify-between grow" :style="{ background: `${backgroundColor}` }">
-      <div class="flex-1 min-w-0">
+    <div
+      class="relative flex flex-row items-start pa-3 justify-between grow"
+      :style="{ background: `${backgroundColor}` }"
+    >
+      <div
+        class="absolute inset-0 bg-cover bg-center"
+        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.7)' }"
+      ></div>
+      <div class="relative 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 py-1 text-shadow line-clamp-3">{{ props.plugin?.plugin_desc }}</VCardText>
+        <VCardText class="text-white px-2 py-1 text-shadow line-clamp-3">
+          {{ props.plugin?.plugin_desc }}
+        </VCardText>
       </div>
-      <div class="flex-shrink-0 self-center">
+      <div class="relative flex-shrink-0 self-center">
         <VAvatar size="64">
           <VImg
             ref="imageRef"
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 706258eb..786c9a21 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -408,8 +408,15 @@ watch(
         </VMenu>
       </IconBtn>
     </div>
-    <div class="flex flex-row items-start pa-3 justify-between grow" :style="{ background: `${backgroundColor}` }">
-      <div class="flex-1 min-w-0">
+    <div
+      class="relative flex flex-row items-start pa-3 justify-between grow"
+      :style="{ background: `${backgroundColor}` }"
+    >
+      <div
+        class="absolute inset-0 bg-cover bg-center"
+        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.7)' }"
+      />
+      <div class="relative 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 }}
@@ -419,7 +426,7 @@ watch(
           {{ props.plugin?.plugin_desc }}
         </VCardText>
       </div>
-      <div class="flex-shrink-0 self-center">
+      <div class="relative flex-shrink-0 self-center">
         <VAvatar size="64">
           <VImg
             ref="imageRef"