update dashboard page

2026-03-20 14:25:49 +08:00
parent d07674ea04
commit c34f37e88f
4 changed files with 348 additions and 0 deletions
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
+import type { DashboardOverview } from '@/types/api'
+
+defineProps<{
+  overview: DashboardOverview | null
+  loading: boolean
+}>()
+
+const periods = [
+  { key: 'today' as const, label: '今日' },
+  { key: 'this_week' as const, label: '本周' },
+  { key: 'this_month' as const, label: '本月' },
+]
+</script>
+
+<template>
+  <a-row :gutter="16" class="mb-4">
+    <a-col :span="8" v-for="p in periods" :key="p.key">
+      <a-card :bordered="false">
+        <a-skeleton :loading="loading" active :paragraph="{ rows: 2 }">
+          <h3 class="text-base font-medium mb-3">{{ p.label }}</h3>
+          <div class="flex gap-6">
+            <a-statistic
+              title="成功"
+              :value="overview?.[p.key]?.success ?? 0"
+              :value-style="{ color: '#3f8600' }"
+            >
+              <template #prefix>
+                <CheckCircleOutlined />
+              </template>
+            </a-statistic>
+            <a-statistic
+              title="失败"
+              :value="overview?.[p.key]?.failed ?? 0"
+              :value-style="(overview?.[p.key]?.failed ?? 0) > 0 ? { color: '#cf1322' } : {}"
+            >
+              <template #prefix>
+                <CloseCircleOutlined />
+              </template>
+            </a-statistic>
+          </div>
+        </a-skeleton>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>