fix(frontend): refine refresh loading and group alignment

Co-authored-by: Codex <noreply@openai.com>

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"
     >

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 }">

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>

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"

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"

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')"