From 8b16936e3862cfd7957abbaed154f9af2391249e Mon Sep 17 00:00:00 2001
From: Oscar <ocetars@gmail.com>
Date: Thu, 25 Dec 2025 19:01:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?style(ui):=20=E9=87=8D=E6=9E=84=20ItemCard?=
 =?UTF-8?q?=20=E5=B8=83=E5=B1=80=E5=B9=B6=E4=BC=98=E5=8C=96=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/components/shared/ItemCard.vue | 153 +++++++++++--------
 dashboard/src/views/PlatformPage.vue         | 106 +++++++------
 2 files changed, 144 insertions(+), 115 deletions(-)

diff --git a/dashboard/src/components/shared/ItemCard.vue b/dashboard/src/components/shared/ItemCard.vue
index 7c3013239..93e94326c 100644
--- a/dashboard/src/components/shared/ItemCard.vue
+++ b/dashboard/src/components/shared/ItemCard.vue
@@ -1,71 +1,92 @@
 <template>
-  <v-card class="item-card hover-elevation" style="padding: 4px;" elevation="0">
-    <v-card-title class="d-flex justify-space-between align-center pb-1 pt-3">
-      <span class="text-h2 text-truncate" :title="getItemTitle()">{{ getItemTitle() }}</span>
-      <v-tooltip location="top">
-        <template v-slot:activator="{ props }">
-          <v-switch
-            color="primary"
-            hide-details
-            density="compact"
-            :model-value="getItemEnabled()"
-            :loading="loading"
-            :disabled="loading"
-            v-bind="props"
-            @update:model-value="toggleEnabled"
-          ></v-switch>
-        </template>
-        <span>{{ getItemEnabled() ? t('core.common.itemCard.enabled') : t('core.common.itemCard.disabled') }}</span>
-      </v-tooltip>
-    </v-card-title>
+  <v-card class="item-card hover-elevation pa-4" elevation="0">
+    <div class="d-flex flex-row fill-height">
+      <!-- Left Content -->
+      <div class="d-flex flex-column flex-grow-1" :style="{ position: 'relative', overflow: 'hidden', opacity: getItemEnabled() ? 1 : 0.6 }">
+        <div class="text-h4 font-weight-bold mb-2" :title="getItemTitle()">
+          {{ getItemTitle() }}
+        </div>
+        
+        <div class="mb-2">
+            <slot name="item-details" :item="item"></slot>
+        </div>
 
-    <v-card-text>
-      <slot name="item-details" :item="item"></slot>
-    </v-card-text>
+        <div v-if="bglogo" class="mt-auto">
+            <v-img 
+                :src="bglogo" 
+                width="64" 
+                height="64" 
+                contain
+                :style="{ opacity: getItemEnabled() ? 0.9 : 0.4 }"
+            ></v-img>
+        </div>
+      </div>
 
-    <v-card-actions style="margin: 8px;">
-      <v-btn
-        variant="outlined"
-        color="error"
-        size="small"
-        rounded="xl"
-        :disabled="loading"
-        @click="$emit('delete', item)"
-      >
-        {{ t('core.common.itemCard.delete') }}
-      </v-btn>
-      <v-btn
-        variant="tonal"
-        color="primary"
-        size="small"
-        rounded="xl"
-        :disabled="loading"
-        @click="$emit('edit', item)"
-      >
-        {{ t('core.common.itemCard.edit') }}
-      </v-btn>
-      <v-btn
-        v-if="showCopyButton"
-        variant="tonal"
-        color="secondary"
-        size="small"
-        rounded="xl"
-        :disabled="loading"
-        @click="$emit('copy', item)"
-      >
-        {{ t('core.common.itemCard.copy') }}
-      </v-btn>
-      <slot name="actions" :item="item"></slot>
-      <v-spacer></v-spacer>
-    </v-card-actions>
+      <!-- Right Actions -->
+      <div class="d-flex flex-column align-end ml-4" style="min-width: 80px;">
+        <div class="mb-auto">
+             <v-tooltip location="top">
+                <template v-slot:activator="{ props }">
+                  <v-switch
+                    color="primary"
+                    hide-details
+                    density="compact"
+                    :model-value="getItemEnabled()"
+                    :loading="loading"
+                    :disabled="loading"
+                    v-bind="props"
+                    @update:model-value="toggleEnabled"
+                    inset
+                  ></v-switch>
+                </template>
+                <span>{{ getItemEnabled() ? t('core.common.itemCard.enabled') : t('core.common.itemCard.disabled') }}</span>
+              </v-tooltip>
+        </div>
 
