feat(@vben/web-antd): add member center management module

apps/web-antd/src/api/customer/index.ts

@@ -168,6 +168,154 @@ export interface CustomerExportDto {
   totalCount: number;
 }
 
+/** 客户分析周期筛选值。 */
+export type CustomerAnalysisPeriodFilter = '7d' | '30d' | '90d' | '365d';
+
+/** 客户分析趋势点。 */
+export interface CustomerAnalysisTrendPointDto {
+  label: string;
+  value: number;
+}
+
+/** 客户分析新老客构成项。 */
+export interface CustomerAnalysisCompositionItemDto {
+  count: number;
+  label: string;
+  percent: number;
+  segmentCode: string;
+  tone: string;
+}
+
+/** 客单价分布项。 */
+export interface CustomerAnalysisAmountDistributionItemDto {
+  count: number;
+  label: string;
+  percent: number;
+  segmentCode: string;
+}
+
+/** RFM 分层单元。 */
+export interface CustomerAnalysisRfmCellDto {
+  count: number;
+  label: string;
+  segmentCode: string;
+  tone: string;
+}
+
+/** RFM 分层行。 */
+export interface CustomerAnalysisRfmRowDto {
+  cells: CustomerAnalysisRfmCellDto[];
+  label: string;
+}
+
+/** 客户分析 Top 客户。 */
+export interface CustomerAnalysisTopCustomerDto {
+  averageAmount: number;
+  customerKey: string;
+  lastOrderAt: string;
+  name: string;
+  orderCount: number;
+  phoneMasked: string;
+  rank: number;
+  tags: CustomerTagDto[];
+  totalAmount: number;
+}
+
+/** 客户分析总览。 */
+export interface CustomerAnalysisOverviewDto {
+  activeCustomers: number;
+  activeRatePercent: number;
+  amountDistribution: CustomerAnalysisAmountDistributionItemDto[];
+  averageLifetimeValue: number;
+  composition: CustomerAnalysisCompositionItemDto[];
+  growthRatePercent: number;
+  growthTrend: CustomerAnalysisTrendPointDto[];
+  newCustomers: number;
+  newCustomersDailyAverage: number;
+  periodCode: CustomerAnalysisPeriodFilter;
+  periodDays: number;
+  rfmRows: CustomerAnalysisRfmRowDto[];
+  topCustomers: CustomerAnalysisTopCustomerDto[];
+  totalCustomers: number;
+}
+
+/** 客群明细分群编码。 */
+export type CustomerAnalysisSegmentCode =
+  | 'active_new'
+  | 'active_recent'
+  | 'all'
+  | 'amount_0_30'
+  | 'amount_30_60'
+  | 'amount_60_100'
+  | 'amount_100_150'
+  | 'amount_150_plus'
+  | 'churn'
+  | 'dormant'
+  | 'high_value_top'
+  | 'repeat_loyal'
+  | `rfm_r${1 | 2 | 3}c${1 | 2 | 3 | 4}`
+  | (string & {});
+
+/** 客群明细行。 */
+export interface CustomerAnalysisSegmentListItemDto {
+  avatarColor: string;
+  avatarText: string;
+  averageAmount: number;
+  customerKey: string;
+  isDimmed: boolean;
+  isMember: boolean;
+  lastOrderAt: string;
+  memberTierName: string;
+  name: string;
+  orderCount: number;
+  phoneMasked: string;
+  registeredAt: string;
+  tags: CustomerTagDto[];
+  totalAmount: number;
+}
+
+/** 客群明细结果。 */
+export interface CustomerAnalysisSegmentListResultDto {
+  items: CustomerAnalysisSegmentListItemDto[];
+  page: number;
+  pageSize: number;
+  segmentCode: string;
+  segmentDescription: string;
+  segmentTitle: string;
+  totalCount: number;
+}
+
+/** 客户分析会员详情。 */
+export interface CustomerMemberDetailDto {
+  averageAmount: number;
+  customerKey: string;
+  lastOrderAt: string;
+  member: CustomerMemberSummaryDto;
+  name: string;
+  phoneMasked: string;
+  recentOrders: CustomerRecentOrderDto[];
+  registeredAt: string;
+  repurchaseRatePercent: number;
+  source: string;
+  tags: CustomerTagDto[];
+  totalAmount: number;
+  totalOrders: number;
+}
+
+/** 客户分析基础查询参数。 */
+export interface CustomerAnalysisBaseQuery {
+  period?: CustomerAnalysisPeriodFilter;
+  storeId: string;
+}
+
+/** 客群明细查询参数。 */
+export interface CustomerAnalysisSegmentListQuery extends CustomerAnalysisBaseQuery {
+  keyword?: string;
+  page: number;
+  pageSize: number;
+  segmentCode: CustomerAnalysisSegmentCode;
+}
+
 /** 查询客户列表。 */
 export async function getCustomerListApi(params: CustomerListQuery) {
   return requestClient.get<CustomerListResultDto>('/customer/list/list', {
@@ -208,3 +356,69 @@ export async function exportCustomerCsvApi(params: CustomerListFilterQuery) {
     params,
   });
 }
+
+/** 查询客户分析总览。 */
+export async function getCustomerAnalysisOverviewApi(
+  params: CustomerAnalysisBaseQuery,
+) {
+  return requestClient.get<CustomerAnalysisOverviewDto>(
+    '/customer/analysis/overview',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询客群明细分页。 */
+export async function getCustomerAnalysisSegmentListApi(
+  params: CustomerAnalysisSegmentListQuery,
+) {
+  return requestClient.get<CustomerAnalysisSegmentListResultDto>(
+    '/customer/analysis/segment/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询客户分析会员详情。 */
+export async function getCustomerMemberDetailApi(params: {
+  customerKey: string;
+  storeId: string;
+}) {
+  return requestClient.get<CustomerMemberDetailDto>(
+    '/customer/analysis/member/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询客户分析客户详情。 */
+export async function getCustomerAnalysisDetailApi(params: {
+  customerKey: string;
+  storeId: string;
+}) {
+  return requestClient.get<CustomerDetailDto>('/customer/analysis/detail', {
+    params,
+  });
+}
+
+/** 查询客户分析客户画像。 */
+export async function getCustomerAnalysisProfileApi(params: {
+  customerKey: string;
+  storeId: string;
+}) {
+  return requestClient.get<CustomerProfileDto>('/customer/analysis/profile', {
+    params,
+  });
+}
+
+/** 导出客户分析 CSV。 */
+export async function exportCustomerAnalysisCsvApi(
+  params: CustomerAnalysisBaseQuery,
+) {
+  return requestClient.get<CustomerExportDto>('/customer/analysis/export', {
+    params,
+  });
+}

apps/web-antd/src/api/member/index.ts

@@ -0,0 +1,283 @@
+/**
+ * 文件职责：会员中心会员管理 API 契约定义。
+ */
+import { requestClient } from '#/api/request';
+
+/** 会员列表筛选参数。 */
+export interface MemberListFilterQuery {
+  keyword?: string;
+  storeId: string;
+  tierId?: string;
+}
+
+/** 会员列表分页参数。 */
+export interface MemberListQuery extends MemberListFilterQuery {
+  page: number;
+  pageSize: number;
+}
+
+/** 会员列表行。 */
+export interface MemberListItemDto {
+  avatarColor: string;
+  avatarText: string;
+  isDormant: boolean;
+  lastOrderAt: string;
+  memberId: string;
+  mobileMasked: string;
+  name: string;
+  orderCount: number;
+  pointsBalance: number;
+  storedBalance: number;
+  tierColorHex: string;
+  tierId?: string;
+  tierName: string;
+  totalAmount: number;
+}
+
+/** 会员列表结果。 */
+export interface MemberListResultDto {
+  items: MemberListItemDto[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+/** 会员列表统计。 */
+export interface MemberListStatsDto {
+  activeMembers: number;
+  dormantMembers: number;
+  monthlyNewMembers: number;
+  totalMembers: number;
+}
+
+/** 最近订单。 */
+export interface MemberRecentOrderDto {
+  amount: number;
+  orderNo: string;
+  orderedAt: string;
+  statusText: string;
+}
+
+/** 会员详情。 */
+export interface MemberDetailDto {
+  avatarColor: string;
+  avatarText: string;
+  averageAmount: number;
+  joinedAt: string;
+  memberId: string;
+  mobileMasked: string;
+  name: string;
+  orderCount: number;
+  pointsBalance: number;
+  recentOrders: MemberRecentOrderDto[];
+  storedBalance: number;
+  storedGiftBalance: number;
+  storedRechargeBalance: number;
+  tags: string[];
+  tierColorHex: string;
+  tierId?: string;
+  tierName: string;
+  totalAmount: number;
+}
+
+/** 会员导出回执。 */
+export interface MemberExportDto {
+  fileContentBase64: string;
+  fileName: string;
+  totalCount: number;
+}
+
+/** 会员等级列表项。 */
+export interface MemberTierListItemDto {
+  canDelete: boolean;
+  colorHex: string;
+  conditionText: string;
+  iconKey: string;
+  isDefault: boolean;
+  memberCount: number;
+  name: string;
+  perks: string[];
+  sortOrder: number;
+  tierId: string;
+}
+
+/** 升降级规则。 */
+export interface MemberTierRuleDto {
+  downgradeWindowDays: number;
+  upgradeAmountThreshold?: number;
+  upgradeOrderCountThreshold?: number;
+  upgradeRuleType: 'amount' | 'both' | 'count' | 'none';
+}
+
+/** 折扣权益。 */
+export interface MemberTierDiscountBenefitDto {
+  discountRate?: number;
+  enabled: boolean;
+}
+
+/** 积分倍率权益。 */
+export interface MemberTierPointMultiplierBenefitDto {
+  enabled: boolean;
+  multiplier?: number;
+}
+
+/** 生日特权。 */
+export interface MemberTierBirthdayBenefitDto {
+  couponTemplateIds: string[];
+  doublePointsEnabled: boolean;
+  enabled: boolean;
+}
+
+/** 每月赠券。 */
+export interface MemberTierMonthlyCouponBenefitDto {
+  couponTemplateIds: string[];
+  enabled: boolean;
+  grantDay: number;
+}
+
+/** 免配送费权益。 */
+export interface MemberTierFreeDeliveryBenefitDto {
+  enabled: boolean;
+  monthlyFreeTimes: number;
+}
+
+/** 等级权益。 */
+export interface MemberTierBenefitsDto {
+  birthday: MemberTierBirthdayBenefitDto;
+  discount: MemberTierDiscountBenefitDto;
+  exclusiveServiceEnabled: boolean;
+  freeDelivery: MemberTierFreeDeliveryBenefitDto;
+  monthlyCoupon: MemberTierMonthlyCouponBenefitDto;
+  pointMultiplier: MemberTierPointMultiplierBenefitDto;
+  priorityDeliveryEnabled: boolean;
+}
+
+/** 等级详情。 */
+export interface MemberTierDetailDto {
+  benefits: MemberTierBenefitsDto;
+  canDelete: boolean;
+  colorHex: string;
+  iconKey: string;
+  isDefault: boolean;
+  name: string;
+  rule: MemberTierRuleDto;
+  sortOrder: number;
+  tierId?: string;
+}
+
+/** 保存等级请求。 */
+export interface SaveMemberTierPayload {
+  benefits: MemberTierBenefitsDto;
+  colorHex: string;
+  iconKey: string;
+  isDefault: boolean;
+  name: string;
+  rule: MemberTierRuleDto;
+  sortOrder: number;
+  tierId?: string;
+}
+
+/** 会员日配置。 */
+export interface MemberDaySettingDto {
+  extraDiscountRate: number;
+  isEnabled: boolean;
+  weekday: number;
+}
+
+/** 优惠券选择项。 */
+export interface MemberCouponPickerItemDto {
+  couponTemplateId: string;
+  couponType: string;
+  displayText: string;
+  minimumSpend?: number;
+  name: string;
+  value: number;
+}
+
+/** 查询会员列表。 */
+export async function getMemberListApi(params: MemberListQuery) {
+  return requestClient.get<MemberListResultDto>('/member/list/list', {
+    params,
+  });
+}
+
+/** 查询会员列表统计。 */
+export async function getMemberListStatsApi(params: MemberListFilterQuery) {
+  return requestClient.get<MemberListStatsDto>('/member/list/stats', {
+    params,
+  });
+}
+
+/** 查询会员详情。 */
+export async function getMemberDetailApi(params: {
+  memberId: string;
+  storeId: string;
+}) {
+  return requestClient.get<MemberDetailDto>('/member/list/detail', {
+    params,
+  });
+}
+
+/** 保存会员标签。 */
+export async function saveMemberTagsApi(payload: {
+  memberId: string;
+  storeId?: string;
+  tags: string[];
+}) {
+  return requestClient.post('/member/list/tags', payload);
+}
+
+/** 导出会员 CSV。 */
+export async function exportMemberCsvApi(params: MemberListFilterQuery) {
+  return requestClient.get<MemberExportDto>('/member/list/export', {
+    params,
+  });
+}
+
+/** 查询会员等级列表。 */
+export async function getMemberTierListApi() {
+  return requestClient.get<MemberTierListItemDto[]>('/member/tier/list');
+}
+
+/** 查询会员等级详情。 */
+export async function getMemberTierDetailApi(params: { tierId?: string }) {
+  return requestClient.get<MemberTierDetailDto>('/member/tier/detail', {
+    params,
+  });
+}
+
+/** 保存会员等级。 */
+export async function saveMemberTierApi(payload: SaveMemberTierPayload) {
+  return requestClient.post<MemberTierDetailDto>('/member/tier/save', payload);
+}
+
+/** 删除会员等级。 */
+export async function deleteMemberTierApi(payload: { tierId: string }) {
+  return requestClient.post('/member/tier/delete', payload);
+}
+
+/** 查询会员日配置。 */
+export async function getMemberDaySettingApi() {
+  return requestClient.get<MemberDaySettingDto>('/member/tier/day-setting');
+}
+
+/** 保存会员日配置。 */
+export async function saveMemberDaySettingApi(payload: MemberDaySettingDto) {
+  return requestClient.post<MemberDaySettingDto>(
+    '/member/tier/day-setting',
+    payload,
+  );
+}
+
+/** 查询优惠券选择器列表。 */
+export async function getMemberCouponPickerApi(params: {
+  keyword?: string;
+  storeId?: string;
+}) {
+  return requestClient.get<MemberCouponPickerItemDto[]>(
+    '/member/tier/coupon-picker',
+    {
+      params,
+    },
+  );
+}

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>

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>

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>

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>

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>

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>

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>

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>

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>

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: [],
+};

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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);
+}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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>

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%);
+}

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;
+}

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%);
+  }
+}

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';

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;
+}

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;
+  }
+}

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;
+}

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>

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(() => {
+    if (route.path === PROFILE_ROUTE_PATH) {
       void loadProfileByRoute();
+    }
   });
 
   onActivated(() => {
+    if (route.path !== PROFILE_ROUTE_PATH) {
+      return;
+    }
+
     if (stores.value.length === 0) {
       void loadProfileByRoute();
     }

apps/web-antd/src/views/member/list/components/MemberCouponPickerModal.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { MemberCouponPickerItemDto } from '#/api/member';
+
+import { Button, Checkbox, Input, Modal, Tag } from 'ant-design-vue';
+
+interface Props {
+  items: MemberCouponPickerItemDto[];
+  keyword: string;
+  loading: boolean;
+  open: boolean;
+  selectedIds: string[];
+  title: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'search'): void;
+  (event: 'setKeyword', value: string): void;
+  (event: 'submit'): void;
+  (event: 'toggle', couponId: string): void;
+}>();
+</script>
+
+<template>
+  <Modal
+    :open="props.open"
+    :title="props.title"
+    ok-text="确认"
+    cancel-text="取消"
+    :confirm-loading="props.loading"
+    :ok-button-props="{ disabled: props.selectedIds.length === 0 }"
+    @ok="emit('submit')"
+    @cancel="emit('close')"
+  >
+    <div class="mm-coupon-search">
+      <Input
+        :value="props.keyword"
+        placeholder="搜索优惠券名称"
+        allow-clear
+        @update:value="(value) => emit('setKeyword', String(value ?? ''))"
+        @press-enter="emit('search')"
+      />
+      <Button @click="emit('search')"> 搜索 </Button>
+    </div>
+
+    <div class="mm-coupon-list">
+      <div v-if="props.loading" class="mm-coupon-empty">加载中...</div>
+      <div v-else-if="props.items.length === 0" class="mm-coupon-empty">
+        暂无可选优惠券
+      </div>
+      <label
+        v-for="item in props.items"
+        v-else
+        :key="item.couponTemplateId"
+        class="mm-coupon-item"
+      >
+        <Checkbox
+          :checked="props.selectedIds.includes(item.couponTemplateId)"
+          @update:checked="() => emit('toggle', item.couponTemplateId)"
+        />
+        <span class="name">{{ item.displayText || item.name }}</span>
+        <Tag class="type">{{ item.couponType }}</Tag>
+      </label>
+    </div>
+  </Modal>
+</template>

apps/web-antd/src/views/member/list/components/MemberDaySettingCard.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { MemberDaySettingDto } from '#/api/member';
+
+import { reactive, watch } from 'vue';
+
+import { Button, InputNumber, Select, Switch } from 'ant-design-vue';
+
+interface Props {
+  canManage: boolean;
+  loading: boolean;
+  value: MemberDaySettingDto | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'save', value: MemberDaySettingDto): void;
+}>();
+
+const state = reactive<MemberDaySettingDto>({
+  isEnabled: true,
+  weekday: 2,
+  extraDiscountRate: 9,
+});
+
+const weekdayOptions = [
+  { label: '每周一', value: 1 },
+  { label: '每周二', value: 2 },
+  { label: '每周三', value: 3 },
+  { label: '每周四', value: 4 },
+  { label: '每周五', value: 5 },
+  { label: '每周六', value: 6 },
+  { label: '每周日', value: 7 },
+];
+
+watch(
+  () => props.value,
+  (value) => {
+    if (!value) {
+      return;
+    }
+
+    state.isEnabled = value.isEnabled;
+    state.weekday = value.weekday;
+    state.extraDiscountRate = value.extraDiscountRate;
+  },
+  { immediate: true },
+);
+
+function submit() {
+  emit('save', {
+    isEnabled: state.isEnabled,
+    weekday: Number(state.weekday || 2),
+    extraDiscountRate: Number(state.extraDiscountRate || 9),
+  });
+}
+</script>
+
+<template>
+  <div class="mm-member-day">
+    <div class="mm-section-title">会员日设置</div>
+
+    <div class="mm-day-card">
+      <div class="mm-day-row">
+        <span class="mm-day-label">启用会员日</span>
+        <Switch
+          :checked="state.isEnabled"
+          :disabled="!props.canManage"
+          @update:checked="(value) => (state.isEnabled = !!value)"
+        />
+      </div>
+
+      <div class="mm-day-row">
+        <span class="mm-day-label">会员日</span>
+        <Select
+          :value="state.weekday"
+          class="mm-day-select"
+          :options="weekdayOptions"
+          :disabled="!props.canManage"
+          @update:value="(value) => (state.weekday = Number(value || 2))"
+        />
+      </div>
+
+      <div class="mm-day-row">
+        <span class="mm-day-label">会员日权益</span>
+        <div class="mm-day-benefit">
+          <span>额外</span>
+          <InputNumber
+            :value="state.extraDiscountRate"
+            :min="0.1"
+            :max="10"
+            :step="0.1"
+            :precision="1"
+            :disabled="!props.canManage"
+            @update:value="
+              (value) =>
+                (state.extraDiscountRate = Number(
+                  value || state.extraDiscountRate,
+                ))
+            "
+          />
+          <span>折优惠</span>
+        </div>
+      </div>
+
+      <div class="mm-day-actions">
+        <Button
+          type="primary"
+          :disabled="!props.canManage"
+          :loading="props.loading"
+          @click="submit"
+        >
+          保存会员日设置
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/list/components/MemberDetailDrawer.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import type { MemberDetailDto } from '#/api/member';
+
+import { computed, h, ref, watch } from 'vue';
+
+import { Button, Drawer, Empty, Input, Spin, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  formatInteger,
+  resolveTierTagStyle,
+} from '../composables/member-page/helpers';
+
+interface Props {
+  canManage: boolean;
+  detail: MemberDetailDto | null;
+  loading: boolean;
+  open: boolean;
+  tagSaving: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'saveTags', tags: string[]): void;
+}>();
+
+const localTags = ref<string[]>([]);
+const tagInputVisible = ref(false);
+const tagInputValue = ref('');
+
+const recentOrderColumns = [
+  {
+    title: '日期',
+    dataIndex: 'orderedAt',
+    key: 'orderedAt',
+    width: 110,
+  },
+  {
+    title: '订单号',
+    dataIndex: 'orderNo',
+    key: 'orderNo',
+    width: 170,
+  },
+  {
+    title: '金额',
+    dataIndex: 'amount',
+    key: 'amount',
+    width: 120,
+    customRender: ({ text }: { text: number }) =>
+      formatCurrency(Number(text || 0)),
+  },
+  {
+    title: '状态',
+    dataIndex: 'statusText',
+    key: 'statusText',
+    width: 100,
+    customRender: ({ text }: { text: string }) =>
+      h(Tag, { color: resolveOrderStatusColor(text) }, () => text || '--'),
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 68,
+    customRender: () =>
+      h('span', { class: 'mm-order-action-placeholder' }, '详情'),
+  },
+];
+
+const averageAmount = computed(() => props.detail?.averageAmount ?? 0);
+
+watch(
+  () => props.detail?.memberId,
+  () => {
+    localTags.value = [...(props.detail?.tags ?? [])];
+    tagInputVisible.value = false;
+    tagInputValue.value = '';
+  },
+  { immediate: true },
+);
+
+function removeTag(tag: string) {
+  localTags.value = localTags.value.filter((item) => item !== tag);
+}
+
+function handleAddTag() {
+  const value = tagInputValue.value.trim();
+  if (!value) {
+    tagInputVisible.value = false;
+    tagInputValue.value = '';
+    return;
+  }
+
+  if (localTags.value.includes(value)) {
+    tagInputVisible.value = false;
+    tagInputValue.value = '';
+    return;
+  }
+
+  localTags.value = [...localTags.value, value];
+  tagInputVisible.value = false;
+  tagInputValue.value = '';
+}
+
+function handleSaveTags() {
+  emit('saveTags', localTags.value);
+}
+
+function resolveOrderStatusColor(statusText: string) {
+  if (statusText === '已完成') {
+    return 'success';
+  }
+
+  if (statusText === '已取消') {
+    return 'default';
+  }
+
+  return 'processing';
+}
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="620"
+    title="会员详情"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loading || props.tagSaving">
+      <template v-if="props.detail">
+        <div class="mm-detail-head">
+          <div
+            class="mm-detail-avatar"
+            :style="{ background: props.detail.avatarColor || '#1677ff' }"
+          >
+            {{ props.detail.avatarText }}
+          </div>
+          <div class="mm-detail-title-wrap">
+            <div class="mm-detail-name-row">
+              <span class="mm-detail-name">{{ props.detail.name }}</span>
+              <Tag
+                v-if="props.detail.tierName"
+                :style="
+                  resolveTierTagStyle(props.detail.tierColorHex || '#999999')
+                "
+              >
+                {{ props.detail.tierName }}
+              </Tag>
+            </div>
+            <div class="mm-detail-meta">
+              {{ props.detail.mobileMasked }} | 注册于
+              {{ props.detail.joinedAt }}
+            </div>
+          </div>
+        </div>
+
+        <div class="mm-section-title">消费概览</div>
+
+        <div class="mm-overview-grid">
+          <div class="mm-overview-item">
+            <div class="value primary">
+              {{ formatCurrency(props.detail.totalAmount) }}
+            </div>
+            <div class="label">累计消费</div>
+          </div>
+          <div class="mm-overview-item">
+            <div class="value">
+              {{ formatInteger(props.detail.orderCount) }}
+            </div>
+            <div class="label">消费次数</div>
+          </div>
+          <div class="mm-overview-item">
+            <div class="value">{{ formatCurrency(averageAmount) }}</div>
+            <div class="label">平均客单价</div>
+          </div>
+          <div class="mm-overview-item">
+            <div class="value">
+              {{ formatCurrency(props.detail.storedBalance) }}
+            </div>
+            <div class="label">储值余额</div>
+            <div class="sub">
+              实充 {{ formatCurrency(props.detail.storedRechargeBalance) }} |
+              赠金
+              {{ formatCurrency(props.detail.storedGiftBalance) }}
+            </div>
+          </div>
+          <div class="mm-overview-item">
+            <div class="value">
+              {{ formatInteger(props.detail.pointsBalance) }}
+            </div>
+            <div class="label">积分</div>
+          </div>
+        </div>
+
+        <div class="mm-section">
+          <div class="mm-section-title">最近订单</div>
+          <Table
+            size="small"
+            :columns="recentOrderColumns"
+            :data-source="props.detail.recentOrders"
+            :pagination="false"
+            row-key="orderNo"
+            :locale="{ emptyText: '暂无订单记录' }"
+          />
+        </div>
+
+        <div class="mm-section">
+          <div class="mm-section-title">会员标签</div>
+          <div class="mm-tag-editor">
+            <Tag
+              v-for="tag in localTags"
+              :key="tag"
+              :closable="props.canManage"
+              @close="removeTag(tag)"
+            >
+              {{ tag }}
+            </Tag>
+
+            <Input
+              v-if="tagInputVisible && props.canManage"
+              v-model:value="tagInputValue"
+              class="mm-tag-input"
+              size="small"
+              placeholder="输入标签"
+              @press-enter="handleAddTag"
+              @blur="handleAddTag"
+            />
+            <Button
+              v-else-if="props.canManage"
+              size="small"
+              type="dashed"
+              @click="tagInputVisible = true"
+            >
+              + 自定义标签
+            </Button>
+          </div>
+        </div>
+      </template>
+      <Empty v-else description="暂无详情" />
+    </Spin>
+
+    <template #footer>
+      <div class="mm-detail-footer">
+        <Button @click="emit('close')">关闭</Button>
+        <Button
+          v-if="props.canManage"
+          type="primary"
+          :loading="props.tagSaving"
+          @click="handleSaveTags"
+        >
+          保存标签
+        </Button>
+      </div>
+    </template>
+  </Drawer>
+</template>

