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

2026-03-03 16:45:22 +08:00
parent ccf7d403de
commit d450526204
28 changed files with 2880 additions and 3 deletions
--- a/apps/web-antd/src/views/customer/analysis/components/TopCustomerTableCard.vue
+++ b/apps/web-antd/src/views/customer/analysis/components/TopCustomerTableCard.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { TableProps } from 'ant-design-vue';
+
+import type {
+  CustomerAnalysisSegmentCode,
+  CustomerAnalysisTopCustomerDto,
+  CustomerTagDto,
+} from '#/api/customer';
+
+import { h } from 'vue';
+
+import { Button, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrencyWithFraction,
+  resolveTagColor,
+} from '../composables/customer-analysis-page/helpers';
+
+interface Props {
+  rows: CustomerAnalysisTopCustomerDto[];
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'detail', customerKey: string): void;
+  (event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
+}>();
+
+function renderTagList(tags: CustomerTagDto[]) {
+  if (tags.length === 0) {
+    return '--';
+  }
+
+  return h(
+    'div',
+    { class: 'ca-top-tag-list' },
+    tags.map((tag) =>
+      h(
+        Tag,
+        {
+          color: resolveTagColor(tag.tone),
+        },
+        () => tag.label,
+      ),
+    ),
+  );
+}
+
+const columns: TableProps['columns'] = [
+  {
+    title: '排名',
+    dataIndex: 'rank',
+    width: 70,
+    customRender: ({ text }) =>
+      h('span', { class: 'ca-top-rank' }, String(text ?? '--')),
+  },
+  {
+    title: '客户',
+    dataIndex: 'name',
+    width: 130,
+  },
+  {
+    title: '累计消费',
+    dataIndex: 'totalAmount',
+    width: 120,
+    customRender: ({ text }) =>
+      h(
+        'span',
+        { class: 'ca-top-money' },
+        formatCurrencyWithFraction(Number(text || 0)),
+      ),
+  },
+  {
+    title: '下单次数',
+    dataIndex: 'orderCount',
+    width: 100,
+  },
+  {
+    title: '客单价',
+    dataIndex: 'averageAmount',
+    width: 100,
+    customRender: ({ text }) => formatCurrencyWithFraction(Number(text || 0)),
+  },
+  {
+    title: '最近下单',
+    dataIndex: 'lastOrderAt',
+    width: 110,
+    customRender: ({ text }) => String(text ?? '--').slice(5),
+  },
+  {
+    title: '标签',
+    dataIndex: 'tags',
+    customRender: ({ record }) =>
+      renderTagList((record as CustomerAnalysisTopCustomerDto).tags),
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 90,
+    customRender: ({ record }) =>
+      h(
+        Button,
+        {
+          type: 'link',
+          class: 'ca-top-action',
+          onClick: () =>
+            emit(
+              'detail',
+              String((record as CustomerAnalysisTopCustomerDto).customerKey),
+            ),
+        },
+        () => '查看',
+      ),
+  },
+];
+</script>
+
+<template>
+  <div class="ca-card ca-card-full ca-top-card">
+    <div class="ca-card-title-wrap">
+      <div class="ca-card-title">高价值客户 TOP 10</div>
+      <Button
+        type="link"
+        class="ca-top-segment-btn"
+        @click="emit('segment', 'high_value_top')"
+      >
+        查看客群明细
+      </Button>
+    </div>
+
+    <Table
+      row-key="customerKey"
+      size="small"
+      :columns="columns"
+      :data-source="rows"
+      :pagination="false"
+      class="ca-top-table"
+    />
+  </div>
+</template>