-    <div class="d-flex justify-end align-center" style="position: absolute; bottom: 16px; right: 16px; opacity: 0.2;" v-if="bglogo">
-      <v-img
-        :src="bglogo"
-        contain
-        width="120"
-        height="120"
-      ></v-img>
+        <div class="d-flex flex-column w-100 mt-4" style="gap: 8px;">
+             <v-btn
+                variant="outlined"
+                color="primary"
+                rounded="pill"
+                size="small"
+                block
+                :disabled="loading"
+                @click="$emit('edit', item)"
+              >
+                <v-icon start>mdi-pencil</v-icon>
+                {{ t('core.common.itemCard.edit') }}
+              </v-btn>
+
+              <v-btn
+                variant="outlined"
+                color="error"
+                rounded="pill"
+                size="small"
+                block
+                :disabled="loading"
+                @click="$emit('delete', item)"
+              >
+                <v-icon start>mdi-delete-outline</v-icon>
+                {{ t('core.common.itemCard.delete') }}
+              </v-btn>
+
+              <v-btn
+                v-if="showCopyButton"
+                variant="tonal"
+                color="secondary"
+                rounded="pill"
+                size="small"
+                block
+                :disabled="loading"
+                @click="$emit('copy', item)"
+              >
+                 <v-icon start>mdi-content-copy</v-icon>
+                 {{ t('core.common.itemCard.copy') }}
+              </v-btn>
+              
+              <slot name="actions" :item="item"></slot>
+        </div>
+      </div>
     </div>
   </v-card>
 </template>