apps/web-antd/src/views/member/list/components/MemberFilterBar.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input, Select } from 'ant-design-vue';
+
+interface OptionItem {
+  label: string;
+  value: string;
+}
+
+interface FilterState {
+  keyword: string;
+  tierId: string;
+}
+
+interface Props {
+  filters: FilterState;
+  isExporting: boolean;
+  isStoreLoading: boolean;
+  selectedStoreId: string;
+  showExport: boolean;
+  storeOptions: OptionItem[];
+  tierOptions: OptionItem[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'export'): void;
+  (event: 'reset'): void;
+  (event: 'search'): void;
+  (event: 'update:keyword', value: string): void;
+  (event: 'update:selectedStoreId', value: string): void;
+  (event: 'update:tierId', 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="mm-toolbar">
+    <Select
+      class="mm-store-select"
+      :value="props.selectedStoreId"
+      placeholder="全部门店"
+      :loading="props.isStoreLoading"
+      :options="props.storeOptions"
+      :disabled="props.isStoreLoading || props.storeOptions.length === 0"
+      @update:value="(value) => handleStoreChange(value)"
+    />
+
+    <Select
+      class="mm-tier-select"
+      :value="props.filters.tierId"
+      :options="props.tierOptions"
+      @update:value="(value) => emit('update:tierId', String(value ?? ''))"
+    />
+
+    <Input
+      class="mm-search-input"
+      :value="props.filters.keyword"
+      placeholder="搜索姓名 / 手机号"
+      allow-clear
+      @update:value="(value) => emit('update:keyword', String(value ?? ''))"
+      @press-enter="emit('search')"
+    >
+      <template #prefix>
+        <IconifyIcon icon="lucide:search" class="mm-search-icon" />
+      </template>
+    </Input>
+
+    <Button class="mm-query-btn" type="primary" @click="emit('search')">
+      查询
+    </Button>
+    <Button class="mm-reset-btn" @click="emit('reset')">重置</Button>
+
+    <div class="mm-toolbar-right">
+      <Button
+        v-if="props.showExport"
+        class="mm-export-btn"
+        :loading="props.isExporting"
+        @click="emit('export')"
+      >
+        <template #icon>
+          <IconifyIcon icon="lucide:download" />
+        </template>
+        导出
+      </Button>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/list/components/MemberStatsBar.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { MemberListStatsDto } from '#/api/member';
+
+import { formatInteger } from '../composables/member-page/helpers';
+
+interface Props {
+  stats: MemberListStatsDto;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="mm-stats">
+    <div class="mm-stat-card">
+      <div class="mm-stat-label">会员总数</div>
+      <div class="mm-stat-value blue">
+        {{ formatInteger(props.stats.totalMembers) }}
+      </div>
+    </div>
+
+    <div class="mm-stat-card">
+      <div class="mm-stat-label">本月新增</div>
+      <div class="mm-stat-value green">
+        {{ formatInteger(props.stats.monthlyNewMembers) }}
+      </div>
+    </div>
+
+    <div class="mm-stat-card">
+      <div class="mm-stat-label">活跃会员</div>
+      <div class="mm-stat-value">
+        {{ formatInteger(props.stats.activeMembers) }}
+      </div>
+      <div class="mm-stat-sub">30天内有消费</div>
+    </div>
+
+    <div class="mm-stat-card">
+      <div class="mm-stat-label">沉睡会员</div>
+      <div class="mm-stat-value orange">
+        {{ formatInteger(props.stats.dormantMembers) }}
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/list/components/MemberTableCard.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
+
+import type { MemberListItemDto } from '#/api/member';
+
+import { h } from 'vue';
+
+import { Button, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  formatInteger,
+  resolveTierTagStyle,
+} from '../composables/member-page/helpers';
+
+interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+interface Props {
+  loading: boolean;
+  pagination: PaginationState;
+  rows: MemberListItemDto[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'detail', memberId: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+}>();
+
+function renderMemberCell(record: MemberListItemDto) {
+  return h('div', { class: 'mm-member-cell' }, [
+    h(
+      'span',
+      {
+        class: 'mm-avatar',
+        style: {
+          background: record.avatarColor || '#1677ff',
+        },
+      },
+      record.avatarText || record.name.slice(0, 1) || '会',
+    ),
+    h('span', { class: 'mm-member-name' }, record.name || '--'),
+  ]);
+}
+
+function renderTierCell(record: MemberListItemDto) {
+  if (!record.tierName) {
+    return '--';
+  }
+
+  return h(
+    Tag,
+    {
+      style: resolveTierTagStyle(record.tierColorHex || '#999999'),
+    },
+    () => record.tierName,
+  );
+}
+
+const columns: TableProps['columns'] = [
+  {
+    title: '会员',
+    dataIndex: 'name',
+    width: 180,
+    customRender: ({ record }) => renderMemberCell(record as MemberListItemDto),
+  },
+  {
+    title: '手机号',
+    dataIndex: 'mobileMasked',
+    width: 130,
+  },
+  {
+    title: '等级',
+    dataIndex: 'tierName',
+    width: 120,
+    customRender: ({ record }) => renderTierCell(record as MemberListItemDto),
+  },
+  {
+    title: '累计消费',
+    dataIndex: 'totalAmount',
+    width: 130,
+    customRender: ({ text }) =>
+      h('span', { class: 'mm-amount' }, formatCurrency(Number(text || 0))),
+  },
+  {
+    title: '消费次数',
+    dataIndex: 'orderCount',
+    width: 100,
+    customRender: ({ text }) => formatInteger(Number(text || 0)),
+  },
+  {
+    title: '最近消费',
+    dataIndex: 'lastOrderAt',
+    width: 120,
+  },
+  {
+    title: '储值余额',
+    dataIndex: 'storedBalance',
+    width: 130,
+    customRender: ({ text }) => formatCurrency(Number(text || 0)),
+  },
+  {
+    title: '积分',
+    dataIndex: 'pointsBalance',
+    width: 100,
+    customRender: ({ text }) => formatInteger(Number(text || 0)),
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 80,
+    fixed: 'right',
+    customRender: ({ record }) =>
+      h(
+        Button,
+        {
+          type: 'link',
+          class: 'mm-detail-action',
+          onClick: () =>
+            emit('detail', String((record as MemberListItemDto).memberId)),
+        },
+        () => '详情',
+      ),
+  },
+];
+
+function handleTableChange(next: TablePaginationConfig) {
+  emit('pageChange', Number(next.current || 1), Number(next.pageSize || 10));
+}
+
+function resolveRowClassName(record: MemberListItemDto) {
+  return record.isDormant ? 'mm-row-dimmed' : '';
+}
+</script>
+
+<template>
+  <div class="mm-table-card">
+    <Table
+      row-key="memberId"
+      :columns="columns"
+      :data-source="props.rows"
+      :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"
+      :scroll="{ x: 1080 }"
+      @change="handleTableChange"
+    />
+  </div>
+</template>

apps/web-antd/src/views/member/list/components/MemberTierEditorDrawer.vue

@@ -0,0 +1,521 @@
+<script setup lang="ts">
+import type { MemberTierEditorForm } from '../types';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Checkbox,
+  Drawer,
+  Input,
+  InputNumber,
+  Segmented,
+  Spin,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
+
+import {
+  MEMBER_TIER_COLOR_OPTIONS,
+  MEMBER_TIER_ICON_OPTIONS,
+  MEMBER_TIER_RULE_OPTIONS,
+} from '../composables/member-page/constants';
+import {
+  resolveTierIcon,
+  resolveTierTagStyle,
+} from '../composables/member-page/helpers';
+
+interface Props {
+  canManage: boolean;
+  couponLabelMap: Record<string, string>;
+  loading: boolean;
+  model: MemberTierEditorForm | null;
+  open: boolean;
+  submitting: boolean;
+  title: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (
+    event: 'openCouponPicker',
+    target: 'birthday' | 'monthly',
+    selectedIds: string[],
+  ): void;
+  (event: 'submit', form: MemberTierEditorForm): void;
+}>();
+
+const localForm = ref<MemberTierEditorForm | null>(null);
+
+const segmentedOptions = MEMBER_TIER_RULE_OPTIONS.map((item) => ({
+  label: item.label,
+  value: item.value,
+}));
+
+const canSubmit = computed(() => {
+  if (!props.canManage || !localForm.value) {
+    return false;
+  }
+
+  return localForm.value.name.trim().length > 0;
+});
+
+watch(
+  () => [props.open, props.model],
+  () => {
+    if (!props.open || !props.model) {
+      localForm.value = null;
+      return;
+    }
+
+    localForm.value = structuredClone(props.model);
+  },
+  { immediate: true },
+);
+
+function removeCoupon(target: 'birthday' | 'monthly', couponId: string) {
+  if (!localForm.value) {
+    return;
+  }
+
+  if (target === 'birthday') {
+    localForm.value.benefits.birthday.couponTemplateIds =
+      localForm.value.benefits.birthday.couponTemplateIds.filter(
+        (item) => item !== couponId,
+      );
+    return;
+  }
+
+  localForm.value.benefits.monthlyCoupon.couponTemplateIds =
+    localForm.value.benefits.monthlyCoupon.couponTemplateIds.filter(
+      (item) => item !== couponId,
+    );
+}
+
+function openCouponPicker(target: 'birthday' | 'monthly') {
+  if (!localForm.value) {
+    return;
+  }
+
+  const selectedIds =
+    target === 'birthday'
+      ? localForm.value.benefits.birthday.couponTemplateIds
+      : localForm.value.benefits.monthlyCoupon.couponTemplateIds;
+
+  emit('openCouponPicker', target, selectedIds);
+}
+
+function handleSubmit() {
+  if (!localForm.value || !canSubmit.value) {
+    return;
+  }
+
+  emit('submit', structuredClone(localForm.value));
+}
+
+function resolveCouponLabel(couponId: string) {
+  return props.couponLabelMap[couponId] || couponId;
+}
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="560"
+    :title="props.title"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loading">
+      <template v-if="localForm">
+        <div class="mm-editor-form">
+          <div class="mm-form-row">
+            <div class="mm-form-label required">等级名称</div>
+            <Input
+              :value="localForm.name"
+              :maxlength="64"
+              :disabled="!props.canManage"
+              placeholder="如：金卡会员"
+              @update:value="(value) => (localForm!.name = String(value ?? ''))"
+            />
+          </div>
+
+          <div class="mm-form-row">
+            <div class="mm-form-label">等级图标</div>
+            <div class="mm-icon-group">
+              <button
+                v-for="icon in MEMBER_TIER_ICON_OPTIONS"
+                :key="icon.value"
+                type="button"
+                class="mm-icon-pill"
+                :class="{ active: localForm.iconKey === icon.value }"
+                :disabled="!props.canManage"
+                @click="localForm.iconKey = icon.value"
+              >
+                <IconifyIcon :icon="resolveTierIcon(icon.value)" />
+                <span>{{ icon.label }}</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="mm-form-row">
+            <div class="mm-form-label">等级颜色</div>
+            <div class="mm-color-group">
+              <button
+                v-for="color in MEMBER_TIER_COLOR_OPTIONS"
+                :key="color"
+                type="button"
+                class="mm-color-dot"
+                :class="{ active: localForm.colorHex === color }"
+                :style="{ backgroundColor: color }"
+                :disabled="!props.canManage"
+                @click="localForm.colorHex = color"
+              ></button>
+            </div>
+          </div>
+
+          <div class="mm-form-row">
+            <div class="mm-form-label required">升级规则</div>
+            <div class="mm-rule-panel">
+              <Segmented
+                :value="localForm.rule.upgradeRuleType"
+                :options="segmentedOptions"
+                :disabled="!props.canManage"
+                @update:value="
+                  (value) =>
+                    (localForm!.rule.upgradeRuleType =
+                      (value as MemberTierEditorForm['rule']['upgradeRuleType']) ||
+                      'amount')
+                "
+              />
+
+              <div
+                v-if="
+                  ['amount', 'both'].includes(localForm.rule.upgradeRuleType)
+                "
+                class="mm-rule-row"
+              >
+                <span>累计消费满</span>
+                <InputNumber
+                  :value="localForm.rule.upgradeAmountThreshold"
+                  :min="0"
+                  :precision="2"
+                  :disabled="!props.canManage"
+                  @update:value="
+                    (value) =>
+                      (localForm!.rule.upgradeAmountThreshold =
+                        value === null ? undefined : Number(value))
+                  "
+                />
+                <span>元</span>
+              </div>
+
+              <div
+                v-if="
+                  ['count', 'both'].includes(localForm.rule.upgradeRuleType)
+                "
+                class="mm-rule-row"
+              >
+                <span>消费满</span>
+                <InputNumber
+                  :value="localForm.rule.upgradeOrderCountThreshold"
+                  :min="0"
+                  :precision="0"
+                  :disabled="!props.canManage"
+                  @update:value="
+                    (value) =>
+                      (localForm!.rule.upgradeOrderCountThreshold =
+                        value === null ? undefined : Number(value))
+                  "
+                />
+                <span>次</span>
+              </div>
+
+              <div class="mm-rule-row">
+                <span>降级观察期</span>
+                <InputNumber
+                  :value="localForm.rule.downgradeWindowDays"
+                  :min="30"
+                  :max="365"
+                  :precision="0"
+                  :disabled="!props.canManage"
+                  @update:value="
+                    (value) =>
+                      (localForm!.rule.downgradeWindowDays = Number(
+                        value || 90,
+                      ))
+                  "
+                />
+                <span>天</span>
+              </div>
+            </div>
+
+            <div class="mm-rule-hint">
+              达到条件自动升级；连续
+              {{ localForm.rule.downgradeWindowDays }}
+              天未达标自动降一级
+            </div>
+          </div>
+
+          <div class="mm-form-row">
+            <div class="mm-form-label">等级权益</div>
+
+            <div class="mm-benefit-card">
+              <div class="mm-benefit-head">
+                <span>折扣权益</span>
+                <Switch
+                  :checked="localForm.benefits.discount.enabled"
+                  :disabled="!props.canManage"
+                  @update:checked="
+                    (value) => (localForm!.benefits.discount.enabled = !!value)
+                  "
+                />
+              </div>
+              <div
+                v-if="localForm.benefits.discount.enabled"
+                class="mm-benefit-body"
+              >
+                <span>全场</span>
+                <InputNumber
+                  :value="localForm.benefits.discount.discountRate"
+                  :min="0.1"
+                  :max="10"
+                  :step="0.1"
+                  :precision="1"
+                  :disabled="!props.canManage"
+                  @update:value="
+                    (value) =>
+                      (localForm!.benefits.discount.discountRate =
+                        value === null ? undefined : Number(value))
+                  "
+                />
+                <span>折</span>
+              </div>
+            </div>
+
+            <div class="mm-benefit-card">
+              <div class="mm-benefit-head">
+                <span>积分倍率</span>
+                <Switch
+                  :checked="localForm.benefits.pointMultiplier.enabled"
+                  :disabled="!props.canManage"
+                  @update:checked="
+                    (value) =>
+                      (localForm!.benefits.pointMultiplier.enabled = !!value)
+                  "
+                />
+              </div>
+              <div
+                v-if="localForm.benefits.pointMultiplier.enabled"
+                class="mm-benefit-body"
+              >
+                <span>消费积分</span>
+                <InputNumber
+                  :value="localForm.benefits.pointMultiplier.multiplier"
+                  :min="0.1"
+                  :max="10"
+                  :step="0.1"
+                  :precision="1"
+                  :disabled="!props.canManage"
+                  @update:value="
+                    (value) =>
+                      (localForm!.benefits.pointMultiplier.multiplier =
+                        value === null ? undefined : Number(value))
+                  "
+                />
+                <span>倍</span>
+              </div>
+            </div>
+
+            <div class="mm-benefit-card">
+              <div class="mm-benefit-head">
+                <span>生日特权</span>
+                <Switch
+                  :checked="localForm.benefits.birthday.enabled"
+                  :disabled="!props.canManage"
+                  @update:checked="
+                    (value) => (localForm!.benefits.birthday.enabled = !!value)
+                  "
+                />
+              </div>
+              <div
+                v-if="localForm.benefits.birthday.enabled"
+                class="mm-benefit-body col"
+              >
+                <Checkbox
+                  :checked="localForm.benefits.birthday.doublePointsEnabled"
+                  :disabled="!props.canManage"
+                  @update:checked="
+                    (value) =>
+                      (localForm!.benefits.birthday.doublePointsEnabled =
+                        !!value)
+                  "
+                >
+                  生日双倍积分
+                </Checkbox>
+
+                <div class="mm-coupon-box">
+                  <Tag
+                    v-for="couponId in localForm.benefits.birthday
+                      .couponTemplateIds"
+                    :key="`birthday-${couponId}`"
+                    :closable="props.canManage"
+                    @close="removeCoupon('birthday', couponId)"
+                  >
+                    {{ resolveCouponLabel(couponId) }}
+                  </Tag>
+                  <Button
+                    size="small"
+                    type="link"
+                    :disabled="!props.canManage"
+                    @click="openCouponPicker('birthday')"
+                  >
+                    + 选券
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div class="mm-benefit-card">
+              <div class="mm-benefit-head">
+                <span>每月赠券</span>
+                <Switch
+                  :checked="localForm.benefits.monthlyCoupon.enabled"
+                  :disabled="!props.canManage"
+                  @update:checked="
+                    (value) =>
+                      (localForm!.benefits.monthlyCoupon.enabled = !!value)
+                  "
+                />
+              </div>
+              <div
+                v-if="localForm.benefits.monthlyCoupon.enabled"
+                class="mm-benefit-body col"
+              >
+                <div class="mm-rule-row">
+                  <span>每月</span>
+                  <InputNumber
+                    :value="localForm.benefits.monthlyCoupon.grantDay"
+                    :min="1"
+                    :max="28"
+                    :precision="0"
+                    :disabled="!props.canManage"
+                    @update:value="
+                      (value) =>
+                        (localForm!.benefits.monthlyCoupon.grantDay = Number(
+                          value || 1,
+                        ))
+                    "
+                  />
+                  <span>日自动发放</span>
+                </div>
+
+                <div class="mm-coupon-box">
+                  <Tag
+                    v-for="couponId in localForm.benefits.monthlyCoupon
+                      .couponTemplateIds"
+                    :key="`monthly-${couponId}`"
+                    :closable="props.canManage"
+                    @close="removeCoupon('monthly', couponId)"
+                  >
+                    {{ resolveCouponLabel(couponId) }}
+                  </Tag>
+                  <Button
+                    size="small"
+                    type="link"
+                    :disabled="!props.canManage"
+                    @click="openCouponPicker('monthly')"
+                  >
+                    + 选券
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div class="mm-benefit-card">
+              <div class="mm-benefit-head">
+                <span>免配送费</span>
+                <Switch
+                  :checked="localForm.benefits.freeDelivery.enabled"
+                  :disabled="!props.canManage"
+                  @update:checked="
+                    (value) =>
+                      (localForm!.benefits.freeDelivery.enabled = !!value)
+                  "
+                />
+              </div>
+              <div
+                v-if="localForm.benefits.freeDelivery.enabled"
+                class="mm-benefit-body"
+              >
+                <span>每月免配送费</span>
+                <InputNumber
+                  :value="localForm.benefits.freeDelivery.monthlyFreeTimes"
+                  :min="0"
+                  :precision="0"
+                  :disabled="!props.canManage"
+                  @update:value="
+                    (value) =>
+                      (localForm!.benefits.freeDelivery.monthlyFreeTimes =
+                        Number(value || 0))
+                  "
+                />
+                <span>次</span>
+              </div>
+            </div>
+
+            <div class="mm-benefit-inline">
+              <div class="item">
+                <span>优先配送</span>
+                <Switch
+                  :checked="localForm.benefits.priorityDeliveryEnabled"
+                  :disabled="!props.canManage"
+                  @update:checked="
+                    (value) =>
+                      (localForm!.benefits.priorityDeliveryEnabled = !!value)
+                  "
+                />
+              </div>
+              <div class="item">
+                <span>专属客服</span>
+                <Switch
+                  :checked="localForm.benefits.exclusiveServiceEnabled"
+                  :disabled="!props.canManage"
+                  @update:checked="
+                    (value) =>
+                      (localForm!.benefits.exclusiveServiceEnabled = !!value)
+                  "
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="mm-form-row">
+            <div class="mm-form-label">预览</div>
+            <Tag :style="resolveTierTagStyle(localForm.colorHex)">
+              <IconifyIcon :icon="resolveTierIcon(localForm.iconKey)" />
+              {{ localForm.name || '等级名称' }}
+            </Tag>
+          </div>
+        </div>
+      </template>
+    </Spin>
+
+    <template #footer>
+      <div class="mm-editor-footer">
+        <Button @click="emit('close')">取消</Button>
+        <Button
+          type="primary"
+          :disabled="!canSubmit"
+          :loading="props.submitting"
+          @click="handleSubmit"
+        >
+          保存
+        </Button>
+      </div>
+    </template>
+  </Drawer>
+</template>

apps/web-antd/src/views/member/list/components/MemberTierSystem.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { MemberTierListItemDto } from '#/api/member';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Empty, Spin, Tag } from 'ant-design-vue';
+
+import { resolveTierIcon } from '../composables/member-page/helpers';
+
+interface Props {
+  canManage: boolean;
+  loading: boolean;
+  tiers: MemberTierListItemDto[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'create'): void;
+  (event: 'delete', tierId: string): void;
+  (event: 'edit', tierId: string): void;
+}>();
+</script>
+
+<template>
+  <div class="mm-tier-system">
+    <div class="mm-section-title">会员等级</div>
+
+    <Spin :spinning="props.loading">
+      <template v-if="props.tiers.length > 0">
+        <div class="mm-tier-list">
+          <div
+            v-for="tier in props.tiers"
+            :key="tier.tierId"
+            class="mm-tier-card"
+          >
+            <div class="mm-tier-order">{{ tier.sortOrder }}</div>
+            <div
+              class="mm-tier-icon"
+              :style="{
+                color: tier.colorHex,
+                background: 'rgba(0,0,0,0.03)',
+              }"
+            >
+              <IconifyIcon :icon="resolveTierIcon(tier.iconKey)" />
+            </div>
+
+            <div class="mm-tier-main">
+              <div class="mm-tier-name-row">
+                <span class="mm-tier-name" :style="{ color: tier.colorHex }">
+                  {{ tier.name }}
+                </span>
+                <Tag v-if="tier.isDefault" color="blue">默认</Tag>
+              </div>
+              <div class="mm-tier-condition">{{ tier.conditionText }}</div>
+              <div class="mm-tier-perks">
+                <Tag
+                  v-for="perk in tier.perks"
+                  :key="`${tier.tierId}-${perk}`"
+                  class="mm-tier-perk"
+                >
+                  {{ perk }}
+                </Tag>
+              </div>
+            </div>
+
+            <div class="mm-tier-side">
+              <div class="mm-tier-count">{{ tier.memberCount }} 人</div>
+              <div class="mm-tier-actions">
+                <Button
+                  size="small"
+                  :disabled="!props.canManage"
+                  @click="emit('edit', tier.tierId)"
+                >
+                  编辑
+                </Button>
+                <Button
+                  size="small"
+                  danger
+                  :disabled="!props.canManage || !tier.canDelete"
+                  @click="emit('delete', tier.tierId)"
+                >
+                  删除
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <Empty v-else description="暂无等级数据" />
+    </Spin>
+
+    <Button
+      class="mm-tier-add-btn"
+      type="dashed"
+      block
+      :disabled="!props.canManage"
+      @click="emit('create')"
+    >
+      <template #icon>
+        <IconifyIcon icon="lucide:plus" />
+      </template>
+      添加等级
+    </Button>
+  </div>
+</template>

apps/web-antd/src/views/member/list/composables/member-page/constants.ts

@@ -0,0 +1,100 @@
+import type { MemberFilterState, OptionItem } from '../../types';
+
+import type {
+  MemberDaySettingDto,
+  MemberListStatsDto,
+  MemberTierBenefitsDto,
+  MemberTierRuleDto,
+} from '#/api/member';
+
+/** 会员管理查看权限。 */
+export const MEMBER_VIEW_PERMISSION = 'tenant:member:view';
+
+/** 会员管理编辑权限。 */
+export const MEMBER_MANAGE_PERMISSION = 'tenant:member:manage';
+
+/** 等级图标选项。 */
+export const MEMBER_TIER_ICON_OPTIONS: OptionItem[] = [
+  { label: '默认', value: 'user' },
+  { label: '奖章', value: 'award' },
+  { label: '奖杯', value: 'trophy' },
+  { label: '钻石', value: 'gem' },
+  { label: '皇冠', value: 'crown' },
+  { label: '星星', value: 'star' },
+];
+
+/** 等级颜色选项。 */
+export const MEMBER_TIER_COLOR_OPTIONS = [
+  '#999999',
+  '#1890ff',
+  '#fa8c16',
+  '#722ed1',
+  '#eb2f96',
+  '#f5222d',
+];
+
+/** 升级规则选项。 */
+export const MEMBER_TIER_RULE_OPTIONS: OptionItem[] = [
+  { label: '按累计消费金额', value: 'amount' },
+  { label: '按消费次数', value: 'count' },
+  { label: '同时满足', value: 'both' },
+];
+
+/** 默认筛选项。 */
+export function createDefaultFilters(): MemberFilterState {
+  return {
+    keyword: '',
+    tierId: '',
+  };
+}
+
+/** 默认统计。 */
+export const DEFAULT_MEMBER_STATS: MemberListStatsDto = {
+  totalMembers: 0,
+  monthlyNewMembers: 0,
+  activeMembers: 0,
+  dormantMembers: 0,
+};
+
+/** 默认会员日配置。 */
+export const DEFAULT_MEMBER_DAY_SETTING: MemberDaySettingDto = {
+  isEnabled: true,
+  weekday: 2,
+  extraDiscountRate: 9,
+};
+
+/** 默认等级规则。 */
+export const DEFAULT_MEMBER_TIER_RULE: MemberTierRuleDto = {
+  upgradeRuleType: 'amount',
+  upgradeAmountThreshold: 500,
+  upgradeOrderCountThreshold: undefined,
+  downgradeWindowDays: 90,
+};
+
+/** 默认等级权益。 */
+export const DEFAULT_MEMBER_TIER_BENEFITS: MemberTierBenefitsDto = {
+  discount: {
+    enabled: false,
+    discountRate: 9.5,
+  },
+  pointMultiplier: {
+    enabled: false,
+    multiplier: 1.5,
+  },
+  birthday: {
+    enabled: false,
+    doublePointsEnabled: false,
+    couponTemplateIds: [],
+  },
+  monthlyCoupon: {
+    enabled: false,
+    grantDay: 1,
+    couponTemplateIds: [],
+  },
+  freeDelivery: {
+    enabled: false,
+    monthlyFreeTimes: 0,
+  },
+  priorityDeliveryEnabled: false,
+  exclusiveServiceEnabled: false,
+};

apps/web-antd/src/views/member/list/composables/member-page/coupon-actions.ts

@@ -0,0 +1,111 @@
+import type { MemberTierEditorForm } from '../../types';
+
+import type { MemberCouponPickerItemDto } from '#/api/member';
+
+interface CouponActionOptions {
+  couponItems: { value: MemberCouponPickerItemDto[] };
+  couponKeyword: { value: string };
+  couponModalOpen: { value: boolean };
+  couponTarget: { value: '' | 'birthday' | 'monthly' };
+  loadCouponItems: (keyword: string) => Promise<void>;
+  selectedCouponIds: { value: string[] };
+  tierForm: { value: MemberTierEditorForm | null };
+}
+
+/**
+ * 文件职责：等级编辑抽屉内优惠券选择动作。
+ */
+export function createCouponActions(options: CouponActionOptions) {
+  function setCouponModalOpen(value: boolean) {
+    options.couponModalOpen.value = value;
+    if (!value) {
+      options.selectedCouponIds.value = [];
+      options.couponTarget.value = '';
+      options.couponKeyword.value = '';
+    }
+  }
+
+  function setCouponKeyword(value: string) {
+    options.couponKeyword.value = value;
+  }
+
+  async function openCouponPicker(
+    target: 'birthday' | 'monthly',
+    selectedIds: string[],
+  ) {
+    options.couponTarget.value = target;
+    options.selectedCouponIds.value = [...selectedIds];
+    options.couponModalOpen.value = true;
+    options.couponKeyword.value = '';
+    await options.loadCouponItems('');
+  }
+
+  async function searchCoupons() {
+    await options.loadCouponItems(options.couponKeyword.value);
+  }
+
+  function toggleCoupon(couponId: string) {
+    const exists = options.selectedCouponIds.value.includes(couponId);
+    if (exists) {
+      options.selectedCouponIds.value = options.selectedCouponIds.value.filter(
+        (item) => item !== couponId,
+      );
+      return;
+    }
+
+    options.selectedCouponIds.value = [
+      ...options.selectedCouponIds.value,
+      couponId,
+    ];
+  }
+
+  function applyCoupons() {
+    if (!options.tierForm.value || !options.couponTarget.value) {
+      setCouponModalOpen(false);
+      return;
+    }
+
+    options.tierForm.value =
+      options.couponTarget.value === 'birthday'
+        ? {
+            ...options.tierForm.value,
+            benefits: {
+              ...options.tierForm.value.benefits,
+              birthday: {
+                ...options.tierForm.value.benefits.birthday,
+                couponTemplateIds: [...options.selectedCouponIds.value],
+              },
+            },
+          }
+        : {
+            ...options.tierForm.value,
+            benefits: {
+              ...options.tierForm.value.benefits,
+              monthlyCoupon: {
+                ...options.tierForm.value.benefits.monthlyCoupon,
+                couponTemplateIds: [...options.selectedCouponIds.value],
+              },
+            },
+          };
+
+    setCouponModalOpen(false);
+  }
+
+  function resolveCouponLabelMap() {
+    const labelMap: Record<string, string> = {};
+    for (const item of options.couponItems.value) {
+      labelMap[item.couponTemplateId] = item.displayText || item.name;
+    }
+    return labelMap;
+  }
+
+  return {
+    applyCoupons,
+    openCouponPicker,
+    resolveCouponLabelMap,
+    searchCoupons,
+    setCouponKeyword,
+    setCouponModalOpen,
+    toggleCoupon,
+  };
+}

apps/web-antd/src/views/member/list/composables/member-page/data-actions.ts

@@ -0,0 +1,159 @@
+import type { MemberFilterState, MemberPaginationState } from '../../types';
+
+import type {
+  MemberCouponPickerItemDto,
+  MemberDaySettingDto,
+  MemberListItemDto,
+  MemberListStatsDto,
+  MemberTierListItemDto,
+} from '#/api/member';
+import type { StoreListItemDto } from '#/api/store';
+
+import {
+  getMemberCouponPickerApi,
+  getMemberDaySettingApi,
+  getMemberListApi,
+  getMemberListStatsApi,
+  getMemberTierListApi,
+} from '#/api/member';
+import { getStoreListApi } from '#/api/store';
+
+import { DEFAULT_MEMBER_DAY_SETTING, DEFAULT_MEMBER_STATS } from './constants';
+import { buildFilterPayload, buildQueryPayload } from './helpers';
+
+interface DataActionOptions {
+  couponItems: { value: MemberCouponPickerItemDto[] };
+  couponLoading: { value: boolean };
+  daySetting: { value: MemberDaySettingDto | null };
+  filters: MemberFilterState;
+  isListLoading: { value: boolean };
+  isStoreLoading: { value: boolean };
+  pageSizeMax?: number;
+  pagination: MemberPaginationState;
+  rows: { value: MemberListItemDto[] };
+  selectedStoreId: { value: string };
+  stats: MemberListStatsDto;
+  stores: { value: StoreListItemDto[] };
+  tierLoading: { value: boolean };
+  tiers: { value: MemberTierListItemDto[] };
+}
+
+/**
+ * 文件职责：会员页基础数据加载动作。
+ */
+export function createDataActions(options: DataActionOptions) {
+  function resetStats() {
+    options.stats.totalMembers = DEFAULT_MEMBER_STATS.totalMembers;
+    options.stats.monthlyNewMembers = DEFAULT_MEMBER_STATS.monthlyNewMembers;
+    options.stats.activeMembers = DEFAULT_MEMBER_STATS.activeMembers;
+    options.stats.dormantMembers = DEFAULT_MEMBER_STATS.dormantMembers;
+  }
+
+  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 = '';
+        options.rows.value = [];
+        options.pagination.total = 0;
+        resetStats();
+        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 loadListAndStats() {
+    if (!options.selectedStoreId.value) {
+      options.rows.value = [];
+      options.pagination.total = 0;
+      resetStats();
+      return;
+    }
+
+    options.isListLoading.value = true;
+    try {
+      const [listResult, statsResult] = await Promise.all([
+        getMemberListApi(
+          buildQueryPayload(
+            options.selectedStoreId.value,
+            options.filters,
+            options.pagination.page,
+            options.pagination.pageSize,
+          ),
+        ),
+        getMemberListStatsApi(
+          buildFilterPayload(options.selectedStoreId.value, options.filters),
+        ),
+      ]);
+
+      options.rows.value = listResult.items;
+      options.pagination.total = listResult.total;
+      options.pagination.page = listResult.page;
+      options.pagination.pageSize = listResult.pageSize;
+
+      options.stats.totalMembers = statsResult.totalMembers;
+      options.stats.monthlyNewMembers = statsResult.monthlyNewMembers;
+      options.stats.activeMembers = statsResult.activeMembers;
+      options.stats.dormantMembers = statsResult.dormantMembers;
+    } finally {
+      options.isListLoading.value = false;
+    }
+  }
+
+  async function loadTierData() {
+    options.tierLoading.value = true;
+    try {
+      const [tierResult, daySettingResult] = await Promise.all([
+        getMemberTierListApi(),
+        getMemberDaySettingApi(),
+      ]);
+
+      options.tiers.value = tierResult;
+      options.daySetting.value = daySettingResult;
+    } finally {
+      options.tierLoading.value = false;
+    }
+  }
+
+  async function loadCouponItems(keyword: string) {
+    if (!options.selectedStoreId.value) {
+      options.couponItems.value = [];
+      return;
+    }
+
+    options.couponLoading.value = true;
+    try {
+      options.couponItems.value = await getMemberCouponPickerApi({
+        storeId: options.selectedStoreId.value,
+        keyword: keyword.trim() || undefined,
+      });
+    } finally {
+      options.couponLoading.value = false;
+    }
+  }
+
+  function resetDaySetting() {
+    options.daySetting.value = { ...DEFAULT_MEMBER_DAY_SETTING };
+  }
+
+  return {
+    loadCouponItems,
+    loadListAndStats,
+    loadStores,
+    loadTierData,
+    resetDaySetting,
+    resetStats,
+  };
+}

apps/web-antd/src/views/member/list/composables/member-page/detail-actions.ts

@@ -0,0 +1,77 @@
+import type { MemberDetailDto } from '#/api/member';
+
+import { message } from 'ant-design-vue';
+
+import { getMemberDetailApi, saveMemberTagsApi } from '#/api/member';
+
+interface DetailActionOptions {
+  canManage: { value: boolean };
+  detail: { value: MemberDetailDto | null };
+  detailLoading: { value: boolean };
+  detailOpen: { value: boolean };
+  selectedStoreId: { value: string };
+  tagSaving: { value: boolean };
+}
+
+/**
+ * 文件职责：会员详情抽屉与标签编辑动作。
+ */
+export function createDetailActions(options: DetailActionOptions) {
+  function setDetailOpen(value: boolean) {
+    options.detailOpen.value = value;
+    if (!value) {
+      options.detail.value = null;
+    }
+  }
+
+  async function openDetail(memberId: string) {
+    if (!options.selectedStoreId.value || !memberId) {
+      return;
+    }
+
+    options.detailOpen.value = true;
+    options.detail.value = null;
+    options.detailLoading.value = true;
+    try {
+      options.detail.value = await getMemberDetailApi({
+        storeId: options.selectedStoreId.value,
+        memberId,
+      });
+    } finally {
+      options.detailLoading.value = false;
+    }
+  }
+
+  async function saveTags(tags: string[]) {
+    if (!options.detail.value) {
+      return;
+    }
+
+    if (!options.canManage.value) {
+      message.warning('暂无标签编辑权限');
+      return;
+    }
+
+    options.tagSaving.value = true;
+    try {
+      await saveMemberTagsApi({
+        storeId: options.selectedStoreId.value,
+        memberId: options.detail.value.memberId,
+        tags,
+      });
+      options.detail.value = {
+        ...options.detail.value,
+        tags: [...tags],
+      };
+      message.success('标签已保存');
+    } finally {
+      options.tagSaving.value = false;
+    }
+  }
+
+  return {
+    openDetail,
+    saveTags,
+    setDetailOpen,
+  };
+}

apps/web-antd/src/views/member/list/composables/member-page/export-actions.ts

@@ -0,0 +1,51 @@
+import type { MemberFilterState } from '../../types';
+
+import { message } from 'ant-design-vue';
+
+import { exportMemberCsvApi } from '#/api/member';
+
+import { buildFilterPayload, downloadBase64File } from './helpers';
+
+interface ExportActionOptions {
+  canManage: { value: boolean };
+  filters: MemberFilterState;
+  isExporting: { value: boolean };
+  selectedStoreId: { value: string };
+}
+
+/**
+ * 文件职责：会员列表导出动作。
+ */
+export function createExportActions(options: ExportActionOptions) {
+  async function handleExport() {
+    if (!options.selectedStoreId.value) {
+      return;
+    }
+
+    if (!options.canManage.value) {
+      message.warning('暂无导出权限');
+      return;
+    }
+
+    options.isExporting.value = true;
+    try {
+      const result = await exportMemberCsvApi(
+        buildFilterPayload(options.selectedStoreId.value, options.filters),
+      );
+
+      if (!result.fileContentBase64) {
+        message.info('当前筛选条件暂无可导出数据');
+        return;
+      }
+
+      downloadBase64File(result.fileName, result.fileContentBase64);
+      message.success(`导出成功，共 ${result.totalCount} 条记录`);
+    } finally {
+      options.isExporting.value = false;
+    }
+  }
+
+  return {
+    handleExport,
+  };
+}

apps/web-antd/src/views/member/list/composables/member-page/filter-actions.ts

@@ -0,0 +1,49 @@
+import type { MemberFilterState, MemberPaginationState } from '../../types';
+
+import { createDefaultFilters } from './constants';
+
+interface FilterActionOptions {
+  filters: MemberFilterState;
+  loadListAndStats: () => Promise<void>;
+  pagination: MemberPaginationState;
+}
+
+/**
+ * 文件职责：会员列表筛选与分页动作。
+ */
+export function createFilterActions(options: FilterActionOptions) {
+  function setKeyword(value: string) {
+    options.filters.keyword = value;
+  }
+
+  function setTierId(value: string) {
+    options.filters.tierId = value || '';
+  }
+
+  async function handleSearch() {
+    options.pagination.page = 1;
+    await options.loadListAndStats();
+  }
+
+  async function handleReset() {
+    const defaults = createDefaultFilters();
+    options.filters.keyword = defaults.keyword;
+    options.filters.tierId = defaults.tierId;
+    options.pagination.page = 1;
+    await options.loadListAndStats();
+  }
+
+  async function handlePageChange(page: number, pageSize: number) {
+    options.pagination.page = page;
+    options.pagination.pageSize = pageSize;
+    await options.loadListAndStats();
+  }
+
+  return {
+    handlePageChange,
+    handleReset,
+    handleSearch,
+    setKeyword,
+    setTierId,
+  };
+}

apps/web-antd/src/views/member/list/composables/member-page/helpers.ts

@@ -0,0 +1,258 @@
+import type { MemberFilterState, MemberTierEditorForm } from '../../types';
+
+import type {
+  MemberDetailDto,
+  MemberListFilterQuery,
+  MemberListQuery,
+  MemberTierDetailDto,
+  SaveMemberTierPayload,
+} from '#/api/member';
+
+import {
+  DEFAULT_MEMBER_TIER_BENEFITS,
+  DEFAULT_MEMBER_TIER_RULE,
+} from './constants';
+
+export function buildFilterPayload(
+  storeId: string,
+  filters: MemberFilterState,
+): MemberListFilterQuery {
+  return {
+    storeId,
+    keyword: filters.keyword.trim() || undefined,
+    tierId: filters.tierId || undefined,
+  };
+}
+
+export function buildQueryPayload(
+  storeId: string,
+  filters: MemberFilterState,
+  page: number,
+  pageSize: number,
+): MemberListQuery {
+  return {
+    ...buildFilterPayload(storeId, filters),
+    page,
+    pageSize,
+  };
+}
+
+export function formatCurrency(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 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);
+}
+
+function normalizeHexColor(color: string) {
+  const source = (color || '#999999').trim();
+  if (!source.startsWith('#')) {
+    return `#${source}`;
+  }
+  return source;
+}
+
+function hexToRgb(hex: string) {
+  const normalized = normalizeHexColor(hex).replace('#', '');
+  if (normalized.length !== 6) {
+    return { r: 153, g: 153, b: 153 };
+  }
+
+  return {
+    r: Number.parseInt(normalized.slice(0, 2), 16),
+    g: Number.parseInt(normalized.slice(2, 4), 16),
+    b: Number.parseInt(normalized.slice(4, 6), 16),
+  };
+}
+
+export function resolveTierTagStyle(colorHex: string) {
+  const rgb = hexToRgb(colorHex);
+  return {
+    color: normalizeHexColor(colorHex),
+    backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.12)`,
+    borderColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.35)`,
+  };
+}
+
+export function resolveTierIcon(iconKey: string) {
+  const normalized = (iconKey || 'user').trim().toLowerCase();
+  if (normalized === 'award') return 'lucide:award';
+  if (normalized === 'trophy') return 'lucide:trophy';
+  if (normalized === 'gem') return 'lucide:gem';
+  if (normalized === 'crown') return 'lucide:crown';
+  if (normalized === 'star') return 'lucide:star';
+  return 'lucide:user';
+}
+
+export function createTierEditorForm(
+  source: MemberTierDetailDto,
+): MemberTierEditorForm {
+  return {
+    tierId: source.tierId,
+    sortOrder: source.sortOrder,
+    name: source.name,
+    iconKey: source.iconKey,
+    colorHex: source.colorHex,
+    isDefault: source.isDefault,
+    rule: {
+      upgradeRuleType: source.rule.upgradeRuleType,
+      upgradeAmountThreshold: source.rule.upgradeAmountThreshold,
+      upgradeOrderCountThreshold: source.rule.upgradeOrderCountThreshold,
+      downgradeWindowDays: source.rule.downgradeWindowDays,
+    },
+    benefits: {
+      discount: {
+        enabled: source.benefits.discount.enabled,
+        discountRate: source.benefits.discount.discountRate,
+      },
+      pointMultiplier: {
+        enabled: source.benefits.pointMultiplier.enabled,
+        multiplier: source.benefits.pointMultiplier.multiplier,
+      },
+      birthday: {
+        enabled: source.benefits.birthday.enabled,
+        doublePointsEnabled: source.benefits.birthday.doublePointsEnabled,
+        couponTemplateIds: [...source.benefits.birthday.couponTemplateIds],
+      },
+      monthlyCoupon: {
+        enabled: source.benefits.monthlyCoupon.enabled,
+        grantDay: source.benefits.monthlyCoupon.grantDay,
+        couponTemplateIds: [...source.benefits.monthlyCoupon.couponTemplateIds],
+      },
+      freeDelivery: {
+        enabled: source.benefits.freeDelivery.enabled,
+        monthlyFreeTimes: source.benefits.freeDelivery.monthlyFreeTimes,
+      },
+      priorityDeliveryEnabled: source.benefits.priorityDeliveryEnabled,
+      exclusiveServiceEnabled: source.benefits.exclusiveServiceEnabled,
+    },
+  };
+}
+
+export function createEmptyTierEditorForm(): MemberTierEditorForm {
+  return {
+    tierId: undefined,
+    sortOrder: 1,
+    name: '',
+    iconKey: 'user',
+    colorHex: '#999999',
+    isDefault: false,
+    rule: {
+      ...DEFAULT_MEMBER_TIER_RULE,
+    },
+    benefits: {
+      discount: { ...DEFAULT_MEMBER_TIER_BENEFITS.discount },
+      pointMultiplier: { ...DEFAULT_MEMBER_TIER_BENEFITS.pointMultiplier },
+      birthday: {
+        ...DEFAULT_MEMBER_TIER_BENEFITS.birthday,
+        couponTemplateIds: [],
+      },
+      monthlyCoupon: {
+        ...DEFAULT_MEMBER_TIER_BENEFITS.monthlyCoupon,
+        couponTemplateIds: [],
+      },
+      freeDelivery: { ...DEFAULT_MEMBER_TIER_BENEFITS.freeDelivery },
+      priorityDeliveryEnabled:
+        DEFAULT_MEMBER_TIER_BENEFITS.priorityDeliveryEnabled,
+      exclusiveServiceEnabled:
+        DEFAULT_MEMBER_TIER_BENEFITS.exclusiveServiceEnabled,
+    },
+  };
+}
+
+export function buildTierSavePayload(
+  form: MemberTierEditorForm,
+): SaveMemberTierPayload {
+  return {
+    tierId: form.tierId,
+    sortOrder: Number(form.sortOrder || 1),
+    name: form.name.trim(),
+    iconKey: form.iconKey,
+    colorHex: normalizeHexColor(form.colorHex),
+    isDefault: !!form.isDefault,
+    rule: {
+      upgradeRuleType: form.rule.upgradeRuleType,
+      upgradeAmountThreshold:
+        form.rule.upgradeAmountThreshold === undefined
+          ? undefined
+          : Number(form.rule.upgradeAmountThreshold),
+      upgradeOrderCountThreshold:
+        form.rule.upgradeOrderCountThreshold === undefined
+          ? undefined
+          : Number(form.rule.upgradeOrderCountThreshold),
+      downgradeWindowDays: Number(form.rule.downgradeWindowDays || 90),
+    },
+    benefits: {
+      discount: {
+        enabled: !!form.benefits.discount.enabled,
+        discountRate:
+          form.benefits.discount.discountRate === undefined
+            ? undefined
+            : Number(form.benefits.discount.discountRate),
+      },
+      pointMultiplier: {
+        enabled: !!form.benefits.pointMultiplier.enabled,
+        multiplier:
+          form.benefits.pointMultiplier.multiplier === undefined
+            ? undefined
+            : Number(form.benefits.pointMultiplier.multiplier),
+      },
+      birthday: {
+        enabled: !!form.benefits.birthday.enabled,
+        doublePointsEnabled: !!form.benefits.birthday.doublePointsEnabled,
+        couponTemplateIds: [
+          ...new Set(form.benefits.birthday.couponTemplateIds),
+        ],
+      },
+      monthlyCoupon: {
+        enabled: !!form.benefits.monthlyCoupon.enabled,
+        grantDay: Number(form.benefits.monthlyCoupon.grantDay || 1),
+        couponTemplateIds: [
+          ...new Set(form.benefits.monthlyCoupon.couponTemplateIds),
+        ],
+      },
+      freeDelivery: {
+        enabled: !!form.benefits.freeDelivery.enabled,
+        monthlyFreeTimes: Number(
+          form.benefits.freeDelivery.monthlyFreeTimes || 0,
+        ),
+      },
+      priorityDeliveryEnabled: !!form.benefits.priorityDeliveryEnabled,
+      exclusiveServiceEnabled: !!form.benefits.exclusiveServiceEnabled,
+    },
+  };
+}
+
+export function resolveMemberName(detail: MemberDetailDto | null) {
+  return detail?.name || '会员';
+}

