orion/FileCodeBoxFronted2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 统一仪表盘按钮样式

Browse Source
This commit is contained in:
Orion
2026-06-05 13:39:18 +08:00
parent cab6d49358
commit 9a2b076ca4
1 changed files with 15 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/manage/DashboardView.vue
+15 -42
View File
@@ -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'