概览页增加表格统计

2026-08-02 11:16:51 +08:00
parent 6a23e79f4c
commit 50ba6e9c56
11 changed files with 1618 additions and 5 deletions
@@ -13,6 +13,8 @@
    "@dukang/shared-types": "workspace:*",
    "antd": "^5.22.0",
    "dayjs": "^1.11.13",
+    "echarts": "^6.1.0",
+    "echarts-for-react": "^3.0.6",
    "element-china-area-data": "^6.1.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -88,6 +88,51 @@ export type DashboardStats = {
  ordersByStatus: Array<{ status: string; count: number }>;
 };

+export type DashboardAnalytics = {
+  summary: {
+    users: number;
+    orders: number;
+    payingUsers: number;
+    partners: number;
+    stores: number;
+    redeems: number;
+    redeemAmount: number;
+  };
+  byDate: Array<{
+    date: string;
+    users: number;
+    orders: number;
+    partners: number;
+    stores: number;
+    redeems: number;
+    redeemAmount: number;
+  }>;
+  byCity: Array<{
+    cityId: string;
+    cityName: string;
+    users: number;
+    orders: number;
+    partners: number;
+    stores: number;
+    redeems: number;
+    redeemAmount: number;
+  }>;
+  byPromo: Array<{
+    promoCodeId: string | null;
+    code: string;
+    name: string;
+    users: number;
+    orders: number;
+  }>;
+  byPartner: Array<{
+    partnerAccountId: string;
+    companyName: string;
+    stores: number;
+    redeems: number;
+    redeemAmount: number;
+  }>;
+};
+
 export type SystemVersion = {
  id: string;
  gitTag: string | null;
@@ -1,17 +1,22 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
-  Button, Card, Col, Descriptions, Modal, Row, Space, Statistic, Table, Typography, message,
+  Button, Card, Col, DatePicker, Descriptions, Form, Modal, Row, Select, Space, Statistic, Table, Typography, message,
 } from 'antd';
 import { CloudUploadOutlined, ReloadOutlined } from '@ant-design/icons';
+import dayjs, { type Dayjs } from 'dayjs';
+import ReactECharts from 'echarts-for-react';
+import type { EChartsOption } from 'echarts';
 import {
  request,
+  type DashboardAnalytics,
  type DashboardStats,
  type DeployTriggerResult,
  type HqProfile,
+  type Paginated,
  type SystemVersion,
 } from '../lib/api';
