From 9a2b076ca42e859e37726457b87b3daeaebb9413 Mon Sep 17 00:00:00 2001
From: Orion <orionc1226@gmail.com>
Date: Fri, 5 Jun 2026 13:39:18 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E7=BB=9F=E4=B8=80=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E7=9B=98=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/manage/DashboardView.vue | 57 ++++++++----------------------
 1 file changed, 15 insertions(+), 42 deletions(-)

diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index 51ee599..82a0ef0 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -10,20 +10,12 @@
           {{ t('admin.dashboard.lastUpdated', { time: lastUpdatedText }) }}
         </p>
       </div>
-      <button
-        type="button"
-        :disabled="isLoading"
-        @click="fetchDashboardData"
-        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-70"
-        :class="[
-          isDarkMode
-            ? 'bg-gray-800 text-gray-200 hover:bg-gray-700'
-            : 'bg-white text-gray-700 shadow-sm hover:bg-gray-50'
-        ]"
-      >
-        <RefreshCwIcon class="mr-2 h-4 w-4" :class="{ 'animate-spin': isLoading }" />
+      <BaseButton variant="secondary" :loading="isLoading" @click="fetchDashboardData">
+        <template #icon>
+          <RefreshCwIcon class="mr-2 h-4 w-4" />
+        </template>
         {{ isLoading ? t('admin.dashboard.refreshing') : t('admin.dashboard.refresh') }}
-      </button>
+      </BaseButton>
     </div>
 
     <div
@@ -268,30 +260,15 @@
               />
             </div>
             <div class="grid grid-cols-3 gap-2 sm:flex sm:justify-end">
-              <button
-                type="button"
-                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
-                :class="detailActionClass"
-                @click="trendCanvas?.zoom(0.75)"
-              >
+              <BaseButton variant="outline" class="h-11 min-w-20" @click="trendCanvas?.zoom(0.75)">
                 放大
-              </button>
-              <button
-                type="button"
-                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
-                :class="detailActionClass"
-                @click="trendCanvas?.zoom(1.33)"
-              >
+              </BaseButton>
+              <BaseButton variant="outline" class="h-11 min-w-20" @click="trendCanvas?.zoom(1.33)">
                 缩小
-              </button>
-              <button
-                type="button"
-                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
-                :class="detailActionClass"
-                @click="trendCanvas?.resetWindow()"
-              >
+              </BaseButton>
+              <BaseButton variant="outline" class="h-11 min-w-20" @click="trendCanvas?.resetWindow()">
                 重置
-              </button>
+              </BaseButton>
             </div>
           </div>
         </div>
@@ -403,11 +380,11 @@
       <span class="inline-flex items-center gap-2">
         <span>{{ t('admin.dashboard.runtimeVersion') }}</span>
         <span
-          class="rounded-md border px-2 py-0.5 font-medium"
+          class="rounded-[30px] border px-2.5 py-0.5 font-medium shadow-sm"
           :class="[
             isDarkMode
-              ? 'border-gray-700 bg-gray-800/70 text-gray-300'
-              : 'border-gray-200 bg-white text-gray-700'
+              ? 'border-[#40545c] bg-[#263941]/80 text-[#d8e3e5]'
+              : 'border-[#c8d8dc] bg-[#edf4f5] text-[#415d66]'
           ]"
         >
           {{ versionText }}
@@ -435,6 +412,7 @@ import {
   UploadCloudIcon
 } from 'lucide-vue-next'
 import StatCard from '@/components/common/StatCard.vue'
+import BaseButton from '@/components/common/BaseButton.vue'
 import SmoothTrendCanvas from '@/components/common/SmoothTrendCanvas.vue'
 import NativeDateSelect from '@/components/common/NativeDateSelect.vue'
 import { useDashboardStats, useInjectedDarkMode, useTransferAnalytics } from '@/composables'
@@ -468,11 +446,6 @@ const fieldClass = computed(() =>
     ? 'border-[#50666f] bg-[#253941] text-white'
     : 'border-[#c8d8dc] bg-[#fbfdfd] text-[#263f48]'
 )
-const detailActionClass = computed(() =>
-  isDarkMode.value
-    ? 'border-[#3f535c] bg-[#263941]/70 text-[#d8e3e5] hover:border-[#7199a8] hover:bg-[#2d4751]'
-    : 'border-[#c9d9dd] bg-[#fbfdfd] text-[#36515b] hover:border-[#8fb2bf] hover:bg-[#edf5f6]'
-)
 const subtlePanelClass = computed(() =>
   isDarkMode.value
     ? 'border-[#3d5159] bg-[#17252c]/50'