init

2026-07-20 14:58:57 +08:00
commit 45db0aa4b9
50 changed files with 5861 additions and 0 deletions
@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react'
+import { Card, Col, Row, Statistic, Typography, Spin, message } from 'antd'
+import {
+  SkinOutlined,
+  TeamOutlined,
+  ShoppingOutlined,
+  DollarOutlined,
+  PercentageOutlined,
+  ClockCircleOutlined,
+} from '@ant-design/icons'
+import { dashboardApi } from '../api'
+import type { DashboardStats } from '../types'
+
+export default function Dashboard() {
+  const [stats, setStats] = useState<DashboardStats | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    dashboardApi
+      .stats()
+      .then(setStats)
+      .catch((e) => message.error(e.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: 80 }}>
+        <Spin size="large" />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <Typography.Title level={4} style={{ marginTop: 0 }}>
+        数据概览
+      </Typography.Title>
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12} lg={8}>
+          <Card>
+            <Statistic title="皮肤商品" value={stats?.skin_count ?? 0} prefix={<SkinOutlined />} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={8}>
+          <Card>
+            <Statistic title="分销商" value={stats?.distributor_count ?? 0} prefix={<TeamOutlined />} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={8}>
+          <Card>
+            <Statistic title="订单总数" value={stats?.order_count ?? 0} prefix={<ShoppingOutlined />} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={8}>
+          <Card>
+            <Statistic
+              title="成交金额"
+              value={stats?.total_sales ?? 0}
+              precision={2}
+              prefix={<DollarOutlined />}
+              suffix="元"
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={8}>
+          <Card>
+            <Statistic
+              title="累计佣金"
+              value={stats?.total_commission ?? 0}
+              precision={2}
+              prefix={<PercentageOutlined />}
+              suffix="元"
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={8}>
+          <Card>
+            <Statistic
+              title="待处理订单"
+              value={stats?.pending_order_count ?? 0}
+              prefix={<ClockCircleOutlined />}
+              valueStyle={{ color: (stats?.pending_order_count ?? 0) > 0 ? '#cf1322' : undefined }}
+            />
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  )
+}