第一基础版

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

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+import type { TabOption } from '@vben/types';
+
+import {
+  AnalysisChartCard,
+  AnalysisChartsTabs,
+  AnalysisOverview,
+} from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+import AnalyticsTrends from './analytics-trends.vue';
+import AnalyticsVisitsData from './analytics-visits-data.vue';
+import AnalyticsVisitsSales from './analytics-visits-sales.vue';
+import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
+
+const overviewItems: AnalysisOverviewItem[] = [
+  {
+    icon: SvgCardIcon,
+    title: '平台用户数',
+    totalTitle: '总用户数',
+    totalValue: 120_000,
+    value: 2000,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '推广访问量',
+    totalTitle: '总推广访问量',
+    totalValue: 500_000,
+    value: 20_000,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '产品数量',
+    totalTitle: '总产品数量',
+    totalValue: 120,
+    value: 8,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '代理数量',
+    totalTitle: '总代理数量',
+    totalValue: 5000,
+    value: 500,
+  },
+];
+
+const chartTabs: TabOption[] = [
+  {
+    label: '推广访问趋势',
+    value: 'trends',
+  },
+  {
+    label: '订单趋势',
+    value: 'visits',
+  },
+];
+</script>
+
+<template>
+  <div class="p-5">
+    <div class="mb-4 ml-4 text-lg text-gray-500">
+      该数据为演示模拟生成，不为真实数据
+    </div>
+    <AnalysisOverview :items="overviewItems" />
+    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+      <template #trends>
+        <AnalyticsTrends />
+      </template>
+      <template #visits>
+        <AnalyticsVisits />
+      </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="推广数据分析"
+      >
+        <AnalyticsVisitsData />
+      </AnalysisChartCard>
+      <AnalysisChartCard
+        class="mt-5 md:mr-4 md:mt-0 md:w-1/3"
+        title="订单来源分析"
+      >
+        <AnalyticsVisitsSource />
+      </AnalysisChartCard>
+      <AnalysisChartCard
+        class="mt-5 md:mt-0 md:w-1/3"
+        title="佣金/奖励/提现统计"
+      >
+        <AnalyticsVisitsSales />
+      </AnalysisChartCard>
+    </div>
+  </div>
+</template>