init

2026-04-08 16:30:42 +08:00
commit 313c036845
131 changed files with 22393 additions and 0 deletions
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { fetchAdminDashboardSummary } from '@/services/admin'
+import type { AdminDashboardSummary } from '@/types/admin'
+
+const loading = ref(true)
+const summary = ref<AdminDashboardSummary | null>(null)
+const errorMessage = ref('')
+
+onMounted(async () => {
+  try {
+    const response = await fetchAdminDashboardSummary()
+    summary.value = response.data
+  } catch (error) {
+    errorMessage.value = error instanceof Error ? error.message : '读取概览失败'
+  } finally {
+    loading.value = false
+  }
+})
+
+const cards = [
+  { key: 'todayOrders', label: '今日订单' },
+  { key: 'paidPendingClaim', label: '待领取' },
+  { key: 'claimingTasks', label: '领取中' },
+  { key: 'redeemedToday', label: '今日成功' },
+  { key: 'abnormalTasks', label: '异常任务' },
+  { key: 'skuWithInventory', label: '有库存 SKU' },
+] as const
+</script>
+
+<template>
+  <section class="admin-panel">
+    <header class="panel-header">
+      <div>
+        <h1>系统概览</h1>
+        <p>快速查看订单和交付链路的运行状态。</p>
+      </div>
+    </header>
+
+    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
+
+    <div v-if="loading" class="empty-block">概览加载中</div>
+    <div v-else class="summary-grid">
+      <article v-for="card in cards" :key="card.key" class="summary-card">
+        <span>{{ card.label }}</span>
+        <strong>{{ summary?.[card.key] ?? 0 }}</strong>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.admin-panel {
+  display: grid;
+  gap: 18px;
+}
+
+.panel-header h1 {
+  margin: 0;
+  font-size: 28px;
+  color: #1d3555;
+}
+
+.panel-header p {
+  margin: 8px 0 0;
+  color: #64748b;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.summary-card {
+  padding: 18px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(86, 108, 138, 0.1);
+  box-shadow: 0 18px 44px rgba(30, 49, 78, 0.08);
+}
+
+.summary-card span {
+  display: block;
+  color: #6a7a91;
+  font-size: 13px;
+}
+
+.summary-card strong {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+  color: #1f324a;
+}
+
+.empty-block,
+.error-copy {
+  padding: 16px 18px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.error-copy {
+  color: #b42318;
+}
+
+@media (max-width: 980px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>