apps/web-antd/src/views/member/list/composables/member-page/tier-actions.ts

@@ -0,0 +1,153 @@
+import type { MemberTierEditorForm } from '../../types';
+
+import type {
+  MemberDaySettingDto,
+  MemberTierListItemDto,
+  SaveMemberTierPayload,
+} from '#/api/member';
+
+import { message, Modal } from 'ant-design-vue';
+
+import {
+  deleteMemberTierApi,
+  getMemberTierDetailApi,
+  saveMemberDaySettingApi,
+  saveMemberTierApi,
+} from '#/api/member';
+
+import { buildTierSavePayload, createTierEditorForm } from './helpers';
+
+interface TierActionOptions {
+  canManage: { value: boolean };
+  daySetting: { value: MemberDaySettingDto | null };
+  daySettingSaving: { value: boolean };
+  loadTierData: () => Promise<void>;
+  tierEditorLoading: { value: boolean };
+  tierEditorOpen: { value: boolean };
+  tierEditorSubmitting: { value: boolean };
+  tierForm: { value: MemberTierEditorForm | null };
+  tiers: { value: MemberTierListItemDto[] };
+}
+
+/**
+ * 文件职责：等级体系与会员日动作。
+ */
+export function createTierActions(options: TierActionOptions) {
+  function setTierEditorOpen(value: boolean) {
+    options.tierEditorOpen.value = value;
+    if (!value) {
+      options.tierForm.value = null;
+    }
+  }
+
+  async function openCreateTier() {
+    if (!options.canManage.value) {
+      message.warning('暂无编辑权限');
+      return;
+    }
+
+    options.tierEditorOpen.value = true;
+    options.tierEditorLoading.value = true;
+    options.tierForm.value = null;
+    try {
+      const detail = await getMemberTierDetailApi({});
+      options.tierForm.value = createTierEditorForm(detail);
+    } finally {
+      options.tierEditorLoading.value = false;
+    }
+  }
+
+  async function openEditTier(tierId: string) {
+    if (!options.canManage.value) {
+      message.warning('暂无编辑权限');
+      return;
+    }
+
+    options.tierEditorOpen.value = true;
+    options.tierEditorLoading.value = true;
+    options.tierForm.value = null;
+    try {
+      const detail = await getMemberTierDetailApi({ tierId });
+      options.tierForm.value = createTierEditorForm(detail);
+    } finally {
+      options.tierEditorLoading.value = false;
+    }
+  }
+
+  async function submitTier(form: MemberTierEditorForm) {
+    if (!options.canManage.value) {
+      message.warning('暂无编辑权限');
+      return;
+    }
+
+    const payload: SaveMemberTierPayload = buildTierSavePayload(form);
+    options.tierEditorSubmitting.value = true;
+    try {
+      await saveMemberTierApi(payload);
+      message.success('等级保存成功');
+      options.tierEditorOpen.value = false;
+      options.tierForm.value = null;
+      await options.loadTierData();
+    } finally {
+      options.tierEditorSubmitting.value = false;
+    }
+  }
+
+  async function deleteTier(tierId: string) {
+    if (!options.canManage.value) {
+      message.warning('暂无编辑权限');
+      return;
+    }
+
+    const row = options.tiers.value.find((item) => item.tierId === tierId);
+    if (!row || !row.canDelete) {
+      message.warning('该等级暂不允许删除');
+      return;
+    }
+
+    await new Promise<void>((resolve, reject) => {
+      Modal.confirm({
+        title: '确认删除该等级吗？',
+        content: '删除后无法恢复，请确认当前等级下没有会员。',
+        okText: '确认删除',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk: async () => {
+          try {
+            await deleteMemberTierApi({ tierId });
+            message.success('等级已删除');
+            await options.loadTierData();
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        },
+        onCancel: () => resolve(),
+      });
+    });
+  }
+
+  async function saveDaySetting(payload: MemberDaySettingDto) {
+    if (!options.canManage.value) {
+      message.warning('暂无编辑权限');
+      return;
+    }
+
+    options.daySettingSaving.value = true;
+    try {
+      options.daySetting.value = await saveMemberDaySettingApi(payload);
+      message.success('会员日配置已保存');
+    } finally {
+      options.daySettingSaving.value = false;
+    }
+  }
+
+  return {
+    deleteTier,
+    openCreateTier,
+    openEditTier,
+    saveDaySetting,
+    setTierEditorOpen,
+    submitTier,
+  };
+}

apps/web-antd/src/views/member/list/composables/useMemberListPage.ts

@@ -0,0 +1,371 @@
+import type { MemberTabKey, MemberTierEditorForm } from '../types';
+
+import type {
+  MemberCouponPickerItemDto,
+  MemberDaySettingDto,
+  MemberDetailDto,
+  MemberListItemDto,
+  MemberTierListItemDto,
+} from '#/api/member';
+import type { StoreListItemDto } from '#/api/store';
+
+/**
+ * 文件职责：会员管理页面状态与动作编排。
+ */
+import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
+
+import { useAccessStore } from '@vben/stores';
+
+import {
+  createDefaultFilters,
+  DEFAULT_MEMBER_DAY_SETTING,
+  DEFAULT_MEMBER_STATS,
+  MEMBER_MANAGE_PERMISSION,
+  MEMBER_VIEW_PERMISSION,
+} from './member-page/constants';
+import { createCouponActions } from './member-page/coupon-actions';
+import { createDataActions } from './member-page/data-actions';
+import { createDetailActions } from './member-page/detail-actions';
+import { createExportActions } from './member-page/export-actions';
+import { createFilterActions } from './member-page/filter-actions';
+import { createTierActions } from './member-page/tier-actions';
+
+export function useMemberListPage() {
+  const accessStore = useAccessStore();
+
+  const stores = ref<StoreListItemDto[]>([]);
+  const selectedStoreId = ref('');
+  const isStoreLoading = ref(false);
+
+  const activeTab = ref<MemberTabKey>('list');
+  const filters = reactive(createDefaultFilters());
+  const rows = ref<MemberListItemDto[]>([]);
+  const pagination = reactive({
+    page: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const stats = reactive({ ...DEFAULT_MEMBER_STATS });
+  const isListLoading = ref(false);
+  const isExporting = ref(false);
+
+  const detail = ref<MemberDetailDto | null>(null);
+  const detailOpen = ref(false);
+  const detailLoading = ref(false);
+  const tagSaving = ref(false);
+
+  const tiers = ref<MemberTierListItemDto[]>([]);
+  const tierLoading = ref(false);
+
+  const daySetting = ref<MemberDaySettingDto | null>({
+    ...DEFAULT_MEMBER_DAY_SETTING,
+  });
+  const daySettingSaving = ref(false);
+
+  const tierForm = ref<MemberTierEditorForm | null>(null);
+  const tierEditorOpen = ref(false);
+  const tierEditorLoading = ref(false);
+  const tierEditorSubmitting = ref(false);
+
+  const couponItems = ref<MemberCouponPickerItemDto[]>([]);
+  const couponLoading = ref(false);
+  const couponKeyword = ref('');
+  const couponModalOpen = ref(false);
+  const selectedCouponIds = ref<string[]>([]);
+  const couponTarget = ref<'' | 'birthday' | 'monthly'>('');
+
+  const storeOptions = computed(() =>
+    stores.value.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })),
+  );
+
+  const tierOptions = computed(() => [
+    {
+      label: '全部等级',
+      value: '',
+    },
+    ...tiers.value.map((item) => ({
+      label: item.name,
+      value: item.tierId,
+    })),
+  ]);
+
+  const accessCodeSet = computed(
+    () => new Set((accessStore.accessCodes ?? []).map(String)),
+  );
+
+  const canView = computed(
+    () =>
+      accessCodeSet.value.has(MEMBER_VIEW_PERMISSION) ||
+      accessCodeSet.value.has(MEMBER_MANAGE_PERMISSION),
+  );
+
+  const canManage = computed(() =>
+    accessCodeSet.value.has(MEMBER_MANAGE_PERMISSION),
+  );
+
+  const {
+    loadCouponItems,
+    loadListAndStats,
+    loadStores,
+    loadTierData,
+    resetDaySetting,
+    resetStats,
+  } = createDataActions({
+    stores,
+    selectedStoreId,
+    filters,
+    rows,
+    pagination,
+    stats,
+    isStoreLoading,
+    isListLoading,
+    tiers,
+    tierLoading,
+    daySetting,
+    couponItems,
+    couponLoading,
+  });
+
+  const { handlePageChange, handleReset, handleSearch, setKeyword, setTierId } =
+    createFilterActions({
+      filters,
+      pagination,
+      loadListAndStats,
+    });
+
+  const { openDetail, saveTags, setDetailOpen } = createDetailActions({
+    canManage,
+    detail,
+    detailLoading,
+    detailOpen,
+    selectedStoreId,
+    tagSaving,
+  });
+
+  const { handleExport } = createExportActions({
+    canManage,
+    filters,
+    isExporting,
+    selectedStoreId,
+  });
+
+  const {
+    deleteTier,
+    openCreateTier,
+    openEditTier,
+    saveDaySetting,
+    setTierEditorOpen,
+    submitTier,
+  } = createTierActions({
+    canManage,
+    daySetting,
+    daySettingSaving,
+    loadTierData,
+    tierEditorOpen,
+    tierEditorLoading,
+    tierEditorSubmitting,
+    tierForm,
+    tiers,
+  });
+
+  const {
+    applyCoupons,
+    openCouponPicker,
+    resolveCouponLabelMap,
+    searchCoupons,
+    setCouponKeyword,
+    setCouponModalOpen,
+    toggleCoupon,
+  } = createCouponActions({
+    couponItems,
+    couponKeyword,
+    couponModalOpen,
+    couponTarget,
+    loadCouponItems,
+    selectedCouponIds,
+    tierForm,
+  });
+
+  const couponLabelMap = computed(() => resolveCouponLabelMap());
+
+  const couponModalTitle = computed(() =>
+    couponTarget.value === 'birthday' ? '选择生日赠券' : '选择每月赠券',
+  );
+
+  function clearPageDataByPermission() {
+    stores.value = [];
+    selectedStoreId.value = '';
+    rows.value = [];
+    pagination.total = 0;
+    detail.value = null;
+    detailOpen.value = false;
+    tiers.value = [];
+    couponItems.value = [];
+    resetStats();
+    resetDaySetting();
+  }
+
+  async function bootstrapPageData() {
+    await Promise.all([loadStores(), loadTierData()]);
+  }
+
+  function setActiveTab(value: MemberTabKey) {
+    activeTab.value = value;
+  }
+
+  function setSelectedStoreId(value: string) {
+    selectedStoreId.value = value;
+  }
+
+  async function handleOpenCreateTier() {
+    await openCreateTier();
+    await loadCouponItems('');
+  }
+
+  async function handleOpenEditTier(tierId: string) {
+    await openEditTier(tierId);
+    await loadCouponItems('');
+  }
+
+  async function handleDeleteTier(tierId: string) {
+    await deleteTier(tierId);
+  }
+
+  async function handleSaveDaySetting(payload: MemberDaySettingDto) {
+    await saveDaySetting(payload);
+  }
+
+  async function handleSubmitTier(form: MemberTierEditorForm) {
+    await submitTier(form);
+  }
+
+  function handleOpenCouponPicker(
+    target: 'birthday' | 'monthly',
+    selectedIds: string[],
+  ) {
+    void openCouponPicker(target, selectedIds);
+  }
+
+  watch(selectedStoreId, async (storeId) => {
+    if (!storeId) {
+      rows.value = [];
+      pagination.total = 0;
+      detail.value = null;
+      detailOpen.value = false;
+      resetStats();
+      return;
+    }
+
+    pagination.page = 1;
+    await loadListAndStats();
+  });
+
+  watch(activeTab, async (tab) => {
+    if (!canView.value) {
+      return;
+    }
+
+    if (tab === 'tiers' && tiers.value.length === 0) {
+      await loadTierData();
+    }
+  });
+
+  watch(canView, async (value, oldValue) => {
+    if (value === oldValue) {
+      return;
+    }
+
+    if (!value) {
+      clearPageDataByPermission();
+      return;
+    }
+
+    await bootstrapPageData();
+  });
+
+  onMounted(async () => {
+    if (!canView.value) {
+      clearPageDataByPermission();
+      return;
+    }
+
+    await bootstrapPageData();
+  });
+
+  onActivated(() => {
+    if (!canView.value) {
+      return;
+    }
+
+    if (stores.value.length === 0) {
+      void loadStores();
+    }
+
+    if (tiers.value.length === 0) {
+      void loadTierData();
+    }
+  });
+
+  return {
+    activeTab,
+    applyCoupons,
+    canManage,
+    canView,
+    couponItems,
+    couponKeyword,
+    couponLabelMap,
+    couponLoading,
+    couponModalOpen,
+    couponModalTitle,
+    daySetting,
+    daySettingSaving,
+    detail,
+    detailLoading,
+    detailOpen,
+    filters,
+    handleDeleteTier,
+    handleExport,
+    handleOpenCouponPicker,
+    handleOpenCreateTier,
+    handleOpenEditTier,
+    handlePageChange,
+    handleReset,
+    handleSaveDaySetting,
+    handleSearch,
+    handleSubmitTier,
+    isExporting,
+    isListLoading,
+    isStoreLoading,
+    openDetail,
+    pagination,
+    rows,
+    saveTags,
+    searchCoupons,
+    selectedCouponIds,
+    selectedStoreId,
+    setActiveTab,
+    setCouponKeyword,
+    setCouponModalOpen,
+    setDetailOpen,
+    setKeyword,
+    setSelectedStoreId,
+    setTierEditorOpen,
+    setTierId,
+    stats,
+    storeOptions,
+    tagSaving,
+    tierEditorLoading,
+    tierEditorOpen,
+    tierEditorSubmitting,
+    tierForm,
+    tierLoading,
+    tierOptions,
+    tiers,
+    toggleCoupon,
+    resetDaySetting,
+  };
+}