@@ -126,10 +147,12 @@ export default {
   border-radius: 18px;
   transition: all 0.3s ease;
   overflow: hidden;
-  min-height: 220px;
+  min-height: 160px;
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  border: 1px solid #e0e0e0;
 }
 
 .hover-elevation:hover {
diff --git a/dashboard/src/views/PlatformPage.vue b/dashboard/src/views/PlatformPage.vue
index 56d23852d..121a01af0 100644
--- a/dashboard/src/views/PlatformPage.vue
+++ b/dashboard/src/views/PlatformPage.vue
@@ -16,7 +16,7 @@
         </v-btn>
       </v-row>
 
-      <div>
+      <div class="px-4">
         <v-row v-if="(config_data.platform || []).length === 0">
           <v-col cols="12" class="text-center pa-8">
             <v-icon size="64" color="grey-lighten-1">mdi-connection</v-icon>
@@ -24,55 +24,54 @@
           </v-col>
         </v-row>
 
-        <v-row v-else>
-          <v-col v-for="(platform, index) in config_data.platform || []" :key="index" cols="12" md="6" lg="4" xl="3">
-            <item-card :item="platform" title-field="id" enabled-field="enable"
-              :bglogo="getPlatformIcon(platform.type || platform.id)" @toggle-enabled="platformStatusChange"
-              @delete="deletePlatform" @edit="editPlatform">
-              <template #item-details="{ item }">
-                <!-- 平台运行状态 - 只在非运行状态或有错误时显示 -->
-                <div class="platform-status-row mb-2" v-if="getPlatformStat(item.id) && (getPlatformStat(item.id)?.status !== 'running' || getPlatformStat(item.id)?.error_count > 0)">
-                  <!-- 状态 chip - 只在非 running 状态时显示 -->
-                  <v-chip
-                    v-if="getPlatformStat(item.id)?.status !== 'running'"
-                    size="small"
-                    :color="getStatusColor(getPlatformStat(item.id)?.status)"
-                    variant="tonal"
-                    class="status-chip"
-                  >
-                    <v-icon size="small" start>{{ getStatusIcon(getPlatformStat(item.id)?.status) }}</v-icon>
-                    {{ tm('runtimeStatus.' + (getPlatformStat(item.id)?.status || 'unknown')) }}
-                  </v-chip>
-                  <!-- 错误数量提示 -->
-                  <v-chip
-                    v-if="getPlatformStat(item.id)?.error_count > 0"
-                    size="small"
-                    color="error"
-                    variant="tonal"
-                    class="error-chip"
-                    :class="{ 'ms-2': getPlatformStat(item.id)?.status !== 'running' }"
-                    @click.stop="showErrorDetails(item)"
-                  >
-                    <v-icon size="small" start>mdi-bug</v-icon>
-                    {{ getPlatformStat(item.id)?.error_count }} {{ tm('runtimeStatus.errors') }}
-                  </v-chip>
-                </div>
-                <div v-if="getPlatformStat(item.id)?.unified_webhook && item.webhook_uuid" class="webhook-info">
-                  <v-chip
-                    size="small"
-                    color="primary"
-                    variant="tonal"
-                    class="webhook-chip"
-                    @click.stop="openWebhookDialog(item.webhook_uuid)"
-                  >
-                    <v-icon size="small" start>mdi-webhook</v-icon>
-                    {{ tm('viewWebhook') }}
-                  </v-chip>
-                </div>
-              </template>
-            </item-card>
-          </v-col>
-        </v-row>
+        <div v-else class="item-grid">
+          <item-card v-for="(platform, index) in config_data.platform || []" :key="index"
+            :item="platform" title-field="id" enabled-field="enable"
+            :bglogo="getPlatformIcon(platform.type || platform.id)" @toggle-enabled="platformStatusChange"
+            @delete="deletePlatform" @edit="editPlatform">
+            <template #item-details="{ item }">
+              <!-- 平台运行状态 - 只在非运行状态或有错误时显示 -->
+              <div class="platform-status-row mb-2" v-if="getPlatformStat(item.id) && (getPlatformStat(item.id)?.status !== 'running' || getPlatformStat(item.id)?.error_count > 0)">
+                <!-- 状态 chip - 只在非 running 状态时显示 -->
+                <v-chip
+                  v-if="getPlatformStat(item.id)?.status !== 'running'"
+                  size="small"
+                  :color="getStatusColor(getPlatformStat(item.id)?.status)"
+                  variant="tonal"
+                  class="status-chip"
+                >
+                  <v-icon size="small" start>{{ getStatusIcon(getPlatformStat(item.id)?.status) }}</v-icon>
+                  {{ tm('runtimeStatus.' + (getPlatformStat(item.id)?.status || 'unknown')) }}
+                </v-chip>
+                <!-- 错误数量提示 -->
+                <v-chip
+                  v-if="getPlatformStat(item.id)?.error_count > 0"
+                  size="small"
+                  color="error"
+                  variant="tonal"
+                  class="error-chip"
+                  :class="{ 'ms-2': getPlatformStat(item.id)?.status !== 'running' }"
+                  @click.stop="showErrorDetails(item)"
+                >
+                  <v-icon size="small" start>mdi-bug</v-icon>
+                  {{ getPlatformStat(item.id)?.error_count }} {{ tm('runtimeStatus.errors') }}
+                </v-chip>
+              </div>
+              <div v-if="getPlatformStat(item.id)?.unified_webhook && item.webhook_uuid" class="webhook-info">
+                <v-chip
+                  size="small"
+                  color="primary"
+                  variant="tonal"
+                  class="webhook-chip"
+                  @click.stop="openWebhookDialog(item.webhook_uuid)"
+                >
+                  <v-icon size="small" start>mdi-webhook</v-icon>
+                  {{ tm('viewWebhook') }}
+                </v-chip>
+              </div>
+            </template>
+          </item-card>
+        </div>
       </div>
 
       <!-- 日志部分 -->
@@ -453,6 +452,13 @@ export default {
   padding-bottom: 40px;
 }
 
+.item-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  gap: 16px;
+  width: 100%;
+}
+
 .webhook-info {
   margin-top: 4px;
 }

