feat: improve dashboard refresh state

2026-06-03 03:39:13 +08:00
parent 96a4e8537a
commit 060e77d343
5 changed files with 204 additions and 87 deletions
@@ -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
  }
 }
@@ -65,6 +65,9 @@ export default {
      yesterdayShares: 'Yesterday: {count}',
      serverUptime: 'Uptime',
      refresh: 'Refresh',
+      refreshing: 'Refreshing',
+      lastUpdated: 'Last updated: {time}',
+      loadFailed: 'Failed to load dashboard data',
      fileHealth: 'File Health',
      fileHealthDesc: 'Real file records grouped by availability, expiry, and type.',
      activeFileRatio: 'Active Ratio',
@@ -65,6 +65,9 @@ export default {
      yesterdayShares: '昨日分享：{count}',
      serverUptime: '运行时间',
      refresh: '刷新数据',
+      refreshing: '刷新中',
+      lastUpdated: '最近更新：{time}',
+      loadFailed: '仪表盘数据加载失败',
      fileHealth: '文件健康',
      fileHealthDesc: '基于真实文件记录统计有效、过期和类型分布。',
      activeFileRatio: '有效占比',
@@ -1,24 +1,24 @@
 export interface DashboardData {
  totalFiles: number
-  storageUsed: number
+  storageUsed: number | string
  yesterdayCount: number
  todayCount: number
-  yesterdaySize: number
-  todaySize: number
+  yesterdaySize: number | string
+  todaySize: number | string
  sysUptime: number | null
-  activeCount: number
-  expiredCount: number
-  textCount: number
-  fileCount: number
-  chunkedCount: number
-  usedCount: number
-  storageBackend: string
-  uploadSizeLimit: number
-  openUpload: number
-  enableChunk: number
-  maxSaveSeconds: number
-  topSuffixes: DashboardSuffixStat[]
-  recentFiles: DashboardRecentFile[]
+  activeCount?: number
+  expiredCount?: number
+  textCount?: number
+  fileCount?: number
+  chunkedCount?: number
+  usedCount?: number
+  storageBackend?: string
+  uploadSizeLimit?: number
+  openUpload?: number
+  enableChunk?: number
+  maxSaveSeconds?: number
+  topSuffixes?: DashboardSuffixStat[]
+  recentFiles?: DashboardRecentFile[]
 }

 export interface DashboardSuffixStat {
@@ -42,6 +42,22 @@ export interface DashboardRecentFile {

 export interface DashboardViewData extends DashboardData {
  hasExtendedStats: boolean
+  activeCount: number
+  expiredCount: number
+  textCount: number
+  fileCount: number
+  chunkedCount: number
+  usedCount: number
+  storageBackend: string
+  uploadSizeLimit: number
+  openUpload: number
+  enableChunk: number
+  maxSaveSeconds: number
+  topSuffixes: DashboardSuffixStat[]
+  recentFiles: DashboardRecentFile[]
+  storageUsed: number
+  yesterdaySize: number
+  todaySize: number
  storageUsedText: string
  yesterdaySizeText: string
  todaySizeText: string
@@ -6,22 +6,38 @@
        <h2 class="text-2xl font-bold" :class="[primaryTextClass]">
          {{ t('admin.dashboard.title') }}
        </h2>
+        <p class="mt-1 text-xs" :class="[mutedTextClass]">
+          {{ 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"
+        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" />
-        {{ t('admin.dashboard.refresh') }}
+        <RefreshCwIcon class="mr-2 h-4 w-4" :class="{ 'animate-spin': isLoading }" />
+        {{ isLoading ? t('admin.dashboard.refreshing') : t('admin.dashboard.refresh') }}
      </button>
    </div>

+    <div
+      v-if="errorMessage"
+      class="mb-6 rounded-lg border px-4 py-3 text-sm"
+      :class="[
+        isDarkMode
+          ? 'border-red-900/50 bg-red-950/30 text-red-200'
+          : 'border-red-200 bg-red-50 text-red-700'
+      ]"
+    >
+      {{ errorMessage }}
+    </div>
+
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
      <StatCard
        :title="t('admin.dashboard.totalFiles')"
@@ -79,7 +95,10 @@
              {{ t('admin.dashboard.fileHealthDesc') }}
            </p>
          </div>
-          <ActivityIcon class="h-5 w-5" :class="[isDarkMode ? 'text-indigo-300' : 'text-indigo-500']" />
+          <ActivityIcon
+            class="h-5 w-5"
+            :class="[isDarkMode ? 'text-indigo-300' : 'text-indigo-500']"
+          />
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
@@ -157,10 +176,7 @@
            :label="t('admin.dashboard.guestUpload')"
            :value="dashboardData.openUpload ? t('common.enabled') : t('common.disabled')"
          />
-          <PolicyRow
-            :label="t('admin.dashboard.maxSaveTime')"
-            :value="maxSaveTimeText"
-          />
+          <PolicyRow :label="t('admin.dashboard.maxSaveTime')" :value="maxSaveTimeText" />
        </div>

        <div class="mt-5">
@@ -168,7 +184,10 @@
            <span :class="[mutedTextClass]">{{ t('admin.dashboard.todayCapacityReference') }}</span>
            <span :class="[primaryTextClass]">{{ dashboardData.todaySizeRatio }}%</span>
          </div>
-          <div class="h-2 overflow-hidden rounded-full" :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']">
+          <div
+            class="h-2 overflow-hidden rounded-full"
+            :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']"
+          >
            <div
              class="h-full rounded-full bg-indigo-500"
              :style="{ width: `${dashboardData.todaySizeRatio}%` }"
@@ -184,15 +203,24 @@
          {{ t('admin.dashboard.fileTypeDistribution') }}
        </h3>
        <div class="mt-4 space-y-3">
-          <div v-if="dashboardData.topSuffixes.length === 0" class="text-sm" :class="[mutedTextClass]">
+          <div
+            v-if="dashboardData.topSuffixes.length === 0"
+            class="text-sm"
+            :class="[mutedTextClass]"
+          >
            {{ t('common.noData') }}
          </div>
          <div v-for="item in dashboardData.topSuffixes" :key="item.suffix" class="space-y-1">
            <div class="flex items-center justify-between text-sm">
-              <span :class="[primaryTextClass]">{{ item.suffix || t('admin.dashboard.textType') }}</span>
+              <span :class="[primaryTextClass]">{{
+                item.suffix || t('admin.dashboard.textType')
+              }}</span>
              <span :class="[mutedTextClass]">{{ item.count }}</span>
            </div>
-            <div class="h-2 overflow-hidden rounded-full" :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']">
+            <div
+              class="h-2 overflow-hidden rounded-full"
+              :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']"
+            >
              <div
                class="h-full rounded-full bg-purple-500"
                :style="{ width: `${getSuffixRatio(item.count)}%` }"
@@ -214,20 +242,38 @@
          </div>
        </div>

-        <div class="overflow-hidden rounded-lg border" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-          <table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
+        <div
+          class="overflow-hidden rounded-lg border"
+          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+        >
+          <table
+            class="min-w-full divide-y"
+            :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
+          >
            <thead :class="[isDarkMode ? 'bg-gray-900/50' : 'bg-gray-50']">
              <tr>
-                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider" :class="[mutedTextClass]">
+                <th
+                  class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider"
+                  :class="[mutedTextClass]"
+                >
                  {{ t('admin.dashboard.table.file') }}
                </th>
-                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider" :class="[mutedTextClass]">
+                <th
+                  class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider"
+                  :class="[mutedTextClass]"
+                >
                  {{ t('admin.dashboard.table.size') }}
                </th>
-                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider" :class="[mutedTextClass]">
+                <th
+                  class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider"
+                  :class="[mutedTextClass]"
+                >
                  {{ t('admin.dashboard.table.usage') }}
                </th>
-                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider" :class="[mutedTextClass]">
+                <th
+                  class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider"
+                  :class="[mutedTextClass]"
+                >
                  {{ t('admin.dashboard.table.status') }}
                </th>
              </tr>
@@ -241,7 +287,10 @@
              <tr v-for="file in dashboardData.recentFiles" :key="file.id">
                <td class="px-4 py-3">
                  <div class="flex items-center gap-3">
-                    <div class="rounded-lg p-2" :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']">
+                    <div
+                      class="rounded-lg p-2"
+                      :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']"
+                    >
                      <FileTextIcon v-if="file.text" class="h-4 w-4" :class="[mutedTextClass]" />
                      <FileIcon v-else class="h-4 w-4" :class="[mutedTextClass]" />
                    </div>
@@ -306,7 +355,10 @@ import { formatFileSize, formatTimestamp } from '@/utils/common'

 const isDarkMode = useInjectedDarkMode()
 const { t } = useI18n()
-const { dashboardData, fetchDashboardData } = useDashboardStats()
+const { dashboardData, errorMessage, fetchDashboardData, isLoading, lastUpdatedText } =
+  useDashboardStats({
+    loadFailedMessage: t('admin.dashboard.loadFailed')
+  })

 const primaryTextClass = computed(() => (isDarkMode.value ? 'text-white' : 'text-gray-900'))
 const mutedTextClass = computed(() => (isDarkMode.value ? 'text-gray-400' : 'text-gray-500'))
@@ -381,10 +433,17 @@ const PolicyRow = defineComponent({
  },
  setup(props) {
    return () =>
-      h('div', { class: 'flex items-center justify-between gap-4 border-b border-gray-200/60 pb-3 last:border-b-0 dark:border-gray-700' }, [
-        h('span', { class: 'text-sm text-gray-500 dark:text-gray-400' }, props.label),
-        h('span', { class: 'text-sm font-medium text-gray-900 dark:text-white' }, props.value)
-      ])
+      h(
+        'div',
+        {
+          class:
+            'flex items-center justify-between gap-4 border-b border-gray-200/60 pb-3 last:border-b-0 dark:border-gray-700'
+        },
+        [
+          h('span', { class: 'text-sm text-gray-500 dark:text-gray-400' }, props.label),
+          h('span', { class: 'text-sm font-medium text-gray-900 dark:text-white' }, props.value)
+        ]
+      )
  }
 })