From 15e0a28bd0a8bb96fc2e38f659a7b18f38e72c39 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Fri, 14 Aug 2026 00:39:50 +0800
Subject: [PATCH] fix(frontend): refine refresh loading and group alignment

Co-authored-by: Codex <noreply@openai.com>
---
 frontend/src/components/base/BaseButton.vue                | 6 ++++--
 frontend/src/views/accounts/index.vue                      | 6 +++---
 frontend/src/views/api-keys/components/ApiKeyScopeCell.vue | 4 ++--
 frontend/src/views/dashboard/index.vue                     | 1 +
 frontend/src/views/usage/components/OpsErrorPanel.vue      | 1 +
 frontend/src/views/usage/components/UsageFilters.vue       | 1 +
 6 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/base/BaseButton.vue b/frontend/src/components/base/BaseButton.vue
index aa6bb5a24..87c34cd08 100644
--- a/frontend/src/components/base/BaseButton.vue
+++ b/frontend/src/components/base/BaseButton.vue
@@ -10,6 +10,7 @@ const props = withDefaults(
     variant?: ButtonVariant
     size?: ButtonSize
     loading?: boolean
+    spinIconOnLoading?: boolean
     disabled?: boolean
     active?: boolean
     iconOnly?: boolean
@@ -21,6 +22,7 @@ const props = withDefaults(
     variant: 'primary',
     size: 'default',
     loading: false,
+    spinIconOnLoading: false,
     disabled: false,
     active: false,
     iconOnly: false,
@@ -124,7 +126,7 @@ const loadingIconClasses = computed(() => [
     :aria-busy="loading"
   >
     <span
-      v-if="loading"
+      v-if="loading && !spinIconOnLoading"
       :class="loadingIconClasses"
       :style="loadingIndicatorStyle"
       aria-hidden="true"
@@ -140,7 +142,7 @@ const loadingIconClasses = computed(() => [
       <slot />
     </span>
     <span
-      v-if="iconOnly && !$slots.icon && !loading"
+      v-if="iconOnly && !$slots.icon && (!loading || spinIconOnLoading)"
       :class="loadingIconClasses"
       aria-hidden="true"
     >
diff --git a/frontend/src/views/accounts/index.vue b/frontend/src/views/accounts/index.vue
index 4a79c1bd2..e5bb8f9f4 100644
--- a/frontend/src/views/accounts/index.vue
+++ b/frontend/src/views/accounts/index.vue
@@ -262,9 +262,9 @@ const {
           </template>
 
           <template #groups="{ row }">
-            <AccountGroupMarks
-              :groups="row.groups"
-            />
+            <div class="flex w-full justify-center">
+              <AccountGroupMarks :groups="row.groups" />
+            </div>
           </template>
 
           <template #lastUsedAt="{ row }">
diff --git a/frontend/src/views/api-keys/components/ApiKeyScopeCell.vue b/frontend/src/views/api-keys/components/ApiKeyScopeCell.vue
index ede0cdf62..7b02a2b32 100644
--- a/frontend/src/views/api-keys/components/ApiKeyScopeCell.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyScopeCell.vue
@@ -9,8 +9,8 @@ defineProps<{
 </script>
 
 <template>
-  <div class="grid gap-1.5">
-    <div v-if="apiKey.routingScope === 'all'" class="flex items-center gap-2">
+  <div class="grid w-full justify-items-center gap-1.5">
+    <div v-if="apiKey.routingScope === 'all'" class="flex items-center justify-center gap-2">
       <span class="inline-flex h-6 items-center rounded-lg bg-(--cp-warning-bg) px-2 text-[11px] font-bold text-(--cp-warning-text)">
         全部账号权限
       </span>
diff --git a/frontend/src/views/dashboard/index.vue b/frontend/src/views/dashboard/index.vue
index 33bf7f727..e1954cad8 100644
--- a/frontend/src/views/dashboard/index.vue
+++ b/frontend/src/views/dashboard/index.vue
@@ -46,6 +46,7 @@ const {
           class="text-(--cp-normal)"
           size="md"
           label="刷新概览"
+          spin-icon-on-loading
           :loading="loading || refreshing"
           :disabled="loading || refreshing"
           @click="refresh"
diff --git a/frontend/src/views/usage/components/OpsErrorPanel.vue b/frontend/src/views/usage/components/OpsErrorPanel.vue
index ba133e3a4..bcd3ca174 100644
--- a/frontend/src/views/usage/components/OpsErrorPanel.vue
+++ b/frontend/src/views/usage/components/OpsErrorPanel.vue
@@ -69,6 +69,7 @@ function showDetail(record: Awaited<ReturnType<typeof getOpsErrors>>['items'][nu
           variant="ghost"
           size="md"
           label="刷新错误明细"
+          spin-icon-on-loading
           :loading="refreshing"
           :disabled="loading || refreshing"
           @click="refresh"
diff --git a/frontend/src/views/usage/components/UsageFilters.vue b/frontend/src/views/usage/components/UsageFilters.vue
index e32d20c78..64609655d 100644
--- a/frontend/src/views/usage/components/UsageFilters.vue
+++ b/frontend/src/views/usage/components/UsageFilters.vue
@@ -32,6 +32,7 @@ const search = defineModel<string>('search', { required: true })
         variant="ghost"
         size="md"
         label="刷新使用记录"
+        spin-icon-on-loading
         :loading="refreshing"
         :disabled="loading || refreshing"
         @click="emit('refresh')"