From 128ad99d8a5a362bc2569f1de1bf56ccf33ca41d Mon Sep 17 00:00:00 2001
From: MSuMshk <2039814060@qq.com>
Date: Tue, 3 Mar 2026 20:37:43 +0800
Subject: [PATCH] feat(@vben/web-antd): add member center management module

---
 apps/web-antd/src/api/member/index.ts         | 283 ++++++++++
 .../components/MemberCouponPickerModal.vue    |  68 +++
 .../list/components/MemberDaySettingCard.vue  | 118 ++++
 .../list/components/MemberDetailDrawer.vue    | 257 +++++++++
 .../list/components/MemberFilterBar.vue       |  98 ++++
 .../member/list/components/MemberStatsBar.vue |  44 ++
 .../list/components/MemberTableCard.vue       | 160 ++++++
 .../components/MemberTierEditorDrawer.vue     | 521 ++++++++++++++++++
 .../list/components/MemberTierSystem.vue      | 106 ++++
 .../list/composables/member-page/constants.ts | 100 ++++
 .../composables/member-page/coupon-actions.ts | 111 ++++
 .../composables/member-page/data-actions.ts   | 159 ++++++
 .../composables/member-page/detail-actions.ts |  77 +++
 .../composables/member-page/export-actions.ts |  51 ++
 .../composables/member-page/filter-actions.ts |  49 ++
 .../list/composables/member-page/helpers.ts   | 258 +++++++++
 .../composables/member-page/tier-actions.ts   | 153 +++++
 .../list/composables/useMemberListPage.ts     | 371 +++++++++++++
 apps/web-antd/src/views/member/list/index.vue | 189 +++++++
 .../src/views/member/list/styles/base.less    |  15 +
 .../src/views/member/list/styles/drawer.less  | 244 ++++++++
 .../src/views/member/list/styles/index.less   |   6 +
 .../src/views/member/list/styles/layout.less  |  39 ++
 .../src/views/member/list/styles/list.less    |  74 +++
 .../views/member/list/styles/responsive.less  |  52 ++
 .../src/views/member/list/styles/tier.less    | 173 ++++++
 apps/web-antd/src/views/member/list/types.ts  |  61 ++
 27 files changed, 3837 insertions(+)
 create mode 100644 apps/web-antd/src/api/member/index.ts
 create mode 100644 apps/web-antd/src/views/member/list/components/MemberCouponPickerModal.vue
 create mode 100644 apps/web-antd/src/views/member/list/components/MemberDaySettingCard.vue
 create mode 100644 apps/web-antd/src/views/member/list/components/MemberDetailDrawer.vue
 create mode 100644 apps/web-antd/src/views/member/list/components/MemberFilterBar.vue
 create mode 100644 apps/web-antd/src/views/member/list/components/MemberStatsBar.vue
 create mode 100644 apps/web-antd/src/views/member/list/components/MemberTableCard.vue
 create mode 100644 apps/web-antd/src/views/member/list/components/MemberTierEditorDrawer.vue
 create mode 100644 apps/web-antd/src/views/member/list/components/MemberTierSystem.vue
 create mode 100644 apps/web-antd/src/views/member/list/composables/member-page/constants.ts
 create mode 100644 apps/web-antd/src/views/member/list/composables/member-page/coupon-actions.ts
 create mode 100644 apps/web-antd/src/views/member/list/composables/member-page/data-actions.ts
 create mode 100644 apps/web-antd/src/views/member/list/composables/member-page/detail-actions.ts
 create mode 100644 apps/web-antd/src/views/member/list/composables/member-page/export-actions.ts
 create mode 100644 apps/web-antd/src/views/member/list/composables/member-page/filter-actions.ts
 create mode 100644 apps/web-antd/src/views/member/list/composables/member-page/helpers.ts
 create mode 100644 apps/web-antd/src/views/member/list/composables/member-page/tier-actions.ts
 create mode 100644 apps/web-antd/src/views/member/list/composables/useMemberListPage.ts
 create mode 100644 apps/web-antd/src/views/member/list/index.vue
 create mode 100644 apps/web-antd/src/views/member/list/styles/base.less
 create mode 100644 apps/web-antd/src/views/member/list/styles/drawer.less
 create mode 100644 apps/web-antd/src/views/member/list/styles/index.less
 create mode 100644 apps/web-antd/src/views/member/list/styles/layout.less
 create mode 100644 apps/web-antd/src/views/member/list/styles/list.less
 create mode 100644 apps/web-antd/src/views/member/list/styles/responsive.less
 create mode 100644 apps/web-antd/src/views/member/list/styles/tier.less
 create mode 100644 apps/web-antd/src/views/member/list/types.ts

