🎨 统一仪表盘按钮样式
This commit is contained in:
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user