From bc4728332ea47a01fa09a9a27686667fc4b98740 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:24:49 +0800
Subject: [PATCH] fix(frontend): polish dashboard and table interactions

Co-authored-by: Codex <noreply@openai.com>
---
 frontend/src/components/base/BaseButton.vue   |  1 +
 .../layout/components/SystemUpdateModal.vue   | 11 +++++++-
 .../src/views/account-groups/constants.ts     |  4 +--
 frontend/src/views/accounts/constants.ts      |  4 +--
 frontend/src/views/api-keys/constants.ts      |  4 +--
 .../components/AccountOverviewCard.vue        | 25 ++++++-------------
 .../components/backup/BackupRecordsCard.vue   |  2 +-
 7 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/base/BaseButton.vue b/frontend/src/components/base/BaseButton.vue
index 87c34cd08..44f96d75a 100644
--- a/frontend/src/components/base/BaseButton.vue
+++ b/frontend/src/components/base/BaseButton.vue
@@ -82,6 +82,7 @@ const loadingIndicatorStyle = computed(() => {
 const classes = computed(() => [
   'inline-flex items-center justify-center border-0 font-bold leading-[1.15] transition-[background-color,box-shadow,color,opacity,transform] duration-150 cursor-pointer outline-none motion-safe:active:translate-y-px motion-safe:active:scale-[0.985]',
   props.iconOnly ? iconOnlySizeClasses[props.size] : sizeClasses[props.size],
+  props.iconOnly ? 'shrink-0' : undefined,
   props.iconOnly ? '' : 'rounded-(--cp-button-radius-base)',
   'focus-visible:ring-2 focus-visible:ring-(--cp-info-border) focus-visible:ring-offset-2 focus-visible:ring-offset-(--cp-bg-surface)',
   'disabled:cursor-not-allowed disabled:transform-none disabled:bg-(--cp-disabled-bg) disabled:text-(--cp-disabled-text) disabled:shadow-none',
diff --git a/frontend/src/layout/components/SystemUpdateModal.vue b/frontend/src/layout/components/SystemUpdateModal.vue
index cd75b869d..9d73be472 100644
--- a/frontend/src/layout/components/SystemUpdateModal.vue
+++ b/frontend/src/layout/components/SystemUpdateModal.vue
@@ -91,8 +91,16 @@ const statusView = computed(() => {
       iconClass: 'text-(--cp-success)',
     }
   }
+  if (updateInfo.value) {
+    return {
+      label: '已是最新',
+      icon: CheckCircle2,
+      badge: 'bg-(--cp-success-bg) text-(--cp-success-text)',
+      iconClass: 'text-(--cp-success)',
+    }
+  }
   return {
-    label: updateInfo.value ? '已是最新' : '未检查',
+    label: '未检查',
     icon: CheckCircle2,
     badge: 'bg-(--cp-bg-muted) text-(--cp-text-secondary)',
     iconClass: 'text-(--cp-text-muted)',
@@ -318,6 +326,7 @@ watch(
   <BaseModal
     v-model="open"
     title="系统更新"
+    description="检查版本、查看发布说明并执行在线更新"
     variant="success"
     width="820px"
     body-max-height="72dvh"
diff --git a/frontend/src/views/account-groups/constants.ts b/frontend/src/views/account-groups/constants.ts
index 16a128951..080f150e8 100644
--- a/frontend/src/views/account-groups/constants.ts
+++ b/frontend/src/views/account-groups/constants.ts
@@ -66,8 +66,8 @@ export const accountGroupColumns = [
   {
     key: 'actions',
     label: '操作',
-    width: '100px',
-    minWidth: '100px',
+    width: '136px',
+    minWidth: '136px',
     cellClass,
   },
 ] satisfies BaseTableColumn<AccountGroup>[]
diff --git a/frontend/src/views/accounts/constants.ts b/frontend/src/views/accounts/constants.ts
index 837328cf4..c4329fb64 100644
--- a/frontend/src/views/accounts/constants.ts
+++ b/frontend/src/views/accounts/constants.ts
@@ -121,8 +121,8 @@ export const accountColumns = [
   {
     key: 'actions',
     label: '操作',
-    width: '120px',
-    minWidth: '120px',
+    width: '136px',
+    minWidth: '136px',
   },
 ] satisfies BaseTableColumn<AccountRow>[]
 
diff --git a/frontend/src/views/api-keys/constants.ts b/frontend/src/views/api-keys/constants.ts
index 2cd32c9b2..a05e16f43 100644
--- a/frontend/src/views/api-keys/constants.ts
+++ b/frontend/src/views/api-keys/constants.ts
@@ -43,8 +43,8 @@ export const apiKeyColumns = [
   {
     key: 'actions',
     label: '操作',
-    width: '172px',
-    minWidth: '172px',
+    width: '208px',
+    minWidth: '208px',
     headerClass: relaxedActionCellClass,
     cellClass: relaxedActionCellClass,
   },
diff --git a/frontend/src/views/dashboard/components/AccountOverviewCard.vue b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
index 2b75260de..9143cacd0 100644
--- a/frontend/src/views/dashboard/components/AccountOverviewCard.vue
+++ b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { dashboardSnapshotView, MetricTone } from '../composables/presenter'
-import { CircleCheck, CircleOff, RefreshCw, ShieldAlert, TriangleAlert } from '@lucide/vue'
+import { CircleCheck, RefreshCw, ShieldAlert, TriangleAlert } from '@lucide/vue'
 import { clamp } from 'es-toolkit'
 
 import { computed } from 'vue'
@@ -106,8 +106,7 @@ const statusRows = computed(() => {
       { label: '正常', description: '暂无账号池观测', value: '—', tone: 'success', icon: CircleCheck },
       { label: '配额耗尽', description: '暂无账号池观测', value: '—', tone: 'warning', icon: TriangleAlert },
       { label: '限流中', description: '暂无账号池观测', value: '—', tone: 'normal', icon: RefreshCw },
-      { label: '已停用', description: '暂无账号池观测', value: '—', tone: 'normal', icon: CircleOff },
-      { label: '错误', description: '暂无账号池观测', value: '—', tone: 'danger', icon: ShieldAlert },
+      { label: '待处理', description: '停用 — · 错误 —', value: '—', tone: 'danger', icon: ShieldAlert },
     ]
   }
 
@@ -134,16 +133,9 @@ const statusRows = computed(() => {
       icon: RefreshCw,
     },
     {
-      label: '已停用',
-      description: '账号已停用',
-      value: String(counts.disabled),
-      tone: 'normal',
-      icon: CircleOff,
-    },
-    {
-      label: '错误',
-      description: '账号状态异常',
-      value: String(counts.error),
+      label: '待处理',
+      description: `停用 ${counts.disabled} · 错误 ${counts.error}`,
+      value: String(counts.disabled + counts.error),
       tone: 'danger',
       icon: ShieldAlert,
     },
@@ -165,8 +157,7 @@ const statusBars = computed(() => {
     { pct: (counts.normal / counts.total) * 100, cls: 'bg-(--cp-success)' },
     { pct: (counts.quotaExhausted / counts.total) * 100, cls: 'bg-(--cp-warning)' },
     { pct: (counts.rateLimited / counts.total) * 100, cls: 'bg-(--cp-normal)' },
-    { pct: (counts.disabled / counts.total) * 100, cls: 'bg-(--cp-text-secondary)' },
-    { pct: (counts.error / counts.total) * 100, cls: 'bg-(--cp-danger)' },
+    { pct: ((counts.disabled + counts.error) / counts.total) * 100, cls: 'bg-(--cp-danger)' },
   ].filter(b => b.pct > 0)
 })
 </script>
@@ -333,11 +324,11 @@ const statusBars = computed(() => {
           </div>
         </div>
 
-        <div class="mt-5 grid h-67 w-full grid-rows-5 gap-2">
+        <div class="mt-6.5 grid h-65.5 w-full gap-2.5">
           <div
             v-for="row in statusRows"
             :key="row.label"
-            class="grid min-h-0 grid-cols-[28px_14px_minmax(0,1fr)_76px] items-center rounded-[14px] bg-(--cp-bg-subtle) px-3.5"
+            class="grid h-14.5 grid-cols-[28px_14px_minmax(0,1fr)_76px] items-center rounded-[14px] bg-(--cp-bg-subtle) px-3.5"
           >
             <span
               class="inline-flex size-7 items-center justify-center rounded-[9px]"
diff --git a/frontend/src/views/settings/components/backup/BackupRecordsCard.vue b/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
index 841883a3e..a09b6fd2b 100644
--- a/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
@@ -45,7 +45,7 @@ const columns: BaseTableColumn<BackupRecord>[] = [
   { key: 'expiresAt', label: '过期时间', width: 170 },
   { key: 'trigger', label: '触发方式', width: 100 },
   { key: 'startedAt', label: '开始时间', width: 170 },
-  { key: 'actions', label: '操作', width: 96, fixed: 'right' },
+  { key: 'actions', label: '操作', width: 112, minWidth: 112, fixed: 'right' },
 ]
 
 function triggerLabel(value: string): string {