-import { fmtTime } from '../lib/constants';
+import { ADMIN_OPTIONS_PAGE_SIZE, fmtTime } from '../lib/constants';

 const STATUS_LABELS: Record<string, string> = {
  PENDING_PAY: '待付款',
@@ -31,6 +36,26 @@ const DEPLOYED_BY_LABELS: Record<string, string> = {
  admin: 'Admin 发布',
 };

+type CityOption = { id: string; name: string; code: string };
+type PromoOption = { id: string; code: string; name: string };
+
+type AnalyticsFilters = {
+  range: [Dayjs, Dayjs];
+  cityId?: string;
+  promoCodeId?: string;
+  partnerAccountId?: string;
+};
+
+function buildAnalyticsQs(f: AnalyticsFilters) {
+  const qs = new URLSearchParams();
+  qs.set('dateFrom', f.range[0].format('YYYY-MM-DD'));
+  qs.set('dateTo', f.range[1].format('YYYY-MM-DD'));
+  if (f.cityId) qs.set('cityId', f.cityId);
+  if (f.promoCodeId) qs.set('promoCodeId', f.promoCodeId);
+  if (f.partnerAccountId) qs.set('partnerAccountId', f.partnerAccountId);
+  return qs.toString();
+}
+
 export default function DashboardPage() {
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [version, setVersion] = useState<SystemVersion | null>(null);
@@ -40,6 +65,21 @@ export default function DashboardPage() {
  const [deploying, setDeploying] = useState(false);
  const isSuperAdmin = profile?.adminRole === 'SUPER_ADMIN';

+  const [filterForm] = Form.useForm<{
+    range: [Dayjs, Dayjs];
+    cityId?: string;
+    promoCodeId?: string;
+    partnerAccountId?: string;
+  }>();
+  const [filters, setFilters] = useState<AnalyticsFilters>({
+    range: [dayjs().subtract(29, 'day'), dayjs()],
+  });
+  const [analytics, setAnalytics] = useState<DashboardAnalytics | null>(null);
+  const [analyticsLoading, setAnalyticsLoading] = useState(true);
+  const [cities, setCities] = useState<CityOption[]>([]);
+  const [promos, setPromos] = useState<PromoOption[]>([]);
+  const [partners, setPartners] = useState<Array<{ id: string; companyName?: string | null; name: string }>>([]);
+
  const loadVersion = useCallback(() => {
    setVersionLoading(true);
    return request<SystemVersion | null>('/admin/dashboard/version')
@@ -48,6 +88,17 @@ export default function DashboardPage() {
      .finally(() => setVersionLoading(false));
  }, []);

+  const loadAnalytics = useCallback((f: AnalyticsFilters) => {
+    setAnalyticsLoading(true);
+    return request<DashboardAnalytics>(`/admin/dashboard/analytics?${buildAnalyticsQs(f)}`)
+      .then(setAnalytics)
+      .catch((e) => {
+        message.error(e instanceof Error ? e.message : '加载统计失败');
+        setAnalytics(null);
+      })
+      .finally(() => setAnalyticsLoading(false));
+  }, []);
+
  useEffect(() => {
    request<DashboardStats>('/admin/dashboard/stats')
      .then(setStats)
@@ -64,8 +115,64 @@ export default function DashboardPage() {
      .catch(() => {
        setVersionLoading(false);
      });
+    void request<Paginated<CityOption>>(`/admin/cities?pageSize=${ADMIN_OPTIONS_PAGE_SIZE}`)
+      .then((res) => setCities(res.items ?? []))
+      .catch(() => setCities([]));
+    void request<Paginated<PromoOption>>(`/admin/promo-codes?pageSize=${ADMIN_OPTIONS_PAGE_SIZE}`)
+      .then((res) => setPromos(res.items ?? []))
+      .catch(() => setPromos([]));
+    void request<Paginated<{ id: string; companyName?: string | null; name: string }>>(
+      `/admin/partners?pageSize=${ADMIN_OPTIONS_PAGE_SIZE}`,
+    )
+      .then((res) => setPartners(res.items ?? []))
+      .catch(() => setPartners([]));
  }, [loadVersion]);

+  useEffect(() => {
+    void loadAnalytics(filters);
+  }, [filters, loadAnalytics]);
+
+  function applyFilters(values: {
+    range?: [Dayjs, Dayjs];
+    cityId?: string;
+    promoCodeId?: string;
+    partnerAccountId?: string;
+  }) {
+    const next: AnalyticsFilters = {
+      range: values.range ?? filters.range,
+      cityId: values.cityId || undefined,
+      promoCodeId: values.promoCodeId || undefined,
+      partnerAccountId: values.partnerAccountId || undefined,
+    };
+    setFilters(next);
+  }
+
+  function setCityFilter(cityId: string) {
+    const next = { ...filters, cityId: cityId === filters.cityId ? undefined : cityId };
+    filterForm.setFieldsValue({ cityId: next.cityId });
+    setFilters(next);
+  }
+
+  function setPromoFilter(promoCodeId: string) {
+    const key = promoCodeId === 'null' || promoCodeId === '' ? 'none' : promoCodeId;
+    const next = {
+      ...filters,
+      promoCodeId: key === filters.promoCodeId ? undefined : key,
+    };
+    filterForm.setFieldsValue({ promoCodeId: next.promoCodeId });
+    setFilters(next);
+  }
+
+  function setPartnerFilter(partnerAccountId: string) {
+    const next = {
+      ...filters,
+      partnerAccountId:
+        partnerAccountId === filters.partnerAccountId ? undefined : partnerAccountId,
+    };
+    filterForm.setFieldsValue({ partnerAccountId: next.partnerAccountId });
+    setFilters(next);
+  }
+
  function handleDeploy() {
    Modal.confirm({
      title: '确认发布更新？',
@@ -89,6 +196,176 @@ export default function DashboardPage() {

  const shortSha = version?.commitId ? version.commitId.slice(0, 7) : '—';

+  const ordersDrillQs = useMemo(() => {
+    const qs = new URLSearchParams();
+    qs.set('createdFrom', filters.range[0].format('YYYY-MM-DD'));
+    qs.set('createdTo', filters.range[1].format('YYYY-MM-DD'));
+    if (filters.cityId && filters.cityId !== 'none') qs.set('cityId', filters.cityId);
+    return qs.toString();
+  }, [filters]);
+
+  const byDateOption = useMemo<EChartsOption>(() => {
+    const rows = analytics?.byDate ?? [];
+    return {
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['新增用户', '订单数'] },
+      grid: { left: 40, right: 20, top: 40, bottom: 40 },
+      xAxis: {
+        type: 'category',
+        data: rows.map((r) => r.date.slice(5)),
+        axisLabel: { rotate: rows.length > 14 ? 45 : 0 },
+      },
+      yAxis: { type: 'value', minInterval: 1 },
+      series: [
+        { name: '新增用户', type: 'line', smooth: true, data: rows.map((r) => r.users) },
+        { name: '订单数', type: 'line', smooth: true, data: rows.map((r) => r.orders) },
+      ],
+    };
+  }, [analytics]);
+
+  const byCityOption = useMemo<EChartsOption>(() => {
+    const rows = analytics?.byCity ?? [];
+    return {
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['用户', '订单'] },
+      grid: { left: 48, right: 20, top: 40, bottom: 48 },
+      xAxis: {
+        type: 'category',
+        data: rows.map((r) => r.cityName),
+        axisLabel: { interval: 0, rotate: rows.length > 4 ? 30 : 0 },
+      },
+      yAxis: { type: 'value', minInterval: 1 },
+      series: [
+        { name: '用户', type: 'bar', data: rows.map((r) => r.users), barMaxWidth: 36 },
+        { name: '订单', type: 'bar', data: rows.map((r) => r.orders), barMaxWidth: 36 },
+      ],
+    };
+  }, [analytics]);
+
+  const byPromoOption = useMemo<EChartsOption>(() => {
+    const rows = analytics?.byPromo ?? [];
+    return {
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['用户', '订单'] },
+      grid: { left: 48, right: 20, top: 40, bottom: 64 },
+      xAxis: {
+        type: 'category',
+        data: rows.map((r) => r.name || r.code),
+        axisLabel: { interval: 0, rotate: rows.length > 3 ? 30 : 0 },
+      },
+      yAxis: { type: 'value', minInterval: 1 },
+      series: [
+        { name: '用户', type: 'bar', data: rows.map((r) => r.users), barMaxWidth: 36 },
+        { name: '订单', type: 'bar', data: rows.map((r) => r.orders), barMaxWidth: 36 },
+      ],
+    };
+  }, [analytics]);
+
+  const opsByDateOption = useMemo<EChartsOption>(() => {
+    const rows = analytics?.byDate ?? [];
+    return {
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['新增合伙人', '新签门店', '核销笔数', '核销金额'] },
+      grid: { left: 48, right: 48, top: 48, bottom: 40 },
+      xAxis: {
+        type: 'category',
+        data: rows.map((r) => r.date.slice(5)),
+        axisLabel: { rotate: rows.length > 14 ? 45 : 0 },
+      },
+      yAxis: [
+        { type: 'value', name: '数量', minInterval: 1 },
+        { type: 'value', name: '金额', minInterval: 1 },
+      ],
+      series: [
+        { name: '新增合伙人', type: 'line', smooth: true, data: rows.map((r) => r.partners) },
+        { name: '新签门店', type: 'line', smooth: true, data: rows.map((r) => r.stores) },
+        { name: '核销笔数', type: 'line', smooth: true, data: rows.map((r) => r.redeems) },
+        {
+          name: '核销金额',
+          type: 'line',
+          smooth: true,
+          yAxisIndex: 1,
+          data: rows.map((r) => r.redeemAmount),
+        },
+      ],
+    };
+  }, [analytics]);
+
+  const opsByCityOption = useMemo<EChartsOption>(() => {
+    const rows = analytics?.byCity ?? [];
+    return {
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['合伙人', '门店', '核销笔数'] },
+      grid: { left: 48, right: 20, top: 40, bottom: 48 },
+      xAxis: {
+        type: 'category',
+        data: rows.map((r) => r.cityName),
+        axisLabel: { interval: 0, rotate: rows.length > 4 ? 30 : 0 },
+      },
+      yAxis: { type: 'value', minInterval: 1 },
+      series: [
+        { name: '合伙人', type: 'bar', data: rows.map((r) => r.partners), barMaxWidth: 28 },
+        { name: '门店', type: 'bar', data: rows.map((r) => r.stores), barMaxWidth: 28 },
+        { name: '核销笔数', type: 'bar', data: rows.map((r) => r.redeems), barMaxWidth: 28 },
+      ],
+    };
+  }, [analytics]);
+
+  const opsByPartnerOption = useMemo<EChartsOption>(() => {
+    const rows = analytics?.byPartner ?? [];
+    return {
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['门店', '核销笔数', '核销金额'] },
+      grid: { left: 48, right: 48, top: 40, bottom: 64 },
+      xAxis: {
+        type: 'category',
+        data: rows.map((r) => r.companyName),
+        axisLabel: { interval: 0, rotate: rows.length > 3 ? 30 : 0 },
+      },
+      yAxis: [
+        { type: 'value', name: '数量', minInterval: 1 },
+        { type: 'value', name: '金额' },
+      ],
+      series: [
+        { name: '门店', type: 'bar', data: rows.map((r) => r.stores), barMaxWidth: 28 },
+        { name: '核销笔数', type: 'bar', data: rows.map((r) => r.redeems), barMaxWidth: 28 },
+        {
+          name: '核销金额',
+          type: 'line',
+          yAxisIndex: 1,
+          data: rows.map((r) => r.redeemAmount),
+        },
+      ],
+    };
+  }, [analytics]);
+
+  const redeemByCityOption = useMemo<EChartsOption>(() => {
+    const rows = analytics?.byCity ?? [];
+    return {
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['核销笔数', '核销金额'] },
+      grid: { left: 48, right: 48, top: 40, bottom: 48 },
+      xAxis: {
+        type: 'category',
+        data: rows.map((r) => r.cityName),
+        axisLabel: { interval: 0, rotate: rows.length > 4 ? 30 : 0 },
+      },
+      yAxis: [
+        { type: 'value', name: '笔数', minInterval: 1 },
+        { type: 'value', name: '金额' },
+      ],
+      series: [
+        { name: '核销笔数', type: 'bar', data: rows.map((r) => r.redeems), barMaxWidth: 36 },
+        {
+          name: '核销金额',
+          type: 'line',
+          yAxisIndex: 1,
+          data: rows.map((r) => r.redeemAmount),
+        },
+      ],
+    };
+  }, [analytics]);
+
  return (
    <div>
      <Typography.Title level={4}>数据概览</Typography.Title>
@@ -176,6 +453,237 @@ export default function DashboardPage() {
        </Col>
      </Row>

+      <Card
+        title="数据统计筛选"
+        style={{ marginBottom: 24 }}
+        extra={
+          <Button
+            icon={<ReloadOutlined />}
+            size="small"
+            onClick={() => void loadAnalytics(filters)}
+          >
+            刷新
+          </Button>
+        }
+      >
+        <Form
+          form={filterForm}
+          layout="inline"
+          initialValues={{ range: filters.range }}
+          onFinish={applyFilters}
+        >
+          <Form.Item name="range" label="日期" rules={[{ required: true, message: '请选择日期' }]}>
+            <DatePicker.RangePicker allowClear={false} />
+          </Form.Item>
+          <Form.Item name="cityId" label="城市">
+            <Select
+              allowClear
+              placeholder="全部开城"
+              style={{ width: 160 }}
+              options={[
+                { value: 'none', label: '未选城' },
+                ...cities.map((c) => ({ value: c.id, label: c.name })),
+              ]}
+            />
+          </Form.Item>
+          <Form.Item name="promoCodeId" label="推广码">
+            <Select
+              allowClear
+              placeholder="全部来源"
+              style={{ width: 200 }}
+              options={[
+                { value: 'none', label: '自然量 / 无推广码' },
+                ...promos.map((p) => ({ value: p.id, label: `${p.name}（${p.code}）` })),
+              ]}
+            />
+          </Form.Item>
+          <Form.Item name="partnerAccountId" label="合伙人">
+            <Select
+              allowClear
+              placeholder="全部合伙人"
+              style={{ width: 200 }}
+              options={partners.map((p) => ({
+                value: p.id,
+                label: p.companyName || p.name,
+              }))}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">查询</Button>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Card
+        title="用户 / 订单统计"
+        style={{ marginBottom: 24 }}
+        extra={
+          <Space>
+            <Link to={`/orders?${ordersDrillQs}`}>查看订单</Link>
+            <Link to="/users">查看用户</Link>
+          </Space>
+        }
+      >
+        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
+          <Col xs={24} sm={8}>
+            <Statistic title="区间新增用户" value={analytics?.summary.users ?? 0} />
+          </Col>
+          <Col xs={24} sm={8}>
+            <Statistic title="区间订单数" value={analytics?.summary.orders ?? 0} />
+          </Col>
+          <Col xs={24} sm={8}>
+            <Statistic title="区间付费用户" value={analytics?.summary.payingUsers ?? 0} />
+          </Col>
+        </Row>
+
+        <Row gutter={[16, 16]}>
+          <Col xs={24}>
+            <Card type="inner" title="按日趋势" loading={analyticsLoading} size="small">
+              <ReactECharts option={byDateOption} style={{ height: 320 }} notMerge />
+            </Card>
+          </Col>
+          <Col xs={24} lg={12}>
+            <Card
+              type="inner"
+              title="按城市（点击柱联动筛选）"
+              loading={analyticsLoading}
+              size="small"
+            >
+              <ReactECharts
+                option={byCityOption}
+                style={{ height: 300 }}
+                notMerge
+                onEvents={{
+                  click: (params: { name?: string }) => {
+                    const row = (analytics?.byCity ?? []).find((r) => r.cityName === params.name);
+                    if (row) setCityFilter(row.cityId);
+                  },
+                }}
+              />
+            </Card>
+          </Col>
+          <Col xs={24} lg={12}>
+            <Card
+              type="inner"
+              title="按推广码（点击柱联动筛选）"
+              loading={analyticsLoading}
+              size="small"
+            >
+              <ReactECharts
+                option={byPromoOption}
+                style={{ height: 300 }}
+                notMerge
+                onEvents={{
+                  click: (params: { name?: string }) => {
+                    const row = (analytics?.byPromo ?? []).find(
+                      (r) => (r.name || r.code) === params.name,
+                    );
+                    if (row) setPromoFilter(row.promoCodeId ?? 'none');
+                  },
+                }}
+              />
+            </Card>
+          </Col>
+        </Row>
+      </Card>
+
+      <Card
+        title="合伙人 / 门店 / 核销统计"
+        style={{ marginBottom: 24 }}
+        extra={
+          <Space>
+            <Link to="/city-partners">查看合伙人</Link>
+            <Link to="/stores">查看门店</Link>
+            <Link to="/redeem-records">查看核销</Link>
+          </Space>
+        }
+      >
+        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
+          <Col xs={24} sm={6}>
+            <Statistic title="区间新增合伙人" value={analytics?.summary.partners ?? 0} />
+          </Col>
+          <Col xs={24} sm={6}>
+            <Statistic title="区间新签门店" value={analytics?.summary.stores ?? 0} />
+          </Col>
+          <Col xs={24} sm={6}>
+            <Statistic title="区间核销笔数" value={analytics?.summary.redeems ?? 0} />
+          </Col>
+          <Col xs={24} sm={6}>
+            <Statistic title="区间核销金额" value={analytics?.summary.redeemAmount ?? 0} precision={2} />
+          </Col>
+        </Row>
+
+        <Row gutter={[16, 16]}>
+          <Col xs={24}>
+            <Card type="inner" title="按日趋势（合伙人 / 门店 / 核销）" loading={analyticsLoading} size="small">
+              <ReactECharts option={opsByDateOption} style={{ height: 320 }} notMerge />
+            </Card>
+          </Col>
+          <Col xs={24} lg={12}>
+            <Card
+              type="inner"
+              title="按城市（点击柱联动筛选）"
+              loading={analyticsLoading}
+              size="small"
+            >
+              <ReactECharts
+                option={opsByCityOption}
+                style={{ height: 300 }}
+                notMerge
+                onEvents={{
+                  click: (params: { name?: string }) => {
+                    const row = (analytics?.byCity ?? []).find((r) => r.cityName === params.name);
+                    if (row) setCityFilter(row.cityId);
+                  },
+                }}
+              />
+            </Card>
+          </Col>
+          <Col xs={24} lg={12}>
+            <Card
+              type="inner"
+              title="按城市核销金额"
+              loading={analyticsLoading}
+              size="small"
+            >
+              <ReactECharts
+                option={redeemByCityOption}
+                style={{ height: 300 }}
+                notMerge
+                onEvents={{
+                  click: (params: { name?: string }) => {
+                    const row = (analytics?.byCity ?? []).find((r) => r.cityName === params.name);
+                    if (row) setCityFilter(row.cityId);
+                  },
+                }}
+              />
+            </Card>
+          </Col>
+          <Col xs={24}>
+            <Card
+              type="inner"
+              title="按合伙人（门店 / 核销，点击联动筛选）"
+              loading={analyticsLoading}
+              size="small"
+            >
+              <ReactECharts
+                option={opsByPartnerOption}
+                style={{ height: 320 }}
+                notMerge
+                onEvents={{
+                  click: (params: { name?: string }) => {
+                    const row = (analytics?.byPartner ?? []).find(
+                      (r) => r.companyName === params.name,
+                    );
+                    if (row) setPartnerFilter(row.partnerAccountId);
+                  },
+                }}
+              />
+            </Card>
+          </Col>
+        </Row>
+      </Card>
+
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={8}>
          <Card