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/AmountDistributionCard.vue
+++ b/apps/web-antd/src/views/customer/analysis/components/AmountDistributionCard.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type {
+  CustomerAnalysisAmountDistributionItemDto,
+  CustomerAnalysisSegmentCode,
+} from '#/api/customer';
+
+import {
+  formatPercent,
+  resolveDistributionColor,
+} from '../composables/customer-analysis-page/helpers';
+
+interface Props {
+  items: CustomerAnalysisAmountDistributionItemDto[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
+}>();
+</script>
+
+<template>
+  <div class="ca-card">
+    <div class="ca-card-title">客单价分布</div>
+    <button
+      v-for="(item, index) in props.items"
+      :key="item.segmentCode"
+      class="ca-dist-row"
+      type="button"
+      @click="emit('segment', item.segmentCode)"
+    >
+      <span class="ca-dist-label">{{ item.label }}</span>
+      <span class="ca-dist-bar">
+        <span
+          class="ca-dist-bar-inner"
+          :style="{
+            width: `${Math.max(4, Math.min(100, item.percent))}%`,
+            backgroundColor: resolveDistributionColor(index),
+          }"
+        ></span>
+      </span>
+      <span class="ca-dist-val">{{ formatPercent(item.percent) }}</span>
+    </button>
+  </div>
+</template>
--- a/apps/web-antd/src/views/customer/analysis/components/AnalysisStatsGrid.vue
+++ b/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>
--- a/apps/web-antd/src/views/customer/analysis/components/AnalysisToolbar.vue
+++ b/apps/web-antd/src/views/customer/analysis/components/AnalysisToolbar.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { CustomerAnalysisPeriodFilter } from '#/api/customer';
+
+import { Button, Segmented, Select } from 'ant-design-vue';
+
+import { ANALYSIS_PERIOD_OPTIONS } from '../composables/customer-analysis-page/constants';
+
+interface OptionItem {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  isExporting: boolean;
+  isStoreLoading: boolean;
+  period: CustomerAnalysisPeriodFilter;
+  selectedStoreId: string;
+  storeOptions: OptionItem[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'export'): void;
+  (event: 'update:period', value: string): void;
+  (event: 'update:selectedStoreId', value: string): void;
+}>();
+
+function handleStoreChange(value: unknown) {
+  if (typeof value === 'number' || typeof value === 'string') {
+    emit('update:selectedStoreId', String(value));
+    return;
+  }
+
+  emit('update:selectedStoreId', '');
+}
+</script>
+
+<template>
+  <div class="ca-toolbar">
+    <Select
+      class="ca-store-select"
+      :value="props.selectedStoreId"
+      :options="props.storeOptions"
+      placeholder="请选择门店"
+      :loading="props.isStoreLoading"
+      :disabled="props.isStoreLoading || props.storeOptions.length === 0"
+      @update:value="(value) => handleStoreChange(value)"
+    />
+
+    <span class="ca-period-label">统计周期</span>
+    <Segmented
+      class="ca-period-segment"
+      :value="props.period"
+      :options="ANALYSIS_PERIOD_OPTIONS"
+      @change="(value) => emit('update:period', String(value ?? '30d'))"
+    />
+
+    <Button
+      class="ca-export-btn"
+      :loading="props.isExporting"
+      @click="emit('export')"
+    >
+      导出报表
+    </Button>
+  </div>
+</template>
--- a/apps/web-antd/src/views/customer/analysis/components/CompositionCard.vue
+++ b/apps/web-antd/src/views/customer/analysis/components/CompositionCard.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type {
+  CustomerAnalysisCompositionItemDto,
+  CustomerAnalysisSegmentCode,
+} from '#/api/customer';
+
+import { computed } from 'vue';
+
+import {
+  formatInteger,
+  formatPercent,
+  resolveCompositionToneColor,
+} from '../composables/customer-analysis-page/helpers';
+
+interface Props {
+  items: CustomerAnalysisCompositionItemDto[];
+  totalCustomers: number;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
+}>();
+
+const donutStyle = computed(() => {
+  if (props.items.length === 0) {
+    return {
+      background: 'conic-gradient(#e5e7eb 0deg 360deg)',
+    };
+  }
+
+  let angle = 0;
+  const parts: string[] = [];
+  for (const item of props.items) {
+    const start = angle;
+    const delta = Math.max(0, Math.min(360, (item.percent / 100) * 360));
+    angle += delta;
+    const end = Math.min(360, angle);
+    parts.push(
+      `${resolveCompositionToneColor(item.tone)} ${start}deg ${end}deg`,
+    );
+  }
+
+  if (angle < 360) {
+    parts.push(`#e5e7eb ${angle}deg 360deg`);
+  }
+
+  return {
+    background: `conic-gradient(${parts.join(',')})`,
+  };
+});
+</script>
+
+<template>
+  <div class="ca-card">
+    <div class="ca-card-title">新老客占比</div>
+    <div class="ca-donut-wrap">
+      <div class="ca-donut" :style="donutStyle">
+        <div class="ca-donut-hole">
+          <div class="num">{{ formatInteger(props.totalCustomers) }}</div>
+          <div class="lbl">总客户</div>
+        </div>
+      </div>
+
+      <div class="ca-legend">
+        <button
+          v-for="item in props.items"
+          :key="item.segmentCode"
+          class="ca-legend-item"
+          type="button"
+          @click="emit('segment', item.segmentCode)"
+        >
+          <span
+            class="ca-legend-dot"
+            :style="{ backgroundColor: resolveCompositionToneColor(item.tone) }"
+          ></span>
+          <span class="ca-legend-label">{{ item.label }}</span>
+          <span class="ca-legend-value">{{ formatPercent(item.percent) }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/customer/analysis/components/GrowthTrendCard.vue
+++ b/apps/web-antd/src/views/customer/analysis/components/GrowthTrendCard.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type {
+  CustomerAnalysisSegmentCode,
+  CustomerAnalysisTrendPointDto,
+} from '#/api/customer';
+
+import { computed } from 'vue';
+
+interface Props {
+  points: CustomerAnalysisTrendPointDto[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
+}>();
+
+const maxValue = computed(() =>
+  Math.max(1, ...(props.points.map((item) => item.value) ?? [1])),
+);
+
+function resolveHeight(value: number) {
+  const ratio = value / maxValue.value;
+  return `${Math.max(14, Math.round(ratio * 96))}px`;
+}
+</script>
+
+<template>
+  <div class="ca-card ca-card-full">
+    <div class="ca-card-title">客户增长趋势</div>
+    <div class="ca-bars">
+      <button
+        v-for="point in props.points"
+        :key="point.label"
+        class="ca-bar-col"
+        type="button"
+        @click="emit('segment', 'active_new')"
+      >
+        <div class="ca-bar-val">{{ point.value }}</div>
+        <div
+          class="ca-bar"
+          :style="{ height: resolveHeight(point.value) }"
+        ></div>
+        <span class="ca-bar-lbl">{{ point.label }}</span>
+      </button>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/customer/analysis/components/MemberDetailDrawer.vue
+++ b/apps/web-antd/src/views/customer/analysis/components/MemberDetailDrawer.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { TableProps } from 'ant-design-vue';
+
+import type { CustomerMemberDetailDto } from '#/api/customer';
+
+import { h } from 'vue';
+
+import { Drawer, Empty, Spin, Table, Tag } from 'ant-design-vue';
+
+import {
+  resolveDeliveryTagColor,
+  resolveOrderStatusClass,
+} from '#/views/customer/profile/composables/customer-profile-page/helpers';
+
+import {
+  formatCurrencyWithFraction,
+  formatPercent,
+  resolveAvatarText,
+  resolveTagColor,
+} from '../composables/customer-analysis-page/helpers';
+
+interface Props {
+  detail: CustomerMemberDetailDto | null;
+  loading: boolean;
+  open: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+
+const orderColumns: TableProps['columns'] = [
+  {
+    title: '时间',
+    dataIndex: 'orderedAt',
+    width: 168,
+  },
+  {
+    title: '订单号',
+    dataIndex: 'orderNo',
+    width: 160,
+  },
+  {
+    title: '商品摘要',
+    dataIndex: 'itemsSummary',
+    ellipsis: true,
+  },
+  {
+    title: '金额',
+    dataIndex: 'amount',
+    width: 110,
+    customRender: ({ text }) => formatCurrencyWithFraction(Number(text || 0)),
+  },
+  {
+    title: '方式',
+    dataIndex: 'deliveryType',
+    width: 90,
+    customRender: ({ text }) =>
+      h(Tag, { color: resolveDeliveryTagColor(String(text ?? '')) }, () =>
+        String(text ?? '--'),
+      ),
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 90,
+    customRender: ({ text }) =>
+      h(
+        'span',
+        {
+          class: [
+            'ca-member-order-status',
+            resolveOrderStatusClass(String(text ?? '')),
+          ],
+        },
+        String(text ?? '--'),
+      ),
+  },
+];
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="620"
+    title="会员详情"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loading">
+      <template v-if="props.detail">
+        <div class="ca-member-head">
+          <div class="ca-member-avatar">
+            {{ resolveAvatarText(props.detail.name) }}
+          </div>
+          <div class="ca-member-head-main">
+            <div class="ca-member-name-wrap">
+              <span class="ca-member-name">{{ props.detail.name }}</span>
+              <Tag v-if="props.detail.member.isMember" color="purple">
+                {{ props.detail.member.tierName || '会员' }}
+              </Tag>
+            </div>
+            <div class="ca-member-meta">
+              {{ props.detail.phoneMasked }} · 注册于
+              {{ props.detail.registeredAt }}
+            </div>
+            <div class="ca-member-meta">
+              入会 {{ props.detail.member.joinedAt || '--' }} · 来源：{{
+                props.detail.source || '--'
+              }}
+            </div>
+          </div>
+        </div>
+
+        <div class="ca-member-overview">
+          <div class="ca-member-ov-item">
+            <div class="ca-member-ov-val">
+              {{ formatCurrencyWithFraction(props.detail.totalAmount) }}
+            </div>
+            <div class="ca-member-ov-label">累计消费</div>
+          </div>
+          <div class="ca-member-ov-item">
+            <div class="ca-member-ov-val">{{ props.detail.totalOrders }}</div>
+            <div class="ca-member-ov-label">消费次数</div>
+          </div>
+          <div class="ca-member-ov-item">
+            <div class="ca-member-ov-val">
+              {{ formatCurrencyWithFraction(props.detail.averageAmount) }}
+            </div>
+            <div class="ca-member-ov-label">平均客单价</div>
+          </div>
+          <div class="ca-member-ov-item">
+            <div class="ca-member-ov-val">
+              {{ formatPercent(props.detail.repurchaseRatePercent) }}
+            </div>
+            <div class="ca-member-ov-label">复购率</div>
+          </div>
+          <div class="ca-member-ov-item">
+            <div class="ca-member-ov-val">
+              {{ props.detail.member.pointsBalance }}
+            </div>
+            <div class="ca-member-ov-label">积分</div>
+          </div>
+        </div>
+
+        <div class="ca-member-section">
+          <div class="ca-member-section-title">会员标签</div>
+          <div class="ca-member-tag-list">
+            <Tag
+              v-for="tag in props.detail.tags"
+              :key="`${tag.code}-${tag.label}`"
+              :color="resolveTagColor(tag.tone)"
+            >
+              {{ tag.label }}
+            </Tag>
+            <span
+              v-if="props.detail.tags.length === 0"
+              class="ca-member-empty-text"
+            >
+              暂无标签
+            </span>
+          </div>
+        </div>
+
+        <div class="ca-member-section">
+          <div class="ca-member-section-title">最近订单</div>
+          <Table
+            class="ca-member-order-table"
+            row-key="orderNo"
+            size="small"
+            :columns="orderColumns"
+            :data-source="props.detail.recentOrders"
+            :pagination="false"
+          />
+        </div>
+      </template>
+
+      <Empty v-else description="暂无会员详情" />
+    </Spin>
+  </Drawer>
+</template>
--- a/apps/web-antd/src/views/customer/analysis/components/RfmMatrixCard.vue
+++ b/apps/web-antd/src/views/customer/analysis/components/RfmMatrixCard.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type {
+  CustomerAnalysisRfmRowDto,
+  CustomerAnalysisSegmentCode,
+} from '#/api/customer';
+
+import {
+  formatInteger,
+  resolveRfmCellToneClass,
+} from '../composables/customer-analysis-page/helpers';
+
+interface Props {
+  rows: CustomerAnalysisRfmRowDto[];
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
+}>();
+
+const columnLabels = ['高频高额', '高频低额', '低频高额', '低频低额'];
+</script>
+
+<template>
+  <div class="ca-card ca-card-full">
+    <div class="ca-card-title">RFM 客户分层</div>
+    <div class="ca-rfm">
+      <div class="ca-rfm-header"></div>
+      <div
+        v-for="columnLabel in columnLabels"
+        :key="columnLabel"
+        class="ca-rfm-header"
+      >
+        {{ columnLabel }}
+      </div>
+
+      <template v-for="row in rows" :key="row.label">
+        <div class="ca-rfm-label">{{ row.label }}</div>
+        <button
+          v-for="cell in row.cells"
+          :key="cell.segmentCode"
+          class="ca-rfm-cell"
+          :class="resolveRfmCellToneClass(cell.tone)"
+          type="button"
+          @click="emit('segment', cell.segmentCode)"
+        >
+          <div class="ca-rfm-cell-num">{{ formatInteger(cell.count) }}人</div>
+          <div class="ca-rfm-cell-label">{{ cell.label }}</div>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/customer/analysis/components/SegmentDrawer.vue
+++ b/apps/web-antd/src/views/customer/analysis/components/SegmentDrawer.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
+
+import type {
+  CustomerAnalysisSegmentListItemDto,
+  CustomerAnalysisSegmentListResultDto,
+  CustomerTagDto,
+} from '#/api/customer';
+
+import { h } from 'vue';
+
+import { Button, Drawer, Input, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrencyWithFraction,
+  resolveTagColor,
+} from '../composables/customer-analysis-page/helpers';
+
+interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+interface Props {
+  keyword: string;
+  loading: boolean;
+  open: boolean;
+  pagination: PaginationState;
+  result: CustomerAnalysisSegmentListResultDto | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'detail', customerKey: string): void;
+  (event: 'member', customerKey: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+  (event: 'profile', customerKey: string): void;
+  (event: 'search'): void;
+  (event: 'update:keyword', value: string): void;
+}>();
+
+function renderCustomerCell(record: CustomerAnalysisSegmentListItemDto) {
+  return h('div', { class: 'ca-segment-customer' }, [
+    h(
+      'span',
+      {
+        class: 'ca-segment-avatar',
+        style: {
+          background: record.avatarColor || '#1677ff',
+        },
+      },
+      record.avatarText || record.name.slice(0, 1) || '客',
+    ),
+    h('div', { class: 'ca-segment-customer-main' }, [
+      h('div', { class: 'ca-segment-customer-name' }, record.name || '--'),
+      h(
+        'div',
+        { class: 'ca-segment-customer-phone' },
+        record.phoneMasked || '--',
+      ),
+    ]),
+  ]);
+}
+
+function renderTagList(tags: CustomerTagDto[]) {
+  if (tags.length === 0) {
+    return '--';
+  }
+
+  return h(
+    'div',
+    { class: 'ca-segment-tag-list' },
+    tags.map((tag) =>
+      h(
+        Tag,
+        {
+          color: resolveTagColor(tag.tone),
+        },
+        () => tag.label,
+      ),
+    ),
+  );
+}
+
+const columns: TableProps['columns'] = [
+  {
+    title: '客户',
+    dataIndex: 'name',
+    width: 220,
+    customRender: ({ record }) =>
+      renderCustomerCell(record as CustomerAnalysisSegmentListItemDto),
+  },
+  {
+    title: '累计消费',
+    dataIndex: 'totalAmount',
+    width: 120,
+    customRender: ({ text }) => formatCurrencyWithFraction(Number(text || 0)),
+  },
+  {
+    title: '下单次数',
+    dataIndex: 'orderCount',
+    width: 100,
+  },
+  {
+    title: '客单价',
+    dataIndex: 'averageAmount',
+    width: 100,
+    customRender: ({ text }) => formatCurrencyWithFraction(Number(text || 0)),
+  },
+  {
+    title: '最近下单',
+    dataIndex: 'lastOrderAt',
+    width: 120,
+  },
+  {
+    title: '会员等级',
+    dataIndex: 'memberTierName',
+    width: 110,
+    customRender: ({ record }) => {
+      const item = record as CustomerAnalysisSegmentListItemDto;
+      if (!item.isMember) {
+        return '--';
+      }
+      return item.memberTierName || '会员';
+    },
+  },
+  {
+    title: '标签',
+    dataIndex: 'tags',
+    customRender: ({ record }) =>
+      renderTagList((record as CustomerAnalysisSegmentListItemDto).tags),
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 160,
+    customRender: ({ record }) => {
+      const item = record as CustomerAnalysisSegmentListItemDto;
+      const actions = [
+        h(
+          Button,
+          {
+            type: 'link',
+            size: 'small',
+            class: 'ca-segment-action',
+            onClick: () => emit('detail', item.customerKey),
+          },
+          () => '详情',
+        ),
+        h(
+          Button,
+          {
+            type: 'link',
+            size: 'small',
+            class: 'ca-segment-action',
+            onClick: () => emit('profile', item.customerKey),
+          },
+          () => '画像',
+        ),
+      ];
+
+      if (item.isMember) {
+        actions.push(
+          h(
+            Button,
+            {
+              type: 'link',
+              size: 'small',
+              class: 'ca-segment-action',
+              onClick: () => emit('member', item.customerKey),
+            },
+            () => '会员',
+          ),
+        );
+      }
+
+      return h('div', { class: 'ca-segment-action-wrap' }, actions);
+    },
+  },
+];
+
+function handleTableChange(next: TablePaginationConfig) {
+  emit('pageChange', Number(next.current || 1), Number(next.pageSize || 10));
+}
+
+function resolveRowClassName(record: CustomerAnalysisSegmentListItemDto) {
+  return record.isDimmed ? 'ca-segment-row-dimmed' : '';
+}
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="980"
+    title="客群明细"
+    @close="emit('close')"
+  >
+    <div class="ca-segment-head">
+      <div class="ca-segment-title">
+        {{ props.result?.segmentTitle || '客群明细' }}
+      </div>
+      <div class="ca-segment-desc">
+        {{ props.result?.segmentDescription || '--' }}
+      </div>
+    </div>
+
+    <div class="ca-segment-toolbar">
+      <Input
+        class="ca-segment-search"
+        :value="props.keyword"
+        allow-clear
+        placeholder="搜索姓名 / 手机号"
+        @update:value="(value) => emit('update:keyword', String(value ?? ''))"
+        @press-enter="emit('search')"
+      />
+      <Button type="primary" @click="emit('search')">查询</Button>
+    </div>
+
+    <Table
+      row-key="customerKey"
+      :columns="columns"
+      :data-source="props.result?.items || []"
+      :loading="props.loading"
+      :pagination="{
+        current: props.pagination.page,
+        pageSize: props.pagination.pageSize,
+        total: props.pagination.total,
+        showSizeChanger: false,
+        showTotal: (total: number) => `共 ${total} 条`,
+      }"
+      :row-class-name="resolveRowClassName"
+      class="ca-segment-table"
+      @change="handleTableChange"
+    />
+  </Drawer>
+</template>
--- 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>
--- a/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/constants.ts
+++ b/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/constants.ts
@@ -0,0 +1,43 @@
+import type { OptionItem } from '../../types';
+
+import type {
+  CustomerAnalysisOverviewDto,
+  CustomerAnalysisPeriodFilter,
+  CustomerAnalysisSegmentCode,
+} from '#/api/customer';
+
+/** 客户分析查看权限。 */
+export const CUSTOMER_ANALYSIS_VIEW_PERMISSION =
+  'tenant:customer:analysis:view';
+
+/** 统计周期选项。 */
+export const ANALYSIS_PERIOD_OPTIONS: OptionItem[] = [
+  { label: '近7天', value: '7d' },
+  { label: '近30天', value: '30d' },
+  { label: '近90天', value: '90d' },
+  { label: '近1年', value: '365d' },
+];
+
+/** 默认统计周期。 */
+export const DEFAULT_PERIOD: CustomerAnalysisPeriodFilter = '30d';
+
+/** 默认分群。 */
+export const DEFAULT_SEGMENT_CODE: CustomerAnalysisSegmentCode = 'all';
+
+/** 默认总览数据。 */
+export const EMPTY_OVERVIEW: CustomerAnalysisOverviewDto = {
+  periodCode: DEFAULT_PERIOD,
+  periodDays: 30,
+  totalCustomers: 0,
+  newCustomers: 0,
+  growthRatePercent: 0,
+  newCustomersDailyAverage: 0,
+  activeCustomers: 0,
+  activeRatePercent: 0,
+  averageLifetimeValue: 0,
+  growthTrend: [],
+  composition: [],
+  amountDistribution: [],
+  rfmRows: [],
+  topCustomers: [],
+};
--- a/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/data-actions.ts
+++ b/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/data-actions.ts
@@ -0,0 +1,94 @@
+import type { Ref } from 'vue';
+
+import type { CustomerAnalysisOverviewDto } from '#/api/customer';
+import type { StoreListItemDto } from '#/api/store';
+
+import { getCustomerAnalysisOverviewApi } from '#/api/customer';
+import { getStoreListApi } from '#/api/store';
+
+import { EMPTY_OVERVIEW } from './constants';
+
+interface DataActionOptions {
+  isOverviewLoading: Ref<boolean>;
+  isStoreLoading: Ref<boolean>;
+  overview: Ref<CustomerAnalysisOverviewDto>;
+  period: Ref<'7d' | '30d' | '90d' | '365d'>;
+  selectedStoreId: Ref<string>;
+  stores: Ref<StoreListItemDto[]>;
+}
+
+/**
+ * 文件职责：客户分析页的数据加载动作。
+ */
+export function createDataActions(options: DataActionOptions) {
+  function resolvePeriodDays(period: '7d' | '30d' | '90d' | '365d'): number {
+    switch (period) {
+      case '7d': {
+        return 7;
+      }
+      case '90d': {
+        return 90;
+      }
+      case '365d': {
+        return 365;
+      }
+      default: {
+        return 30;
+      }
+    }
+  }
+
+  function resetOverview() {
+    options.overview.value = {
+      ...EMPTY_OVERVIEW,
+      periodCode: options.period.value,
+      periodDays: resolvePeriodDays(options.period.value),
+    };
+  }
+
+  async function loadStores() {
+    options.isStoreLoading.value = true;
+    try {
+      const result = await getStoreListApi({ page: 1, pageSize: 200 });
+      options.stores.value = result.items;
+
+      if (result.items.length === 0) {
+        options.selectedStoreId.value = '';
+        resetOverview();
+        return;
+      }
+
+      const matched = result.items.some(
+        (item) => item.id === options.selectedStoreId.value,
+      );
+      if (!matched) {
+        options.selectedStoreId.value = result.items[0]?.id ?? '';
+      }
+    } finally {
+      options.isStoreLoading.value = false;
+    }
+  }
+
+  async function loadOverview() {
+    if (!options.selectedStoreId.value) {
+      resetOverview();
+      return;
+    }
+
+    options.isOverviewLoading.value = true;
+    try {
+      options.overview.value = await getCustomerAnalysisOverviewApi({
+        storeId: options.selectedStoreId.value,
+        period: options.period.value,
+      });
+    } finally {
+      options.isOverviewLoading.value = false;
+    }
+  }
+
+  return {
+    loadOverview,
+    loadStores,
+    resetOverview,
+  };
+}
--- a/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/drawer-actions.ts
+++ b/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/drawer-actions.ts
@@ -0,0 +1,84 @@
+import type { Ref } from 'vue';
+
+import type { CustomerDetailDto, CustomerProfileDto } from '#/api/customer';
+
+import {
+  getCustomerAnalysisDetailApi,
+  getCustomerAnalysisProfileApi,
+} from '#/api/customer';
+
+interface DrawerActionOptions {
+  detail: Ref<CustomerDetailDto | null>;
+  isDetailDrawerOpen: Ref<boolean>;
+  isDetailLoading: Ref<boolean>;
+  isProfileDrawerOpen: Ref<boolean>;
+  isProfileLoading: Ref<boolean>;
+  profile: Ref<CustomerProfileDto | null>;
+  selectedStoreId: Ref<string>;
+}
+
+/**
+ * 文件职责：客户分析页客户详情与画像抽屉动作。
+ */
+export function createDrawerActions(options: DrawerActionOptions) {
+  function setDetailDrawerOpen(value: boolean) {
+    options.isDetailDrawerOpen.value = value;
+    if (!value) {
+      options.detail.value = null;
+      options.isProfileDrawerOpen.value = false;
+      options.profile.value = null;
+    }
+  }
+
+  function setProfileDrawerOpen(value: boolean) {
+    options.isProfileDrawerOpen.value = value;
+    if (!value) {
+      options.profile.value = null;
+    }
+  }
+
+  async function openDetail(customerKey: string) {
+    if (!options.selectedStoreId.value || !customerKey) {
+      return;
+    }
+
+    options.isDetailDrawerOpen.value = true;
+    options.detail.value = null;
+    options.isProfileDrawerOpen.value = false;
+    options.profile.value = null;
+    options.isDetailLoading.value = true;
+    try {
+      options.detail.value = await getCustomerAnalysisDetailApi({
+        storeId: options.selectedStoreId.value,
+        customerKey,
+      });
+    } finally {
+      options.isDetailLoading.value = false;
+    }
+  }
+
+  async function openProfile(customerKey: string) {
+    if (!options.selectedStoreId.value || !customerKey) {
+      return;
+    }
+
+    options.isProfileDrawerOpen.value = true;
+    options.profile.value = null;
+    options.isProfileLoading.value = true;
+    try {
+      options.profile.value = await getCustomerAnalysisProfileApi({
+        storeId: options.selectedStoreId.value,
+        customerKey,
+      });
+    } finally {
+      options.isProfileLoading.value = false;
+    }
+  }
+
+  return {
+    openDetail,
+    openProfile,
+    setDetailDrawerOpen,
+    setProfileDrawerOpen,
+  };
+}
--- a/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/export-actions.ts
+++ b/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/export-actions.ts
@@ -0,0 +1,46 @@
+import type { Ref } from 'vue';
+
+import { message } from 'ant-design-vue';
+
+import { exportCustomerAnalysisCsvApi } from '#/api/customer';
+
+import { downloadBase64File } from './helpers';
+
+interface ExportActionOptions {
+  canExport: Ref<boolean>;
+  isExporting: Ref<boolean>;
+  period: Ref<'7d' | '30d' | '90d' | '365d'>;
+  selectedStoreId: Ref<string>;
+}
+
+/**
+ * 文件职责：客户分析报表导出动作。
+ */
+export function createExportActions(options: ExportActionOptions) {
+  async function handleExport() {
+    if (!options.selectedStoreId.value) {
+      return;
+    }
+
+    if (!options.canExport.value) {
+      message.warning('暂无导出权限');
+      return;
+    }
+
+    options.isExporting.value = true;
+    try {
+      const result = await exportCustomerAnalysisCsvApi({
+        storeId: options.selectedStoreId.value,
+        period: options.period.value,
+      });
+      downloadBase64File(result.fileName, result.fileContentBase64);
+      message.success('客户分析报表导出成功');
+    } finally {
+      options.isExporting.value = false;
+    }
+  }
+
+  return {
+    handleExport,
+  };
+}
--- a/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/helpers.ts
+++ b/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/helpers.ts
@@ -0,0 +1,90 @@
+export function formatCurrency(value: number) {
+  return new Intl.NumberFormat('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(Number.isFinite(value) ? value : 0);
+}
+
+export function formatCurrencyWithFraction(value: number) {
+  return new Intl.NumberFormat('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(Number.isFinite(value) ? value : 0);
+}
+
+export function formatInteger(value: number) {
+  return new Intl.NumberFormat('zh-CN', {
+    maximumFractionDigits: 0,
+  }).format(Number.isFinite(value) ? value : 0);
+}
+
+export function formatPercent(value: number) {
+  if (!Number.isFinite(value)) {
+    return '0%';
+  }
+  return `${value.toFixed(1).replace(/\.0$/, '')}%`;
+}
+
+export function formatSignedPercent(value: number) {
+  const normalized = Number.isFinite(value) ? value : 0;
+  const sign = normalized > 0 ? '+' : '';
+  return `${sign}${formatPercent(normalized)}`;
+}
+
+export function resolveTagColor(tone: string) {
+  if (tone === 'orange') return 'orange';
+  if (tone === 'green') return 'green';
+  if (tone === 'gray') return 'default';
+  if (tone === 'red') return 'red';
+  return 'blue';
+}
+
+export function resolveRfmCellToneClass(tone: string) {
+  if (tone === 'hot') return 'hot';
+  if (tone === 'warm') return 'warm';
+  if (tone === 'cool') return 'cool';
+  return 'cold';
+}
+
+export function resolveCompositionToneColor(tone: string) {
+  if (tone === 'green') return '#52c41a';
+  if (tone === 'orange') return '#fa8c16';
+  if (tone === 'gray') return '#e5e7eb';
+  return '#1677ff';
+}
+
+export function resolveDistributionColor(index: number) {
+  const palette = ['#7fb4ff', '#4a95ff', '#1677ff', '#1061d6', '#0a4eaf'];
+  return palette[Math.max(0, Math.min(index, palette.length - 1))] ?? '#1677ff';
+}
+
+export function resolveAvatarText(name: string) {
+  const normalized = String(name || '').trim();
+  return normalized ? normalized.slice(0, 1) : '客';
+}
+
+function decodeBase64ToBlob(base64: string) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.codePointAt(index) ?? 0;
+  }
+  return new Blob([bytes], { type: 'text/csv;charset=utf-8;' });
+}
+
+export function downloadBase64File(
+  fileName: string,
+  fileContentBase64: string,
+) {
+  const blob = decodeBase64ToBlob(fileContentBase64);
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = fileName;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
--- a/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/member-actions.ts
+++ b/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/member-actions.ts
@@ -0,0 +1,47 @@
+import type { Ref } from 'vue';
+
+import type { CustomerMemberDetailDto } from '#/api/customer';
+
+import { getCustomerMemberDetailApi } from '#/api/customer';
+
+interface MemberActionOptions {
+  detail: Ref<CustomerMemberDetailDto | null>;
+  isMemberDrawerOpen: Ref<boolean>;
+  isMemberLoading: Ref<boolean>;
+  selectedStoreId: Ref<string>;
+}
+
+/**
+ * 文件职责：客户分析页会员详情抽屉动作。
+ */
+export function createMemberActions(options: MemberActionOptions) {
+  function setMemberDrawerOpen(value: boolean) {
+    options.isMemberDrawerOpen.value = value;
+    if (!value) {
+      options.detail.value = null;
+    }
+  }
+
+  async function openMember(customerKey: string) {
+    if (!options.selectedStoreId.value || !customerKey) {
+      return;
+    }
+
+    options.isMemberDrawerOpen.value = true;
+    options.detail.value = null;
+    options.isMemberLoading.value = true;
+    try {
+      options.detail.value = await getCustomerMemberDetailApi({
+        storeId: options.selectedStoreId.value,
+        customerKey,
+      });
+    } finally {
+      options.isMemberLoading.value = false;
+    }
+  }
+
+  return {
+    openMember,
+    setMemberDrawerOpen,
+  };
+}
--- a/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/segment-actions.ts
+++ b/apps/web-antd/src/views/customer/analysis/composables/customer-analysis-page/segment-actions.ts
@@ -0,0 +1,99 @@
+import type { Ref } from 'vue';
+
+import type {
+  CustomerAnalysisSegmentCode,
+  CustomerAnalysisSegmentListResultDto,
+} from '#/api/customer';
+
+import { getCustomerAnalysisSegmentListApi } from '#/api/customer';
+
+interface SegmentPagination {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+interface SegmentActionOptions {
+  currentSegmentCode: Ref<CustomerAnalysisSegmentCode>;
+  isSegmentDrawerOpen: Ref<boolean>;
+  isSegmentLoading: Ref<boolean>;
+  keyword: Ref<string>;
+  pagination: SegmentPagination;
+  period: Ref<'7d' | '30d' | '90d' | '365d'>;
+  result: Ref<CustomerAnalysisSegmentListResultDto | null>;
+  selectedStoreId: Ref<string>;
+}
+
+/**
+ * 文件职责：客户分析页客群明细抽屉动作。
+ */
+export function createSegmentActions(options: SegmentActionOptions) {
+  function setSegmentDrawerOpen(value: boolean) {
+    options.isSegmentDrawerOpen.value = value;
+    if (!value) {
+      options.result.value = null;
+      options.keyword.value = '';
+      options.pagination.page = 1;
+      options.pagination.total = 0;
+    }
+  }
+
+  function setSegmentKeyword(value: string) {
+    options.keyword.value = value;
+  }
+
+  async function loadSegmentData() {
+    if (!options.selectedStoreId.value) {
+      options.result.value = null;
+      options.pagination.total = 0;
+      return;
+    }
+
+    options.isSegmentLoading.value = true;
+    try {
+      const result = await getCustomerAnalysisSegmentListApi({
+        storeId: options.selectedStoreId.value,
+        period: options.period.value,
+        segmentCode: options.currentSegmentCode.value,
+        keyword: options.keyword.value.trim() || undefined,
+        page: options.pagination.page,
+        pageSize: options.pagination.pageSize,
+      });
+
+      options.result.value = result;
+      options.pagination.page = result.page;
+      options.pagination.pageSize = result.pageSize;
+      options.pagination.total = result.totalCount;
+    } finally {
+      options.isSegmentLoading.value = false;
+    }
+  }
+
+  async function openSegment(segmentCode: CustomerAnalysisSegmentCode) {
+    options.currentSegmentCode.value = segmentCode;
+    options.keyword.value = '';
+    options.pagination.page = 1;
+    options.isSegmentDrawerOpen.value = true;
+    await loadSegmentData();
+  }
+
+  async function handleSegmentSearch() {
+    options.pagination.page = 1;
+    await loadSegmentData();
+  }
+
+  async function handleSegmentPageChange(page: number, pageSize: number) {
+    options.pagination.page = page;
+    options.pagination.pageSize = pageSize;
+    await loadSegmentData();
+  }
+
+  return {
+    handleSegmentPageChange,
+    handleSegmentSearch,
+    loadSegmentData,
+    openSegment,
+    setSegmentDrawerOpen,
+    setSegmentKeyword,
+  };
+}
--- a/apps/web-antd/src/views/customer/analysis/composables/useCustomerAnalysisPage.ts
+++ b/apps/web-antd/src/views/customer/analysis/composables/useCustomerAnalysisPage.ts
@@ -0,0 +1,244 @@
+import type {
+  CustomerAnalysisOverviewDto,
+  CustomerAnalysisPeriodFilter,
+  CustomerAnalysisSegmentCode,
+  CustomerAnalysisSegmentListResultDto,
+  CustomerDetailDto,
+  CustomerMemberDetailDto,
+  CustomerProfileDto,
+} from '#/api/customer';
+import type { StoreListItemDto } from '#/api/store';
+
+import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useAccessStore } from '@vben/stores';
+
+import { createNavigationActions } from '#/views/customer/list/composables/customer-list-page/navigation-actions';
+
+import {
+  CUSTOMER_ANALYSIS_VIEW_PERMISSION,
+  DEFAULT_PERIOD,
+  DEFAULT_SEGMENT_CODE,
+  EMPTY_OVERVIEW,
+} from './customer-analysis-page/constants';
+import { createDataActions } from './customer-analysis-page/data-actions';
+import { createDrawerActions } from './customer-analysis-page/drawer-actions';
+import { createExportActions } from './customer-analysis-page/export-actions';
+import { createMemberActions } from './customer-analysis-page/member-actions';
+import { createSegmentActions } from './customer-analysis-page/segment-actions';
+
+export function useCustomerAnalysisPage() {
+  const accessStore = useAccessStore();
+  const router = useRouter();
+
+  const stores = ref<StoreListItemDto[]>([]);
+  const selectedStoreId = ref('');
+  const isStoreLoading = ref(false);
+
+  const period = ref<CustomerAnalysisPeriodFilter>(DEFAULT_PERIOD);
+  const overview = ref<CustomerAnalysisOverviewDto>({ ...EMPTY_OVERVIEW });
+  const isOverviewLoading = ref(false);
+
+  const segmentResult = ref<CustomerAnalysisSegmentListResultDto | null>(null);
+  const isSegmentDrawerOpen = ref(false);
+  const isSegmentLoading = ref(false);
+  const segmentKeyword = ref('');
+  const currentSegmentCode =
+    ref<CustomerAnalysisSegmentCode>(DEFAULT_SEGMENT_CODE);
+  const segmentPagination = reactive({
+    page: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const detail = ref<CustomerDetailDto | null>(null);
+  const isDetailDrawerOpen = ref(false);
+  const isDetailLoading = ref(false);
+
+  const profile = ref<CustomerProfileDto | null>(null);
+  const isProfileDrawerOpen = ref(false);
+  const isProfileLoading = ref(false);
+
+  const memberDetail = ref<CustomerMemberDetailDto | null>(null);
+  const isMemberDrawerOpen = ref(false);
+  const isMemberLoading = ref(false);
+
+  const isExporting = ref(false);
+
+  const storeOptions = computed(() =>
+    stores.value.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })),
+  );
+
+  const accessCodeSet = computed(
+    () => new Set((accessStore.accessCodes ?? []).map(String)),
+  );
+  const canExport = computed(() =>
+    accessCodeSet.value.has(CUSTOMER_ANALYSIS_VIEW_PERMISSION),
+  );
+
+  const { loadStores, loadOverview, resetOverview } = createDataActions({
+    stores,
+    selectedStoreId,
+    period,
+    overview,
+    isStoreLoading,
+    isOverviewLoading,
+  });
+
+  const {
+    openSegment,
+    loadSegmentData,
+    setSegmentDrawerOpen,
+    setSegmentKeyword,
+    handleSegmentSearch,
+    handleSegmentPageChange,
+  } = createSegmentActions({
+    selectedStoreId,
+    period,
+    currentSegmentCode,
+    keyword: segmentKeyword,
+    result: segmentResult,
+    isSegmentDrawerOpen,
+    isSegmentLoading,
+    pagination: segmentPagination,
+  });
+
+  const { openMember, setMemberDrawerOpen } = createMemberActions({
+    selectedStoreId,
+    detail: memberDetail,
+    isMemberDrawerOpen,
+    isMemberLoading,
+  });
+
+  const { openDetail, openProfile, setDetailDrawerOpen, setProfileDrawerOpen } =
+    createDrawerActions({
+      selectedStoreId,
+      detail,
+      isDetailDrawerOpen,
+      isDetailLoading,
+      profile,
+      isProfileDrawerOpen,
+      isProfileLoading,
+    });
+
+  const { openProfilePage } = createNavigationActions({
+    selectedStoreId,
+    router,
+  });
+
+  const { handleExport } = createExportActions({
+    selectedStoreId,
+    period,
+    isExporting,
+    canExport,
+  });
+
+  function setSelectedStoreId(value: string) {
+    selectedStoreId.value = value;
+  }
+
+  function setPeriod(value: string) {
+    const normalized = (value ||
+      DEFAULT_PERIOD) as CustomerAnalysisPeriodFilter;
+    period.value = normalized;
+  }
+
+  async function openSegmentByCode(segmentCode: CustomerAnalysisSegmentCode) {
+    await openSegment(segmentCode);
+  }
+
+  async function openTopCustomerDetail(customerKey: string) {
+    await openDetail(customerKey);
+  }
+
+  async function openMemberFromDetail(customerKey: string) {
+    await openMember(customerKey);
+  }
+
+  watch(selectedStoreId, async (storeId) => {
+    if (!storeId) {
+      resetOverview();
+      segmentResult.value = null;
+      segmentPagination.total = 0;
+      setDetailDrawerOpen(false);
+      setProfileDrawerOpen(false);
+      setMemberDrawerOpen(false);
+      isSegmentDrawerOpen.value = false;
+      return;
+    }
+
+    await loadOverview();
+    if (isSegmentDrawerOpen.value) {
+      await loadSegmentData();
+    }
+  });
+
+  watch(period, async () => {
+    if (!selectedStoreId.value) {
+      resetOverview();
+      return;
+    }
+
+    await loadOverview();
+    if (isSegmentDrawerOpen.value) {
+      await loadSegmentData();
+    }
+  });
+
+  onMounted(() => {
+    void loadStores();
+  });
+
+  onActivated(() => {
+    if (stores.value.length === 0 || !selectedStoreId.value) {
+      void loadStores();
+    }
+  });
+
+  return {
+    canExport,
+    currentSegmentCode,
+    detail,
+    handleExport,
+    handleSegmentPageChange,
+    handleSegmentSearch,
+    isDetailDrawerOpen,
+    isDetailLoading,
+    isExporting,
+    isMemberDrawerOpen,
+    isMemberLoading,
+    isOverviewLoading,
+    isProfileDrawerOpen,
+    isProfileLoading,
+    isSegmentDrawerOpen,
+    isSegmentLoading,
+    isStoreLoading,
+    memberDetail,
+    openDetail,
+    openMember,
+    openMemberFromDetail,
+    openProfile,
+    openProfilePage,
+    openSegmentByCode,
+    openTopCustomerDetail,
+    overview,
+    period,
+    profile,
+    segmentKeyword,
+    segmentPagination,
+    segmentResult,
+    selectedStoreId,
+    setDetailDrawerOpen,
+    setMemberDrawerOpen,
+    setPeriod,
+    setProfileDrawerOpen,
+    setSegmentDrawerOpen,
+    setSegmentKeyword,
+    setSelectedStoreId,
+    storeOptions,
+  };
+}
--- a/apps/web-antd/src/views/customer/analysis/index.vue
+++ b/apps/web-antd/src/views/customer/analysis/index.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+
+import { Empty, Spin } from 'ant-design-vue';
+
+import CustomerDetailDrawer from '#/views/customer/list/components/CustomerDetailDrawer.vue';
+import CustomerProfileDrawer from '#/views/customer/list/components/CustomerProfileDrawer.vue';
+
+import AmountDistributionCard from './components/AmountDistributionCard.vue';
+import AnalysisStatsGrid from './components/AnalysisStatsGrid.vue';
+import AnalysisToolbar from './components/AnalysisToolbar.vue';
+import CompositionCard from './components/CompositionCard.vue';
+import GrowthTrendCard from './components/GrowthTrendCard.vue';
+import MemberDetailDrawer from './components/MemberDetailDrawer.vue';
+import RfmMatrixCard from './components/RfmMatrixCard.vue';
+import SegmentDrawer from './components/SegmentDrawer.vue';
+import TopCustomerTableCard from './components/TopCustomerTableCard.vue';
+import { useCustomerAnalysisPage } from './composables/useCustomerAnalysisPage';
+
+const {
+  detail,
+  handleExport,
+  handleSegmentPageChange,
+  handleSegmentSearch,
+  isDetailDrawerOpen,
+  isDetailLoading,
+  isExporting,
+  isMemberDrawerOpen,
+  isMemberLoading,
+  isOverviewLoading,
+  isProfileDrawerOpen,
+  isProfileLoading,
+  isSegmentDrawerOpen,
+  isSegmentLoading,
+  isStoreLoading,
+  memberDetail,
+  openDetail,
+  openMember,
+  openMemberFromDetail,
+  openProfile,
+  openProfilePage,
+  openSegmentByCode,
+  openTopCustomerDetail,
+  overview,
+  period,
+  profile,
+  segmentKeyword,
+  segmentPagination,
+  segmentResult,
+  selectedStoreId,
+  setDetailDrawerOpen,
+  setMemberDrawerOpen,
+  setPeriod,
+  setProfileDrawerOpen,
+  setSegmentDrawerOpen,
+  setSegmentKeyword,
+  setSelectedStoreId,
+  storeOptions,
+} = useCustomerAnalysisPage();
+</script>
+
+<template>
+  <Page title="客户分析" content-class="page-customer-analysis">
+    <div class="ca-page">
+      <AnalysisToolbar
+        :selected-store-id="selectedStoreId"
+        :store-options="storeOptions"
+        :is-store-loading="isStoreLoading"
+        :period="period"
+        :is-exporting="isExporting"
+        @update:selected-store-id="setSelectedStoreId"
+        @update:period="setPeriod"
+        @export="handleExport"
+      />
+
+      <div v-if="!selectedStoreId" class="ca-empty">
+        <Empty description="暂无门店，请先创建门店" />
+      </div>
+
+      <Spin v-else :spinning="isOverviewLoading">
+        <AnalysisStatsGrid :overview="overview" @segment="openSegmentByCode" />
+
+        <div class="ca-grid">
+          <GrowthTrendCard
+            :points="overview.growthTrend"
+            @segment="openSegmentByCode"
+          />
+
+          <CompositionCard
+            :items="overview.composition"
+            :total-customers="overview.totalCustomers"
+            @segment="openSegmentByCode"
+          />
+
+          <AmountDistributionCard
+            :items="overview.amountDistribution"
+            @segment="openSegmentByCode"
+          />
+
+          <RfmMatrixCard
+            :rows="overview.rfmRows"
+            @segment="openSegmentByCode"
+          />
+
+          <TopCustomerTableCard
+            :rows="overview.topCustomers"
+            @detail="openTopCustomerDetail"
+            @segment="openSegmentByCode"
+          />
+        </div>
+      </Spin>
+    </div>
+
+    <SegmentDrawer
+      :open="isSegmentDrawerOpen"
+      :loading="isSegmentLoading"
+      :result="segmentResult"
+      :pagination="segmentPagination"
+      :keyword="segmentKeyword"
+      @close="setSegmentDrawerOpen(false)"
+      @update:keyword="setSegmentKeyword"
+      @search="handleSegmentSearch"
+      @page-change="handleSegmentPageChange"
+      @detail="openDetail"
+      @profile="openProfile"
+      @member="openMember"
+    />
+
+    <CustomerDetailDrawer
+      :open="isDetailDrawerOpen"
+      :loading="isDetailLoading"
+      :detail="detail"
+      :show-member-action="true"
+      @close="setDetailDrawerOpen(false)"
+      @profile="openProfile"
+      @profile-page="openProfilePage"
+      @member="openMemberFromDetail"
+    />
+
+    <CustomerProfileDrawer
+      :open="isProfileDrawerOpen"
+      :loading="isProfileLoading"
+      :profile="profile"
+      @close="setProfileDrawerOpen(false)"
+    />
+
+    <MemberDetailDrawer
+      :open="isMemberDrawerOpen"
+      :loading="isMemberLoading"
+      :detail="memberDetail"
+      @close="setMemberDrawerOpen(false)"
+    />
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>
--- a/apps/web-antd/src/views/customer/analysis/styles/base.less
+++ b/apps/web-antd/src/views/customer/analysis/styles/base.less
@@ -0,0 +1,35 @@
+.page-customer-analysis {
+  .ant-card {
+    border-radius: 10px;
+  }
+
+  .ant-drawer {
+    .ant-drawer-header {
+      padding: 14px 18px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .ant-drawer-body {
+      padding: 16px 20px;
+    }
+
+    .ant-drawer-footer {
+      padding: 12px 20px;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+}
+
+.ca-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ca-empty {
+  padding: 48px 16px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+}
--- a/apps/web-antd/src/views/customer/analysis/styles/cards.less
+++ b/apps/web-antd/src/views/customer/analysis/styles/cards.less
@@ -0,0 +1,327 @@
+.ca-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.ca-stat {
+  display: block;
+  padding: 16px 20px;
+  text-align: left;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+  transition: all 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 6px 14px rgb(15 23 42 / 10%);
+    transform: translateY(-1px);
+  }
+
+  .label {
+    margin-bottom: 6px;
+    font-size: 13px;
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .val {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: rgb(0 0 0 / 88%);
+
+    &.blue {
+      color: #1677ff;
+    }
+
+    &.green {
+      color: #52c41a;
+    }
+
+    &.orange {
+      color: #fa8c16;
+    }
+  }
+
+  .sub {
+    margin-top: 4px;
+    font-size: 12px;
+    color: rgb(0 0 0 / 45%);
+  }
+}
+
+.ca-bars {
+  display: flex;
+  gap: 6px;
+  align-items: flex-end;
+  height: 140px;
+}
+
+.ca-bar-col {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  min-width: 0;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.ca-bar-val {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: rgb(0 0 0 / 65%);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.ca-bar {
+  width: 100%;
+  background: #1677ff;
+  border-radius: 4px 4px 0 0;
+  opacity: 0.8;
+  transition: all 0.2s ease;
+}
+
+.ca-bar-col:hover .ca-bar {
+  opacity: 1;
+}
+
+.ca-bar-lbl {
+  font-size: 11px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.ca-donut-wrap {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.ca-donut {
+  position: relative;
+  flex-shrink: 0;
+  width: 130px;
+  height: 130px;
+  border-radius: 50%;
+}
+
+.ca-donut-hole {
+  position: absolute;
+  inset: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 50%;
+
+  .num {
+    font-size: 18px;
+    font-weight: 700;
+    color: rgb(0 0 0 / 88%);
+  }
+
+  .lbl {
+    font-size: 11px;
+    color: rgb(0 0 0 / 45%);
+  }
+}
+
+.ca-legend {
+  flex: 1;
+  min-width: 0;
+}
+
+.ca-legend-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  padding: 6px 0;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.ca-legend-dot {
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+}
+
+.ca-legend-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: rgb(0 0 0 / 65%);
+  white-space: nowrap;
+}
+
+.ca-legend-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+}
+
+.ca-dist-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.ca-dist-label {
+  flex-shrink: 0;
+  width: 90px;
+  font-size: 13px;
+  color: rgb(0 0 0 / 65%);
+}
+
+.ca-dist-bar {
+  flex: 1;
+  height: 20px;
+  overflow: hidden;
+  background: #f0f0f0;
+  border-radius: 4px;
+}
+
+.ca-dist-bar-inner {
+  display: inline-flex;
+  height: 100%;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.ca-dist-val {
+  flex-shrink: 0;
+  width: 60px;
+  font-weight: 500;
+  color: rgb(0 0 0 / 88%);
+  text-align: right;
+}
+
+.ca-rfm {
+  display: grid;
+  grid-template-columns: auto repeat(4, minmax(0, 1fr));
+  gap: 2px;
+  font-size: 12px;
+}
+
+.ca-rfm-header {
+  padding: 8px;
+  font-weight: 600;
+  color: #6b7280;
+  text-align: center;
+  background: #f8f9fb;
+}
+
+.ca-rfm-label {
+  padding: 8px 10px;
+  font-weight: 600;
+  color: #6b7280;
+  white-space: nowrap;
+  background: #f8f9fb;
+}
+
+.ca-rfm-cell {
+  padding: 10px 8px;
+  text-align: center;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: scale(1.03);
+  }
+
+  &.hot {
+    color: #1677ff;
+    background: rgb(22 119 255 / 18%);
+  }
+
+  &.warm {
+    color: #1677ff;
+    background: rgb(22 119 255 / 10%);
+  }
+
+  &.cool {
+    color: #fa8c16;
+    background: rgb(250 140 22 / 10%);
+  }
+
+  &.cold {
+    color: rgb(0 0 0 / 45%);
+    background: #f8f9fb;
+  }
+}
+
+.ca-rfm-cell-num {
+  font-weight: 600;
+}
+
+.ca-rfm-cell-label {
+  margin-top: 2px;
+  font-size: 11px;
+  opacity: 0.75;
+}
+
+.ca-top-card {
+  overflow: hidden;
+}
+
+.ca-top-segment-btn {
+  padding-inline: 0;
+}
+
+.ca-top-table {
+  .ant-table-thead > tr > th {
+    font-size: 13px;
+    white-space: nowrap;
+    background: #f8f9fb;
+  }
+
+  .ant-table-tbody > tr > td {
+    vertical-align: middle;
+  }
+}
+
+.ca-top-rank {
+  font-weight: 700;
+  color: #1677ff;
+}
+
+.ca-top-money {
+  font-weight: 600;
+}
+
+.ca-top-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  .ant-tag {
+    margin-inline-end: 0;
+  }
+}
+
+.ca-top-action {
+  padding-inline: 0;
+}
--- a/apps/web-antd/src/views/customer/analysis/styles/drawer.less
+++ b/apps/web-antd/src/views/customer/analysis/styles/drawer.less
@@ -0,0 +1,229 @@
+.ca-segment-head {
+  margin-bottom: 12px;
+}
+
+.ca-segment-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+}
+
+.ca-segment-desc {
+  margin-top: 3px;
+  font-size: 13px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.ca-segment-toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+
+  .ca-segment-search {
+    width: 260px;
+  }
+}
+
+.ca-segment-table {
+  .ant-table-thead > tr > th {
+    white-space: nowrap;
+    background: #f8f9fb;
+  }
+
+  .ant-pagination {
+    margin: 14px 0 0;
+  }
+}
+
+.ca-segment-customer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.ca-segment-avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.ca-segment-customer-main {
+  min-width: 0;
+}
+
+.ca-segment-customer-name {
+  font-weight: 500;
+  color: rgb(0 0 0 / 88%);
+}
+
+.ca-segment-customer-phone {
+  margin-top: 2px;
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.ca-segment-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  .ant-tag {
+    margin-inline-end: 0;
+  }
+}
+
+.ca-segment-action-wrap {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.ca-segment-action {
+  padding-inline: 0;
+}
+
+.ca-segment-row-dimmed td {
+  opacity: 0.55;
+}
+
+.ca-segment-row-dimmed:hover td {
+  opacity: 0.78;
+}
+
+.ca-member-head {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  padding-bottom: 16px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.ca-member-avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  background: #1677ff;
+  border-radius: 50%;
+}
+
+.ca-member-head-main {
+  min-width: 0;
+}
+
+.ca-member-name-wrap {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ca-member-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+}
+
+.ca-member-meta {
+  margin-top: 3px;
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.ca-member-overview {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.ca-member-ov-item {
+  padding: 12px 8px;
+  text-align: center;
+  background: #f8f9fb;
+  border-radius: 8px;
+}
+
+.ca-member-ov-val {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  font-weight: 700;
+  color: rgb(0 0 0 / 88%);
+  white-space: nowrap;
+}
+
+.ca-member-ov-label {
+  margin-top: 4px;
+  font-size: 11px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.ca-member-section {
+  margin-bottom: 20px;
+}
+
+.ca-member-section-title {
+  padding-left: 10px;
+  margin-bottom: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  border-left: 3px solid #1677ff;
+}
+
+.ca-member-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+
+  .ant-tag {
+    margin-inline-end: 0;
+  }
+}
+
+.ca-member-empty-text {
+  font-size: 13px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.ca-member-order-table {
+  .ant-table-thead > tr > th {
+    font-size: 12px;
+    white-space: nowrap;
+    background: #f8f9fb;
+  }
+}
+
+.ca-member-order-status {
+  font-weight: 600;
+
+  &.success {
+    color: #52c41a;
+  }
+
+  &.danger {
+    color: #ff4d4f;
+  }
+
+  &.processing {
+    color: #1677ff;
+  }
+
+  &.default {
+    color: rgb(0 0 0 / 65%);
+  }
+}
--- a/apps/web-antd/src/views/customer/analysis/styles/index.less
+++ b/apps/web-antd/src/views/customer/analysis/styles/index.less
@@ -0,0 +1,9 @@
+@import './base.less';
+@import './layout.less';
+@import './cards.less';
+@import './drawer.less';
+@import '../../list/styles/drawer.less';
+@import '../../profile/styles/card.less';
+@import '../../profile/styles/table.less';
+@import '../../profile/styles/responsive.less';
+@import './responsive.less';
--- a/apps/web-antd/src/views/customer/analysis/styles/layout.less
+++ b/apps/web-antd/src/views/customer/analysis/styles/layout.less
@@ -0,0 +1,71 @@
+.ca-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  padding: 12px 14px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+
+  .ca-store-select {
+    width: 220px;
+  }
+
+  .ca-period-label {
+    font-size: 13px;
+    color: rgb(0 0 0 / 65%);
+  }
+
+  .ca-period-segment {
+    .ant-segmented-item {
+      min-width: 64px;
+      text-align: center;
+    }
+  }
+
+  .ca-export-btn {
+    margin-left: auto;
+  }
+}
+
+.ca-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 12px;
+}
+
+.ca-card {
+  padding: 20px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+}
+
+.ca-card-full {
+  grid-column: 1 / -1;
+}
+
+.ca-card-title-wrap {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.ca-card-title {
+  padding-left: 10px;
+  margin-bottom: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  border-left: 3px solid #1677ff;
+}
+
+.ca-card-title-wrap .ca-card-title {
+  margin-bottom: 0;
+}
--- a/apps/web-antd/src/views/customer/analysis/styles/responsive.less
+++ b/apps/web-antd/src/views/customer/analysis/styles/responsive.less
@@ -0,0 +1,68 @@
+@media (max-width: 1600px) {
+  .ca-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ca-member-overview {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1024px) {
+  .ca-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .ca-card-full {
+    grid-column: auto;
+  }
+
+  .ca-toolbar {
+    .ca-store-select {
+      width: 100%;
+    }
+
+    .ca-export-btn {
+      margin-left: 0;
+    }
+  }
+
+  .ca-segment-toolbar {
+    .ca-segment-search {
+      width: 100%;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .ca-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .ca-donut-wrap {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .ca-member-overview {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ca-toolbar {
+    .ca-period-label {
+      width: 100%;
+    }
+
+    .ca-period-segment {
+      width: 100%;
+    }
+
+    .ca-export-btn {
+      width: 100%;
+    }
+  }
+
+  .ca-segment-toolbar {
+    flex-wrap: wrap;
+  }
+}
--- a/apps/web-antd/src/views/customer/analysis/types.ts
+++ b/apps/web-antd/src/views/customer/analysis/types.ts
@@ -0,0 +1,42 @@
+import type {
+  CustomerAnalysisOverviewDto,
+  CustomerAnalysisPeriodFilter,
+  CustomerAnalysisSegmentCode,
+  CustomerAnalysisSegmentListResultDto,
+  CustomerDetailDto,
+  CustomerMemberDetailDto,
+  CustomerProfileDto,
+} from '#/api/customer';
+
+export interface OptionItem {
+  label: string;
+  value: string;
+}
+
+export interface CustomerAnalysisPagePagination {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface CustomerAnalysisPageState {
+  detail: CustomerDetailDto | null;
+  isDetailDrawerOpen: boolean;
+  isDetailLoading: boolean;
+  isExporting: boolean;
+  isMemberDrawerOpen: boolean;
+  isMemberLoading: boolean;
+  isOverviewLoading: boolean;
+  isProfileDrawerOpen: boolean;
+  isProfileLoading: boolean;
+  isSegmentDrawerOpen: boolean;
+  isSegmentLoading: boolean;
+  memberDetail: CustomerMemberDetailDto | null;
+  overview: CustomerAnalysisOverviewDto;
+  pagination: CustomerAnalysisPagePagination;
+  period: CustomerAnalysisPeriodFilter;
+  profile: CustomerProfileDto | null;
+  segmentCode: CustomerAnalysisSegmentCode;
+  segmentKeyword: string;
+  segmentResult: CustomerAnalysisSegmentListResultDto | null;
+}
--- a/apps/web-antd/src/views/customer/list/components/CustomerDetailDrawer.vue
+++ b/apps/web-antd/src/views/customer/list/components/CustomerDetailDrawer.vue
@@ -15,12 +15,16 @@ interface Props {
  detail: CustomerDetailDto | null;
  loading: boolean;
  open: boolean;
+  showMemberAction?: boolean;
 }

-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  showMemberAction: false,
+});

 const emit = defineEmits<{
  (event: 'close'): void;
+  (event: 'member', customerKey: string): void;
  (event: 'profile', customerKey: string): void;
  (event: 'profilePage', customerKey: string): void;
 }>();
@@ -60,6 +64,15 @@ function handleOpenProfilePage() {

  emit('profilePage', customerKey);
 }
+
+function handleOpenMember() {
+  const customerKey = props.detail?.customerKey || '';
+  if (!customerKey) {
+    return;
+  }
+
+  emit('member', customerKey);
+}
 </script>

 <template>
@@ -225,6 +238,12 @@ function handleOpenProfilePage() {
      <div class="cl-detail-footer">
        <Button @click="emit('close')">关闭</Button>
        <Button @click="handleOpenProfilePage">进入画像页</Button>
+        <Button
+          v-if="props.showMemberAction && props.detail?.member.isMember"
+          @click="handleOpenMember"
+        >
+          会员详情
+        </Button>
        <Button type="primary" @click="handleOpenProfile">查看完整画像</Button>
      </div>
    </template>
--- a/apps/web-antd/src/views/customer/profile/composables/useCustomerProfilePage.ts
+++ b/apps/web-antd/src/views/customer/profile/composables/useCustomerProfilePage.ts
@@ -14,6 +14,7 @@ import {
 export function useCustomerProfilePage() {
  const route = useRoute();
  const router = useRouter();
+  const PROFILE_ROUTE_PATH = '/customer/profile';

  const stores = ref<StoreListItemDto[]>([]);
  const selectedStoreId = ref('');
@@ -49,6 +50,10 @@ export function useCustomerProfilePage() {
  });

  async function syncRouteQuery(storeId: string, customerKey: string) {
+    if (route.path !== PROFILE_ROUTE_PATH) {
+      return;
+    }
+
    const currentStoreId = parseRouteQueryValue(route.query.storeId);
    const currentCustomerKey = parseRouteQueryValue(route.query.customerKey);
    if (currentStoreId === storeId && currentCustomerKey === customerKey) {
@@ -56,7 +61,7 @@ export function useCustomerProfilePage() {
    }

    await router.replace({
-      path: '/customer/profile',
+      path: PROFILE_ROUTE_PATH,
      query: buildRouteQuery(
        route.query as Record<string, unknown>,
        storeId,
@@ -75,6 +80,10 @@ export function useCustomerProfilePage() {
  }

  async function loadProfileByRoute() {
+    if (route.path !== PROFILE_ROUTE_PATH) {
+      return;
+    }
+
    if (stores.value.length === 0) {
      await loadStores();
    }
@@ -110,15 +119,24 @@ export function useCustomerProfilePage() {
  watch(
    () => route.fullPath,
    () => {
+      if (route.path !== PROFILE_ROUTE_PATH) {
+        return;
+      }
      void loadProfileByRoute();
    },
  );

  onMounted(() => {
-    void loadProfileByRoute();
+    if (route.path === PROFILE_ROUTE_PATH) {
+      void loadProfileByRoute();
+    }
  });

  onActivated(() => {
+    if (route.path !== PROFILE_ROUTE_PATH) {
+      return;
+    }
+
    if (stores.value.length === 0) {
      void loadProfileByRoute();
    }