feat: improve dashboard refresh state

This commit is contained in:
Lan
2026-06-03 03:39:13 +08:00
parent 3115455516
commit 3b1a510537
5 changed files with 204 additions and 87 deletions
+83 -47
View File
@@ -1,7 +1,11 @@
import { reactive } from 'vue'
import { computed, ref, reactive } from 'vue'
import { StatsService } from '@/services'
import type { DashboardViewData } from '@/types'
import { formatFileSize } from '@/utils/common'
import { formatFileSize, getErrorMessage } from '@/utils/common'
type UseDashboardStatsOptions = {
loadFailedMessage?: string
}
const emptyDashboardData = (): DashboardViewData => ({
hasExtendedStats: false,
@@ -50,59 +54,91 @@ const formatDuration = (startTimestamp: number | null) => {
return `${days}${hours}小时`
}
export function useDashboardStats() {
const normalizeRecentFiles = (recentFiles: DashboardViewData['recentFiles']) =>
recentFiles.map((file) => ({
...file,
size: toNumber(file.size),
expiredCount: toNumber(file.expiredCount),
usedCount: toNumber(file.usedCount)
}))
export function useDashboardStats(options: UseDashboardStatsOptions = {}) {
const dashboardData = reactive<DashboardViewData>(emptyDashboardData())
const isLoading = ref(false)
const errorMessage = ref('')
const lastUpdatedAt = ref<Date | null>(null)
const lastUpdatedText = computed(() =>
lastUpdatedAt.value ? lastUpdatedAt.value.toLocaleString() : '-'
)
const fetchDashboardData = async () => {
const response = await StatsService.getDashboard()
if (!response.detail) return
isLoading.value = true
errorMessage.value = ''
const detail = response.detail
dashboardData.totalFiles = toNumber(detail.totalFiles)
dashboardData.storageUsed = toNumber(detail.storageUsed)
dashboardData.yesterdayCount = toNumber(detail.yesterdayCount)
dashboardData.todayCount = toNumber(detail.todayCount)
dashboardData.yesterdaySize = toNumber(detail.yesterdaySize)
dashboardData.todaySize = toNumber(detail.todaySize)
dashboardData.sysUptime = detail.sysUptime
dashboardData.hasExtendedStats = hasOwn(detail, 'activeCount')
dashboardData.activeCount = dashboardData.hasExtendedStats
? toNumber(detail.activeCount)
: dashboardData.totalFiles
dashboardData.expiredCount = toNumber(detail.expiredCount)
dashboardData.textCount = toNumber(detail.textCount)
dashboardData.fileCount = toNumber(detail.fileCount)
dashboardData.chunkedCount = toNumber(detail.chunkedCount)
dashboardData.usedCount = toNumber(detail.usedCount)
dashboardData.storageBackend = detail.storageBackend || '-'
dashboardData.uploadSizeLimit = toNumber(detail.uploadSizeLimit)
dashboardData.openUpload = toNumber(detail.openUpload)
dashboardData.enableChunk = toNumber(detail.enableChunk)
dashboardData.maxSaveSeconds = toNumber(detail.maxSaveSeconds)
dashboardData.topSuffixes = detail.topSuffixes || []
dashboardData.recentFiles = detail.recentFiles || []
try {
const response = await StatsService.getDashboard()
if (!response.detail) {
throw new Error('No dashboard data')
}
dashboardData.storageUsedText = formatFileSize(dashboardData.storageUsed)
dashboardData.yesterdaySizeText = formatFileSize(dashboardData.yesterdaySize)
dashboardData.todaySizeText = formatFileSize(dashboardData.todaySize)
dashboardData.uploadSizeLimitText = formatFileSize(dashboardData.uploadSizeLimit)
dashboardData.sysUptimeText = formatDuration(dashboardData.sysUptime)
dashboardData.activeRatio = dashboardData.totalFiles
? clampRatio((dashboardData.activeCount / dashboardData.totalFiles) * 100)
: 0
dashboardData.textRatio = dashboardData.totalFiles
? clampRatio((dashboardData.textCount / dashboardData.totalFiles) * 100)
: 0
dashboardData.fileRatio = dashboardData.totalFiles
? clampRatio((dashboardData.fileCount / dashboardData.totalFiles) * 100)
: 0
dashboardData.todaySizeRatio = dashboardData.uploadSizeLimit
? clampRatio((dashboardData.todaySize / dashboardData.uploadSizeLimit) * 100)
: 0
const detail = response.detail
dashboardData.totalFiles = toNumber(detail.totalFiles)
dashboardData.storageUsed = toNumber(detail.storageUsed)
dashboardData.yesterdayCount = toNumber(detail.yesterdayCount)
dashboardData.todayCount = toNumber(detail.todayCount)
dashboardData.yesterdaySize = toNumber(detail.yesterdaySize)
dashboardData.todaySize = toNumber(detail.todaySize)
dashboardData.sysUptime = detail.sysUptime
dashboardData.hasExtendedStats = hasOwn(detail, 'activeCount')
dashboardData.activeCount = dashboardData.hasExtendedStats
? toNumber(detail.activeCount)
: dashboardData.totalFiles
dashboardData.expiredCount = toNumber(detail.expiredCount)
dashboardData.textCount = toNumber(detail.textCount)
dashboardData.fileCount = toNumber(detail.fileCount)
dashboardData.chunkedCount = toNumber(detail.chunkedCount)
dashboardData.usedCount = toNumber(detail.usedCount)
dashboardData.storageBackend = detail.storageBackend || '-'
dashboardData.uploadSizeLimit = toNumber(detail.uploadSizeLimit)
dashboardData.openUpload = toNumber(detail.openUpload)
dashboardData.enableChunk = toNumber(detail.enableChunk)
dashboardData.maxSaveSeconds = toNumber(detail.maxSaveSeconds)
dashboardData.topSuffixes = detail.topSuffixes || []
dashboardData.recentFiles = normalizeRecentFiles(detail.recentFiles || [])
dashboardData.storageUsedText = formatFileSize(dashboardData.storageUsed)
dashboardData.yesterdaySizeText = formatFileSize(dashboardData.yesterdaySize)
dashboardData.todaySizeText = formatFileSize(dashboardData.todaySize)
dashboardData.uploadSizeLimitText = formatFileSize(dashboardData.uploadSizeLimit)
dashboardData.sysUptimeText = formatDuration(dashboardData.sysUptime)
dashboardData.activeRatio = dashboardData.totalFiles
? clampRatio((dashboardData.activeCount / dashboardData.totalFiles) * 100)
: 0
dashboardData.textRatio = dashboardData.totalFiles
? clampRatio((dashboardData.textCount / dashboardData.totalFiles) * 100)
: 0
dashboardData.fileRatio = dashboardData.totalFiles
? clampRatio((dashboardData.fileCount / dashboardData.totalFiles) * 100)
: 0
dashboardData.todaySizeRatio = dashboardData.uploadSizeLimit
? clampRatio((dashboardData.todaySize / dashboardData.uploadSizeLimit) * 100)
: 0
lastUpdatedAt.value = new Date()
} catch (error) {
errorMessage.value = getErrorMessage(
error,
options.loadFailedMessage || 'Failed to load dashboard data'
)
} finally {
isLoading.value = false
}
}
return {
dashboardData,
fetchDashboardData
errorMessage,
fetchDashboardData,
isLoading,
lastUpdatedText
}
}