🎨 统一仪表盘按钮样式

src/views/manage/DashboardView.vue

@@ -10,20 +10,12 @@
           {{ t('admin.dashboard.lastUpdated', { time: lastUpdatedText }) }}
         </p>
       </div>
-      <button
+      <BaseButton variant="secondary" :loading="isLoading" @click="fetchDashboardData">
-        type="button"
+        <template #icon>
-        :disabled="isLoading"
+          <RefreshCwIcon class="mr-2 h-4 w-4" />
-        @click="fetchDashboardData"
+        </template>
-        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 }" />
         {{ 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
+              <BaseButton variant="outline" class="h-11 min-w-20" @click="trendCanvas?.zoom(0.75)">
-                type="button"
-                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
-                :class="detailActionClass"
-                @click="trendCanvas?.zoom(0.75)"
-              >
                 放大
-              </button>
+              </BaseButton>
-              <button
+              <BaseButton variant="outline" class="h-11 min-w-20" @click="trendCanvas?.zoom(1.33)">
-                type="button"
-                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
-                :class="detailActionClass"
-                @click="trendCanvas?.zoom(1.33)"
-              >
                 缩小
-              </button>
+              </BaseButton>
-              <button
+              <BaseButton variant="outline" class="h-11 min-w-20" @click="trendCanvas?.resetWindow()">
-                type="button"
-                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
-                :class="detailActionClass"
-                @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-[#40545c] bg-[#263941]/80 text-[#d8e3e5]'
-              : 'border-gray-200 bg-white text-gray-700'
+              : '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'