From 3c261a2c2912ce1b475df6fb73862be942a69950 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 1 Apr 2025 18:52:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8D=A1=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=82=AC=E5=81=9C=E6=95=88=E6=9E=9C=EF=BC=8C=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/BackdropCard.vue       |   2 +-
 src/components/cards/DownloaderCard.vue     |  61 ++---
 src/components/cards/LibraryCard.vue        |   2 +-
 src/components/cards/MediaCard.vue          |   2 +-
 src/components/cards/PersonCard.vue         |   2 +-
 src/components/cards/PluginAppCard.vue      | 145 +++++++-----
 src/components/cards/PluginCard.vue         |   3 +
 src/components/cards/PosterCard.vue         |   2 +-
 src/components/cards/SiteCard.vue           |   4 +-
 src/components/cards/SubscribeCard.vue      |   2 +-
 src/components/cards/SubscribeShareCard.vue |   2 +-
 src/components/cards/UserCard.vue           | 148 ++++++------
 src/components/cards/WorkflowTaskCard.vue   | 249 ++++++++++----------
 src/styles/styles.scss                      |   2 +-
 14 files changed, 331 insertions(+), 295 deletions(-)

diff --git a/src/components/cards/BackdropCard.vue b/src/components/cards/BackdropCard.vue
index df7244e1..5628c8b4 100644
--- a/src/components/cards/BackdropCard.vue
+++ b/src/components/cards/BackdropCard.vue
@@ -37,7 +37,7 @@ const getImgUrl = computed(() => {
         :width="props.width"
         class="ring-gray-500"
         :class="{
-          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
           'ring-1': imageLoaded,
         }"
         @click="goPlay"
diff --git a/src/components/cards/DownloaderCard.vue b/src/components/cards/DownloaderCard.vue
index b7e9062c..d6845843 100644
--- a/src/components/cards/DownloaderCard.vue
+++ b/src/components/cards/DownloaderCard.vue
@@ -143,35 +143,42 @@ onUnmounted(() => {
 </script>
 <template>
   <div>
-    <VCard variant="tonal" @click="openDownloaderInfoDialog">
-      <DialogCloseBtn @click="onClose" />
-      <span class="absolute top-3 right-12">
-        <IconBtn>
-          <VIcon class="cursor-move" icon="mdi-drag" />
-        </IconBtn>
-      </span>
-      <VCardText class="flex justify-space-between align-center gap-4">
-        <div class="align-self-start flex-1">
-          <div class="flex items-center">
-            <VBadge
-              v-if="props.downloader.default && props.downloader.enabled"
-              dot
-              inline
-              color="success"
-              class="me-1"
-            />
-            <span class="text-h6">{{ downloader.name }}</span>
+    <VHover v-slot="hover">
+      <VCard
+        v-bind="hover.props"
+        variant="tonal"
+        @click="openDownloaderInfoDialog"
+        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
+      >
+        <DialogCloseBtn @click="onClose" />
+        <span class="absolute top-3 right-12">
+          <IconBtn>
+            <VIcon class="cursor-move" icon="mdi-drag" />
+          </IconBtn>
+        </span>
+        <VCardText class="flex justify-space-between align-center gap-4">
+          <div class="align-self-start flex-1">
+            <div class="flex items-center">
+              <VBadge
+                v-if="props.downloader.default && props.downloader.enabled"
+                dot
+                inline
+                color="success"
+                class="me-1"
+              />
+              <span class="text-h6">{{ downloader.name }}</span>
+            </div>
+            <div class="mt-1 flex flex-wrap text-sm" v-if="props.downloader.enabled">
+              <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
+              <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
+            </div>
           </div>
-          <div class="mt-1 flex flex-wrap text-sm" v-if="props.downloader.enabled">
-            <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
-            <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
+          <div class="h-20">
+            <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
           </div>
-        </div>
-        <div class="h-20">
-          <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
-        </div>
-      </VCardText>
-    </VCard>
+        </VCardText>
+      </VCard>
+    </VHover>
     <VDialog v-if="downloaderInfoDialog" v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent>
       <VCard :title="`${props.downloader.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="downloaderInfoDialog" />
diff --git a/src/components/cards/LibraryCard.vue b/src/components/cards/LibraryCard.vue
index d9758904..d4895fc5 100644
--- a/src/components/cards/LibraryCard.vue
+++ b/src/components/cards/LibraryCard.vue
@@ -158,7 +158,7 @@ onMounted(async () => {
         :height="props.height"
         :width="props.width"
         :class="{
-          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
         }"
         @click="goPlay"
       >
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 39ac87a5..76da3dc0 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -532,7 +532,7 @@ function onRemoveSubscribe() {
           :width="props.width"
           class="outline-none shadow ring-gray-500 rounded-lg"
           :class="{
-            'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+            'transition transform-cpu duration-300  -translate-y-1 shadow-lg': hover.isHovering,
             'ring-1': isImageLoaded,
           }"
           @click.stop="goMediaDetail(hover.isHovering ?? false)"
diff --git a/src/components/cards/PersonCard.vue b/src/components/cards/PersonCard.vue
index 47e6509e..f4834de6 100644
--- a/src/components/cards/PersonCard.vue
+++ b/src/components/cards/PersonCard.vue
@@ -79,7 +79,7 @@ function goPersonDetail() {
         :width="personProps.width"
         class="rounded-lg"
         :class="{
-          'transition transform-cpu duration-300 scale-105': hover.isHovering,
+          'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
         }"
         @click.stop="goPersonDetail"
       >
diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue
index aef1c522..bd1445a7 100644
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -147,72 +147,87 @@ const dropdownItems = ref([
 
 <template>
   <div>
-    <VCard :width="props.width" :height="props.height" @click="detailDialog = true" class="flex flex-col h-full">
-      <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.5)' }"
-        ></div>
-        <div class="relative flex-1 min-w-0">
-          <VCardTitle class="text-white text-lg 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 text-sm px-2 py-0 text-shadow overflow-hidden line-clamp-3 ...">
-            {{ props.plugin?.plugin_desc }}
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-bind="hover.props"
+          :width="props.width"
+          :height="props.height"
+          @click="detailDialog = true"
+          class="flex flex-col h-full"
+          :class="{
+            'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
+          }"
+        >
+          <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.5)' }"
+            ></div>
+            <div class="relative flex-1 min-w-0">
+              <VCardTitle
+                class="text-white text-lg 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 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
+                  :class="{ shadow: isImageLoaded }"
+                  @load="imageLoaded"
+                  @error="imageLoadError = true"
+                />
+              </VAvatar>
+            </div>
+          </div>
+          <VCardText class="flex flex-none align-self-baseline py-3 w-full align-end">
+            <span>
+              <VIcon icon="mdi-github" 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-download" />
+              <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
+            </span>
+            <div class="me-n3 absolute bottom-1 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>
           </VCardText>
-        </div>
-        <div class="relative flex-shrink-0 self-center">
-          <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 flex-none align-self-baseline py-3 w-full align-end">
-        <span>
-          <VIcon icon="mdi-github" 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-download" />
-          <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
-        </span>
-        <div class="me-n3 absolute bottom-1 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>
-      </VCardText>
-    </VCard>
+        </VCard>
+      </template>
+    </VHover>
     <!-- 安装插件进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
     <!-- 更新日志 -->
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 431d1db6..94b85165 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -335,6 +335,9 @@ watch(
           :height="props.height"
           @click="openPluginDetail"
           class="flex flex-col h-full"
+          :class="{
+            'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
+          }"
         >
           <div
             class="relative flex flex-row items-start pa-3 justify-between grow"
diff --git a/src/components/cards/PosterCard.vue b/src/components/cards/PosterCard.vue
index b582ce10..7057257a 100644
--- a/src/components/cards/PosterCard.vue
+++ b/src/components/cards/PosterCard.vue
@@ -45,7 +45,7 @@ function goPlay(isHovering: boolean | null = false) {
         :width="props.width"
         class="outline-none shadow ring-gray-500 rounded-lg"
         :class="{
-          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
           'ring-1': isImageLoaded,
         }"
       >
diff --git a/src/components/cards/SiteCard.vue b/src/components/cards/SiteCard.vue
index fff950e9..f2371e66 100644
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -390,14 +390,14 @@ onMounted(() => {
   background: rgba(var(--v-theme-surface), 0.95);
   border-radius: 10px;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.09);
-  transition: all 0.25s ease;
+  transition: all 0.3s ease;
   cursor: pointer;
   position: relative;
   overflow: hidden;
 }
 
 .site-card:hover {
-  transform: translateY(-2px);
+  transform: translateY(-4px);
   border-color: rgba(var(--v-theme-primary), 0.2);
   box-shadow: 0 3px 12px -6px rgba(0, 0, 0, 0.1);
 }
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index 62f006fa..c49d69fd 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -298,7 +298,7 @@ function onSubscribeEditRemove() {
           class="flex flex-col rounded-lg h-full"
           :class="{
             'outline-dashed outline-1': props.media?.best_version && imageLoaded,
-            'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+            'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
             'opacity-70': subscribeState === 'S',
           }"
           min-height="170"
diff --git a/src/components/cards/SubscribeShareCard.vue b/src/components/cards/SubscribeShareCard.vue
index 47b1711e..6425fd97 100644
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/src/components/cards/SubscribeShareCard.vue
@@ -102,7 +102,7 @@ function doDelete() {
           :key="props.media?.id"
           class="flex flex-col rounded-lg h-full"
           :class="{
-            'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+            'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
           }"
           min-height="170"
           @click="showForkSubscribe"
diff --git a/src/components/cards/UserCard.vue b/src/components/cards/UserCard.vue
index 6ddeaded..e04d8cf5 100644
--- a/src/components/cards/UserCard.vue
+++ b/src/components/cards/UserCard.vue
@@ -45,6 +45,12 @@ const movieSubscriptions = ref(0)
 // 用户电视剧订阅数量
 const tvShowSubscriptions = ref(0)
 
+// 新增：用户状态背景颜色计算
+const statusClass = computed(() => ({
+  'bg-error-lighten-4': !props.user.is_active, // 假设用户状态使用 is_active 字段
+  'border-error': !props.user.is_active, // 非活跃用户添加红色边框
+}))
+
 // 按用户查询订阅数量
 async function fetchSubscriptions() {
   try {
@@ -98,88 +104,84 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard>
-    <VCardText class="text-center pt-10 pb-3">
-      <VAvatar variant="flat" size="100" rounded>
-        <VImg :src="user.avatar || avatar1" alt="avatar" />
-      </VAvatar>
-      <h5 class="text-h5 mt-3">{{ user.name }}</h5>
-      <VChip size="small" class="mt-3" :class="{ 'text-error': user.is_superuser }">
+  <VHover v-slot="hover">
+    <VCard
+      v-bind="hover.props"
+      class="w-full h-full"
+      :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering, ...statusClass }"
+      @click.stop="editUser"
+    >
+      <!-- 用户头像 -->
+      <VImg height="12rem" :src="user.avatar ?? avatar1" cover>
+        <div v-if="!user.is_active" class="img-overlay" />
+      </VImg>
+      <div class="flex flex-col">
+        <!-- 用户基本信息 -->
+        <VCardTitle class="pt-2">{{ user.name }}</VCardTitle>
+        <VCardSubtitle v-if="user.email" class="text-wrap">
+          <VIcon size="16">mdi-email</VIcon>
+          {{ user.email }}
+        </VCardSubtitle>
+        <!-- 订阅信息 -->
+        <VCardActions>
+          <div class="mt-3 flex gap-3" dense>
+            <VChip v-if="user.is_otp" size="small" color="error">
+              <VIcon>mdi-lock</VIcon>
+            </VChip>
+            <VChip size="small" color="info">
+              <VIcon left class="me-2">mdi-movie</VIcon>
+              {{ movieSubscriptions }}
+            </VChip>
+            <VChip size="small" color="warning">
+              <VIcon left class="me-2">mdi-television</VIcon>
+              {{ tvShowSubscriptions }}
+            </VChip>
+          </div>
+        </VCardActions>
+      </div>
+      <!-- 管理员标签 -->
+      <VChip
+        variant="elevated"
+        size="small"
+        class="absolute right-2 top-2"
+        :color="user.is_superuser ? 'primary' : 'secondary'"
+      >
         {{ user.is_superuser ? '管理员' : '普通用户' }}
       </VChip>
-    </VCardText>
-    <VCardText class="flex justify-center gap-6 pb-5">
-      <div class="d-flex align-center">
-        <VAvatar size="40" color="primary" rounded variant="tonal" class="me-4">
-          <VIcon size="24" icon="mdi-movie-open-outline"></VIcon>
-        </VAvatar>
-        <div>
-          <div class="text-h6">{{ movieSubscriptions }}</div>
-          <div class="text-sm text-no-wrap">电影订阅</div>
-        </div>
+      <!-- 删除按钮 -->
+      <div class="absolute bottom-2 w-full flex items-center justify-center">
+        <VBtn
+          v-show="hover.isHovering && currentUserIsSuperuser"
+          @click.stop="removeUser"
+          icon="mdi-delete"
+          color="error"
+          size="small"
+          class="shadow-xl"
+        />
       </div>
-      <div class="d-flex align-center">
-        <VAvatar size="40" color="primary" rounded variant="tonal" class="me-4">
-          <VIcon size="24" icon="mdi-television"></VIcon>
-        </VAvatar>
-        <div>
-          <div class="text-h6">{{ tvShowSubscriptions }}</div>
-          <div class="text-sm text-no-wrap">电视剧订阅</div>
-        </div>
-      </div>
-    </VCardText>
-    <VCardText class="pb-6">
-      <VDivider class="my-2">
-        <h5 class="text-h6">详情</h5>
-      </VDivider>
-      <VList lines="one">
-        <VListItem>
-          <VListItemTitle class="text-sm">
-            <span class="font-weight-medium">邮箱：</span><span class="text-body-1"> {{ user.email }}</span>
-          </VListItemTitle>
-        </VListItem>
-        <VListItem>
-          <VListItemTitle class="text-sm">
-            <span class="font-weight-medium">状态：</span
-            ><span class="text-body-1">
-              <VChip size="small" :class="{ 'text-success': user.is_active }" variant="tonal">
-                {{ user.is_active ? '激活' : '已停用' }}
-              </VChip>
-            </span>
-          </VListItemTitle>
-        </VListItem>
-        <VListItem>
-          <VListItemTitle class="text-sm">
-            <span class="font-weight-medium">双重认证：</span
-            ><span class="text-body-1">
-              <VChip size="small" :class="{ 'text-success': user.is_otp }" variant="tonal">
-                {{ user.is_otp ? '已启用' : '未启用' }}
-              </VChip>
-            </span>
-          </VListItemTitle>
-        </VListItem>
-      </VList>
-    </VCardText>
-    <VCardText class="flex flex-row justify-center">
-      <VBtn v-if="currentUserIsSuperuser" color="primary" class="me-4" @click="editUser"> 编辑 </VBtn>
-      <VBtn
-        v-if="currentUserIsSuperuser && props.user.id != currentLoginUserId"
-        color="error"
-        variant="outlined"
-        @click="removeUser"
-      >
-        删除
-      </VBtn>
-    </VCardText>
-  </VCard>
+    </VCard>
+  </VHover>
+
   <!-- 用户编辑弹窗 -->
   <UserAddEditDialog
     v-if="userEditDialog"
     v-model="userEditDialog"
-    :username="props.user?.name"
-    :usernames="props.users.map(item => item.name)"
+    :username="user?.name"
+    :usernames="users.map(item => item.name)"
     oper="edit"
     @save="onUserUpdate"
     @close="userEditDialog = false"
   />
 </template>
+
+<style scoped>
+.img-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.5);
+  z-index: 1;
+}
+</style>
diff --git a/src/components/cards/WorkflowTaskCard.vue b/src/components/cards/WorkflowTaskCard.vue
index bba5f626..450a6d55 100644
--- a/src/components/cards/WorkflowTaskCard.vue
+++ b/src/components/cards/WorkflowTaskCard.vue
@@ -172,132 +172,141 @@ const resolveProgress = (item: Workflow) => {
 </script>
 <template>
   <div class="h-full">
-    <VCard class="mx-auto h-full" @click="handleFlow(workflow)" :ripple="false" :loading="loading">
-      <VCardItem class="py-3" :class="`bg-${resolveStatusVariant(workflow?.state).color}`">
-        <template #prepend>
-          <VAvatar variant="text" class="me-2">
-            <VIcon
-              v-if="workflow?.state === 'P'"
-              color="success"
-              size="x-large"
-              icon="mdi-play"
-              @click.stop="handleEnable(workflow)"
-            />
-            <VIcon v-else color="warning" icon="mdi-pause" size="x-large" @click.stop="handlePause(workflow)" />
-          </VAvatar>
-        </template>
-        <VCardTitle class="text-white">
-          {{ workflow?.name }}
-        </VCardTitle>
-        <VCardSubtitle class="text-white">{{ workflow?.description }}</VCardSubtitle>
-        <template #append>
-          <IconBtn>
-            <VIcon icon="mdi-vector-polyline-edit" @click.stop="handleFlow(workflow)" />
-          </IconBtn>
-          <IconBtn>
-            <VIcon icon="mdi-dots-vertical" />
-            <VMenu activator="parent" close-on-content-click>
-              <VList>
-                <VListItem variant="plain" base-color="primary" @click="handleEdit(workflow)">
-                  <template #prepend>
-                    <VIcon icon="mdi-note-edit" />
-                  </template>
-                  <VListItemTitle>编辑任务</VListItemTitle>
-                </VListItem>
-                <VListItem
-                  v-if="workflow.current_action"
-                  variant="plain"
-                  base-color="info"
-                  @click="handleRun(workflow, false)"
-                >
-                  <template #prepend>
-                    <VIcon icon="mdi-play-speed" />
-                  </template>
-                  <VListItemTitle>继续执行</VListItemTitle>
-                </VListItem>
-                <VListItem
-                  v-if="workflow.current_action"
-                  variant="plain"
-                  base-color="info"
-                  @click="handleRun(workflow, true)"
-                >
-                  <template #prepend>
-                    <VIcon icon="mdi-replay" />
-                  </template>
-                  <VListItemTitle>重新执行</VListItemTitle>
-                </VListItem>
-                <VListItem v-else variant="plain" base-color="info" @click="handleRun(workflow, true)">
-                  <template #prepend>
-                    <VIcon icon="mdi-run" />
-                  </template>
-                  <VListItemTitle>立即执行</VListItemTitle>
-                </VListItem>
-                <VListItem variant="plain" base-color="warning" @click="handleReset(workflow)">
-                  <template #prepend>
-                    <VIcon icon="mdi-restore-alert" />
-                  </template>
-                  <VListItemTitle>重置任务</VListItemTitle>
-                </VListItem>
-                <VListItem variant="plain" base-color="error" @click="handleDelete(workflow)">
-                  <template #prepend>
-                    <VIcon icon="mdi-delete" />
-                  </template>
-                  <VListItemTitle>删除任务</VListItemTitle>
-                </VListItem>
-              </VList>
-            </VMenu>
-          </IconBtn>
-        </template>
-      </VCardItem>
-      <VDivider />
-      <VCardText>
-        <div class="d-flex flex-column gap-y-4">
-          <div class="d-flex flex-wrap gap-x-6">
-            <div class="flex-1">
-              <div class="mb-1">定时</div>
-              <h5 class="text-h6">{{ workflow?.timer }}</h5>
-            </div>
-            <div class="flex-1">
-              <div class="mb-1">状态</div>
-              <h5 class="text-h6" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
-                {{ resolveStatusVariant(workflow?.state).text }}
-              </h5>
-            </div>
-          </div>
-          <div class="d-flex flex-wrap gap-x-6">
-            <div class="flex-1">
-              <div class="mb-1">动作数</div>
-              <div>
-                <VAvatar size="32" color="primary" variant="tonal">
-                  <span class="text-sm">{{ workflow?.actions?.length }}</span>
-                </VAvatar>
+    <VHover v-slot="hover">
+      <VCard
+        v-bind="hover.props"
+        class="mx-auto h-full"
+        @click="handleFlow(workflow)"
+        :ripple="false"
+        :loading="loading"
+        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
+      >
+        <VCardItem class="py-3" :class="`bg-${resolveStatusVariant(workflow?.state).color}`">
+          <template #prepend>
+            <VAvatar variant="text" class="me-2">
+              <VIcon
+                v-if="workflow?.state === 'P'"
+                color="success"
+                size="x-large"
+                icon="mdi-play"
+                @click.stop="handleEnable(workflow)"
+              />
+              <VIcon v-else color="warning" icon="mdi-pause" size="x-large" @click.stop="handlePause(workflow)" />
+            </VAvatar>
+          </template>
+          <VCardTitle class="text-white">
+            {{ workflow?.name }}
+          </VCardTitle>
+          <VCardSubtitle class="text-white">{{ workflow?.description }}</VCardSubtitle>
+          <template #append>
+            <IconBtn>
+              <VIcon icon="mdi-vector-polyline-edit" @click.stop="handleFlow(workflow)" />
+            </IconBtn>
+            <IconBtn>
+              <VIcon icon="mdi-dots-vertical" />
+              <VMenu activator="parent" close-on-content-click>
+                <VList>
+                  <VListItem variant="plain" base-color="primary" @click="handleEdit(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-note-edit" />
+                    </template>
+                    <VListItemTitle>编辑任务</VListItemTitle>
+                  </VListItem>
+                  <VListItem
+                    v-if="workflow.current_action"
+                    variant="plain"
+                    base-color="info"
+                    @click="handleRun(workflow, false)"
+                  >
+                    <template #prepend>
+                      <VIcon icon="mdi-play-speed" />
+                    </template>
+                    <VListItemTitle>继续执行</VListItemTitle>
+                  </VListItem>
+                  <VListItem
+                    v-if="workflow.current_action"
+                    variant="plain"
+                    base-color="info"
+                    @click="handleRun(workflow, true)"
+                  >
+                    <template #prepend>
+                      <VIcon icon="mdi-replay" />
+                    </template>
+                    <VListItemTitle>重新执行</VListItemTitle>
+                  </VListItem>
+                  <VListItem v-else variant="plain" base-color="info" @click="handleRun(workflow, true)">
+                    <template #prepend>
+                      <VIcon icon="mdi-run" />
+                    </template>
+                    <VListItemTitle>立即执行</VListItemTitle>
+                  </VListItem>
+                  <VListItem variant="plain" base-color="warning" @click="handleReset(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-restore-alert" />
+                    </template>
+                    <VListItemTitle>重置任务</VListItemTitle>
+                  </VListItem>
+                  <VListItem variant="plain" base-color="error" @click="handleDelete(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-delete" />
+                    </template>
+                    <VListItemTitle>删除任务</VListItemTitle>
+                  </VListItem>
+                </VList>
+              </VMenu>
+            </IconBtn>
+          </template>
+        </VCardItem>
+        <VDivider />
+        <VCardText>
+          <div class="d-flex flex-column gap-y-4">
+            <div class="d-flex flex-wrap gap-x-6">
+              <div class="flex-1">
+                <div class="mb-1">定时</div>
+                <h5 class="text-h6">{{ workflow?.timer }}</h5>
+              </div>
+              <div class="flex-1">
+                <div class="mb-1">状态</div>
+                <h5 class="text-h6" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
+                  {{ resolveStatusVariant(workflow?.state).text }}
+                </h5>
               </div>
             </div>
-            <div class="flex-1">
-              <div class="mb-1">已执行次数</div>
-              <h5 class="text-h6">{{ workflow?.run_count }}</h5>
-            </div>
-          </div>
-          <div class="d-flex flex-wrap gap-x-6">
-            <div class="flex-1">
-              <div class="mb-1">进度</div>
-              <div class="d-flex align-center gap-5">
-                <div class="flex-grow-1">
-                  <VProgressLinear color="info" rounded :model-value="resolveProgress(workflow)" />
+            <div class="d-flex flex-wrap gap-x-6">
+              <div class="flex-1">
+                <div class="mb-1">动作数</div>
+                <div>
+                  <VAvatar size="32" color="primary" variant="tonal">
+                    <span class="text-sm">{{ workflow?.actions?.length }}</span>
+                  </VAvatar>
                 </div>
-                <span> {{ resolveProgress(workflow) }}% </span>
+              </div>
+              <div class="flex-1">
+                <div class="mb-1">已执行次数</div>
+                <h5 class="text-h6">{{ workflow?.run_count }}</h5>
+              </div>
+            </div>
+            <div class="d-flex flex-wrap gap-x-6">
+              <div class="flex-1">
+                <div class="mb-1">进度</div>
+                <div class="d-flex align-center gap-5">
+                  <div class="flex-grow-1">
+                    <VProgressLinear color="info" rounded :model-value="resolveProgress(workflow)" />
+                  </div>
+                  <span> {{ resolveProgress(workflow) }}% </span>
+                </div>
+              </div>
+            </div>
+            <div class="d-flex flex-wrap gap-x-6" v-if="workflow?.result">
+              <div class="flex-1">
+                <div class="mb-1">错误信息</div>
+                <div class="text-error">{{ workflow?.result }}</div>
               </div>
             </div>
           </div>
-          <div class="d-flex flex-wrap gap-x-6" v-if="workflow?.result">
-            <div class="flex-1">
-              <div class="mb-1">错误信息</div>
-              <div class="text-error">{{ workflow?.result }}</div>
-            </div>
-          </div>
-        </div>
-      </VCardText>
-    </VCard>
+        </VCardText>
+      </VCard>
+    </VHover>
     <!-- 流程对话框 -->
     <WorkflowActionsDialog
       v-if="flowDialog"
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 37d1916a..15aab955 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -218,7 +218,7 @@ html.v-overlay-scroll-blocked body {
 }
 
 .grid-user-card {
-  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   padding-block-end: 1rem;
 }