From 628c723153c55f5e1e21fab3012d4ac51dc1daca Mon Sep 17 00:00:00 2001
From: Oscar <ocetars@gmail.com>
Date: Fri, 26 Dec 2025 17:47:42 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor(ui):=20=E9=87=8D=E6=9E=84=20ItemCa?=
 =?UTF-8?q?rd=20=E5=B8=83=E5=B1=80=E7=BB=93=E6=9E=84=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/components/shared/ItemCard.vue | 205 ++++++++++++-------
 dashboard/src/views/PlatformPage.vue         |  57 ++----
 2 files changed, 150 insertions(+), 112 deletions(-)

diff --git a/dashboard/src/components/shared/ItemCard.vue b/dashboard/src/components/shared/ItemCard.vue
index 93e94326c..61aa89327 100644
--- a/dashboard/src/components/shared/ItemCard.vue
+++ b/dashboard/src/components/shared/ItemCard.vue
@@ -1,90 +1,91 @@
 <template>
   <v-card class="item-card hover-elevation pa-4" elevation="0">
-    <div class="d-flex flex-row fill-height">
-      <!-- Left Content -->
-      <div class="d-flex flex-column flex-grow-1" :style="{ position: 'relative', overflow: 'hidden', opacity: getItemEnabled() ? 1 : 0.6 }">
-        <div class="text-h4 font-weight-bold mb-2" :title="getItemTitle()">
+    <div class="item-card-content" :style="{ opacity: getItemEnabled() ? 1 : 0.6 }">
+      <!-- 标题 + 开关 -->
+      <div class="item-card-header">
+        <div class="item-card-title text-h4 font-weight-bold" :title="getItemTitle()">
           {{ getItemTitle() }}
         </div>
-        
-        <div class="mb-2">
-            <slot name="item-details" :item="item"></slot>
-        </div>
 
-        <div v-if="bglogo" class="mt-auto">
-            <v-img 
-                :src="bglogo" 
-                width="64" 
-                height="64" 
-                contain
-                :style="{ opacity: getItemEnabled() ? 0.9 : 0.4 }"
-            ></v-img>
+        <div class="item-card-switch">
+          <v-tooltip location="top">
+            <template v-slot:activator="{ props }">
+              <v-switch
+                color="primary"
+                hide-details
+                density="compact"
+                :model-value="getItemEnabled()"
+                :loading="loading"
+                :disabled="loading"
+                v-bind="props"
+                @update:model-value="toggleEnabled"
+                inset
+              ></v-switch>
+            </template>
+            <span>{{ getItemEnabled() ? t('core.common.itemCard.enabled') : t('core.common.itemCard.disabled') }}</span>
+          </v-tooltip>
         </div>
       </div>
 
-      <!-- Right Actions -->
-      <div class="d-flex flex-column align-end ml-4" style="min-width: 80px;">
-        <div class="mb-auto">
-             <v-tooltip location="top">
-                <template v-slot:activator="{ props }">
-                  <v-switch
-                    color="primary"
-                    hide-details
-                    density="compact"
-                    :model-value="getItemEnabled()"
-                    :loading="loading"
-                    :disabled="loading"
-                    v-bind="props"
-                    @update:model-value="toggleEnabled"
-                    inset
-                  ></v-switch>
-                </template>
-                <span>{{ getItemEnabled() ? t('core.common.itemCard.enabled') : t('core.common.itemCard.disabled') }}</span>
-              </v-tooltip>
+      <!-- 中间层 UI -->
+      <div class="item-card-details">
+        <slot name="item-details" :item="item"></slot>
+      </div>
+
+      <!-- logo + 操作按钮 -->
+      <div class="item-card-footer">
+        <div v-if="bglogo" class="item-card-logo">
+          <v-img
+            :src="bglogo"
+            width="64"
+            height="64"
+            contain
+            :style="{ opacity: getItemEnabled() ? 0.9 : 0.4 }"
+          ></v-img>
         </div>
 