diff --git a/apps/web-antd/src/api/member/index.ts b/apps/web-antd/src/api/member/index.ts
new file mode 100644
index 0000000..0ce403c
--- /dev/null
+++ b/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,
+    },
+  );
+}
diff --git a/apps/web-antd/src/views/member/list/components/MemberCouponPickerModal.vue b/apps/web-antd/src/views/member/list/components/MemberCouponPickerModal.vue
new file mode 100644
index 0000000..abf8599
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/components/MemberDaySettingCard.vue b/apps/web-antd/src/views/member/list/components/MemberDaySettingCard.vue
new file mode 100644
index 0000000..7ae2e4d
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/components/MemberDetailDrawer.vue b/apps/web-antd/src/views/member/list/components/MemberDetailDrawer.vue
new file mode 100644
index 0000000..2e59985
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/components/MemberFilterBar.vue b/apps/web-antd/src/views/member/list/components/MemberFilterBar.vue
new file mode 100644
index 0000000..c2cc46b
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/components/MemberStatsBar.vue b/apps/web-antd/src/views/member/list/components/MemberStatsBar.vue
new file mode 100644
index 0000000..2046d18
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/components/MemberTableCard.vue b/apps/web-antd/src/views/member/list/components/MemberTableCard.vue
new file mode 100644
index 0000000..b40681c
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/components/MemberTierEditorDrawer.vue b/apps/web-antd/src/views/member/list/components/MemberTierEditorDrawer.vue
new file mode 100644
index 0000000..680e6d4
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/components/MemberTierSystem.vue b/apps/web-antd/src/views/member/list/components/MemberTierSystem.vue
new file mode 100644
index 0000000..664e361
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/composables/member-page/constants.ts b/apps/web-antd/src/views/member/list/composables/member-page/constants.ts
new file mode 100644
index 0000000..cebff62
--- /dev/null
+++ b/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,
+};
diff --git a/apps/web-antd/src/views/member/list/composables/member-page/coupon-actions.ts b/apps/web-antd/src/views/member/list/composables/member-page/coupon-actions.ts
new file mode 100644
index 0000000..7566d73
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/apps/web-antd/src/views/member/list/composables/member-page/data-actions.ts b/apps/web-antd/src/views/member/list/composables/member-page/data-actions.ts
new file mode 100644
index 0000000..6729778
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/apps/web-antd/src/views/member/list/composables/member-page/detail-actions.ts b/apps/web-antd/src/views/member/list/composables/member-page/detail-actions.ts
new file mode 100644
index 0000000..6a74144
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/apps/web-antd/src/views/member/list/composables/member-page/export-actions.ts b/apps/web-antd/src/views/member/list/composables/member-page/export-actions.ts
new file mode 100644
index 0000000..06b11df
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/apps/web-antd/src/views/member/list/composables/member-page/filter-actions.ts b/apps/web-antd/src/views/member/list/composables/member-page/filter-actions.ts
new file mode 100644
index 0000000..759ddb5
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/apps/web-antd/src/views/member/list/composables/member-page/helpers.ts b/apps/web-antd/src/views/member/list/composables/member-page/helpers.ts
new file mode 100644
index 0000000..9700142
--- /dev/null
+++ b/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 || '会员';
+}
diff --git a/apps/web-antd/src/views/member/list/composables/member-page/tier-actions.ts b/apps/web-antd/src/views/member/list/composables/member-page/tier-actions.ts
new file mode 100644
index 0000000..fcbddc7
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/apps/web-antd/src/views/member/list/composables/useMemberListPage.ts b/apps/web-antd/src/views/member/list/composables/useMemberListPage.ts
new file mode 100644
index 0000000..378fc5b
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/apps/web-antd/src/views/member/list/index.vue b/apps/web-antd/src/views/member/list/index.vue
new file mode 100644
index 0000000..6e17075
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/member/list/styles/base.less b/apps/web-antd/src/views/member/list/styles/base.less
new file mode 100644
index 0000000..8791ca5
--- /dev/null
+++ b/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;
+}
diff --git a/apps/web-antd/src/views/member/list/styles/drawer.less b/apps/web-antd/src/views/member/list/styles/drawer.less
new file mode 100644
index 0000000..285ce29
--- /dev/null
+++ b/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;
+}
diff --git a/apps/web-antd/src/views/member/list/styles/index.less b/apps/web-antd/src/views/member/list/styles/index.less
new file mode 100644
index 0000000..1f38ecd
--- /dev/null
+++ b/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';
diff --git a/apps/web-antd/src/views/member/list/styles/layout.less b/apps/web-antd/src/views/member/list/styles/layout.less
new file mode 100644
index 0000000..85e806b
--- /dev/null
+++ b/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;
+}
diff --git a/apps/web-antd/src/views/member/list/styles/list.less b/apps/web-antd/src/views/member/list/styles/list.less
new file mode 100644
index 0000000..b59791a
--- /dev/null
+++ b/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;
+}
diff --git a/apps/web-antd/src/views/member/list/styles/responsive.less b/apps/web-antd/src/views/member/list/styles/responsive.less
new file mode 100644
index 0000000..cddd6de
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/apps/web-antd/src/views/member/list/styles/tier.less b/apps/web-antd/src/views/member/list/styles/tier.less
new file mode 100644
index 0000000..8f7fecf
--- /dev/null
+++ b/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;
+}
diff --git a/apps/web-antd/src/views/member/list/types.ts b/apps/web-antd/src/views/member/list/types.ts
new file mode 100644
index 0000000..94dfb63
--- /dev/null
+++ b/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;
+}