apps/web-antd/src/views/member/list/index.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Empty, Segmented } from 'ant-design-vue';
+
+import MemberCouponPickerModal from './components/MemberCouponPickerModal.vue';
+import MemberDaySettingCard from './components/MemberDaySettingCard.vue';
+import MemberDetailDrawer from './components/MemberDetailDrawer.vue';
+import MemberFilterBar from './components/MemberFilterBar.vue';
+import MemberStatsBar from './components/MemberStatsBar.vue';
+import MemberTableCard from './components/MemberTableCard.vue';
+import MemberTierEditorDrawer from './components/MemberTierEditorDrawer.vue';
+import MemberTierSystem from './components/MemberTierSystem.vue';
+import { useMemberListPage } from './composables/useMemberListPage';
+
+const {
+  activeTab,
+  applyCoupons,
+  canManage,
+  canView,
+  couponItems,
+  couponKeyword,
+  couponLabelMap,
+  couponLoading,
+  couponModalOpen,
+  couponModalTitle,
+  daySetting,
+  daySettingSaving,
+  detail,
+  detailLoading,
+  detailOpen,
+  filters,
+  handleDeleteTier,
+  handleExport,
+  handleOpenCouponPicker,
+  handleOpenCreateTier,
+  handleOpenEditTier,
+  handlePageChange,
+  handleReset,
+  handleSaveDaySetting,
+  handleSearch,
+  handleSubmitTier,
+  isExporting,
+  isListLoading,
+  isStoreLoading,
+  openDetail,
+  pagination,
+  rows,
+  saveTags,
+  searchCoupons,
+  selectedCouponIds,
+  selectedStoreId,
+  setActiveTab,
+  setCouponKeyword,
+  setCouponModalOpen,
+  setDetailOpen,
+  setKeyword,
+  setSelectedStoreId,
+  setTierEditorOpen,
+  setTierId,
+  stats,
+  storeOptions,
+  tagSaving,
+  tierEditorLoading,
+  tierEditorOpen,
+  tierEditorSubmitting,
+  tierForm,
+  tierLoading,
+  tierOptions,
+  tiers,
+  toggleCoupon,
+} = useMemberListPage();
+
+const tabOptions = [
+  { label: '会员列表', value: 'list' },
+  { label: '等级体系', value: 'tiers' },
+];
+
+const tierDrawerTitle = computed(() =>
+  tierForm.value?.tierId ? `编辑等级 - ${tierForm.value.name}` : '新增等级',
+);
+</script>
+
+<template>
+  <Page title="会员管理" content-class="page-member-list">
+    <div class="mm-page">
+      <Segmented
+        class="mm-tab-switch"
+        :value="activeTab"
+        :options="tabOptions"
+        @update:value="
+          (value) => setActiveTab((value as 'list' | 'tiers') || 'list')
+        "
+      />
+
+      <template v-if="canView">
+        <div v-show="activeTab === 'list'" class="mm-list-tab">
+          <MemberFilterBar
+            :selected-store-id="selectedStoreId"
+            :store-options="storeOptions"
+            :is-store-loading="isStoreLoading"
+            :tier-options="tierOptions"
+            :filters="filters"
+            :show-export="canManage"
+            :is-exporting="isExporting"
+            @update:selected-store-id="setSelectedStoreId"
+            @update:tier-id="setTierId"
+            @update:keyword="setKeyword"
+            @search="handleSearch"
+            @reset="handleReset"
+            @export="handleExport"
+          />
+
+          <MemberStatsBar :stats="stats" />
+
+          <MemberTableCard
+            :rows="rows"
+            :loading="isListLoading"
+            :pagination="pagination"
+            @page-change="handlePageChange"
+            @detail="openDetail"
+          />
+        </div>
+
+        <div v-show="activeTab === 'tiers'" class="mm-tier-tab">
+          <MemberTierSystem
+            :tiers="tiers"
+            :loading="tierLoading"
+            :can-manage="canManage"
+            @create="handleOpenCreateTier"
+            @edit="handleOpenEditTier"
+            @delete="handleDeleteTier"
+          />
+
+          <MemberDaySettingCard
+            :value="daySetting"
+            :loading="daySettingSaving"
+            :can-manage="canManage"
+            @save="handleSaveDaySetting"
+          />
+        </div>
+      </template>
+      <Empty v-else description="暂无会员管理页面访问权限" />
+    </div>
+
+    <MemberDetailDrawer
+      :open="detailOpen"
+      :loading="detailLoading"
+      :detail="detail"
+      :can-manage="canManage"
+      :tag-saving="tagSaving"
+      @close="setDetailOpen(false)"
+      @save-tags="saveTags"
+    />
+
+    <MemberTierEditorDrawer
+      :open="tierEditorOpen"
+      :title="tierDrawerTitle"
+      :loading="tierEditorLoading"
+      :submitting="tierEditorSubmitting"
+      :model="tierForm"
+      :can-manage="canManage"
+      :coupon-label-map="couponLabelMap"
+      @close="setTierEditorOpen(false)"
+      @submit="handleSubmitTier"
+      @open-coupon-picker="handleOpenCouponPicker"
+    />
+
+    <MemberCouponPickerModal
+      :open="couponModalOpen"
+      :title="couponModalTitle"
+      :loading="couponLoading"
+      :keyword="couponKeyword"
+      :items="couponItems"
+      :selected-ids="selectedCouponIds"
+      @close="setCouponModalOpen(false)"
+      @set-keyword="setCouponKeyword"
+      @search="searchCoupons"
+      @toggle="toggleCoupon"
+      @submit="applyCoupons"
+    />
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>

