first commit

playground/src/views/dashboard/analytics/statistics-overview.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import {
+  getStatisticsOverview,
+} from '#/api/agent';
+import type { AgentApi } from '#/api/agent';
+
+interface OverviewItem {
+  title: string;
+  value: number;
+  prefix?: string;
+  suffix?: string;
+}
+
+const loading = ref(false);
+const overviews = ref<OverviewItem[]>([]);
+
+async function loadOverview() {
+  loading.value = true;
+  try {
+    const data = await getStatisticsOverview();
+    overviews.value = [
+      {
+        title: '代理总数',
+        value: data.total_agents,
+      },
+      {
+        title: '今日新增代理',
+        value: data.today_new_agents,
+      },
+      {
+        title: '总订单数',
+        value: data.total_orders,
+      },
+      {
+        title: '今日订单数',
+        value: data.today_orders,
+      },
+      {
+        title: '总订单金额',
+        value: data.total_order_amount,
+        prefix: '¥',
+      },
+      {
+        title: '今日订单金额',
+        value: data.today_order_amount,
+        prefix: '¥',
+      },
+      {
+        title: '总佣金支出',
+        value: data.total_commission,
+        prefix: '¥',
+      },
+      {
+        title: '今日佣金支出',
+        value: data.today_commission,
+        prefix: '¥',
+      },
+      {
+        title: '本月订单金额',
+        value: data.month_order_amount,
+        prefix: '¥',
+      },
+      {
+        title: '本月佣金支出',
+        value: data.month_commission,
+        prefix: '¥',
+      },
+      {
+        title: '待审核提现',
+        value: data.pending_withdraw,
+        prefix: '¥',
+      },
+    ];
+  } catch (error) {
+    console.error('Failed to load statistics overview:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  loadOverview();
+});
+</script>
+
+<template>
+  <div class="statistics-overview">
+    <a-spin :spinning="loading">
+      <a-row :gutter="[16, 16]">
+        <a-col
+          v-for="(item, index) in overviews"
+          :key="index"
+          :xs="24"
+          :sm="12"
+          :md="8"
+          :lg="6"
+        >
+          <a-card class="overview-card">
+            <a-statistic
+              :title="item.title"
+              :value="item.value"
+              :prefix="item.prefix"
+              :precision="item.prefix ? 2 : 0"
+            />
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.statistics-overview {
+  .overview-card {
+    :deep(.ant-card-body) {
+      padding: 20px;
+    }
+  }
+}
+</style>