first commit

apps/web-antd/src/views/dashboard/analytics/index.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { TabOption } from '@vben/types';
+
+import {
+  AnalysisChartCard,
+  AnalysisChartsTabs,
+} from '@vben/common-ui';
+
+import StatisticsOverview from './statistics-overview.vue';
+import AgentRankingTable from './agent-ranking-table.vue';
+import AgentTrendsChart from './agent-trends-chart.vue';
+import OrderTrendsChart from './order-trends-chart.vue';
+import ProductDistributionChart from './product-distribution-chart.vue';
+import RegionDistributionChart from './region-distribution-chart.vue';
+
+const chartTabs: TabOption[] = [
+  {
+    label: '订单趋势',
+    value: 'order-trends',
+  },
+  {
+    label: '代理注册趋势',
+    value: 'agent-trends',
+  },
+];
+</script>
+
+<template>
+  <div class="p-5">
+    <!-- 统计概览 -->
+    <StatisticsOverview />
+
+    <!-- 趋势图表 -->
+    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+      <template #order-trends>
+        <OrderTrendsChart />
+      </template>
+      <template #agent-trends>
+        <AgentTrendsChart />
+      </template>
+    </AnalysisChartsTabs>
+
+    <!-- 分布图表和排行榜 -->
+    <div class="mt-5 w-full md:flex">
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="产品订单分布">
+        <ProductDistributionChart />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="区域代理分布">
+        <RegionDistributionChart />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="代理排行榜">
+        <AgentRankingTable />
+      </AnalysisChartCard>
+    </div>
+  </div>
+</template>