feat(@vben/web-antd): 客户画像页面与二级抽屉

apps/web-antd/src/views/customer/profile/components/CustomerProfileKpiGrid.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { CustomerProfileDto } from '#/api/customer';
+
+import {
+  formatCurrency,
+  formatPercent,
+} from '../composables/customer-profile-page/helpers';
+
+interface Props {
+  profile: CustomerProfileDto;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="cp-kpis">
+    <div class="cp-kpi">
+      <div class="num blue">{{ props.profile.totalOrders }}</div>
+      <div class="lbl">下单次数</div>
+    </div>
+    <div class="cp-kpi">
+      <div class="num">{{ formatCurrency(props.profile.totalAmount) }}</div>
+      <div class="lbl">累计消费</div>
+    </div>
+    <div class="cp-kpi">
+      <div class="num">{{ formatCurrency(props.profile.averageAmount) }}</div>
+      <div class="lbl">客单价</div>
+    </div>
+    <div class="cp-kpi">
+      <div class="num success">
+        {{ formatPercent(props.profile.repurchaseRatePercent) }}
+      </div>
+      <div class="lbl">复购率</div>
+    </div>
+    <div class="cp-kpi">
+      <div class="num">{{ props.profile.averageOrderIntervalDays }}天</div>
+      <div class="lbl">平均下单间隔</div>
+    </div>
+  </div>
+</template>