-        <div class="d-flex flex-column w-100 mt-4" style="gap: 8px;">
-             <v-btn
-                variant="outlined"
-                color="primary"
-                rounded="pill"
-                size="small"
-                block
-                :disabled="loading"
-                @click="$emit('edit', item)"
-              >
-                <v-icon start>mdi-pencil</v-icon>
-                {{ t('core.common.itemCard.edit') }}
-              </v-btn>
-
-              <v-btn
-                variant="outlined"
-                color="error"
-                rounded="pill"
-                size="small"
-                block
-                :disabled="loading"
-                @click="$emit('delete', item)"
-              >
-                <v-icon start>mdi-delete-outline</v-icon>
-                {{ t('core.common.itemCard.delete') }}
-              </v-btn>
-
-              <v-btn
-                v-if="showCopyButton"
-                variant="tonal"
-                color="secondary"
-                rounded="pill"
-                size="small"
-                block
-                :disabled="loading"
-                @click="$emit('copy', item)"
-              >
-                 <v-icon start>mdi-content-copy</v-icon>
-                 {{ t('core.common.itemCard.copy') }}
-              </v-btn>
-              
-              <slot name="actions" :item="item"></slot>
+        <div class="item-card-actions">
+          <v-btn
+            variant="outlined"
+            color="primary"
+            rounded="pill"
+            size="small"
+            block
+            :disabled="loading"
+            @click="$emit('edit', item)"
+          >
+            <v-icon start>mdi-pencil</v-icon>
+            {{ t('core.common.itemCard.edit') }}
+          </v-btn>
+
+          <v-btn
+            variant="outlined"
+            color="error"
+            rounded="pill"
+            size="small"
+            block
+            :disabled="loading"
+            @click="$emit('delete', item)"
+          >
+            <v-icon start>mdi-delete-outline</v-icon>
+            {{ t('core.common.itemCard.delete') }}
+          </v-btn>
+
+          <v-btn
+            v-if="showCopyButton"
+            variant="tonal"
+            color="secondary"
+            rounded="pill"
+            size="small"
+            block
+            :disabled="loading"
+            @click="$emit('copy', item)"
+          >
+            <v-icon start>mdi-content-copy</v-icon>
+            {{ t('core.common.itemCard.copy') }}
+          </v-btn>
+
+          <slot name="actions" :item="item"></slot>
         </div>
       </div>
     </div>
@@ -155,6 +156,56 @@ export default {
   border: 1px solid #e0e0e0;
 }
 
