From 7faca5512a0c285f8ddb5feb5743f07df89c25cc Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Sat, 10 Jan 2026 19:32:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E5=AF=86?=
 =?UTF-8?q?=E9=92=A5=E6=B7=BB=E5=8A=A0=E5=92=8C=E4=BB=AA=E8=A1=A8=E7=9B=98?=
 =?UTF-8?q?=E7=A9=BA=E7=8A=B6=E6=80=81=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- KeyFormDialog: 添加模式下保存后不关闭对话框，清除表单以便连续添加
- KeyFormDialog: 按钮文案根据编辑/添加模式动态显示
- Dashboard: 优化统计卡片加载状态和空数据占位显示
---
 .../providers/components/KeyFormDialog.vue    |  14 +-
 frontend/src/views/shared/Dashboard.vue       | 161 ++++++++++++------
 2 files changed, 121 insertions(+), 54 deletions(-)

diff --git a/frontend/src/features/providers/components/KeyFormDialog.vue b/frontend/src/features/providers/components/KeyFormDialog.vue
index 5054b3d..0cf7f88 100644
--- a/frontend/src/features/providers/components/KeyFormDialog.vue
+++ b/frontend/src/features/providers/components/KeyFormDialog.vue
@@ -232,7 +232,7 @@
         :disabled="saving"
         @click="handleSave"
       >
-        {{ saving ? '保存中...' : '保存' }}
+        {{ saving ? (isEditMode ? '保存中...' : '添加中...') : (isEditMode ? '保存' : '添加') }}
       </Button>
     </template>
   </Dialog>
@@ -408,6 +408,14 @@ function resetForm() {
   }
 }
 
+// 添加成功后清除部分字段以便继续添加
+function clearForNextAdd() {
+  formNonce.value = createFieldNonce()
+  apiKeyFocused.value = false
+  form.value.name = ''
+  form.value.api_key = ''
+}
+
 // 加载密钥数据（编辑模式）
 function loadKeyData() {
   if (!props.editingKey) return
@@ -530,6 +538,10 @@ async function handleSave() {
         capabilities: capabilitiesData || undefined
       })
       success('密钥已添加', '成功')
+      // 添加模式：不关闭对话框，只清除名称和密钥以便继续添加
+      emit('saved')
+      clearForNextAdd()
+      return
     }
 
     emit('saved')
diff --git a/frontend/src/views/shared/Dashboard.vue b/frontend/src/views/shared/Dashboard.vue
index c0a2b57..bc4d38c 100644
--- a/frontend/src/views/shared/Dashboard.vue
+++ b/frontend/src/views/shared/Dashboard.vue
@@ -16,7 +16,8 @@
 
         <!-- 主要统计卡片 -->
         <div class="grid grid-cols-2 gap-3 sm:gap-4 xl:grid-cols-4">
-          <template v-if="loading && stats.length === 0">
+          <!-- 加载中骨架屏 -->
+          <template v-if="loading">
             <Card
               v-for="i in 4"
               :key="'skeleton-' + i"
@@ -27,62 +28,98 @@
               <Skeleton class="h-4 w-16" />
             </Card>
           </template>
-          <Card
-            v-for="(stat, index) in stats"
-            v-else
-            :key="stat.name"
-            class="relative overflow-hidden p-3 sm:p-5"
-            :class="statCardBorders[index % statCardBorders.length]"
-          >
-            <div
-              class="pointer-events-none absolute -right-4 -top-6 h-28 w-28 rounded-full blur-3xl opacity-40"
-              :class="statCardGlows[index % statCardGlows.length]"
-            />
-            <!-- 图标固定在右上角 -->
-            <div
-              class="absolute top-3 right-3 sm:top-5 sm:right-5 rounded-xl sm:rounded-2xl border border-border bg-card/50 p-2 sm:p-3 shadow-inner backdrop-blur-sm"
-              :class="getStatIconColor(index)"
+          <!-- 有数据时显示统计卡片 -->
+          <template v-else-if="stats.length > 0">
+            <Card
+              v-for="(stat, index) in stats"
+              :key="stat.name"
+              class="relative overflow-hidden p-3 sm:p-5"
+              :class="statCardBorders[index % statCardBorders.length]"
             >
-              <component
-                :is="stat.icon"
-                class="h-4 w-4 sm:h-5 sm:w-5"
-              />
-            </div>
-            <!-- 内容区域 -->
-            <div>
-              <p class="text-[9px] sm:text-[11px] font-semibold uppercase tracking-[0.2em] sm:tracking-[0.4em] text-muted-foreground pr-10 sm:pr-14">
-                {{ stat.name }}
-              </p>
-              <p class="mt-2 sm:mt-4 text-xl sm:text-3xl font-semibold text-foreground">
-                {{ stat.value }}
-              </p>
-              <p
-                v-if="stat.subValue"
-                class="mt-0.5 sm:mt-1 text-[10px] sm:text-sm text-muted-foreground"
-              >
-                {{ stat.subValue }}
-              </p>
               <div