apps/web-antd/src/views/member/list/styles/base.less

@@ -0,0 +1,15 @@
+.page-member-list {
+  .ant-card {
+    border-radius: 10px;
+  }
+}
+
+.mm-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mm-tab-switch {
+  width: 260px;
+}

apps/web-antd/src/views/member/list/styles/drawer.less

@@ -0,0 +1,244 @@
+.mm-detail-head {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.mm-detail-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;
+  border-radius: 50%;
+}
+
+.mm-detail-title-wrap {
+  min-width: 0;
+}
+
+.mm-detail-name-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.mm-detail-name {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.mm-detail-meta {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.mm-overview-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.mm-overview-item {
+  padding: 10px;
+  text-align: center;
+  background: var(--ant-color-fill-quaternary);
+  border-radius: 8px;
+}
+
+.mm-overview-item .value {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.mm-overview-item .value.primary {
+  color: #1677ff;
+}
+
+.mm-overview-item .label {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.mm-overview-item .sub {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.mm-section {
+  margin-top: 16px;
+}
+
+.mm-section-title {
+  padding-left: 10px;
+  margin-bottom: 10px;
+  font-weight: 600;
+  border-left: 3px solid #1677ff;
+}
+
+.mm-order-action-placeholder {
+  font-size: 12px;
+  color: var(--ant-color-primary);
+}
+
+.mm-tag-editor {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.mm-tag-input {
+  width: 120px;
+}
+
+.mm-detail-footer,
+.mm-editor-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.mm-editor-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.mm-form-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mm-form-label {
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
+}
+
+.mm-form-label.required::after {
+  color: #ff4d4f;
+  content: ' *';
+}
+
+.mm-icon-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.mm-icon-pill {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  padding: 4px 10px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 16px;
+}
+
+.mm-icon-pill.active {
+  color: #1677ff;
+  background: rgb(22 119 255 / 6%);
+  border-color: #1677ff;
+}
+
+.mm-color-group {
+  display: flex;
+  gap: 10px;
+}
+
+.mm-color-dot {
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  border-radius: 50%;
+}
+
+.mm-color-dot.active {
+  border-color: #1677ff;
+}
+
+.mm-rule-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: var(--ant-color-fill-quaternary);
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+}
+
+.mm-rule-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.mm-rule-hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.mm-benefit-card {
+  padding: 10px 12px;
+  margin-bottom: 10px;
+  background: var(--ant-color-fill-quaternary);
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+}
+
+.mm-benefit-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mm-benefit-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.mm-benefit-body.col {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.mm-benefit-inline {
+  display: flex;
+  gap: 12px;
+}
+
+.mm-benefit-inline .item {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+}
+
+.mm-coupon-box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}

apps/web-antd/src/views/member/list/styles/index.less

@@ -0,0 +1,6 @@
+@import './base.less';
+@import './layout.less';
+@import './list.less';
+@import './tier.less';
+@import './drawer.less';
+@import './responsive.less';

apps/web-antd/src/views/member/list/styles/layout.less

@@ -0,0 +1,39 @@
+.mm-list-tab,
+.mm-tier-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mm-toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 12px 14px;
+  background: var(--ant-color-bg-container);
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+}
+
+.mm-store-select {
+  width: 220px;
+}
+
+.mm-tier-select {
+  width: 150px;
+}
+
+.mm-search-input {
+  width: 240px;
+}
+
+.mm-toolbar-right {
+  margin-left: auto;
+}
+
+.mm-table-card {
+  overflow: hidden;
+  background: var(--ant-color-bg-container);
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+}

apps/web-antd/src/views/member/list/styles/list.less

@@ -0,0 +1,74 @@
+.mm-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.mm-stat-card {
+  padding: 14px 18px;
+  background: var(--ant-color-bg-container);
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+}
+
+.mm-stat-label {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.mm-stat-value {
+  margin-top: 4px;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ant-color-text);
+}
+
+.mm-stat-value.blue {
+  color: #1677ff;
+}
+
+.mm-stat-value.green {
+  color: #52c41a;
+}
+
+.mm-stat-value.orange {
+  color: #fa8c16;
+}
+
+.mm-stat-sub {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.mm-member-cell {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.mm-avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.mm-member-name {
+  white-space: nowrap;
+}
+
+.mm-amount {
+  font-weight: 500;
+  color: var(--ant-color-text);
+}
+
+.mm-row-dimmed {
+  opacity: 0.66;
+}

apps/web-antd/src/views/member/list/styles/responsive.less

@@ -0,0 +1,52 @@
+@media (max-width: 1200px) {
+  .mm-toolbar {
+    flex-wrap: wrap;
+  }
+
+  .mm-toolbar-right {
+    margin-left: 0;
+  }
+
+  .mm-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .mm-overview-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .mm-tab-switch {
+    width: 100%;
+  }
+
+  .mm-store-select,
+  .mm-tier-select,
+  .mm-search-input {
+    width: 100%;
+  }
+
+  .mm-stats {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .mm-tier-card {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mm-tier-side {
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .mm-day-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mm-day-label {
+    width: auto;
+  }
+}

apps/web-antd/src/views/member/list/styles/tier.less

@@ -0,0 +1,173 @@
+.mm-tier-system,
+.mm-member-day {
+  padding: 14px;
+  background: var(--ant-color-bg-container);
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+}
+
+.mm-tier-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mm-tier-card {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 14px;
+  background: #fff;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+}
+
+.mm-tier-order {
+  width: 28px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--ant-color-text-quaternary);
+  text-align: center;
+}
+
+.mm-tier-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  font-size: 22px;
+  border-radius: 50%;
+}
+
+.mm-tier-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.mm-tier-name-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.mm-tier-name {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.mm-tier-condition {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.mm-tier-perks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.mm-tier-perk {
+  margin-inline-end: 0;
+}
+
+.mm-tier-side {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
+  min-width: 120px;
+}
+
+.mm-tier-count {
+  font-size: 12px;
+  color: var(--ant-color-text-secondary);
+}
+
+.mm-tier-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.mm-tier-add-btn {
+  margin-top: 12px;
+}
+
+.mm-day-card {
+  padding: 14px;
+  background: #fff;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+}
+
+.mm-day-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.mm-day-row:last-child {
+  margin-bottom: 0;
+}
+
+.mm-day-label {
+  flex-shrink: 0;
+  width: 90px;
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
+}
+
+.mm-day-select {
+  width: 180px;
+}
+
+.mm-day-benefit {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.mm-day-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mm-coupon-search {
+  display: flex;
+  gap: 8px;
+}
+
+.mm-coupon-list {
+  max-height: 360px;
+  margin-top: 12px;
+  overflow: auto;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+}
+
+.mm-coupon-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.mm-coupon-item:last-child {
+  border-bottom: none;
+}
+
+.mm-coupon-item .name {
+  flex: 1;
+  min-width: 0;
+}
+
+.mm-coupon-empty {
+  padding: 24px;
+  color: var(--ant-color-text-tertiary);
+  text-align: center;
+}

apps/web-antd/src/views/member/list/types.ts

@@ -0,0 +1,61 @@
+import type {
+  MemberDaySettingDto,
+  MemberDetailDto,
+  MemberListItemDto,
+  MemberListStatsDto,
+  MemberTierBenefitsDto,
+  MemberTierRuleDto,
+} from '#/api/member';
+import type { StoreListItemDto } from '#/api/store';
+
+export type MemberTabKey = 'list' | 'tiers';
+
+export interface MemberFilterState {
+  keyword: string;
+  tierId: string;
+}
+
+export interface MemberPaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface MemberTierEditorForm {
+  benefits: MemberTierBenefitsDto;
+  colorHex: string;
+  iconKey: string;
+  isDefault: boolean;
+  name: string;
+  rule: MemberTierRuleDto;
+  sortOrder: number;
+  tierId?: string;
+}
+
+export interface OptionItem {
+  label: string;
+  value: string;
+}
+
+export interface MemberListPageState {
+  activeTab: MemberTabKey;
+  detail: MemberDetailDto | null;
+  detailOpen: boolean;
+  detailLoading: boolean;
+  filters: MemberFilterState;
+  isExporting: boolean;
+  isListLoading: boolean;
+  pagination: MemberPaginationState;
+  rows: MemberListItemDto[];
+  selectedStoreId: string;
+  stats: MemberListStatsDto;
+  stores: StoreListItemDto[];
+  tagSaving: boolean;
+  tierEditorOpen: boolean;
+  tierEditorLoading: boolean;
+  tierEditorSubmitting: boolean;
+  tierForm: MemberTierEditorForm | null;
+  tierLoading: boolean;
+  weekdaySaving: boolean;
+  daySetting: MemberDaySettingDto | null;
+}