feat(customer): implement customer analysis page and drawer flow

apps/web-antd/src/views/customer/analysis/components/AnalysisStatsGrid.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type {
+  CustomerAnalysisOverviewDto,
+  CustomerAnalysisSegmentCode,
+} from '#/api/customer';
+
+import {
+  formatCurrency,
+  formatInteger,
+  formatPercent,
+  formatSignedPercent,
+} from '../composables/customer-analysis-page/helpers';
+
+interface Props {
+  overview: CustomerAnalysisOverviewDto;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
+}>();
+</script>
+
+<template>
+  <div class="ca-stats">
+    <button class="ca-stat" type="button" @click="emit('segment', 'all')">
+      <div class="label">客户总数</div>
+      <div class="val blue">
+        {{ formatInteger(props.overview.totalCustomers) }}
+      </div>
+      <div class="sub">
+        较上周期 {{ formatSignedPercent(props.overview.growthRatePercent) }}
+      </div>
+    </button>
+
+    <button
+      class="ca-stat"
+      type="button"
+      @click="emit('segment', 'active_new')"
+    >
+      <div class="label">本期新增</div>
+      <div class="val green">
+        +{{ formatInteger(props.overview.newCustomers) }}
+      </div>
+      <div class="sub">
+        日均 {{ props.overview.newCustomersDailyAverage }} 人
+      </div>
+    </button>
+
+    <button
+      class="ca-stat"
+      type="button"
+      @click="emit('segment', 'active_recent')"
+    >
+      <div class="label">活跃率</div>
+      <div class="val orange">
+        {{ formatPercent(props.overview.activeRatePercent) }}
+      </div>
+      <div class="sub">
+        {{ formatInteger(props.overview.activeCustomers) }} /
+        {{ formatInteger(props.overview.totalCustomers) }}
+      </div>
+    </button>
+
+    <button
+      class="ca-stat"
+      type="button"
+      @click="emit('segment', 'high_value_top')"
+    >
+      <div class="label">平均客户价值</div>
+      <div class="val">
+        {{ formatCurrency(props.overview.averageLifetimeValue) }}
+      </div>
+      <div class="sub">生命周期价值</div>
+    </button>
+  </div>
+</template>