+.item-card-content {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.item-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.item-card-title {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-card-switch {
+  flex: 0 0 auto;
+}
+
+.item-card-details {
+  width: 100%;
+  margin-top: 6px;
+  margin-bottom: 10px;
+}
+
+.item-card-footer {
+  margin-top: auto;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.item-card-actions {
+  min-width: 100px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
+}
+
 .hover-elevation:hover {
   transform: translateY(-2px);
 }
diff --git a/dashboard/src/views/PlatformPage.vue b/dashboard/src/views/PlatformPage.vue
index 121a01af0..4206d786c 100644
--- a/dashboard/src/views/PlatformPage.vue
+++ b/dashboard/src/views/PlatformPage.vue
@@ -30,43 +30,41 @@
             :bglogo="getPlatformIcon(platform.type || platform.id)" @toggle-enabled="platformStatusChange"
             @delete="deletePlatform" @edit="editPlatform">
             <template #item-details="{ item }">
-              <!-- 平台运行状态 - 只在非运行状态或有错误时显示 -->
-              <div class="platform-status-row mb-2" v-if="getPlatformStat(item.id) && (getPlatformStat(item.id)?.status !== 'running' || getPlatformStat(item.id)?.error_count > 0)">
-                <!-- 状态 chip - 只在非 running 状态时显示 -->
+              <div class="d-flex flex-row align-center flex-wrap gap-2 mt-1">
+                <!-- 平台运行状态 -->
                 <v-chip
-                  v-if="getPlatformStat(item.id)?.status !== 'running'"
-                  size="small"
+                  v-if="getPlatformStat(item.id)?.status !== 'running' && getPlatformStat(item.id)?.status !== undefined"
+                  size="x-small"
                   :color="getStatusColor(getPlatformStat(item.id)?.status)"
                   variant="tonal"
-                  class="status-chip"
+                  class="status-chip px-2"
                 >
-                  <v-icon size="small" start>{{ getStatusIcon(getPlatformStat(item.id)?.status) }}</v-icon>
-                  {{ tm('runtimeStatus.' + (getPlatformStat(item.id)?.status || 'unknown')) }}
+                  <v-icon size="14" start>{{ getStatusIcon(getPlatformStat(item.id)?.status) }}</v-icon>
+                  <span class="text-caption" style="font-size: 10px !important;">{{ tm('runtimeStatus.' + (getPlatformStat(item.id)?.status || 'unknown')) }}</span>
                 </v-chip>
                 <!-- 错误数量提示 -->
                 <v-chip
                   v-if="getPlatformStat(item.id)?.error_count > 0"
-                  size="small"
+                  size="x-small"
                   color="error"
                   variant="tonal"
-                  class="error-chip"
-                  :class="{ 'ms-2': getPlatformStat(item.id)?.status !== 'running' }"
+                  class="error-chip px-2"
                   @click.stop="showErrorDetails(item)"
                 >
-                  <v-icon size="small" start>mdi-bug</v-icon>
-                  {{ getPlatformStat(item.id)?.error_count }} {{ tm('runtimeStatus.errors') }}
+                  <v-icon size="14" start>mdi-bug</v-icon>
+                  <span class="text-caption" style="font-size: 10px !important;">{{ getPlatformStat(item.id)?.error_count }} {{ tm('runtimeStatus.errors') }}</span>
                 </v-chip>
-              </div>
-              <div v-if="getPlatformStat(item.id)?.unified_webhook && item.webhook_uuid" class="webhook-info">
+                <!-- Webhook -->
                 <v-chip
-                  size="small"
+                  v-if="getPlatformStat(item.id)?.unified_webhook && item.webhook_uuid"
+                  size="x-small"
                   color="primary"
                   variant="tonal"
-                  class="webhook-chip"
+                  class="webhook-chip px-2"
                   @click.stop="openWebhookDialog(item.webhook_uuid)"
                 >
-                  <v-icon size="small" start>mdi-webhook</v-icon>
-                  {{ tm('viewWebhook') }}
+                  <v-icon size="14" start>mdi-webhook</v-icon>
+                  <span class="text-caption" style="font-size: 10px !important;">{{ tm('viewWebhook') }}</span>
                 </v-chip>
               </div>
             </template>
@@ -459,28 +457,17 @@ export default {
   width: 100%;
 }
 
-.webhook-info {
-  margin-top: 4px;
-}
-
-.webhook-chip {
-  cursor: pointer;
+.gap-2 {
+  gap: 8px;
 }
 
-.platform-status-row {
-  display: flex;
+.status-chip, .error-chip, .webhook-chip {
+  display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 4px;
 }
 
-.status-chip {
-  font-size: 12px;
-}
-
-.error-chip {
+.error-chip, .webhook-chip {
   cursor: pointer;
-  font-size: 12px;
 }
 
 .error-details {