refine settings card layouts

src/components/cards/CustomRuleCard.vue

@@ -101,19 +101,21 @@ function onClose() {
 
 <template>
   <div>
-    <VCard variant="tonal" @click="openRuleInfoDialog">
+    <VCard variant="tonal" class="app-card-shell" @click="openRuleInfoDialog">
       <span class="absolute top-3 right-12">
         <IconBtn>
           <VIcon class="cursor-move" icon="mdi-drag" />
         </IconBtn>
       </span>
       <VDialogCloseBtn @click="onClose" />
-      <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start">
-          <h5 class="text-h6 mb-1">{{ props.rule.name }}</h5>
-          <div class="text-body-1 mb-3">{{ props.rule.id }}</div>
+      <VCardText class="app-card-summary app-card-summary--double-action app-card-summary--title-subtitle">
+        <div class="app-card-summary__content">
+          <h5 class="app-card-summary__title text-h6">{{ props.rule.name }}</h5>
+          <div class="app-card-summary__subtitle text-body-1">{{ props.rule.id }}</div>
+        </div>
+        <div class="app-card-summary__media" aria-hidden="true">
+          <VImg :src="filter_svg" contain class="app-card-summary__image" />
         </div>
-        <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
       </VCardText>
     </VCard>
     <VDialog

src/components/cards/DirectoryCard.vue

@@ -195,7 +195,7 @@ watch(
 </script>
 
 <template>
-  <VCard variant="tonal" :width="props.width" :height="props.height">
+  <VCard variant="tonal" class="app-card-shell" :width="props.width" :height="props.height">
     <VDialogCloseBtn @click="onClose" />
     <VCardItem>
       <VTextField

src/components/cards/DownloaderCard.vue

@@ -252,6 +252,7 @@ onUnmounted(() => {
       <VCard
         v-bind="hover.props"
         variant="tonal"
+        class="app-card-shell"
         @click="openDownloaderInfoDialog"
         :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
       >
@@ -261,9 +262,9 @@ onUnmounted(() => {
             <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">
+        <VCardText class="app-card-summary app-card-summary--double-action">
+          <div class="app-card-summary__content">
+            <div class="app-card-summary__title-row">
               <VBadge
                 v-if="props.downloader.default && props.downloader.enabled"
                 dot
@@ -271,18 +272,21 @@ onUnmounted(() => {
                 color="success"
                 class="me-1"
               />
-              <span class="text-h6">{{ downloader.name }}</span>
+              <span class="app-card-summary__title text-h6">{{ downloader.name }}</span>
             </div>
-            <div v-if="downloaderDict[downloader.type] && props.downloader.enabled" class="mt-1 flex flex-wrap text-sm">
-              <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
-              <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
+            <div
+              v-if="downloaderDict[downloader.type] && props.downloader.enabled"
+              class="app-card-summary__meta text-sm"
+            >
+              <span class="app-card-summary__meta-item">{{ `↑ ${formatFileSize(upload_rate, 1)}/s` }}</span>
+              <span class="app-card-summary__meta-item">{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
             </div>
-            <div v-else-if="!downloaderDict[downloader.type]" class="mt-1 flex flex-wrap text-sm">
-              <span class="me-2">自定义下载器</span>
+            <div v-else-if="!downloaderDict[downloader.type]" class="app-card-summary__subtitle text-sm">
+              自定义下载器
             </div>
           </div>
-          <div class="h-20">
-            <VImg :src="getIcon" cover class="mt-8 me-3" max-width="3rem" min-width="3rem" />
+          <div class="app-card-summary__media" aria-hidden="true">
+            <VImg :src="getIcon" contain class="app-card-summary__image" />
           </div>
         </VCardText>
       </VCard>

src/components/cards/FilterRuleCard.vue

@@ -45,7 +45,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard variant="tonal">
+  <VCard variant="tonal" class="app-card-shell">
     <span class="absolute top-3 right-12">
       <IconBtn>
         <VIcon class="cursor-move" icon="mdi-drag" />
@@ -53,7 +53,7 @@ onMounted(() => {
     </span>
     <VDialogCloseBtn @click="onClose" />
     <VCardItem>
-      <VCardTitle>{{ t('filterRule.priority') }} {{ props.pri }}</VCardTitle>
+      <VCardTitle class="pr-8">{{ t('filterRule.priority') }} {{ props.pri }}</VCardTitle>
       <VRow>
         <VCol>
           <VAutocomplete

src/components/cards/FilterRuleGroupCard.vue

@@ -205,22 +205,24 @@ function onClose() {
 
 <template>
   <div>
-    <VCard variant="tonal" @click="opengroupInfoDialog">
+    <VCard variant="tonal" class="app-card-shell" @click="opengroupInfoDialog">
       <span class="absolute top-3 right-12">
         <IconBtn>
           <VIcon class="cursor-move" icon="mdi-drag" />
         </IconBtn>
       </span>
       <VDialogCloseBtn @click="onClose" />
-      <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start">
-          <h5 class="text-h6 mb-1">{{ props.group.name }}</h5>
-          <div class="text-body-1 mb-3">
+      <VCardText class="app-card-summary app-card-summary--double-action app-card-summary--title-subtitle">
+        <div class="app-card-summary__content">
+          <h5 class="app-card-summary__title text-h6">{{ props.group.name }}</h5>
+          <div class="app-card-summary__subtitle text-body-1">
             <span v-if="!props.group.category">{{ props.group.media_type || t('common.all') }}</span>
             <span v-else>{{ props.group.category }}</span>
           </div>
         </div>
-        <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
+        <div class="app-card-summary__media" aria-hidden="true">
+          <VImg :src="filter_group_svg" contain class="app-card-summary__image" />
+        </div>
       </VCardText>
     </VCard>
     <VDialog

src/components/cards/MediaServerCard.vue

@@ -199,21 +199,27 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <VCard variant="tonal" @click="openMediaServerInfoDialog">
+    <VCard variant="tonal" class="app-card-shell" @click="openMediaServerInfoDialog">
       <VDialogCloseBtn @click="onClose" />
-      <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start flex-1">
-          <div class="text-h6 mb-1">{{ mediaserver.name }}</div>
-          <div v-if="mediaServerDict[mediaserver.type] && mediaserver.enabled" class="text-sm mt-5 flex flex-wrap">
-            <span v-for="item in infoItems" :key="item.title" class="me-2 mb-1">
-              <VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }}
+      <VCardText class="app-card-summary app-card-summary--single-action">
+        <div class="app-card-summary__content">
+          <div class="app-card-summary__title text-h6">{{ mediaserver.name }}</div>
+          <div
+            v-if="mediaServerDict[mediaserver.type] && mediaserver.enabled"
+            class="grid min-h-6 grid-cols-3 gap-2 text-sm text-medium-emphasis"
+          >
+            <span v-for="item in infoItems" :key="item.title" class="flex min-w-0 items-center">
+              <VIcon rounded :icon="item.avatar" class="me-1 shrink-0" />
+              <span class="truncate">{{ item.amount }}</span>
             </span>
           </div>
-          <div v-else-if="!mediaServerDict[mediaserver.type]" class="text-sm mt-5 flex flex-wrap">
-            <span class="me-2 mb-1">自定义媒体服务器</span>
+          <div v-else-if="!mediaServerDict[mediaserver.type]" class="app-card-summary__subtitle text-sm">
+            自定义媒体服务器
           </div>
         </div>
-        <VImg :src="getIcon" class="mt-8 me-3 max-h-12" max-width="3rem" min-width="3rem" />
+        <div class="app-card-summary__media" aria-hidden="true">
+          <VImg :src="getIcon" contain class="app-card-summary__image" />
+        </div>
       </VCardText>
     </VCard>
 

src/components/cards/NotificationChannelCard.vue

@@ -153,22 +153,24 @@ function onClose() {
 </script>
 <template>
   <div>
-    <VCard variant="tonal" @click="openNotificationInfoDialog">
+    <VCard variant="tonal" class="app-card-shell" @click="openNotificationInfoDialog">
       <span class="absolute top-3 right-12">
         <IconBtn>
           <VIcon class="cursor-move" icon="mdi-drag" />
         </IconBtn>
       </span>
       <VDialogCloseBtn @click="onClose" />
-      <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start">
-          <div class="flex items-center">
+      <VCardText class="app-card-summary app-card-summary--double-action">
+        <div class="app-card-summary__content">
+          <div class="app-card-summary__title-row">
             <VBadge v-if="props.notification.enabled" dot inline color="success" class="me-1" />
-            <span class="text-h6">{{ props.notification.name }}</span>
+            <span class="app-card-summary__title text-h6">{{ props.notification.name }}</span>
           </div>
-          <div class="text-body-1 mb-3">{{ notificationTypeNames[notification.type] }}</div>
+          <div class="app-card-summary__subtitle text-body-1">{{ notificationTypeNames[notification.type] }}</div>
+        </div>
+        <div class="app-card-summary__media" aria-hidden="true">
+          <VImg :src="getIcon" contain class="app-card-summary__image" />
         </div>
-        <VImg :src="getIcon" cover class="mt-7 me-1" max-width="3rem" />
       </VCardText>
     </VCard>
 

src/components/cards/SiteCard.vue

@@ -216,11 +216,17 @@ onMounted(() => {
       <div v-if="cardProps.site?.is_active" class="site-status-indicator" :class="statColor"></div>
 
       <!-- 主体部分 -->
-      <div class="relative flex-1 flex flex-col p-3 z-1">
+      <div class="relative z-1 flex flex-1 flex-col p-3 pr-12">
         <!-- 顶部：图标和站点名称 -->
-        <div class="flex items-center mb-1">
+        <div class="mb-1 flex min-w-0 items-center gap-2">
           <!-- 站点图标 -->
-          <VAvatar tile rounded="lg" size="32" class="me-2" :class="{ 'cursor-move': display.mdAndUp.value }">
+          <VAvatar
+            tile
+            rounded="lg"
+            size="32"
+            class="shrink-0"
+            :class="{ 'cursor-move': display.mdAndUp.value }"
+          >
             <VImg :src="siteIcon" class="w-full h-full" :alt="cardProps.site?.name" cover>
               <template #placeholder>
                 <div class="w-full h-full">
@@ -231,11 +237,11 @@ onMounted(() => {
           </VAvatar>
 
           <!-- 站点名称和特性图标 -->
-          <div class="flex-1 min-w-0 flex items-center">
-            <h3 class="text-lg font-semibold leading-tight truncate">{{ cardProps.site?.name }}</h3>
+          <div class="flex min-w-0 flex-1 items-center gap-2">
+            <h3 class="min-w-0 flex-1 truncate text-lg font-semibold leading-tight">{{ cardProps.site?.name }}</h3>
 
             <!-- 站点特性图标 -->
-            <div class="flex items-center gap-2 ml-auto mr-10">
+            <div class="ml-auto flex shrink-0 items-center gap-2">
               <div v-if="cardProps.site?.limit_interval" class="hover:bg-primary/8 transition-colors">
                 <VIcon icon="mdi-speedometer" size="16" color="primary" class="opacity-85 hover:opacity-100" />
               </div>
@@ -254,7 +260,7 @@ onMounted(() => {
 
         <!-- 中间部分：网址 -->
         <div class="my-3">
-          <div class="text-sm text-medium-emphasis truncate" @click.stop="openSitePage">
+          <div class="min-w-0 truncate text-sm text-medium-emphasis" @click.stop="openSitePage">
             {{ cardProps.site?.url }}
           </div>
         </div>