-                v-if="stat.change || stat.extraBadge"
-                class="mt-1.5 sm:mt-2 flex items-center gap-1 sm:gap-1.5 flex-wrap"
+                class="pointer-events-none absolute -right-4 -top-6 h-28 w-28 rounded-full blur-3xl opacity-40"
+                :class="statCardGlows[index % statCardGlows.length]"
+              />
+              <!-- 图标固定在右上角 -->
+              <div
+                class="absolute top-3 right-3 sm:top-5 sm:right-5 rounded-xl sm:rounded-2xl border border-border bg-card/50 p-2 sm:p-3 shadow-inner backdrop-blur-sm"
+                :class="getStatIconColor(index)"
               >
-                <Badge
-                  v-if="stat.change"
-                  variant="secondary"
-                  class="text-[9px] sm:text-xs"
-                >
-                  {{ stat.change }}
-                </Badge>
-                <Badge
-                  v-if="stat.extraBadge"
-                  variant="secondary"
-                  class="text-[9px] sm:text-xs"
-                >
-                  {{ stat.extraBadge }}
-                </Badge>
+                <component
+                  :is="stat.icon"
+                  class="h-4 w-4 sm:h-5 sm:w-5"
+                />
               </div>
-            </div>
-          </Card>
+              <!-- 内容区域 -->
+              <div>
+                <p class="text-[9px] sm:text-[11px] font-semibold uppercase tracking-[0.2em] sm:tracking-[0.4em] text-muted-foreground pr-10 sm:pr-14">
+                  {{ stat.name }}
+                </p>
+                <p class="mt-2 sm:mt-4 text-xl sm:text-3xl font-semibold text-foreground">
+                  {{ stat.value }}
+                </p>
+                <p
+                  v-if="stat.subValue"
+                  class="mt-0.5 sm:mt-1 text-[10px] sm:text-sm text-muted-foreground"
+                >
+                  {{ stat.subValue }}
+                </p>
+                <div
+                  v-if="stat.change || stat.extraBadge"
+                  class="mt-1.5 sm:mt-2 flex items-center gap-1 sm:gap-1.5 flex-wrap"
+                >
+                  <Badge
+                    v-if="stat.change"
+                    variant="secondary"
+                    class="text-[9px] sm:text-xs"
+                  >
+                    {{ stat.change }}
+                  </Badge>
+                  <Badge
+                    v-if="stat.extraBadge"
+                    variant="secondary"
+                    class="text-[9px] sm:text-xs"
+                  >
+                    {{ stat.extraBadge }}
+                  </Badge>
+                </div>
+              </div>
+            </Card>
+          </template>
+          <!-- 无数据时显示占位卡片 -->
+          <template v-else>
+            <Card
+              v-for="(placeholder, index) in emptyStatPlaceholders"
+              :key="'empty-' + index"
+              class="relative overflow-hidden p-3 sm:p-5"
+              :class="statCardBorders[index % statCardBorders.length]"
+            >
+              <div
+                class="pointer-events-none absolute -right-4 -top-6 h-28 w-28 rounded-full blur-3xl opacity-20"
+                :class="statCardGlows[index % statCardGlows.length]"
+              />
+              <div
+                class="absolute top-3 right-3 sm:top-5 sm:right-5 rounded-xl sm:rounded-2xl border border-border bg-card/50 p-2 sm:p-3 shadow-inner backdrop-blur-sm"
+                :class="getStatIconColor(index)"
+              >
+                <component
+                  :is="placeholder.icon"
+                  class="h-4 w-4 sm:h-5 sm:w-5"
+                />
+              </div>
+              <div>
+                <p class="text-[9px] sm:text-[11px] font-semibold uppercase tracking-[0.2em] sm:tracking-[0.4em] text-muted-foreground pr-10 sm:pr-14">
+                  {{ placeholder.name }}
+                </p>
+                <p class="mt-2 sm:mt-4 text-xl sm:text-3xl font-semibold text-muted-foreground/50">
+                  --
+                </p>
+                <p class="mt-0.5 sm:mt-1 text-[10px] sm:text-sm text-muted-foreground/50">
+                  暂无数据
+                </p>
+              </div>
+            </Card>
+          </template>
         </div>
 
         <!-- 管理员：系统健康摘要 -->
@@ -872,6 +909,24 @@ const iconMap: Record<string, any> = {
   Users, Activity, TrendingUp, DollarSign, Key, Hash, Database
 }
 
+// 空状态占位卡片
+const emptyStatPlaceholders = computed(() => {
+  if (isAdmin.value) {
+    return [
+      { name: '今日请求', icon: Activity },
+      { name: '今日 Tokens', icon: Hash },
+      { name: '活跃用户', icon: Users },
+      { name: '今日费用', icon: DollarSign }
+    ]
+  }
+  return [
+    { name: '今日请求', icon: Activity },
+    { name: '今日 Tokens', icon: Hash },
+    { name: 'API Keys', icon: Key },
+    { name: '今日费用', icon: DollarSign }
+  ]
+})
+
 const totalStats = computed(() => {
   if (dailyStats.value.length === 0) {
     return { requests: 0, tokens: 0, cost: 0, avgResponseTime: 0 }