feat(member): implement points mall module pages

Feature/member message reach module pr

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

@@ -0,0 +1,159 @@
+/**
+ * 文件职责：财务中心交易流水 API 契约与请求封装。
+ */
+import { requestClient } from '#/api/request';
+
+/** 交易类型筛选值。 */
+export type FinanceTransactionTypeFilter =
+  | 'all'
+  | 'income'
+  | 'point_redeem'
+  | 'refund'
+  | 'stored_card_recharge';
+
+/** 交易渠道筛选值。 */
+export type FinanceTransactionChannelFilter =
+  | 'all'
+  | 'delivery'
+  | 'dine_in'
+  | 'pickup';
+
+/** 交易支付方式筛选值。 */
+export type FinanceTransactionPaymentFilter =
+  | 'alipay'
+  | 'all'
+  | 'balance'
+  | 'card'
+  | 'cash'
+  | 'wechat';
+
+/** 交易流水筛选参数。 */
+export interface FinanceTransactionFilterQuery {
+  channel?: FinanceTransactionChannelFilter;
+  endDate?: string;
+  keyword?: string;
+  paymentMethod?: FinanceTransactionPaymentFilter;
+  startDate?: string;
+  storeId: string;
+  type?: FinanceTransactionTypeFilter;
+}
+
+/** 交易流水列表查询参数。 */
+export interface FinanceTransactionListQuery extends FinanceTransactionFilterQuery {
+  page: number;
+  pageSize: number;
+}
+
+/** 交易流水列表行。 */
+export interface FinanceTransactionListItemDto {
+  amount: number;
+  channel: string;
+  isIncome: boolean;
+  occurredAt: string;
+  orderNo?: string;
+  paymentMethod: string;
+  remark: string;
+  transactionId: string;
+  transactionNo: string;
+  type: string;
+  typeText: string;
+}
+
+/** 交易流水列表结果。 */
+export interface FinanceTransactionListResultDto {
+  items: FinanceTransactionListItemDto[];
+  page: number;
+  pageIncomeAmount: number;
+  pageRefundAmount: number;
+  pageSize: number;
+  total: number;
+}
+
+/** 交易流水统计结果。 */
+export interface FinanceTransactionStatsDto {
+  totalCount: number;
+  totalIncome: number;
+  totalRefund: number;
+}
+
+/** 交易流水详情。 */
+export interface FinanceTransactionDetailDto {
+  amount: number;
+  arrivedAmount?: number;
+  channel: string;
+  customerName: string;
+  customerPhone: string;
+  giftAmount?: number;
+  memberMobileMasked?: string;
+  memberName?: string;
+  occurredAt: string;
+  orderNo?: string;
+  paymentMethod: string;
+  pointBalanceAfterChange?: number;
+  pointChangeAmount?: number;
+  rechargeAmount?: number;
+  refundNo?: string;
+  refundReason?: string;
+  remark: string;
+  storeId: string;
+  transactionId: string;
+  transactionNo: string;
+  type: string;
+  typeText: string;
+}
+
+/** 交易流水导出结果。 */
+export interface FinanceTransactionExportDto {
+  fileContentBase64: string;
+  fileName: string;
+  totalCount: number;
+}
+
+/** 查询交易流水列表。 */
+export async function getFinanceTransactionListApi(
+  params: FinanceTransactionListQuery,
+) {
+  return requestClient.get<FinanceTransactionListResultDto>(
+    '/finance/transaction/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询交易流水统计。 */
+export async function getFinanceTransactionStatsApi(
+  params: FinanceTransactionFilterQuery,
+) {
+  return requestClient.get<FinanceTransactionStatsDto>(
+    '/finance/transaction/stats',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询交易流水详情。 */
+export async function getFinanceTransactionDetailApi(params: {
+  storeId: string;
+  transactionId: string;
+}) {
+  return requestClient.get<FinanceTransactionDetailDto>(
+    '/finance/transaction/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 导出交易流水 CSV。 */
+export async function exportFinanceTransactionCsvApi(
+  params: FinanceTransactionFilterQuery,
+) {
+  return requestClient.get<FinanceTransactionExportDto>(
+    '/finance/transaction/export',
+    {
+      params,
+    },
+  );
+}

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

@@ -282,4 +282,6 @@ export async function getMemberCouponPickerApi(params: {
   );
 }
 
+export * from './message-reach';
+export * from './points-mall';
 export * from './stored-card';

apps/web-antd/src/api/member/message-reach.ts

@@ -0,0 +1,283 @@
+/**
+ * 文件职责：会员消息触达模块 API 契约定义。
+ */
+import { requestClient } from '#/api/request';
+
+/** 消息状态。 */
+export type MemberMessageReachStatus =
+  | 'draft'
+  | 'failed'
+  | 'pending'
+  | 'sending'
+  | 'sent';
+
+/** 消息渠道。 */
+export type MemberMessageReachChannel = 'inapp' | 'sms' | 'wechat-mini';
+
+/** 目标人群类型。 */
+export type MemberMessageAudienceType = 'all' | 'tag';
+
+/** 发送时间类型。 */
+export type MemberMessageScheduleType = 'immediate' | 'scheduled';
+
+/** 模板分类。 */
+export type MemberMessageTemplateCategory = 'marketing' | 'notice' | 'recall';
+
+/** 页面统计。 */
+export interface MemberMessageReachStatsDto {
+  conversionRate: number;
+  monthlySentCount: number;
+  openRate: number;
+  reachMemberCount: number;
+}
+
+/** 消息列表查询。 */
+export interface MemberMessageReachListQuery {
+  channel?: MemberMessageReachChannel;
+  keyword?: string;
+  page: number;
+  pageSize: number;
+  status?: MemberMessageReachStatus;
+}
+
+/** 消息列表项。 */
+export interface MemberMessageReachListItemDto {
+  audienceText: string;
+  channels: MemberMessageReachChannel[];
+  conversionRate: number;
+  estimatedReachCount: number;
+  messageId: string;
+  openRate: number;
+  scheduledAt?: string;
+  sentAt?: string;
+  status: MemberMessageReachStatus;
+  title: string;
+}
+
+/** 消息列表结果。 */
+export interface MemberMessageReachListResultDto {
+  items: MemberMessageReachListItemDto[];
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+/** 收件明细。 */
+export interface MemberMessageReachRecipientDto {
+  channel: MemberMessageReachChannel;
+  convertedAt?: string;
+  errorMessage?: string;
+  memberId: string;
+  mobile?: string;
+  openId?: string;
+  readAt?: string;
+  sentAt?: string;
+  status: 'failed' | 'pending' | 'sent';
+}
+
+/** 消息详情。 */
+export interface MemberMessageReachDetailDto {
+  audienceTags: string[];
+  audienceText: string;
+  audienceType: MemberMessageAudienceType;
+  channels: MemberMessageReachChannel[];
+  content: string;
+  conversionRate: number;
+  convertedCount: number;
+  estimatedReachCount: number;
+  lastError?: string;
+  messageId: string;
+  openRate: number;
+  readCount: number;
+  recipients: MemberMessageReachRecipientDto[];
+  scheduleType: MemberMessageScheduleType;
+  scheduledAt?: string;
+  sentAt?: string;
+  sentCount: number;
+  status: MemberMessageReachStatus;
+  templateId?: string;
+  title: string;
+}
+
+/** 保存消息请求。 */
+export interface SaveMemberMessageReachPayload {
+  audienceTags: string[];
+  audienceType: MemberMessageAudienceType;
+  channels: MemberMessageReachChannel[];
+  content: string;
+  messageId?: string;
+  scheduleType: MemberMessageScheduleType;
+  scheduledAt?: string;
+  storeId?: string;
+  submitAction: 'draft' | 'send';
+  templateId?: string;
+  title: string;
+}
+
+/** 删除消息请求。 */
+export interface DeleteMemberMessageReachPayload {
+  messageId: string;
+}
+
+/** 调度元信息。 */
+export interface MemberMessageDispatchMetaDto {
+  hangfireJobId?: string;
+  messageId: string;
+  scheduleType: MemberMessageScheduleType;
+  scheduledAt?: string;
+  status: MemberMessageReachStatus;
+}
+
+/** 目标估算请求。 */
+export interface EstimateMemberMessageAudiencePayload {
+  audienceType: MemberMessageAudienceType;
+  tags: string[];
+}
+
+/** 目标估算响应。 */
+export interface MemberMessageAudienceEstimateDto {
+  reachCount: number;
+}
+
+/** 模板列表查询。 */
+export interface MemberMessageTemplateListQuery {
+  category?: MemberMessageTemplateCategory;
+  keyword?: string;
+  page: number;
+  pageSize: number;
+}
+
+/** 模板 DTO。 */
+export interface MemberMessageTemplateDto {
+  category: MemberMessageTemplateCategory;
+  content: string;
+  lastUsedAt?: string;
+  name: string;
+  templateId: string;
+  usageCount: number;
+}
+
+/** 模板列表结果。 */
+export interface MemberMessageTemplateListResultDto {
+  items: MemberMessageTemplateDto[];
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+/** 保存模板请求。 */
+export interface SaveMemberMessageTemplatePayload {
+  category: MemberMessageTemplateCategory;
+  content: string;
+  name: string;
+  templateId?: string;
+}
+
+/** 删除模板请求。 */
+export interface DeleteMemberMessageTemplatePayload {
+  templateId: string;
+}
+
+/** 查询页面统计。 */
+export async function getMemberMessageReachStatsApi(params?: {
+  storeId?: string;
+}) {
+  return requestClient.get<MemberMessageReachStatsDto>(
+    '/member/message-reach/stats',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询消息列表。 */
+export async function getMemberMessageReachListApi(
+  params: MemberMessageReachListQuery,
+) {
+  return requestClient.get<MemberMessageReachListResultDto>(
+    '/member/message-reach/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询消息详情。 */
+export async function getMemberMessageReachDetailApi(params: {
+  messageId: string;
+}) {
+  return requestClient.get<MemberMessageReachDetailDto>(
+    '/member/message-reach/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 保存消息。 */
+export async function saveMemberMessageReachApi(
+  payload: SaveMemberMessageReachPayload,
+) {
+  return requestClient.post<MemberMessageDispatchMetaDto>(
+    '/member/message-reach/save',
+    payload,
+  );
+}
+
+/** 删除消息。 */
+export async function deleteMemberMessageReachApi(
+  payload: DeleteMemberMessageReachPayload,
+) {
+  return requestClient.post('/member/message-reach/delete', payload);
+}
+
+/** 估算触达人数。 */
+export async function estimateMemberMessageAudienceApi(
+  payload: EstimateMemberMessageAudiencePayload,
+) {
+  return requestClient.post<MemberMessageAudienceEstimateDto>(
+    '/member/message-reach/audience/estimate',
+    payload,
+  );
+}
+
+/** 查询模板列表。 */
+export async function getMemberMessageTemplateListApi(
+  params: MemberMessageTemplateListQuery,
+) {
+  return requestClient.get<MemberMessageTemplateListResultDto>(
+    '/member/message-reach/template/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询模板详情。 */
+export async function getMemberMessageTemplateDetailApi(params: {
+  templateId: string;
+}) {
+  return requestClient.get<MemberMessageTemplateDto>(
+    '/member/message-reach/template/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 保存模板。 */
+export async function saveMemberMessageTemplateApi(
+  payload: SaveMemberMessageTemplatePayload,
+) {
+  return requestClient.post<MemberMessageTemplateDto>(
+    '/member/message-reach/template/save',
+    payload,
+  );
+}
+
+/** 删除模板。 */
+export async function deleteMemberMessageTemplateApi(
+  payload: DeleteMemberMessageTemplatePayload,
+) {
+  return requestClient.post('/member/message-reach/template/delete', payload);
+}

apps/web-antd/src/api/member/points-mall.ts

@@ -0,0 +1,372 @@
+/**
+ * 文件职责：会员中心积分商城 API 契约定义。
+ */
+import { requestClient } from '#/api/request';
+
+/** 兑换类型。 */
+export type MemberPointMallRedeemType = 'coupon' | 'physical' | 'product';
+
+/** 兑换方式。 */
+export type MemberPointMallExchangeType = 'mixed' | 'points';
+
+/** 商品状态。 */
+export type MemberPointMallProductStatus = 'disabled' | 'enabled';
+
+/** 积分有效期模式。 */
+export type MemberPointMallExpiryMode = 'permanent' | 'yearly_clear';
+
+/** 通知渠道。 */
+export type MemberPointMallNotifyChannel = 'in_app' | 'sms';
+
+/** 实物领取方式。 */
+export type MemberPointMallPickupMethod = 'delivery' | 'store_pickup';
+
+/** 兑换记录状态。 */
+export type MemberPointMallRecordStatus =
+  | 'canceled'
+  | 'completed'
+  | 'issued'
+  | 'pending_pickup';
+
+/** 核销方式。 */
+export type MemberPointMallVerifyMethod = 'manual' | 'scan';
+
+/** 规则详情查询。 */
+export interface MemberPointMallRuleDetailQuery {
+  storeId: string;
+}
+
+/** 规则模型。 */
+export interface MemberPointMallRuleDto {
+  consumeAmountPerStep: number;
+  consumeRewardPointsPerStep: number;
+  expiryMode: MemberPointMallExpiryMode;
+  isConsumeRewardEnabled: boolean;
+  isRegisterRewardEnabled: boolean;
+  isReviewRewardEnabled: boolean;
+  isSigninRewardEnabled: boolean;
+  registerRewardPoints: number;
+  reviewRewardPoints: number;
+  signinRewardPoints: number;
+  storeId: string;
+}
+
+/** 规则统计。 */
+export interface MemberPointMallRuleStatsDto {
+  pointMembers: number;
+  redeemRate: number;
+  redeemedPoints: number;
+  totalIssuedPoints: number;
+}
+
+/** 规则详情结果。 */
+export interface MemberPointMallRuleDetailResultDto {
+  rule: MemberPointMallRuleDto;
+  stats: MemberPointMallRuleStatsDto;
+}
+
+/** 保存规则。 */
+export type SaveMemberPointMallRulePayload = MemberPointMallRuleDto;
+
+/** 商品列表查询。 */
+export interface MemberPointMallProductListQuery {
+  keyword?: string;
+  status?: MemberPointMallProductStatus;
+  storeId: string;
+}
+
+/** 商品详情查询。 */
+export interface MemberPointMallProductDetailQuery {
+  pointMallProductId: string;
+  storeId: string;
+}
+
+/** 商品模型。 */
+export interface MemberPointMallProductDto {
+  cashAmount: number;
+  couponTemplateId?: string;
+  description?: string;
+  exchangeType: MemberPointMallExchangeType;
+  imageUrl?: string;
+  name: string;
+  notifyChannels: MemberPointMallNotifyChannel[];
+  perMemberLimit?: number;
+  physicalName?: string;
+  pickupMethod?: MemberPointMallPickupMethod;
+  pointMallProductId: string;
+  productId?: string;
+  redeemType: MemberPointMallRedeemType;
+  redeemTypeText: string;
+  redeemedCount: number;
+  requiredPoints: number;
+  status: MemberPointMallProductStatus;
+  statusText: string;
+  stockAvailable: number;
+  stockTotal: number;
+  storeId: string;
+  updatedAt: string;
+}
+
+/** 商品列表结果。 */
+export interface MemberPointMallProductListResultDto {
+  items: MemberPointMallProductDto[];
+}
+
+/** 保存商品。 */
+export interface SaveMemberPointMallProductPayload {
+  cashAmount: number;
+  couponTemplateId?: string;
+  description?: string;
+  exchangeType: MemberPointMallExchangeType;
+  imageUrl?: string;
+  name: string;
+  notifyChannels: MemberPointMallNotifyChannel[];
+  perMemberLimit?: number;
+  physicalName?: string;
+  pickupMethod?: MemberPointMallPickupMethod;
+  pointMallProductId?: string;
+  productId?: string;
+  redeemType: MemberPointMallRedeemType;
+  requiredPoints: number;
+  status: MemberPointMallProductStatus;
+  stockTotal: number;
+  storeId: string;
+}
+
+/** 修改商品状态。 */
+export interface ChangeMemberPointMallProductStatusPayload {
+  pointMallProductId: string;
+  status: MemberPointMallProductStatus;
+  storeId: string;
+}
+
+/** 删除商品。 */
+export interface DeleteMemberPointMallProductPayload {
+  pointMallProductId: string;
+  storeId: string;
+}
+
+/** 记录列表查询。 */
+export interface MemberPointMallRecordListQuery {
+  endDate?: string;
+  keyword?: string;
+  page: number;
+  pageSize: number;
+  redeemType?: MemberPointMallRedeemType;
+  startDate?: string;
+  status?: MemberPointMallRecordStatus;
+  storeId: string;
+}
+
+/** 记录详情查询。 */
+export interface MemberPointMallRecordDetailQuery {
+  recordId: string;
+  storeId: string;
+}
+
+/** 记录模型。 */
+export interface MemberPointMallRecordDto {
+  cashAmount: number;
+  exchangeType: MemberPointMallExchangeType;
+  issuedAt?: string;
+  memberId: string;
+  memberMobileMasked: string;
+  memberName: string;
+  pointMallProductId: string;
+  productName: string;
+  recordId: string;
+  recordNo: string;
+  redeemedAt: string;
+  redeemType: MemberPointMallRedeemType;
+  redeemTypeText: string;
+  status: MemberPointMallRecordStatus;
+  statusText: string;
+  usedPoints: number;
+  verifiedAt?: string;
+}
+
+/** 记录详情。 */
+export interface MemberPointMallRecordDetailDto extends MemberPointMallRecordDto {
+  verifyMethod?: MemberPointMallVerifyMethod;
+  verifyMethodText?: string;
+  verifyRemark?: string;
+  verifiedBy?: string;
+}
+
+/** 记录统计。 */
+export interface MemberPointMallRecordStatsDto {
+  currentMonthUsedPoints: number;
+  pendingPhysicalCount: number;
+  todayRedeemCount: number;
+}
+
+/** 记录分页结果。 */
+export interface MemberPointMallRecordListResultDto {
+  items: MemberPointMallRecordDto[];
+  page: number;
+  pageSize: number;
+  stats: MemberPointMallRecordStatsDto;
+  totalCount: number;
+}
+
+/** 导出记录查询。 */
+export interface ExportMemberPointMallRecordQuery {
+  endDate?: string;
+  keyword?: string;
+  redeemType?: MemberPointMallRedeemType;
+  startDate?: string;
+  status?: MemberPointMallRecordStatus;
+  storeId: string;
+}
+
+/** 导出结果。 */
+export interface MemberPointMallRecordExportDto {
+  fileContentBase64: string;
+  fileName: string;
+  totalCount: number;
+}
+
+/** 写入记录请求。 */
+export interface WriteMemberPointMallRecordPayload {
+  memberId: string;
+  pointMallProductId: string;
+  redeemedAt?: string;
+  storeId: string;
+}
+
+/** 核销记录请求。 */
+export interface VerifyMemberPointMallRecordPayload {
+  recordId: string;
+  storeId: string;
+  verifyMethod: MemberPointMallVerifyMethod;
+  verifyRemark?: string;
+}
+
+/** 查询规则详情。 */
+export async function getMemberPointMallRuleDetailApi(
+  params: MemberPointMallRuleDetailQuery,
+) {
+  return requestClient.get<MemberPointMallRuleDetailResultDto>(
+    '/member/points-mall/rule/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 保存规则。 */
+export async function saveMemberPointMallRuleApi(
+  payload: SaveMemberPointMallRulePayload,
+) {
+  return requestClient.post<MemberPointMallRuleDto>(
+    '/member/points-mall/rule/save',
+    payload,
+  );
+}
+
+/** 查询商品列表。 */
+export async function getMemberPointMallProductListApi(
+  params: MemberPointMallProductListQuery,
+) {
+  return requestClient.get<MemberPointMallProductListResultDto>(
+    '/member/points-mall/product/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询商品详情。 */
+export async function getMemberPointMallProductDetailApi(
+  params: MemberPointMallProductDetailQuery,
+) {
+  return requestClient.get<MemberPointMallProductDto>(
+    '/member/points-mall/product/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 保存商品。 */
+export async function saveMemberPointMallProductApi(
+  payload: SaveMemberPointMallProductPayload,
+) {
+  return requestClient.post<MemberPointMallProductDto>(
+    '/member/points-mall/product/save',
+    payload,
+  );
+}
+
+/** 修改商品状态。 */
+export async function changeMemberPointMallProductStatusApi(
+  payload: ChangeMemberPointMallProductStatusPayload,
+) {
+  return requestClient.post<MemberPointMallProductDto>(
+    '/member/points-mall/product/status',
+    payload,
+  );
+}
+
+/** 删除商品。 */
+export async function deleteMemberPointMallProductApi(
+  payload: DeleteMemberPointMallProductPayload,
+) {
+  return requestClient.post('/member/points-mall/product/delete', payload);
+}
+
+/** 查询兑换记录。 */
+export async function getMemberPointMallRecordListApi(
+  params: MemberPointMallRecordListQuery,
+) {
+  return requestClient.get<MemberPointMallRecordListResultDto>(
+    '/member/points-mall/record/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询兑换记录详情。 */
+export async function getMemberPointMallRecordDetailApi(
+  params: MemberPointMallRecordDetailQuery,
+) {
+  return requestClient.get<MemberPointMallRecordDetailDto>(
+    '/member/points-mall/record/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 导出兑换记录。 */
+export async function exportMemberPointMallRecordApi(
+  params: ExportMemberPointMallRecordQuery,
+) {
+  return requestClient.get<MemberPointMallRecordExportDto>(
+    '/member/points-mall/record/export',
+    {
+      params,
+    },
+  );
+}
+
+/** 写入兑换记录。 */
+export async function writeMemberPointMallRecordApi(
+  payload: WriteMemberPointMallRecordPayload,
+) {
+  return requestClient.post<MemberPointMallRecordDto>(
+    '/member/points-mall/record/write',
+    payload,
+  );
+}
+
+/** 核销兑换记录。 */
+export async function verifyMemberPointMallRecordApi(
+  payload: VerifyMemberPointMallRecordPayload,
+) {
+  return requestClient.post<MemberPointMallRecordDetailDto>(
+    '/member/points-mall/record/verify',
+    payload,
+  );
+}

apps/web-antd/src/views/finance/transaction/components/RelatedOrderDrawer.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+/**
+ * 文件职责：交易流水关联订单详情抽屉。
+ */
+import type { OrderAllDetailDto } from '#/api/order';
+
+import { Button, Drawer, Empty, Spin, Tag } from 'ant-design-vue';
+
+import { formatCurrency } from '../composables/transaction-page/helpers';
+
+interface Props {
+  detail: null | OrderAllDetailDto;
+  loading: boolean;
+  open: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+
+function resolveChannelTagColor(channel: string) {
+  if (channel.includes('外卖')) return 'blue';
+  if (channel.includes('自提')) return 'green';
+  if (channel.includes('堂食')) return 'orange';
+  return 'default';
+}
+
+function resolveStatusTagColor(status: string) {
+  if (status.includes('退款')) return 'red';
+  if (status.includes('取消')) return 'default';
+  if (status.includes('完成')) return 'green';
+  if (status.includes('接单') || status.includes('取餐')) return 'orange';
+  if (status.includes('制作') || status.includes('配送')) return 'blue';
+  return 'default';
+}
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="620"
+    :title="`关联订单 ${props.detail?.orderNo ?? ''}`"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loading">
+      <template v-if="props.detail">
+        <div class="ft-section">
+          <div class="ft-section-title">基本信息</div>
+          <div class="ft-info-grid">
+            <div>
+              <span class="label">订单号：</span>
+              <span class="ft-mono">{{ props.detail.orderNo }}</span>
+            </div>
+            <div>
+              <span class="label">渠道：</span>
+              <Tag :color="resolveChannelTagColor(props.detail.channel)">
+                {{ props.detail.channel }}
+              </Tag>
+            </div>
+            <div>
+              <span class="label">状态：</span>
+              <Tag :color="resolveStatusTagColor(props.detail.status)">
+                {{ props.detail.status }}
+              </Tag>
+            </div>
+            <div>
+              <span class="label">支付方式：</span>
+              <span>{{ props.detail.paymentMethod }}</span>
+            </div>
+            <div>
+              <span class="label">下单时间：</span>
+              <span>{{ props.detail.orderedAt }}</span>
+            </div>
+            <div>
+              <span class="label">支付时间：</span>
+              <span>{{ props.detail.paidAt || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">完成时间：</span>
+              <span>{{ props.detail.finishedAt || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="ft-section">
+          <div class="ft-section-title">顾客信息</div>
+          <div class="ft-info-grid">
+            <div>
+              <span class="label">姓名：</span>
+              <span>{{ props.detail.customerName }}</span>
+            </div>
+            <div>
+              <span class="label">手机号：</span>
+              <span>{{ props.detail.customerPhone }}</span>
+            </div>
+            <div class="full">
+              <span class="label">收货地址：</span>
+              <span>{{ props.detail.customerAddress }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="ft-section">
+          <div class="ft-section-title">商品明细</div>
+          <div class="ft-detail-table-wrap">
+            <table class="ft-detail-table">
+              <thead>
+                <tr>
+                  <th>商品</th>
+                  <th>规格</th>
+                  <th>数量</th>
+                  <th>单价</th>
+                  <th class="right">小计</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(item, index) in props.detail.items"
+                  :key="`${item.name}-${item.spec}-${index}`"
+                >
+                  <td>{{ item.name }}</td>
+                  <td>{{ item.spec }}</td>
+                  <td>{{ item.quantity }}</td>
+                  <td>{{ formatCurrency(item.unitPrice) }}</td>
+                  <td class="right">{{ formatCurrency(item.subTotal) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="ft-amount-summary">
+            <div>
+              <span>商品合计</span>
+              <span>{{ formatCurrency(props.detail.itemsAmount) }}</span>
+            </div>
+            <div>
+              <span>配送费</span>
+              <span>{{ formatCurrency(props.detail.deliveryFee) }}</span>
+            </div>
+            <div>
+              <span>优惠减免</span>
+              <span class="discount">
+                -{{ formatCurrency(props.detail.discountAmount) }}
+              </span>
+            </div>
+            <div class="total">
+              <span>实付金额</span>
+              <span>{{ formatCurrency(props.detail.paidAmount) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="ft-section">
+          <div class="ft-section-title">状态时间线</div>
+          <div class="ft-timeline">
+            <div
+              v-for="(item, index) in props.detail.timeline"
+              :key="`${item.time}-${index}`"
+              class="ft-timeline-item"
+            >
+              <span class="text">{{ item.label }}</span>
+              <span class="time">{{ item.time }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="ft-section">
+          <div class="ft-section-title">备注</div>
+          <div class="ft-remark-box">{{ props.detail.remark || '无' }}</div>
+        </div>
+      </template>
+      <Empty v-else description="暂无订单详情" />
+    </Spin>
+
+    <template #footer>
+      <Button @click="emit('close')">关闭</Button>
+    </template>
+  </Drawer>
+</template>

apps/web-antd/src/views/finance/transaction/components/TransactionDetailDrawer.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+/**
+ * 文件职责：交易流水详情抽屉。
+ */
+import type { FinanceTransactionDetailDto } from '#/api/finance';
+
+import { Button, Drawer, Empty, Spin, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  formatSignedAmount,
+  resolveTransactionTypeTagColor,
+} from '../composables/transaction-page/helpers';
+
+interface Props {
+  detail: FinanceTransactionDetailDto | null;
+  loading: boolean;
+  open: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'orderDetail', orderNo: string): void;
+}>();
+
+function handleOpenRelatedOrder() {
+  const orderNo = String(props.detail?.orderNo ?? '').trim();
+  if (!orderNo) {
+    return;
+  }
+  emit('orderDetail', orderNo);
+}
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="580"
+    :title="`交易详情 ${props.detail?.transactionNo ?? ''}`"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loading">
+      <template v-if="props.detail">
+        <div class="ft-section">
+          <div class="ft-section-title">基本信息</div>
+          <div class="ft-info-grid">
+            <div>
+              <span class="label">流水号：</span>
+              <span class="ft-mono">{{ props.detail.transactionNo }}</span>
+            </div>
+            <div>
+              <span class="label">交易类型：</span>
+              <Tag :color="resolveTransactionTypeTagColor(props.detail.type)">
+                {{ props.detail.typeText }}
+              </Tag>
+            </div>
+            <div>
+              <span class="label">交易金额：</span>
+              <span
+                class="ft-detail-amount"
+                :class="[props.detail.amount >= 0 ? 'income' : 'expense']"
+              >
+                {{
+                  formatSignedAmount(
+                    props.detail.amount,
+                    props.detail.amount >= 0,
+                  )
+                }}
+              </span>
+            </div>
+            <div>
+              <span class="label">交易时间：</span>
+              <span>{{ props.detail.occurredAt }}</span>
+            </div>
+            <div>
+              <span class="label">渠道：</span>
+              <span>{{ props.detail.channel || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">支付方式：</span>
+              <span>{{ props.detail.paymentMethod || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="ft-section">
+          <div class="ft-section-title">关联信息</div>
+          <div class="ft-info-grid">
+            <div>
+              <span class="label">关联订单：</span>
+              <Button
+                v-if="props.detail.orderNo"
+                type="link"
+                class="ft-order-link ft-mono"
+                @click="handleOpenRelatedOrder"
+              >
+                #{{ props.detail.orderNo }}
+              </Button>
+              <span v-else class="ft-mono">--</span>
+            </div>
+            <div>
+              <span class="label">顾客：</span>
+              <span>{{ props.detail.customerName || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">手机号：</span>
+              <span>{{ props.detail.customerPhone || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="props.detail.refundNo || props.detail.refundReason"
+          class="ft-section"
+        >
+          <div class="ft-section-title">退款信息</div>
+          <div class="ft-info-grid">
+            <div>
+              <span class="label">退款单号：</span>
+              <span class="ft-mono">{{ props.detail.refundNo || '--' }}</span>
+            </div>
+            <div class="full">
+              <span class="label">退款原因：</span>
+              <span>{{ props.detail.refundReason || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="
+            props.detail.rechargeAmount !== undefined ||
+            props.detail.giftAmount !== undefined ||
+            props.detail.arrivedAmount !== undefined
+          "
+          class="ft-section"
+        >
+          <div class="ft-section-title">储值充值信息</div>
+          <div class="ft-info-grid">
+            <div>
+              <span class="label">会员：</span>
+              <span>{{ props.detail.memberName || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">手机号：</span>
+              <span>{{ props.detail.memberMobileMasked || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">充值金额：</span>
+              <span>{{
+                formatCurrency(props.detail.rechargeAmount ?? 0)
+              }}</span>
+            </div>
+            <div>
+              <span class="label">赠送金额：</span>
+              <span>{{ formatCurrency(props.detail.giftAmount ?? 0) }}</span>
+            </div>
+            <div>
+              <span class="label">到账金额：</span>
+              <span>{{ formatCurrency(props.detail.arrivedAmount ?? 0) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="
+            props.detail.pointChangeAmount !== undefined ||
+            props.detail.pointBalanceAfterChange !== undefined
+          "
+          class="ft-section"
+        >
+          <div class="ft-section-title">积分抵扣信息</div>
+          <div class="ft-info-grid">
+            <div>
+              <span class="label">会员：</span>
+              <span>{{ props.detail.memberName || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">手机号：</span>
+              <span>{{ props.detail.memberMobileMasked || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">积分变动：</span>
+              <span>{{ props.detail.pointChangeAmount ?? '--' }}</span>
+            </div>
+            <div>
+              <span class="label">变动后余额：</span>
+              <span>{{ props.detail.pointBalanceAfterChange ?? '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="ft-section">
+          <div class="ft-section-title">备注</div>
+          <div class="ft-remark-box">{{ props.detail.remark || '无' }}</div>
+        </div>
+      </template>
+      <Empty v-else description="暂无详情" />
+    </Spin>
+
+    <template #footer>
+      <Button @click="emit('close')">关闭</Button>
+    </template>
+  </Drawer>
+</template>

apps/web-antd/src/views/finance/transaction/components/TransactionExportModal.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * 文件职责：交易流水导出确认弹窗。
+ */
+import type { QuickDateRangeKey } from '../types';
+
+import { computed } from 'vue';
+
+import { Modal } from 'ant-design-vue';
+
+import {
+  QUICK_RANGE_OPTIONS,
+  TRANSACTION_CHANNEL_OPTIONS,
+  TRANSACTION_PAYMENT_OPTIONS,
+  TRANSACTION_TYPE_OPTIONS,
+} from '../composables/transaction-page/constants';
+
+interface FilterState {
+  channel: string;
+  endDate: string;
+  keyword: string;
+  paymentMethod: string;
+  quickRange: QuickDateRangeKey;
+  startDate: string;
+  type: string;
+}
+
+interface Props {
+  filters: FilterState;
+  open: boolean;
+  selectedStoreName: string;
+  submitting: boolean;
+  totalCount: number;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'confirm'): void;
+}>();
+
+function resolveOptionLabel(
+  options: Array<{ label: string; value: string }>,
+  value: string,
+) {
+  return options.find((item) => item.value === value)?.label || '--';
+}
+
+const dateRangeText = computed(() => {
+  if (!props.filters.startDate && !props.filters.endDate) {
+    return '不限';
+  }
+  return `${props.filters.startDate || '--'} 至 ${props.filters.endDate || '--'}`;
+});
+
+const typeText = computed(() =>
+  resolveOptionLabel(TRANSACTION_TYPE_OPTIONS, props.filters.type),
+);
+
+const channelText = computed(() =>
+  resolveOptionLabel(TRANSACTION_CHANNEL_OPTIONS, props.filters.channel),
+);
+
+const paymentText = computed(() =>
+  resolveOptionLabel(TRANSACTION_PAYMENT_OPTIONS, props.filters.paymentMethod),
+);
+
+const quickRangeText = computed(() =>
+  resolveOptionLabel(QUICK_RANGE_OPTIONS, props.filters.quickRange || ''),
+);
+
+const keywordText = computed(() => props.filters.keyword.trim() || '未填写');
+</script>
+
+<template>
+  <Modal
+    :open="props.open"
+    title="导出交易流水"
+    ok-text="确认导出"
+    cancel-text="取消"
+    :confirm-loading="props.submitting"
+    @ok="emit('confirm')"
+    @cancel="emit('close')"
+  >
+    <div class="ft-export-modal">
+      <p class="ft-export-desc">
+        将按当前筛选条件导出交易流水 CSV 文件，请确认以下信息：
+      </p>
+
+      <div class="ft-export-list">
+        <div class="ft-export-line">
+          <span class="ft-export-label">门店</span>
+          <span class="ft-export-value">{{ props.selectedStoreName }}</span>
+        </div>
+        <div class="ft-export-line">
+          <span class="ft-export-label">日期范围</span>
+          <span class="ft-export-value">{{ dateRangeText }}</span>
+        </div>
+        <div class="ft-export-line">
+          <span class="ft-export-label">快捷日期</span>
+          <span class="ft-export-value">{{ quickRangeText }}</span>
+        </div>
+        <div class="ft-export-line">
+          <span class="ft-export-label">交易类型</span>
+          <span class="ft-export-value">{{ typeText }}</span>
+        </div>
+        <div class="ft-export-line">
+          <span class="ft-export-label">渠道</span>
+          <span class="ft-export-value">{{ channelText }}</span>
+        </div>
+        <div class="ft-export-line">
+          <span class="ft-export-label">支付方式</span>
+          <span class="ft-export-value">{{ paymentText }}</span>
+        </div>
+        <div class="ft-export-line">
+          <span class="ft-export-label">关键词</span>
+          <span class="ft-export-value">{{ keywordText }}</span>
+        </div>
+        <div class="ft-export-line is-total">
+          <span class="ft-export-label">预计导出</span>
+          <span class="ft-export-value">{{ props.totalCount }} 条</span>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>

apps/web-antd/src/views/finance/transaction/components/TransactionFilterBar.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+/**
+ * 文件职责：交易流水筛选栏（门店、日期、类型、关键词、导出）。
+ */
+import type { QuickDateRangeKey } from '../types';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input, Select } from 'ant-design-vue';
+
+import {
+  QUICK_RANGE_OPTIONS,
+  TRANSACTION_CHANNEL_OPTIONS,
+  TRANSACTION_PAYMENT_OPTIONS,
+  TRANSACTION_TYPE_OPTIONS,
+} from '../composables/transaction-page/constants';
+
+interface OptionItem {
+  label: string;
+  value: string;
+}
+
+interface FilterState {
+  channel: string;
+  endDate: string;
+  keyword: string;
+  paymentMethod: string;
+  quickRange: QuickDateRangeKey;
+  startDate: string;
+  type: string;
+}
+
+interface Props {
+  canExport: boolean;
+  filters: FilterState;
+  isExporting: boolean;
+  isStoreLoading: boolean;
+  selectedStoreId: string;
+  storeOptions: OptionItem[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'export'): void;
+  (event: 'search'): void;
+  (event: 'update:channel', value: string): void;
+  (event: 'update:endDate', value: string): void;
+  (event: 'update:keyword', value: string): void;
+  (event: 'update:paymentMethod', value: string): void;
+  (event: 'update:quickRange', value: QuickDateRangeKey): void;
+  (event: 'update:selectedStoreId', value: string): void;
+  (event: 'update:startDate', value: string): void;
+  (event: 'update:type', value: string): void;
+}>();
+
+function handleStoreChange(value: unknown) {
+  if (typeof value === 'number' || typeof value === 'string') {
+    emit('update:selectedStoreId', String(value));
+    return;
+  }
+  emit('update:selectedStoreId', '');
+}
+
+function handleStartDateChange(value: string | undefined) {
+  emit('update:startDate', String(value ?? ''));
+  emit('search');
+}
+
+function handleEndDateChange(value: string | undefined) {
+  emit('update:endDate', String(value ?? ''));
+  emit('search');
+}
+
+function handleTypeChange(value: unknown) {
+  emit('update:type', String(value ?? 'all'));
+  emit('search');
+}
+
+function handleChannelChange(value: unknown) {
+  emit('update:channel', String(value ?? 'all'));
+  emit('search');
+}
+
+function handlePaymentChange(value: unknown) {
+  emit('update:paymentMethod', String(value ?? 'all'));
+  emit('search');
+}
+
+function handleQuickDateClick(value: QuickDateRangeKey) {
+  emit('update:quickRange', value);
+  emit('search');
+}
+
+function handleKeywordChange(value: string | undefined) {
+  emit('update:keyword', String(value ?? ''));
+}
+</script>
+
+<template>
+  <div class="ft-toolbar">
+    <Select
+      class="ft-store-select"
+      :value="props.selectedStoreId"
+      placeholder="选择门店"
+      :loading="props.isStoreLoading"
+      :options="props.storeOptions"
+      :disabled="props.isStoreLoading || props.storeOptions.length === 0"
+      @update:value="(value) => handleStoreChange(value)"
+    />
+
+    <Input
+      class="ft-date-input"
+      type="date"
+      :value="props.filters.startDate"
+      @update:value="(value) => handleStartDateChange(value)"
+    />
+    <span class="ft-date-sep">至</span>
+    <Input
+      class="ft-date-input"
+      type="date"
+      :value="props.filters.endDate"
+      @update:value="(value) => handleEndDateChange(value)"
+    />
+
+    <div class="ft-quick-dates">
+      <Button
+        v-for="item in QUICK_RANGE_OPTIONS"
+        :key="`quick-${item.value}`"
+        size="small"
+        :type="props.filters.quickRange === item.value ? 'primary' : 'default'"
+        @click="handleQuickDateClick(item.value)"
+      >
+        {{ item.label }}
+      </Button>
+    </div>
+
+    <Select
+      class="ft-type-select"
+      :value="props.filters.type"
+      :options="TRANSACTION_TYPE_OPTIONS"
+      @update:value="(value) => handleTypeChange(value)"
+    />
+
+    <Select
+      class="ft-channel-select"
+      :value="props.filters.channel"
+      :options="TRANSACTION_CHANNEL_OPTIONS"
+      @update:value="(value) => handleChannelChange(value)"
+    />
+
+    <Select
+      class="ft-payment-select"
+      :value="props.filters.paymentMethod"
+      :options="TRANSACTION_PAYMENT_OPTIONS"
+      @update:value="(value) => handlePaymentChange(value)"
+    />
+
+    <Input
+      class="ft-search"
+      :value="props.filters.keyword"
+      placeholder="搜索流水号/订单号"
+      allow-clear
+      @update:value="(value) => handleKeywordChange(value)"
+      @press-enter="emit('search')"
+    >
+      <template #prefix>
+        <IconifyIcon icon="lucide:search" class="ft-search-icon" />
+      </template>
+    </Input>
+
+    <div class="ft-toolbar-right">
+      <Button
+        class="ft-export-btn"
+        :disabled="!props.canExport || !props.selectedStoreId"
+        :loading="props.isExporting"
+        @click="emit('export')"
+      >
+        <template #icon>
+          <IconifyIcon icon="lucide:download" />
+        </template>
+        导出
+      </Button>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/finance/transaction/components/TransactionStatsBar.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * 文件职责：交易流水统计卡片展示。
+ */
+import type { FinanceTransactionStatsDto } from '#/api/finance';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { formatCurrency } from '../composables/transaction-page/helpers';
+
+interface Props {
+  stats: FinanceTransactionStatsDto;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="ft-stats">
+    <div class="ft-stat-card">
+      <div class="ft-stat-label">
+        <IconifyIcon icon="lucide:trending-up" class="ft-stat-icon" />
+        总收入
+      </div>
+      <div class="ft-stat-value is-green">
+        {{ formatCurrency(props.stats.totalIncome) }}
+      </div>
+    </div>
+
+    <div class="ft-stat-card">
+      <div class="ft-stat-label">
+        <IconifyIcon icon="lucide:undo-2" class="ft-stat-icon" />
+        总退款
+      </div>
+      <div class="ft-stat-value is-red">
+        {{ formatCurrency(props.stats.totalRefund) }}
+      </div>
+    </div>
+
+    <div class="ft-stat-card">
+      <div class="ft-stat-label">
+        <IconifyIcon icon="lucide:receipt" class="ft-stat-icon" />
+        交易笔数
+      </div>
+      <div class="ft-stat-value">
+        {{ props.stats.totalCount }}
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/finance/transaction/components/TransactionTableCard.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+/**
+ * 文件职责：交易流水列表表格与本页汇总行。
+ */
+import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
+
+import type { FinanceTransactionListItemDto } from '#/api/finance';
+
+import { h } from 'vue';
+
+import { Button, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  formatSignedAmount,
+  resolveAmountToneClass,
+  resolveTransactionTypeTagColor,
+} from '../composables/transaction-page/helpers';
+
+interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+interface Props {
+  loading: boolean;
+  pageIncomeAmount: number;
+  pageRefundAmount: number;
+  pagination: PaginationState;
+  rows: FinanceTransactionListItemDto[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'detail', transactionId: string): void;
+  (event: 'orderDetail', orderNo: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+}>();
+
+const columns: TableProps['columns'] = [
+  {
+    title: '流水号',
+    dataIndex: 'transactionNo',
+    width: 180,
+    customRender: ({ record }) =>
+      h(
+        Button,
+        {
+          type: 'link',
+          class: 'ft-link-action ft-mono',
+          onClick: () => emit('detail', String(record.transactionId ?? '')),
+        },
+        () => String(record.transactionNo ?? '--'),
+      ),
+  },
+  {
+    title: '关联订单',
+    dataIndex: 'orderNo',
+    width: 170,
+    customRender: ({ record }) => {
+      const orderNo = String(record.orderNo ?? '').trim();
+      if (!orderNo) {
+        return h('span', { class: 'ft-mono' }, '--');
+      }
+
+      return h(
+        Button,
+        {
+          type: 'link',
+          class: 'ft-link-action ft-mono',
+          onClick: () => emit('orderDetail', orderNo),
+        },
+        () => `#${orderNo}`,
+      );
+    },
+  },
+  {
+    title: '类型',
+    dataIndex: 'typeText',
+    width: 120,
+    customRender: ({ record }) =>
+      h(
+        Tag,
+        { color: resolveTransactionTypeTagColor(String(record.type ?? '')) },
+        () => String(record.typeText ?? '--'),
+      ),
+  },
+  {
+    title: '渠道',
+    dataIndex: 'channel',
+    width: 90,
+  },
+  {
+    title: '支付方式',
+    dataIndex: 'paymentMethod',
+    width: 110,
+  },
+  {
+    title: '金额',
+    dataIndex: 'amount',
+    width: 140,
+    align: 'right',
+    customRender: ({ record }) => {
+      const amount = Number(record.amount || 0);
+      return h(
+        'span',
+        {
+          class: `ft-amount ${resolveAmountToneClass(amount, Boolean(record.isIncome))}`,
+        },
+        formatSignedAmount(amount, Boolean(record.isIncome)),
+      );
+    },
+  },
+  {
+    title: '交易时间',
+    dataIndex: 'occurredAt',
+    width: 180,
+    customRender: ({ text }) => h('span', { class: 'ft-time' }, String(text)),
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    ellipsis: true,
+    customRender: ({ text }) =>
+      h(
+        'span',
+        {
+          class: 'ft-remark',
+          title: String(text ?? ''),
+        },
+        String(text || '--'),
+      ),
+  },
+];
+
+function handleTableChange(next: TablePaginationConfig) {
+  emit('pageChange', Number(next.current || 1), Number(next.pageSize || 20));
+}
+</script>
+
+<template>
+  <div class="ft-table-card">
+    <Table
+      row-key="transactionId"
+      :columns="columns"
+      :data-source="props.rows"
+      :loading="props.loading"
+      :pagination="{
+        current: props.pagination.page,
+        pageSize: props.pagination.pageSize,
+        total: props.pagination.total,
+        showSizeChanger: true,
+        pageSizeOptions: ['20', '50', '100'],
+        showTotal: (total: number) => `共 ${total} 条`,
+      }"
+      @change="handleTableChange"
+    >
+      <template #summary>
+        <Table.Summary.Row class="ft-summary-row">
+          <Table.Summary.Cell :index="0" :col-span="5" align="right">
+            本页合计
+          </Table.Summary.Cell>
+          <Table.Summary.Cell :index="5" align="right">
+            <span class="ft-summary-text">
+              收入 {{ formatCurrency(props.pageIncomeAmount) }} / 退款
+              {{ formatCurrency(props.pageRefundAmount) }}
+            </span>
+          </Table.Summary.Cell>
+          <Table.Summary.Cell :index="6" />
+          <Table.Summary.Cell :index="7" />
+        </Table.Summary.Row>
+      </template>
+    </Table>
+  </div>
+</template>

apps/web-antd/src/views/finance/transaction/composables/transaction-page/constants.ts

@@ -0,0 +1,89 @@
+import type {
+  FinanceTransactionFilterState,
+  FinanceTransactionPageSummaryState,
+  OptionItem,
+  QuickRangeOption,
+} from '../../types';
+
+/**
+ * 文件职责：交易流水页面常量与默认状态定义。
+ */
+import type {
+  FinanceTransactionChannelFilter,
+  FinanceTransactionPaymentFilter,
+  FinanceTransactionStatsDto,
+  FinanceTransactionTypeFilter,
+} from '#/api/finance';
+
+import { getTodayDateString } from './helpers';
+
+/** 交易流水查看权限。 */
+export const FINANCE_TRANSACTION_VIEW_PERMISSION =
+  'tenant:finance:transaction:view';
+
+/** 交易流水导出权限。 */
+export const FINANCE_TRANSACTION_EXPORT_PERMISSION =
+  'tenant:finance:transaction:export';
+
+/** 交易类型筛选项。 */
+export const TRANSACTION_TYPE_OPTIONS: OptionItem[] = [
+  { label: '全部类型', value: 'all' },
+  { label: '收入', value: 'income' },
+  { label: '退款', value: 'refund' },
+  { label: '储值充值', value: 'stored_card_recharge' },
+  { label: '积分抵扣', value: 'point_redeem' },
+];
+
+/** 交易渠道筛选项。 */
+export const TRANSACTION_CHANNEL_OPTIONS: OptionItem[] = [
+  { label: '全部渠道', value: 'all' },
+  { label: '外卖', value: 'delivery' },
+  { label: '自提', value: 'pickup' },
+  { label: '堂食', value: 'dine_in' },
+];
+
+/** 支付方式筛选项。 */
+export const TRANSACTION_PAYMENT_OPTIONS: OptionItem[] = [
+  { label: '全部支付方式', value: 'all' },
+  { label: '微信', value: 'wechat' },
+  { label: '支付宝', value: 'alipay' },
+  { label: '现金', value: 'cash' },
+  { label: '刷卡', value: 'card' },
+  { label: '储值余额', value: 'balance' },
+];
+
+/** 快捷日期选项。 */
+export const QUICK_RANGE_OPTIONS: QuickRangeOption[] = [
+  { label: '今天', value: 'today' },
+  { label: '昨天', value: 'yesterday' },
+  { label: '近7天', value: '7d' },
+  { label: '近30天', value: '30d' },
+  { label: '本月', value: 'month' },
+];
+
+/** 默认筛选状态。 */
+export function createDefaultFilters(): FinanceTransactionFilterState {
+  const today = getTodayDateString();
+  return {
+    type: 'all' as FinanceTransactionTypeFilter,
+    channel: 'all' as FinanceTransactionChannelFilter,
+    paymentMethod: 'all' as FinanceTransactionPaymentFilter,
+    keyword: '',
+    startDate: today,
+    endDate: today,
+    quickRange: 'today',
+  };
+}
+
+/** 默认统计数据。 */
+export const DEFAULT_STATS: FinanceTransactionStatsDto = {
+  totalIncome: 0,
+  totalRefund: 0,
+  totalCount: 0,
+};
+
+/** 默认本页汇总数据。 */
+export const DEFAULT_PAGE_SUMMARY: FinanceTransactionPageSummaryState = {
+  pageIncomeAmount: 0,
+  pageRefundAmount: 0,
+};

apps/web-antd/src/views/finance/transaction/composables/transaction-page/data-actions.ts

@@ -0,0 +1,126 @@
+import type {
+  FinanceTransactionFilterState,
+  FinanceTransactionPageSummaryState,
+  FinanceTransactionPaginationState,
+} from '../../types';
+
+/**
+ * 文件职责：交易流水页面数据加载动作。
+ */
+import type {
+  FinanceTransactionListItemDto,
+  FinanceTransactionStatsDto,
+} from '#/api/finance';
+import type { StoreListItemDto } from '#/api/store';
+
+import {
+  getFinanceTransactionListApi,
+  getFinanceTransactionStatsApi,
+} from '#/api/finance';
+import { getStoreListApi } from '#/api/store';
+
+import { buildFilterQueryPayload, buildListQueryPayload } from './helpers';
+
+interface DataActionOptions {
+  filters: FinanceTransactionFilterState;
+  isListLoading: { value: boolean };
+  isStatsLoading: { value: boolean };
+  isStoreLoading: { value: boolean };
+  pageSummary: FinanceTransactionPageSummaryState;
+  pagination: FinanceTransactionPaginationState;
+  rows: { value: FinanceTransactionListItemDto[] };
+  selectedStoreId: { value: string };
+  stats: FinanceTransactionStatsDto;
+  stores: { value: StoreListItemDto[] };
+}
+
+/** 创建数据相关动作。 */
+export function createDataActions(options: DataActionOptions) {
+  function resetStats() {
+    options.stats.totalIncome = 0;
+    options.stats.totalRefund = 0;
+    options.stats.totalCount = 0;
+  }
+
+  function resetPageSummary() {
+    options.pageSummary.pageIncomeAmount = 0;
+    options.pageSummary.pageRefundAmount = 0;
+  }
+
+  function clearPageData() {
+    options.rows.value = [];
+    options.pagination.total = 0;
+    resetPageSummary();
+    resetStats();
+  }
+
+  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 = '';
+        clearPageData();
+        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 loadPageData() {
+    if (!options.selectedStoreId.value) {
+      clearPageData();
+      return;
+    }
+
+    const listPayload = buildListQueryPayload(
+      options.selectedStoreId.value,
+      options.filters,
+      options.pagination.page,
+      options.pagination.pageSize,
+    );
+    const filterPayload = buildFilterQueryPayload(
+      options.selectedStoreId.value,
+      options.filters,
+    );
+
+    options.isListLoading.value = true;
+    options.isStatsLoading.value = true;
+    try {
+      const [listResult, statsResult] = await Promise.all([
+        getFinanceTransactionListApi(listPayload),
+        getFinanceTransactionStatsApi(filterPayload),
+      ]);
+
+      options.rows.value = listResult.items;
+      options.pagination.total = listResult.total;
+      options.pagination.page = listResult.page;
+      options.pagination.pageSize = listResult.pageSize;
+      options.pageSummary.pageIncomeAmount = listResult.pageIncomeAmount;
+      options.pageSummary.pageRefundAmount = listResult.pageRefundAmount;
+
+      options.stats.totalIncome = statsResult.totalIncome;
+      options.stats.totalRefund = statsResult.totalRefund;
+      options.stats.totalCount = statsResult.totalCount;
+    } finally {
+      options.isListLoading.value = false;
+      options.isStatsLoading.value = false;
+    }
+  }
+
+  return {
+    clearPageData,
+    loadPageData,
+    loadStores,
+  };
+}

apps/web-antd/src/views/finance/transaction/composables/transaction-page/drawer-actions.ts

@@ -0,0 +1,78 @@
+/**
+ * 文件职责：交易流水详情与关联订单抽屉动作。
+ */
+import type { FinanceTransactionDetailDto } from '#/api/finance';
+import type { OrderAllDetailDto } from '#/api/order';
+
+import { getFinanceTransactionDetailApi } from '#/api/finance';
+import { getOrderAllDetailApi } from '#/api/order';
+
+interface DrawerActionOptions {
+  isRelatedOrderDrawerOpen: { value: boolean };
+  isRelatedOrderLoading: { value: boolean };
+  isTransactionDetailLoading: { value: boolean };
+  isTransactionDrawerOpen: { value: boolean };
+  relatedOrderDetail: { value: null | OrderAllDetailDto };
+  selectedStoreId: { value: string };
+  transactionDetail: { value: FinanceTransactionDetailDto | null };
+}
+
+/** 创建抽屉动作。 */
+export function createDrawerActions(options: DrawerActionOptions) {
+  function setTransactionDrawerOpen(value: boolean) {
+    options.isTransactionDrawerOpen.value = value;
+    if (!value) {
+      options.transactionDetail.value = null;
+    }
+  }
+
+  function setRelatedOrderDrawerOpen(value: boolean) {
+    options.isRelatedOrderDrawerOpen.value = value;
+    if (!value) {
+      options.relatedOrderDetail.value = null;
+    }
+  }
+
+  async function openTransactionDetail(transactionId: string) {
+    if (!options.selectedStoreId.value || !transactionId) {
+      return;
+    }
+
+    options.isTransactionDrawerOpen.value = true;
+    options.transactionDetail.value = null;
+    options.isTransactionDetailLoading.value = true;
+    try {
+      options.transactionDetail.value = await getFinanceTransactionDetailApi({
+        storeId: options.selectedStoreId.value,
+        transactionId,
+      });
+    } finally {
+      options.isTransactionDetailLoading.value = false;
+    }
+  }
+
+  async function openRelatedOrder(orderNo: string) {
+    if (!options.selectedStoreId.value || !orderNo) {
+      return;
+    }
+
+    options.isRelatedOrderDrawerOpen.value = true;
+    options.relatedOrderDetail.value = null;
+    options.isRelatedOrderLoading.value = true;
+    try {
+      options.relatedOrderDetail.value = await getOrderAllDetailApi({
+        storeId: options.selectedStoreId.value,
+        orderNo,
+      });
+    } finally {
+      options.isRelatedOrderLoading.value = false;
+    }
+  }
+
+  return {
+    openRelatedOrder,
+    openTransactionDetail,
+    setRelatedOrderDrawerOpen,
+    setTransactionDrawerOpen,
+  };
+}

apps/web-antd/src/views/finance/transaction/composables/transaction-page/export-actions.ts

@@ -0,0 +1,67 @@
+import type { FinanceTransactionFilterState } from '../../types';
+
+/**
+ * 文件职责：交易流水导出弹窗与导出动作。
+ */
+import { message } from 'ant-design-vue';
+
+import { exportFinanceTransactionCsvApi } from '#/api/finance';
+
+import {
+  buildFilterQueryPayload,
+  downloadBase64File,
+  isDateRangeInvalid,
+} from './helpers';
+
+interface ExportActionOptions {
+  canExport: { value: boolean };
+  filters: FinanceTransactionFilterState;
+  isExportModalOpen: { value: boolean };
+  isExporting: { value: boolean };
+  selectedStoreId: { value: string };
+}
+
+/** 创建导出动作。 */
+export function createExportActions(options: ExportActionOptions) {
+  function setExportModalOpen(value: boolean) {
+    options.isExportModalOpen.value = value;
+  }
+
+  function openExportModal() {
+    if (!options.canExport.value || !options.selectedStoreId.value) {
+      return;
+    }
+    options.isExportModalOpen.value = true;
+  }
+
+  async function handleConfirmExport() {
+    if (!options.canExport.value || !options.selectedStoreId.value) {
+      return;
+    }
+
+    if (isDateRangeInvalid(options.filters)) {
+      message.warning('开始日期不能晚于结束日期');
+      return;
+    }
+
+    options.isExporting.value = true;
+    try {
+      const payload = buildFilterQueryPayload(
+        options.selectedStoreId.value,
+        options.filters,
+      );
+      const result = await exportFinanceTransactionCsvApi(payload);
+      downloadBase64File(result.fileName, result.fileContentBase64);
+      message.success(`导出成功，共 ${result.totalCount} 条记录`);
+      setExportModalOpen(false);
+    } finally {
+      options.isExporting.value = false;
+    }
+  }
+
+  return {
+    handleConfirmExport,
+    openExportModal,
+    setExportModalOpen,
+  };
+}

apps/web-antd/src/views/finance/transaction/composables/transaction-page/filter-actions.ts

@@ -0,0 +1,89 @@
+import type {
+  FinanceTransactionFilterState,
+  FinanceTransactionPaginationState,
+  QuickDateRangeKey,
+} from '../../types';
+
+/**
+ * 文件职责：交易流水页面筛选与分页行为。
+ */
+import { message } from 'ant-design-vue';
+
+import { isDateRangeInvalid, resolveQuickRangeDateRange } from './helpers';
+
+interface FilterActionOptions {
+  filters: FinanceTransactionFilterState;
+  loadPageData: () => Promise<void>;
+  pagination: FinanceTransactionPaginationState;
+}
+
+/** 创建筛选行为。 */
+export function createFilterActions(options: FilterActionOptions) {
+  function setType(value: string) {
+    options.filters.type = (value ||
+      'all') as FinanceTransactionFilterState['type'];
+  }
+
+  function setChannel(value: string) {
+    options.filters.channel = (value ||
+      'all') as FinanceTransactionFilterState['channel'];
+  }
+
+  function setPaymentMethod(value: string) {
+    options.filters.paymentMethod = (value ||
+      'all') as FinanceTransactionFilterState['paymentMethod'];
+  }
+
+  function setQuickRange(value: QuickDateRangeKey) {
+    options.filters.quickRange = value;
+    if (!value) {
+      return;
+    }
+
+    const { startDate, endDate } = resolveQuickRangeDateRange(value);
+    options.filters.startDate = startDate;
+    options.filters.endDate = endDate;
+  }
+
+  function setStartDate(value: string) {
+    options.filters.startDate = value;
+    options.filters.quickRange = '';
+  }
+
+  function setEndDate(value: string) {
+    options.filters.endDate = value;
+    options.filters.quickRange = '';
+  }
+
+  function setKeyword(value: string) {
+    options.filters.keyword = value;
+  }
+
+  async function handleSearch() {
+    if (isDateRangeInvalid(options.filters)) {
+      message.warning('开始日期不能晚于结束日期');
+      return;
+    }
+
+    options.pagination.page = 1;
+    await options.loadPageData();
+  }
+
+  async function handlePageChange(page: number, pageSize: number) {
+    options.pagination.page = page;
+    options.pagination.pageSize = pageSize;
+    await options.loadPageData();
+  }
+
+  return {
+    handlePageChange,
+    handleSearch,
+    setChannel,
+    setEndDate,
+    setKeyword,
+    setPaymentMethod,
+    setQuickRange,
+    setStartDate,
+    setType,
+  };
+}

apps/web-antd/src/views/finance/transaction/composables/transaction-page/helpers.ts

@@ -0,0 +1,197 @@
+import type {
+  FinanceTransactionFilterState,
+  FinanceTransactionListQueryPayload,
+  FinanceTransactionQueryPayload,
+  QuickDateRangeKey,
+} from '../../types';
+
+/**
+ * 文件职责：交易流水页面纯函数与数据转换工具。
+ */
+import type {
+  FinanceTransactionChannelFilter,
+  FinanceTransactionPaymentFilter,
+  FinanceTransactionTypeFilter,
+} from '#/api/finance';
+
+function formatDate(date: Date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function toDateOnly(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function shiftDate(date: Date, dayOffset: number) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + dayOffset);
+  return next;
+}
+
+function normalizeType(
+  value: FinanceTransactionTypeFilter,
+): FinanceTransactionTypeFilter | undefined {
+  return value === 'all' ? undefined : value;
+}
+
+function normalizeChannel(
+  value: FinanceTransactionChannelFilter,
+): FinanceTransactionChannelFilter | undefined {
+  return value === 'all' ? undefined : value;
+}
+
+function normalizePayment(
+  value: FinanceTransactionPaymentFilter,
+): FinanceTransactionPaymentFilter | undefined {
+  return value === 'all' ? undefined : value;
+}
+
+/** 获取今天日期字符串（yyyy-MM-dd）。 */
+export function getTodayDateString() {
+  return formatDate(new Date());
+}
+
+/** 根据快捷日期键计算筛选起止日期。 */
+export function resolveQuickRangeDateRange(value: QuickDateRangeKey) {
+  const today = toDateOnly(new Date());
+  let start = today;
+  let end = today;
+
+  switch (value) {
+    case '7d': {
+      start = shiftDate(today, -6);
+
+      break;
+    }
+    case '30d': {
+      start = shiftDate(today, -29);
+
+      break;
+    }
+    case 'month': {
+      start = new Date(today.getFullYear(), today.getMonth(), 1);
+
+      break;
+    }
+    case 'yesterday': {
+      start = shiftDate(today, -1);
+      end = start;
+
+      break;
+    }
+    // No default
+  }
+
+  return {
+    startDate: formatDate(start),
+    endDate: formatDate(end),
+  };
+}
+
+/** 构建交易流水筛选请求。 */
+export function buildFilterQueryPayload(
+  storeId: string,
+  filters: FinanceTransactionFilterState,
+): FinanceTransactionQueryPayload {
+  return {
+    storeId,
+    startDate: filters.startDate || undefined,
+    endDate: filters.endDate || undefined,
+    type: normalizeType(filters.type),
+    channel: normalizeChannel(filters.channel),
+    paymentMethod: normalizePayment(filters.paymentMethod),
+    keyword: filters.keyword.trim() || undefined,
+  };
+}
+
+/** 构建交易流水列表请求。 */
+export function buildListQueryPayload(
+  storeId: string,
+  filters: FinanceTransactionFilterState,
+  page: number,
+  pageSize: number,
+): FinanceTransactionListQueryPayload {
+  return {
+    ...buildFilterQueryPayload(storeId, filters),
+    page,
+    pageSize,
+  };
+}
+
+/** 判断日期范围是否合法。 */
+export function isDateRangeInvalid(filters: FinanceTransactionFilterState) {
+  if (!filters.startDate || !filters.endDate) {
+    return false;
+  }
+  return filters.startDate > filters.endDate;
+}
+
+/** 货币格式化（人民币）。 */
+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 formatSignedAmount(value: number, isIncome: boolean) {
+  const normalized = Number.isFinite(value) ? value : 0;
+  if (normalized === 0) {
+    return formatCurrency(0);
+  }
+
+  if (normalized > 0 || isIncome) {
+    return `+${formatCurrency(Math.abs(normalized))}`;
+  }
+
+  return `-${formatCurrency(Math.abs(normalized))}`;
+}
+
+/** 金额视觉色调。 */
+export function resolveAmountToneClass(value: number, isIncome: boolean) {
+  if (value > 0 || isIncome) {
+    return 'income';
+  }
+  if (value < 0) {
+    return 'expense';
+  }
+  return 'neutral';
+}
+
+/** 交易类型标签颜色。 */
+export function resolveTransactionTypeTagColor(type: string) {
+  if (type === 'income') return 'green';
+  if (type === 'refund') return 'red';
+  if (type === 'stored_card_recharge') return 'blue';
+  if (type === 'point_redeem') return 'orange';
+  return 'default';
+}
+
+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;' });
+}
+
+/** 下载 Base64 编码文件。 */
+export function downloadBase64File(
+  fileName: string,
+  fileContentBase64: string,
+) {
+  const blob = decodeBase64ToBlob(fileContentBase64);
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = fileName;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}

apps/web-antd/src/views/finance/transaction/composables/useFinanceTransactionPage.ts

@@ -0,0 +1,236 @@
+/**
+ * 文件职责：交易流水页面状态与动作编排。
+ */
+import type {
+  FinanceTransactionDetailDto,
+  FinanceTransactionListItemDto,
+  FinanceTransactionStatsDto,
+} from '#/api/finance';
+import type { OrderAllDetailDto } from '#/api/order';
+import type { StoreListItemDto } from '#/api/store';
+
+import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
+
+import { useAccessStore } from '@vben/stores';
+
+import {
+  createDefaultFilters,
+  DEFAULT_PAGE_SUMMARY,
+  DEFAULT_STATS,
+  FINANCE_TRANSACTION_EXPORT_PERMISSION,
+  FINANCE_TRANSACTION_VIEW_PERMISSION,
+} from './transaction-page/constants';
+import { createDataActions } from './transaction-page/data-actions';
+import { createDrawerActions } from './transaction-page/drawer-actions';
+import { createExportActions } from './transaction-page/export-actions';
+import { createFilterActions } from './transaction-page/filter-actions';
+
+/** 创建交易流水页面组合状态。 */
+export function useFinanceTransactionPage() {
+  const accessStore = useAccessStore();
+
+  const stores = ref<StoreListItemDto[]>([]);
+  const selectedStoreId = ref('');
+  const isStoreLoading = ref(false);
+
+  const filters = reactive(createDefaultFilters());
+  const rows = ref<FinanceTransactionListItemDto[]>([]);
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0,
+  });
+  const pageSummary = reactive({ ...DEFAULT_PAGE_SUMMARY });
+
+  const stats = reactive<FinanceTransactionStatsDto>({ ...DEFAULT_STATS });
+  const isListLoading = ref(false);
+  const isStatsLoading = ref(false);
+
+  const transactionDetail = ref<FinanceTransactionDetailDto | null>(null);
+  const isTransactionDrawerOpen = ref(false);
+  const isTransactionDetailLoading = ref(false);
+
+  const relatedOrderDetail = ref<null | OrderAllDetailDto>(null);
+  const isRelatedOrderDrawerOpen = ref(false);
+  const isRelatedOrderLoading = ref(false);
+
+  const isExportModalOpen = ref(false);
+  const isExporting = ref(false);
+
+  const storeOptions = computed(() =>
+    stores.value.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })),
+  );
+
+  const selectedStoreName = computed(
+    () =>
+      storeOptions.value.find((item) => item.value === selectedStoreId.value)
+        ?.label ?? '--',
+  );
+
+  const accessCodeSet = computed(
+    () => new Set((accessStore.accessCodes ?? []).map(String)),
+  );
+
+  const canView = computed(() =>
+    accessCodeSet.value.has(FINANCE_TRANSACTION_VIEW_PERMISSION),
+  );
+
+  const canExport = computed(() =>
+    accessCodeSet.value.has(FINANCE_TRANSACTION_EXPORT_PERMISSION),
+  );
+
+  const { clearPageData, loadPageData, loadStores } = createDataActions({
+    stores,
+    selectedStoreId,
+    filters,
+    rows,
+    pagination,
+    pageSummary,
+    stats,
+    isStoreLoading,
+    isListLoading,
+    isStatsLoading,
+  });
+
+  const {
+    handlePageChange,
+    handleSearch,
+    setChannel,
+    setEndDate,
+    setKeyword,
+    setPaymentMethod,
+    setQuickRange,
+    setStartDate,
+    setType,
+  } = createFilterActions({
+    filters,
+    pagination,
+    loadPageData,
+  });
+
+  const {
+    openRelatedOrder,
+    openTransactionDetail,
+    setRelatedOrderDrawerOpen,
+    setTransactionDrawerOpen,
+  } = createDrawerActions({
+    selectedStoreId,
+    transactionDetail,
+    isTransactionDrawerOpen,
+    isTransactionDetailLoading,
+    relatedOrderDetail,
+    isRelatedOrderDrawerOpen,
+    isRelatedOrderLoading,
+  });
+
+  const { handleConfirmExport, openExportModal, setExportModalOpen } =
+    createExportActions({
+      canExport,
+      selectedStoreId,
+      filters,
+      isExportModalOpen,
+      isExporting,
+    });
+
+  function setSelectedStoreId(value: string) {
+    selectedStoreId.value = value;
+  }
+
+  function clearByPermission() {
+    stores.value = [];
+    selectedStoreId.value = '';
+    clearPageData();
+    setTransactionDrawerOpen(false);
+    setRelatedOrderDrawerOpen(false);
+    setExportModalOpen(false);
+  }
+
+  watch(selectedStoreId, async (storeId) => {
+    setTransactionDrawerOpen(false);
+    setRelatedOrderDrawerOpen(false);
+
+    if (!storeId) {
+      clearPageData();
+      return;
+    }
+
+    pagination.page = 1;
+    await loadPageData();
+  });
+
+  watch(canView, async (value, oldValue) => {
+    if (value === oldValue) {
+      return;
+    }
+
+    if (!value) {
+      clearByPermission();
+      return;
+    }
+
+    await loadStores();
+  });
+
+  onMounted(async () => {
+    if (!canView.value) {
+      clearByPermission();
+      return;
+    }
+
+    await loadStores();
+  });
+
+  onActivated(() => {
+    if (!canView.value) {
+      return;
+    }
+
+    if (stores.value.length === 0 || !selectedStoreId.value) {
+      void loadStores();
+    }
+  });
+
+  return {
+    canExport,
+    canView,
+    filters,
+    handleConfirmExport,
+    handlePageChange,
+    handleSearch,
+    isExportModalOpen,
+    isExporting,
+    isListLoading,
+    isRelatedOrderDrawerOpen,
+    isRelatedOrderLoading,
+    isStatsLoading,
+    isStoreLoading,
+    isTransactionDetailLoading,
+    isTransactionDrawerOpen,
+    openExportModal,
+    openRelatedOrder,
+    openTransactionDetail,
+    pageSummary,
+    pagination,
+    relatedOrderDetail,
+    rows,
+    selectedStoreId,
+    selectedStoreName,
+    setChannel,
+    setEndDate,
+    setExportModalOpen,
+    setKeyword,
+    setPaymentMethod,
+    setQuickRange,
+    setRelatedOrderDrawerOpen,
+    setSelectedStoreId,
+    setStartDate,
+    setTransactionDrawerOpen,
+    setType,
+    stats,
+    storeOptions,
+    transactionDetail,
+  };
+}

apps/web-antd/src/views/finance/transaction/index.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * 文件职责：财务中心交易流水页面入口编排。
+ */
+import { Page } from '@vben/common-ui';
+
+import { Empty } from 'ant-design-vue';
+
+import RelatedOrderDrawer from './components/RelatedOrderDrawer.vue';
+import TransactionDetailDrawer from './components/TransactionDetailDrawer.vue';
+import TransactionExportModal from './components/TransactionExportModal.vue';
+import TransactionFilterBar from './components/TransactionFilterBar.vue';
+import TransactionStatsBar from './components/TransactionStatsBar.vue';
+import TransactionTableCard from './components/TransactionTableCard.vue';
+import { useFinanceTransactionPage } from './composables/useFinanceTransactionPage';
+
+const {
+  canExport,
+  canView,
+  filters,
+  handleConfirmExport,
+  handlePageChange,
+  handleSearch,
+  isExportModalOpen,
+  isExporting,
+  isListLoading,
+  isRelatedOrderDrawerOpen,
+  isRelatedOrderLoading,
+  isStoreLoading,
+  isTransactionDetailLoading,
+  isTransactionDrawerOpen,
+  openExportModal,
+  openRelatedOrder,
+  openTransactionDetail,
+  pageSummary,
+  pagination,
+  relatedOrderDetail,
+  rows,
+  selectedStoreId,
+  selectedStoreName,
+  setChannel,
+  setEndDate,
+  setExportModalOpen,
+  setKeyword,
+  setPaymentMethod,
+  setQuickRange,
+  setRelatedOrderDrawerOpen,
+  setSelectedStoreId,
+  setStartDate,
+  setTransactionDrawerOpen,
+  setType,
+  stats,
+  storeOptions,
+  transactionDetail,
+} = useFinanceTransactionPage();
+</script>
+
+<template>
+  <Page title="交易流水" content-class="page-finance-transaction">
+    <div class="ft-page">
+      <template v-if="canView">
+        <TransactionStatsBar :stats="stats" />
+
+        <TransactionFilterBar
+          :selected-store-id="selectedStoreId"
+          :store-options="storeOptions"
+          :is-store-loading="isStoreLoading"
+          :filters="filters"
+          :can-export="canExport"
+          :is-exporting="isExporting"
+          @update:selected-store-id="setSelectedStoreId"
+          @update:start-date="setStartDate"
+          @update:end-date="setEndDate"
+          @update:quick-range="setQuickRange"
+          @update:type="setType"
+          @update:channel="setChannel"
+          @update:payment-method="setPaymentMethod"
+          @update:keyword="setKeyword"
+          @search="handleSearch"
+          @export="openExportModal"
+        />
+
+        <TransactionTableCard
+          :rows="rows"
+          :loading="isListLoading"
+          :pagination="pagination"
+          :page-income-amount="pageSummary.pageIncomeAmount"
+          :page-refund-amount="pageSummary.pageRefundAmount"
+          @page-change="handlePageChange"
+          @detail="openTransactionDetail"
+          @order-detail="openRelatedOrder"
+        />
+      </template>
+
+      <Empty v-else description="暂无交易流水页面访问权限" />
+    </div>
+
+    <TransactionDetailDrawer
+      :open="isTransactionDrawerOpen"
+      :loading="isTransactionDetailLoading"
+      :detail="transactionDetail"
+      @close="setTransactionDrawerOpen(false)"
+      @order-detail="openRelatedOrder"
+    />
+
+    <RelatedOrderDrawer
+      :open="isRelatedOrderDrawerOpen"
+      :loading="isRelatedOrderLoading"
+      :detail="relatedOrderDetail"
+      @close="setRelatedOrderDrawerOpen(false)"
+    />
+
+    <TransactionExportModal
+      :open="isExportModalOpen"
+      :submitting="isExporting"
+      :filters="filters"
+      :selected-store-name="selectedStoreName"
+      :total-count="stats.totalCount"
+      @close="setExportModalOpen(false)"
+      @confirm="handleConfirmExport"
+    />
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>

apps/web-antd/src/views/finance/transaction/styles/base.less

@@ -0,0 +1,18 @@
+/**
+ * 文件职责：交易流水页面基础容器样式。
+ */
+.page-finance-transaction {
+  .ant-card {
+    border-radius: 10px;
+  }
+}
+
+.ft-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ft-mono {
+  font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
+}

apps/web-antd/src/views/finance/transaction/styles/drawer.less

@@ -0,0 +1,193 @@
+/**
+ * 文件职责：交易详情与关联订单抽屉样式。
+ */
+.page-finance-transaction {
+  .ant-drawer {
+    .ant-drawer-header {
+      padding: 14px 18px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .ant-drawer-body {
+      padding: 16px 20px;
+    }
+
+    .ant-drawer-footer {
+      padding: 12px 20px;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+}
+
+.ft-section {
+  margin-bottom: 20px;
+
+  .ft-section-title {
+    padding-left: 10px;
+    margin-bottom: 14px;
+    font-size: 14px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 88%);
+    border-left: 3px solid #1677ff;
+  }
+}
+
+.ft-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 20px;
+  font-size: 13px;
+
+  .label {
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .full {
+    grid-column: 1 / -1;
+  }
+}
+
+.ft-order-link {
+  padding-inline: 0;
+}
+
+.ft-detail-amount {
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+
+  &.income {
+    color: #52c41a;
+  }
+
+  &.expense {
+    color: #ff4d4f;
+  }
+}
+
+.ft-detail-table-wrap {
+  overflow-x: auto;
+}
+
+.ft-detail-table {
+  width: 100%;
+  min-width: 520px;
+  font-size: 13px;
+  border-collapse: collapse;
+
+  th {
+    padding: 8px 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: rgb(0 0 0 / 45%);
+    text-align: left;
+    background: #fafafa;
+    border-bottom: 1px solid #f0f0f0;
+
+    &.right {
+      text-align: right;
+    }
+  }
+
+  td {
+    padding: 8px 10px;
+    color: rgb(0 0 0 / 88%);
+    border-bottom: 1px solid #f5f5f5;
+
+    &.right {
+      text-align: right;
+    }
+  }
+}
+
+.ft-amount-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 10px 0;
+  font-size: 13px;
+
+  > div {
+    display: flex;
+    justify-content: space-between;
+    color: rgb(0 0 0 / 65%);
+  }
+
+  .discount {
+    color: #ff4d4f;
+  }
+
+  .total {
+    padding-top: 8px;
+    margin-top: 4px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 88%);
+    border-top: 1px solid #f0f0f0;
+
+    span:last-child {
+      font-size: 15px;
+      color: #1677ff;
+    }
+  }
+}
+
+.ft-timeline {
+  position: relative;
+  padding-left: 22px;
+
+  .ft-timeline-item {
+    position: relative;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding-bottom: 18px;
+    font-size: 13px;
+
+    &::before {
+      position: absolute;
+      top: 5px;
+      left: -22px;
+      width: 10px;
+      height: 10px;
+      content: '';
+      background: #1677ff;
+      border: 2px solid #d6e4ff;
+      border-radius: 50%;
+    }
+
+    &::after {
+      position: absolute;
+      top: 17px;
+      left: -18px;
+      width: 2px;
+      height: calc(100% - 12px);
+      content: '';
+      background: #e8e8e8;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    .text {
+      font-weight: 500;
+      color: rgb(0 0 0 / 88%);
+    }
+
+    .time {
+      color: rgb(0 0 0 / 45%);
+    }
+  }
+}
+
+.ft-remark-box {
+  padding: 10px 14px;
+  font-size: 13px;
+  color: rgb(0 0 0 / 65%);
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}

apps/web-antd/src/views/finance/transaction/styles/index.less

@@ -0,0 +1,9 @@
+/**
+ * 文件职责：交易流水页面样式聚合入口。
+ */
+@import './base.less';
+@import './layout.less';
+@import './table.less';
+@import './drawer.less';
+@import './modal.less';
+@import './responsive.less';

apps/web-antd/src/views/finance/transaction/styles/layout.less

@@ -0,0 +1,134 @@
+/**
+ * 文件职责：交易流水页面布局与筛选区域样式。
+ */
+.ft-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.ft-stat-card {
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+  transition: all 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 6px 14px rgb(15 23 42 / 10%);
+    transform: translateY(-1px);
+  }
+}
+
+.ft-stat-label {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.ft-stat-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.ft-stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: rgb(0 0 0 / 88%);
+
+  &.is-green {
+    color: #52c41a;
+  }
+
+  &.is-red {
+    color: #ff4d4f;
+  }
+}
+
+.ft-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  padding: 14px 18px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+
+  .ft-store-select {
+    width: 220px;
+  }
+
+  .ft-date-input {
+    width: 145px;
+  }
+
+  .ft-type-select {
+    width: 120px;
+  }
+
+  .ft-channel-select {
+    width: 110px;
+  }
+
+  .ft-payment-select {
+    width: 130px;
+  }
+
+  .ft-search {
+    width: 190px;
+  }
+
+  .ft-date-sep {
+    font-size: 13px;
+    line-height: 32px;
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .ft-toolbar-right {
+    margin-left: auto;
+  }
+
+  .ft-search-icon {
+    width: 14px;
+    height: 14px;
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .ft-export-btn {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    height: 32px;
+  }
+
+  .ant-select-selector,
+  .ant-input,
+  .ant-input-affix-wrapper {
+    height: 32px;
+    font-size: 13px;
+  }
+
+  .ant-input-affix-wrapper .ant-input {
+    height: 100%;
+  }
+}
+
+.ft-quick-dates {
+  display: flex;
+  gap: 4px;
+
+  .ant-btn {
+    min-width: 56px;
+    height: 28px;
+    padding: 0 10px;
+    font-size: 12px;
+    border-radius: 4px;
+  }
+}

apps/web-antd/src/views/finance/transaction/styles/modal.less

@@ -0,0 +1,51 @@
+/**
+ * 文件职责：交易流水导出弹窗样式。
+ */
+.ft-export-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ft-export-desc {
+  margin: 0;
+  font-size: 13px;
+  color: rgb(0 0 0 / 65%);
+}
+
+.ft-export-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.ft-export-line {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  font-size: 13px;
+
+  .ft-export-label {
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .ft-export-value {
+    color: rgb(0 0 0 / 88%);
+    text-align: right;
+  }
+
+  &.is-total {
+    padding-top: 8px;
+    margin-top: 4px;
+    font-weight: 600;
+    border-top: 1px solid #f0f0f0;
+
+    .ft-export-value {
+      color: #1677ff;
+    }
+  }
+}

apps/web-antd/src/views/finance/transaction/styles/responsive.less

@@ -0,0 +1,59 @@
+/**
+ * 文件职责：交易流水页面响应式样式。
+ */
+@media (max-width: 1600px) {
+  .ft-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .ft-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .ft-toolbar {
+    padding: 14px 12px;
+
+    .ft-store-select,
+    .ft-date-input,
+    .ft-type-select,
+    .ft-channel-select,
+    .ft-payment-select,
+    .ft-search {
+      width: 100%;
+    }
+
+    .ft-date-sep {
+      display: none;
+    }
+
+    .ft-quick-dates {
+      flex-wrap: wrap;
+      width: 100%;
+
+      .ant-btn {
+        flex: 1;
+        min-width: 68px;
+      }
+    }
+
+    .ft-toolbar-right {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    .ft-export-btn {
+      justify-content: center;
+      width: 100%;
+    }
+  }
+
+  .ft-info-grid {
+    grid-template-columns: 1fr;
+
+    .full {
+      grid-column: auto;
+    }
+  }
+}

apps/web-antd/src/views/finance/transaction/styles/table.less

@@ -0,0 +1,74 @@
+/**
+ * 文件职责：交易流水表格区域样式。
+ */
+.ft-table-card {
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+
+  .ant-table-wrapper {
+    .ant-table-thead > tr > th {
+      font-size: 13px;
+      white-space: nowrap;
+    }
+
+    .ant-table-tbody > tr > td {
+      font-size: 13px;
+      vertical-align: middle;
+    }
+  }
+
+  .ant-pagination {
+    margin: 14px 16px;
+  }
+}
+
+.ft-link-action {
+  padding-inline: 0;
+}
+
+.ft-amount {
+  font-weight: 600;
+  white-space: nowrap;
+
+  &.income {
+    color: #52c41a;
+  }
+
+  &.expense {
+    color: #ff4d4f;
+  }
+
+  &.neutral {
+    color: rgb(0 0 0 / 88%);
+  }
+}
+
+.ft-time {
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+  white-space: nowrap;
+}
+
+.ft-remark {
+  display: inline-block;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+  white-space: nowrap;
+}
+
+.ft-summary-row > td {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  background: #f8f9fb !important;
+  border-top: 2px solid #e5e7eb;
+}
+
+.ft-summary-text {
+  white-space: nowrap;
+}

apps/web-antd/src/views/finance/transaction/types.ts

@@ -0,0 +1,70 @@
+/**
+ * 文件职责：交易流水页面本地状态类型定义。
+ */
+import type {
+  FinanceTransactionChannelFilter,
+  FinanceTransactionPaymentFilter,
+  FinanceTransactionTypeFilter,
+} from '#/api/finance';
+
+/** 快捷日期范围键。 */
+export type QuickDateRangeKey =
+  | '7d'
+  | '30d'
+  | ''
+  | 'month'
+  | 'today'
+  | 'yesterday';
+
+/** 交易流水筛选状态。 */
+export interface FinanceTransactionFilterState {
+  channel: FinanceTransactionChannelFilter;
+  endDate: string;
+  keyword: string;
+  paymentMethod: FinanceTransactionPaymentFilter;
+  quickRange: QuickDateRangeKey;
+  startDate: string;
+  type: FinanceTransactionTypeFilter;
+}
+
+/** 交易流水分页状态。 */
+export interface FinanceTransactionPaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+/** 交易流水本页汇总状态。 */
+export interface FinanceTransactionPageSummaryState {
+  pageIncomeAmount: number;
+  pageRefundAmount: number;
+}
+
+/** 通用选项项。 */
+export interface OptionItem {
+  label: string;
+  value: string;
+}
+
+/** 快捷日期选项。 */
+export interface QuickRangeOption {
+  label: string;
+  value: QuickDateRangeKey;
+}
+
+/** 交易流水筛选请求负载。 */
+export interface FinanceTransactionQueryPayload {
+  channel?: FinanceTransactionChannelFilter;
+  endDate?: string;
+  keyword?: string;
+  paymentMethod?: FinanceTransactionPaymentFilter;
+  startDate?: string;
+  storeId: string;
+  type?: FinanceTransactionTypeFilter;
+}
+
+/** 交易流水列表请求负载。 */
+export interface FinanceTransactionListQueryPayload extends FinanceTransactionQueryPayload {
+  page: number;
+  pageSize: number;
+}

apps/web-antd/src/views/member/message-reach/components/MessageReachDetailDrawer.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import type { TableColumnType } from 'ant-design-vue';
+
+import type {
+  MemberMessageReachChannel,
+  MemberMessageReachDetailDto,
+  MemberMessageReachRecipientDto,
+} from '#/api/member/message-reach';
+
+import { Button, Drawer, Empty, Spin, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatDateTime,
+  formatInteger,
+  formatPercent,
+  MESSAGE_CHANNEL_COLOR_MAP,
+  MESSAGE_CHANNEL_TEXT_MAP,
+  MESSAGE_RECIPIENT_STATUS_COLOR_MAP,
+  MESSAGE_RECIPIENT_STATUS_TEXT_MAP,
+  MESSAGE_STATUS_COLOR_MAP,
+  MESSAGE_STATUS_TEXT_MAP,
+} from '../composables/message-reach-page/helpers';
+
+defineProps<{
+  detail: MemberMessageReachDetailDto | null;
+  loading: boolean;
+  open: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+
+const recipientColumns: TableColumnType<MemberMessageReachRecipientDto>[] = [
+  {
+    title: '会员ID',
+    dataIndex: 'memberId',
+    key: 'memberId',
+    width: 150,
+  },
+  {
+    title: '渠道',
+    dataIndex: 'channel',
+    key: 'channel',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 110,
+  },
+  {
+    title: '联系方式',
+    key: 'contact',
+    width: 180,
+  },
+  {
+    title: '发送时间',
+    dataIndex: 'sentAt',
+    key: 'sentAt',
+    width: 170,
+  },
+  {
+    title: '已读时间',
+    dataIndex: 'readAt',
+    key: 'readAt',
+    width: 170,
+  },
+  {
+    title: '转化时间',
+    dataIndex: 'convertedAt',
+    key: 'convertedAt',
+    width: 170,
+  },
+  {
+    title: '错误信息',
+    dataIndex: 'errorMessage',
+    key: 'errorMessage',
+    ellipsis: true,
+  },
+];
+
+function resolveContact(record: Record<string, any>) {
+  const channel = String(record.channel || '');
+  if (channel === 'sms') {
+    return String(record.mobile || '--');
+  }
+  if (channel === 'wechat-mini') {
+    return String(record.openId || '--');
+  }
+  return String(record.memberId || '--');
+}
+
+function resolveChannelColor(channel: unknown) {
+  return (
+    MESSAGE_CHANNEL_COLOR_MAP[channel as MemberMessageReachChannel] || 'default'
+  );
+}
+
+function resolveChannelText(channel: unknown) {
+  return (
+    MESSAGE_CHANNEL_TEXT_MAP[channel as MemberMessageReachChannel] || '未知渠道'
+  );
+}
+
+function resolveRecipientStatusColor(status: unknown) {
+  return MESSAGE_RECIPIENT_STATUS_COLOR_MAP[
+    status as 'failed' | 'pending' | 'sent'
+  ];
+}
+
+function resolveRecipientStatusText(status: unknown) {
+  return MESSAGE_RECIPIENT_STATUS_TEXT_MAP[
+    status as 'failed' | 'pending' | 'sent'
+  ];
+}
+</script>
+
+<template>
+  <Drawer :open="open" width="820" title="消息详情" @close="emit('close')">
+    <Spin :spinning="loading">
+      <template v-if="detail">
+        <section class="mmr-detail-section">
+          <div class="mmr-detail-title-row">
+            <div class="mmr-detail-title">{{ detail.title }}</div>
+            <Tag :color="MESSAGE_STATUS_COLOR_MAP[detail.status]">
+              {{ MESSAGE_STATUS_TEXT_MAP[detail.status] }}
+            </Tag>
+          </div>
+
+          <div class="mmr-detail-meta">
+            <div>
+              <span class="label">推送渠道：</span>
+              <span class="channels">
+                <Tag
+                  v-for="item in detail.channels"
+                  :key="`detail-channel-${item}`"
+                  :color="resolveChannelColor(item)"
+                >
+                  {{ resolveChannelText(item) }}
+                </Tag>
+              </span>
+            </div>
+            <div>
+              <span class="label">目标人群：</span>
+              <span>{{ detail.audienceText }}</span>
+            </div>
+            <div>
+              <span class="label">定时发送：</span>
+              <span>{{ formatDateTime(detail.scheduledAt) }}</span>
+            </div>
+            <div>
+              <span class="label">实际发送：</span>
+              <span>{{ formatDateTime(detail.sentAt) }}</span>
+            </div>
+          </div>
+        </section>
+
+        <section class="mmr-detail-section">
+          <div class="mmr-detail-stat-grid">
+            <div class="mmr-detail-stat-item">
+              <div class="label">预计触达</div>
+              <div class="value">
+                {{ formatInteger(detail.estimatedReachCount) }}
+              </div>
+            </div>
+            <div class="mmr-detail-stat-item">
+              <div class="label">发送成功</div>
+              <div class="value">{{ formatInteger(detail.sentCount) }}</div>
+            </div>
+            <div class="mmr-detail-stat-item">
+              <div class="label">已读人数</div>
+              <div class="value">{{ formatInteger(detail.readCount) }}</div>
+            </div>
+            <div class="mmr-detail-stat-item">
+              <div class="label">转化人数</div>
+              <div class="value">
+                {{ formatInteger(detail.convertedCount) }}
+              </div>
+            </div>
+            <div class="mmr-detail-stat-item">
+              <div class="label">打开率</div>
+              <div class="value">{{ formatPercent(detail.openRate) }}</div>
+            </div>
+            <div class="mmr-detail-stat-item">
+              <div class="label">转化率</div>
+              <div class="value">
+                {{ formatPercent(detail.conversionRate) }}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="mmr-detail-section">
+          <div class="mmr-detail-section-title">消息内容</div>
+          <div class="mmr-detail-content">{{ detail.content }}</div>
+          <div v-if="detail.lastError" class="mmr-detail-error">
+            最后错误：{{ detail.lastError }}
+          </div>
+        </section>
+
+        <section class="mmr-detail-section">
+          <div class="mmr-detail-section-title">收件明细</div>
+          <div class="mmr-recipient-table">
+            <Table
+              :row-key="
+                (record: MemberMessageReachRecipientDto) =>
+                  `${record.memberId}-${record.channel}-${record.sentAt || ''}`
+              "
+              :columns="recipientColumns"
+              :data-source="detail.recipients"
+              :pagination="{ pageSize: 8, showSizeChanger: false }"
+              size="small"
+              :scroll="{ x: 1040 }"
+            >
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'channel'">
+                  <Tag :color="resolveChannelColor(record.channel)">
+                    {{ resolveChannelText(record.channel) }}
+                  </Tag>
+                </template>
+
+                <template v-else-if="column.key === 'status'">
+                  <Tag :color="resolveRecipientStatusColor(record.status)">
+                    {{ resolveRecipientStatusText(record.status) }}
+                  </Tag>
+                </template>
+
+                <template v-else-if="column.key === 'contact'">
+                  <span>{{ resolveContact(record) }}</span>
+                </template>
+
+                <template v-else-if="column.key === 'sentAt'">
+                  <span class="mmr-time-text">{{
+                    formatDateTime(record.sentAt)
+                  }}</span>
+                </template>
+
+                <template v-else-if="column.key === 'readAt'">
+                  <span class="mmr-time-text">{{
+                    formatDateTime(record.readAt)
+                  }}</span>
+                </template>
+
+                <template v-else-if="column.key === 'convertedAt'">
+                  <span class="mmr-time-text">{{
+                    formatDateTime(record.convertedAt)
+                  }}</span>
+                </template>
+
+                <template v-else-if="column.key === 'errorMessage'">
+                  <span
+                    :title="record.errorMessage || '--'"
+                    class="mmr-error-text"
+                  >
+                    {{ record.errorMessage || '--' }}
+                  </span>
+                </template>
+              </template>
+            </Table>
+          </div>
+        </section>
+      </template>
+
+      <Empty v-else description="暂无消息详情" />
+    </Spin>
+
+    <template #footer>
+      <Button @click="emit('close')">关闭</Button>
+    </template>
+  </Drawer>
+</template>

apps/web-antd/src/views/member/message-reach/components/MessageReachEditorDrawer.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import type { Dayjs } from 'dayjs';
+
+import type {
+  MemberMessageAudienceType,
+  MemberMessageReachChannel,
+  MemberMessageScheduleType,
+} from '#/api/member/message-reach';
+import type { MessageReachEditorForm } from '#/views/member/message-reach/types';
+
+import {
+  Button,
+  DatePicker,
+  Drawer,
+  Form,
+  Input,
+  Select,
+  Spin,
+  Tag,
+} from 'ant-design-vue';
+
+import {
+  MESSAGE_AUDIENCE_TAG_OPTIONS,
+  MESSAGE_AUDIENCE_TYPE_OPTIONS,
+  MESSAGE_REACH_CHANNEL_OPTIONS,
+  MESSAGE_SCHEDULE_TYPE_OPTIONS,
+} from '../composables/message-reach-page/constants';
+import { formatInteger } from '../composables/message-reach-page/helpers';
+
+defineProps<{
+  audienceEstimateCount: number;
+  canManage: boolean;
+  estimatingAudience: boolean;
+  form: MessageReachEditorForm;
+  open: boolean;
+  submitting: boolean;
+  title: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'setAudienceType', value: MemberMessageAudienceType): void;
+  (event: 'setChannel', value: MemberMessageReachChannel): void;
+  (event: 'setContent', value: string): void;
+  (event: 'setScheduleType', value: MemberMessageScheduleType): void;
+  (event: 'setScheduledAt', value: Dayjs | null): void;
+  (event: 'setTitle', value: string): void;
+  (event: 'submitDraft'): void;
+  (event: 'submitSend'): void;
+  (event: 'switchToTemplateTab'): void;
+  (event: 'toggleAudienceTag', value: string): void;
+}>();
+
+const CheckableTag = Tag.CheckableTag;
+const audienceTypeOptions = MESSAGE_AUDIENCE_TYPE_OPTIONS.map((item) => ({
+  ...item,
+}));
+
+function handleChannelChange(
+  value: MemberMessageReachChannel,
+  checked: boolean,
+) {
+  if (!checked) {
+    return;
+  }
+  emit('setChannel', value);
+}
+
+function handleScheduleTypeChange(
+  value: MemberMessageScheduleType,
+  checked: boolean,
+) {
+  if (!checked) {
+    return;
+  }
+  emit('setScheduleType', value);
+}
+</script>
+
+<template>
+  <Drawer :open="open" :title="title" width="560" @close="emit('close')">
+    <Form layout="vertical" class="mmr-editor-form">
+      <Form.Item label="消息标题" required>
+        <Input
+          :value="form.title"
+          placeholder="如：新品上线通知"
+          @update:value="(value) => emit('setTitle', String(value ?? ''))"
+        />
+      </Form.Item>
+
+      <Form.Item label="推送渠道" required>
+        <div class="mmr-pill-group">
+          <CheckableTag
+            v-for="item in MESSAGE_REACH_CHANNEL_OPTIONS"
+            :key="item.value"
+            :checked="form.channels.includes(item.value)"
+            class="mmr-pill"
+            @change="(checked) => handleChannelChange(item.value, checked)"
+          >
+            {{ item.label }}
+          </CheckableTag>
+        </div>
+      </Form.Item>
+
+      <Form.Item label="目标人群" required>
+        <Select
+          :value="form.audienceType"
+          :options="audienceTypeOptions"
+          @update:value="
+            (value) =>
+              emit(
+                'setAudienceType',
+                String(value || 'all') as MemberMessageAudienceType,
+              )
+          "
+        />
+
+        <div v-if="form.audienceType === 'tag'" class="mmr-tag-panel">
+          <div class="mmr-pill-group">
+            <CheckableTag
+              v-for="item in MESSAGE_AUDIENCE_TAG_OPTIONS"
+              :key="item.value"
+              :checked="form.audienceTags.includes(item.value)"
+              class="mmr-pill"
+              @change="() => emit('toggleAudienceTag', item.value)"
+            >
+              {{ item.label }}
+            </CheckableTag>
+          </div>
+          <div class="mmr-reach-row">
+            <Spin :spinning="estimatingAudience" size="small">
+              预计触达 {{ formatInteger(audienceEstimateCount) }}人
+            </Spin>
+          </div>
+        </div>
+      </Form.Item>
+
+      <Form.Item label="消息内容" required>
+        <Input.TextArea
+          :value="form.content"
+          :rows="5"
+          placeholder="支持变量：{name}姓名 {level}等级"
+          @update:value="(value) => emit('setContent', String(value ?? ''))"
+        />
+        <div class="mmr-form-hint">可使用变量实现个性化推送</div>
+      </Form.Item>
+
+      <Form.Item label="发送时间" required>
+        <div class="mmr-pill-group">
+          <CheckableTag
+            v-for="item in MESSAGE_SCHEDULE_TYPE_OPTIONS"
+            :key="item.value"
+            :checked="form.scheduleType === item.value"
+            class="mmr-pill"
+            @change="
+              (checked) =>
+                handleScheduleTypeChange(
+                  item.value as MemberMessageScheduleType,
+                  checked,
+                )
+            "
+          >
+            {{ item.label }}
+          </CheckableTag>
+        </div>
+
+        <DatePicker
+          v-if="form.scheduleType === 'scheduled'"
+          class="mmr-scheduled-picker"
+          show-time
+          :value="form.scheduledAt ?? undefined"
+          format="YYYY-MM-DD HH:mm"
+          @update:value="
+            (value) => emit('setScheduledAt', (value as Dayjs) || null)
+          "
+        />
+      </Form.Item>
+
+      <Form.Item class="mmr-template-link-wrap">
+        <Button
+          type="link"
+          class="mmr-template-link"
+          @click="emit('switchToTemplateTab')"
+        >
+          从模板选择
+        </Button>
+      </Form.Item>
+    </Form>
+
+    <template #footer>
+      <div class="mmr-drawer-footer">
+        <Button
+          :disabled="!canManage || submitting"
+          @click="emit('submitDraft')"
+        >
+          存为草稿
+        </Button>
+        <Button
+          type="primary"
+          :disabled="!canManage || submitting"
+          :loading="submitting"
+          @click="emit('submitSend')"
+        >
+          发送
+        </Button>
+      </div>
+    </template>
+  </Drawer>
+</template>

apps/web-antd/src/views/member/message-reach/components/MessageReachFilterBar.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type {
+  MemberMessageReachChannel,
+  MemberMessageReachStatus,
+} from '#/api/member/message-reach';
+import type { MessageReachFilterForm } from '#/views/member/message-reach/types';
+
+import { Button, Input, Select } from 'ant-design-vue';
+
+import {
+  MESSAGE_REACH_CHANNEL_FILTER_OPTIONS,
+  MESSAGE_REACH_STATUS_FILTER_OPTIONS,
+} from '../composables/message-reach-page/constants';
+
+defineProps<{
+  canManage: boolean;
+  filters: MessageReachFilterForm;
+}>();
+
+const emit = defineEmits<{
+  (event: 'create'): void;
+  (event: 'search'): void;
+  (event: 'update:channel', value: '' | MemberMessageReachChannel): void;
+  (event: 'update:keyword', value: string): void;
+  (event: 'update:status', value: '' | MemberMessageReachStatus): void;
+}>();
+
+function handleStatusChange(value: unknown) {
+  emit('update:status', String(value || '') as '' | MemberMessageReachStatus);
+  emit('search');
+}
+
+function handleChannelChange(value: unknown) {
+  emit('update:channel', String(value || '') as '' | MemberMessageReachChannel);
+  emit('search');
+}
+</script>
+
+<template>
+  <div class="mmr-toolbar">
+    <Select
+      class="mmr-select"
+      :value="filters.status || ''"
+      :options="MESSAGE_REACH_STATUS_FILTER_OPTIONS"
+      @update:value="(value) => handleStatusChange(value)"
+    />
+
+    <Select
+      class="mmr-select"
+      :value="filters.channel || ''"
+      :options="MESSAGE_REACH_CHANNEL_FILTER_OPTIONS"
+      @update:value="(value) => handleChannelChange(value)"
+    />
+
+    <Input
+      class="mmr-keyword-input"
+      :value="filters.keyword"
+      placeholder="搜索消息标题"
+      allow-clear
+      @update:value="(value) => emit('update:keyword', String(value ?? ''))"
+      @press-enter="emit('search')"
+    />
+
+    <span class="mmr-spacer"></span>
+
+    <Button type="primary" :disabled="!canManage" @click="emit('create')">
+      创建消息
+    </Button>
+  </div>
+</template>

apps/web-antd/src/views/member/message-reach/components/MessageReachStatsCards.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { MessageReachStatsViewModel } from '../types';
+
+import { Spin } from 'ant-design-vue';
+
+import {
+  formatInteger,
+  formatPercent,
+} from '../composables/message-reach-page/helpers';
+
+defineProps<{
+  loading: boolean;
+  stats: MessageReachStatsViewModel;
+}>();
+</script>
+
+<template>
+  <Spin :spinning="loading">
+    <div class="mmr-stats">
+      <div class="mmr-stat-card">
+        <div class="mmr-stat-label">本月发送</div>
+        <div class="mmr-stat-value">
+          {{ formatInteger(stats.monthlySentCount) }}
+          <span class="mmr-stat-unit">条</span>
+        </div>
+      </div>
+
+      <div class="mmr-stat-card">
+        <div class="mmr-stat-label">触达人数</div>
+        <div class="mmr-stat-value">
+          {{ formatInteger(stats.reachMemberCount) }}
+          <span class="mmr-stat-unit">人</span>
+        </div>
+      </div>
+
+      <div class="mmr-stat-card">
+        <div class="mmr-stat-label">打开率</div>
+        <div class="mmr-stat-value">
+          {{ formatPercent(stats.openRate) }}
+        </div>
+      </div>
+
+      <div class="mmr-stat-card">
+        <div class="mmr-stat-label">转化率</div>
+        <div class="mmr-stat-value">
+          {{ formatPercent(stats.conversionRate) }}
+        </div>
+      </div>
+    </div>
+  </Spin>
+</template>

apps/web-antd/src/views/member/message-reach/components/MessageReachTableCard.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type { TableColumnType } from 'ant-design-vue';
+
+import type {
+  MemberMessageReachChannel,
+  MemberMessageReachListItemDto,
+  MemberMessageReachStatus,
+} from '#/api/member/message-reach';
+import type { MessageReachPager } from '#/views/member/message-reach/types';
+
+import { Button, Pagination, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatInteger,
+  formatPercent,
+  MESSAGE_CHANNEL_COLOR_MAP,
+  MESSAGE_CHANNEL_TEXT_MAP,
+  MESSAGE_STATUS_COLOR_MAP,
+  MESSAGE_STATUS_TEXT_MAP,
+  resolveMessageTime,
+} from '../composables/message-reach-page/helpers';
+
+defineProps<{
+  canManage: boolean;
+  loading: boolean;
+  pager: MessageReachPager;
+}>();
+
+const emit = defineEmits<{
+  (event: 'delete', messageId: string): void;
+  (event: 'detail', messageId: string): void;
+  (event: 'edit', messageId: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+}>();
+
+const columns: TableColumnType<MemberMessageReachListItemDto>[] = [
+  {
+    title: '消息标题',
+    dataIndex: 'title',
+    key: 'title',
+    width: 280,
+  },
+  {
+    title: '推送渠道',
+    dataIndex: 'channels',
+    key: 'channels',
+    width: 180,
+  },
+  {
+    title: '目标人群',
+    dataIndex: 'audienceText',
+    key: 'audienceText',
+    width: 170,
+  },
+  {
+    title: '触达人数',
+    dataIndex: 'estimatedReachCount',
+    key: 'estimatedReachCount',
+    width: 120,
+  },
+  {
+    title: '发送时间',
+    key: 'sendTime',
+    width: 180,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 120,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    width: 180,
+  },
+];
+
+function showMetricRow(record: Record<string, any>) {
+  return (
+    Number(record.openRate || 0) > 0 || Number(record.conversionRate || 0) > 0
+  );
+}
+
+function resolveChannelColor(channel: unknown) {
+  return (
+    MESSAGE_CHANNEL_COLOR_MAP[channel as MemberMessageReachChannel] || 'default'
+  );
+}
+
+function resolveChannelText(channel: unknown) {
+  return (
+    MESSAGE_CHANNEL_TEXT_MAP[channel as MemberMessageReachChannel] || '未知渠道'
+  );
+}
+
+function resolveStatusColor(status: unknown) {
+  return MESSAGE_STATUS_COLOR_MAP[status as MemberMessageReachStatus];
+}
+
+function resolveStatusText(status: unknown) {
+  return MESSAGE_STATUS_TEXT_MAP[status as MemberMessageReachStatus];
+}
+
+function canEdit(status: unknown) {
+  const currentStatus = status as MemberMessageReachStatus;
+  return currentStatus === 'draft' || currentStatus === 'failed';
+}
+
+function canDelete(status: unknown) {
+  const currentStatus = status as MemberMessageReachStatus;
+  return (
+    currentStatus === 'draft' ||
+    currentStatus === 'failed' ||
+    currentStatus === 'pending'
+  );
+}
+</script>
+
+<template>
+  <div class="mmr-table-wrap">
+    <Table
+      :columns="columns"
+      :data-source="pager.items"
+      :loading="loading"
+      :pagination="false"
+      row-key="messageId"
+      :scroll="{ x: 1080 }"
+      class="mmr-table"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'title'">
+          <div class="mmr-message-title">{{ record.title }}</div>
+          <div v-if="showMetricRow(record)" class="mmr-message-metric">
+            打开率 {{ formatPercent(record.openRate) }} | 转化率
+            {{ formatPercent(record.conversionRate) }}
+          </div>
+        </template>
+
+        <template v-else-if="column.key === 'channels'">
+          <div class="mmr-channel-list">
+            <Tag
+              v-for="item in record.channels"
+              :key="`${record.messageId}-${item}`"
+              :color="resolveChannelColor(item)"
+            >
+              {{ resolveChannelText(item) }}
+            </Tag>
+          </div>
+        </template>
+
+        <template v-else-if="column.key === 'estimatedReachCount'">
+          <span>
+            {{
+              record.estimatedReachCount > 0
+                ? formatInteger(record.estimatedReachCount)
+                : '—'
+            }}
+          </span>
+        </template>
+
+        <template v-else-if="column.key === 'sendTime'">
+          <span class="mmr-time-text">
+            {{ resolveMessageTime(record.sentAt, record.scheduledAt) }}
+          </span>
+        </template>
+
+        <template v-else-if="column.key === 'status'">
+          <Tag :color="resolveStatusColor(record.status)">
+            {{ resolveStatusText(record.status) }}
+          </Tag>
+        </template>
+
+        <template v-else-if="column.key === 'action'">
+          <div class="mmr-table-actions">
+            <Button
+              type="link"
+              size="small"
+              class="mmr-action-link"
+              @click="emit('detail', record.messageId)"
+            >
+              详情
+            </Button>
+            <Button
+              v-if="canManage && canEdit(record.status)"
+              type="link"
+              size="small"
+              class="mmr-action-link"
+              @click="emit('edit', record.messageId)"
+            >
+              编辑
+            </Button>
+            <Button
+              v-if="canManage && canDelete(record.status)"
+              type="link"
+              size="small"
+              danger
+              class="mmr-action-link"
+              @click="emit('delete', record.messageId)"
+            >
+              删除
+            </Button>
+          </div>
+        </template>
+      </template>
+    </Table>
+
+    <div class="mmr-pagination">
+      <Pagination
+        :current="pager.page"
+        :page-size="pager.pageSize"
+        :total="pager.totalCount"
+        show-size-changer
+        :show-total="(value) => `共 ${value} 条`"
+        :page-size-options="['10', '20', '50']"
+        @change="(page, pageSize) => emit('pageChange', page, pageSize)"
+      />
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/message-reach/components/MessageTemplateCardGrid.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { MemberMessageTemplateDto } from '#/api/member/message-reach';
+import type { MessageTemplatePager } from '#/views/member/message-reach/types';
+
+import { Button, Empty, Pagination, Spin, Tag } from 'ant-design-vue';
+
+import {
+  formatInteger,
+  MESSAGE_TEMPLATE_CATEGORY_COLOR_MAP,
+  MESSAGE_TEMPLATE_CATEGORY_TEXT_MAP,
+} from '../composables/message-reach-page/helpers';
+
+defineProps<{
+  canManage: boolean;
+  loading: boolean;
+  pager: MessageTemplatePager;
+}>();
+
+const emit = defineEmits<{
+  (event: 'delete', templateId: string): void;
+  (event: 'edit', templateId: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+  (event: 'use', template: MemberMessageTemplateDto): void;
+}>();
+</script>
+
+<template>
+  <div class="mmr-template-wrap">
+    <Spin :spinning="loading">
+      <div v-if="pager.items.length > 0" class="mmr-template-grid">
+        <article
+          v-for="item in pager.items"
+          :key="item.templateId"
+          class="mmr-template-card"
+        >
+          <div class="mmr-template-head">
+            <div class="mmr-template-name">{{ item.name }}</div>
+            <Tag :color="MESSAGE_TEMPLATE_CATEGORY_COLOR_MAP[item.category]">
+              {{ MESSAGE_TEMPLATE_CATEGORY_TEXT_MAP[item.category] }}
+            </Tag>
+          </div>
+
+          <div class="mmr-template-preview">
+            {{ item.content }}
+          </div>
+
+          <div class="mmr-template-foot">
+            <span class="mmr-template-usage">
+              已使用 {{ formatInteger(item.usageCount) }}次
+            </span>
+            <div class="mmr-template-actions">
+              <Button
+                size="small"
+                type="primary"
+                :disabled="!canManage"
+                @click="emit('use', item)"
+              >
+                使用
+              </Button>
+              <Button
+                type="link"
+                size="small"
+                class="mmr-action-link"
+                :disabled="!canManage"
+                @click="emit('edit', item.templateId)"
+              >
+                编辑
+              </Button>
+              <Button
+                type="link"
+                size="small"
+                danger
+                class="mmr-action-link"
+                :disabled="!canManage"
+                @click="emit('delete', item.templateId)"
+              >
+                删除
+              </Button>
+            </div>
+          </div>
+        </article>
+      </div>
+
+      <div v-else class="mmr-template-empty">
+        <Empty description="暂无消息模板" />
+      </div>
+    </Spin>
+
+    <div class="mmr-pagination">
+      <Pagination
+        :current="pager.page"
+        :page-size="pager.pageSize"
+        :total="pager.totalCount"
+        show-size-changer
+        :show-total="(value) => `共 ${value} 条`"
+        :page-size-options="['12', '24', '48']"
+        @change="(page, pageSize) => emit('pageChange', page, pageSize)"
+      />
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/message-reach/components/MessageTemplateEditorModal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { MessageTemplateEditorForm } from '../types';
+
+import { Form, Input, Modal, Select } from 'ant-design-vue';
+
+import { MESSAGE_TEMPLATE_CATEGORY_OPTIONS } from '../composables/message-reach-page/constants';
+
+defineProps<{
+  canManage: boolean;
+  form: MessageTemplateEditorForm;
+  loading: boolean;
+  open: boolean;
+  submitText: string;
+  submitting: boolean;
+  title: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'setCategory', value: 'marketing' | 'notice' | 'recall'): void;
+  (event: 'setContent', value: string): void;
+  (event: 'setName', value: string): void;
+  (event: 'submit'): void;
+}>();
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    :title="title"
+    :confirm-loading="submitting"
+    :ok-text="submitText"
+    cancel-text="取消"
+    :ok-button-props="{ disabled: !canManage || loading }"
+    width="560"
+    @ok="emit('submit')"
+    @cancel="emit('close')"
+  >
+    <Form layout="vertical" class="mmr-template-modal-form">
+      <Form.Item label="模板名称" required>
+        <Input
+          :value="form.name"
+          :disabled="loading"
+          placeholder="如：新品上线通知"
+          @update:value="(value) => emit('setName', String(value ?? ''))"
+        />
+      </Form.Item>
+
+      <Form.Item label="模板分类" required>
+        <Select
+          :value="form.category"
+          :disabled="loading"
+          :options="MESSAGE_TEMPLATE_CATEGORY_OPTIONS"
+          @update:value="
+            (value) =>
+              emit(
+                'setCategory',
+                String(value || 'notice') as 'marketing' | 'notice' | 'recall',
+              )
+          "
+        />
+      </Form.Item>
+
+      <Form.Item label="模板内容" required>
+        <Input.TextArea
+          :value="form.content"
+          :disabled="loading"
+          :rows="5"
+          placeholder="支持变量：{name}姓名 {level}等级"
+          @update:value="(value) => emit('setContent', String(value ?? ''))"
+        />
+        <div class="mmr-form-hint">支持模板变量，用于个性化内容替换</div>
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>

apps/web-antd/src/views/member/message-reach/components/MessageTemplateToolbar.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { MemberMessageTemplateCategory } from '#/api/member/message-reach';
+import type { MessageTemplateFilterForm } from '#/views/member/message-reach/types';
+
+import { Button, Input, Select } from 'ant-design-vue';
+
+import { MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS } from '../composables/message-reach-page/constants';
+
+defineProps<{
+  canManage: boolean;
+  filters: MessageTemplateFilterForm;
+}>();
+
+const emit = defineEmits<{
+  (event: 'create'): void;
+  (event: 'search'): void;
+  (event: 'update:category', value: '' | MemberMessageTemplateCategory): void;
+  (event: 'update:keyword', value: string): void;
+}>();
+
+function handleCategoryChange(value: unknown) {
+  emit(
+    'update:category',
+    String(value || '') as '' | MemberMessageTemplateCategory,
+  );
+  emit('search');
+}
+</script>
+
+<template>
+  <div class="mmr-toolbar">
+    <Select
+      class="mmr-select"
+      :value="filters.category || ''"
+      :options="MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS"
+      @update:value="(value) => handleCategoryChange(value)"
+    />
+
+    <Input
+      class="mmr-keyword-input"
+      :value="filters.keyword"
+      placeholder="搜索模板名称"
+      allow-clear
+      @update:value="(value) => emit('update:keyword', String(value ?? ''))"
+      @press-enter="emit('search')"
+    />
+
+    <span class="mmr-spacer"></span>
+
+    <Button type="primary" :disabled="!canManage" @click="emit('create')">
+      新建模板
+    </Button>
+  </div>
+</template>

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

@@ -0,0 +1,106 @@
+import type {
+  MemberMessageReachChannel,
+  MemberMessageReachStatus,
+  MemberMessageTemplateCategory,
+} from '#/api/member/message-reach';
+import type { MemberMessageReachTabKey } from '#/views/member/message-reach/types';
+
+/** 消息触达查看权限。 */
+export const MEMBER_MESSAGE_REACH_VIEW_PERMISSION =
+  'tenant:member:message-reach:view';
+
+/** 消息触达管理权限。 */
+export const MEMBER_MESSAGE_REACH_MANAGE_PERMISSION =
+  'tenant:member:message-reach:manage';
+
+/** 页面 Tab 选项。 */
+export const MESSAGE_REACH_TAB_OPTIONS: Array<{
+  label: string;
+  value: MemberMessageReachTabKey;
+}> = [
+  { label: '消息列表', value: 'list' },
+  { label: '消息模板', value: 'template' },
+];
+
+/** 状态筛选选项。 */
+export const MESSAGE_REACH_STATUS_FILTER_OPTIONS: Array<{
+  label: string;
+  value: '' | MemberMessageReachStatus;
+}> = [
+  { label: '全部状态', value: '' },
+  { label: '草稿', value: 'draft' },
+  { label: '待发送', value: 'pending' },
+  { label: '发送中', value: 'sending' },
+  { label: '已发送', value: 'sent' },
+  { label: '发送失败', value: 'failed' },
+];
+
+/** 渠道筛选选项。 */
+export const MESSAGE_REACH_CHANNEL_FILTER_OPTIONS: Array<{
+  label: string;
+  value: '' | MemberMessageReachChannel;
+}> = [
+  { label: '全部渠道', value: '' },
+  { label: '站内信', value: 'inapp' },
+  { label: '短信', value: 'sms' },
+  { label: '微信模板', value: 'wechat-mini' },
+];
+
+/** 模板分类筛选选项。 */
+export const MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS: Array<{
+  label: string;
+  value: '' | MemberMessageTemplateCategory;
+}> = [
+  { label: '全部分类', value: '' },
+  { label: '通知', value: 'notice' },
+  { label: '营销', value: 'marketing' },
+  { label: '召回', value: 'recall' },
+];
+
+/** 模板分类编辑选项。 */
+export const MESSAGE_TEMPLATE_CATEGORY_OPTIONS: Array<{
+  label: string;
+  value: MemberMessageTemplateCategory;
+}> = [
+  { label: '通知', value: 'notice' },
+  { label: '营销', value: 'marketing' },
+  { label: '召回', value: 'recall' },
+];
+
+/** 抽屉渠道选项。 */
+export const MESSAGE_REACH_CHANNEL_OPTIONS: Array<{
+  label: string;
+  value: MemberMessageReachChannel;
+}> = [
+  { label: '站内信', value: 'inapp' },
+  { label: '短信', value: 'sms' },
+  { label: '微信模板消息', value: 'wechat-mini' },
+];
+
+/** 固定标签选项。 */
+export const MESSAGE_AUDIENCE_TAG_OPTIONS = [
+  { label: '高频客户', value: '高频客户' },
+  { label: '新客', value: '新客' },
+  { label: '沉睡客户', value: '沉睡客户' },
+  { label: '流失客户', value: '流失客户' },
+  { label: '午餐常客', value: '午餐常客' },
+  { label: '大额消费', value: '大额消费' },
+] as const;
+
+/** 目标人群选项。 */
+export const MESSAGE_AUDIENCE_TYPE_OPTIONS = [
+  { label: '全部会员', value: 'all' },
+  { label: '按标签筛选', value: 'tag' },
+] as const;
+
+/** 发送时间选项。 */
+export const MESSAGE_SCHEDULE_TYPE_OPTIONS = [
+  { label: '立即发送', value: 'immediate' },
+  { label: '定时发送', value: 'scheduled' },
+] as const;
+
+/** 表格分页尺寸选项。 */
+export const MESSAGE_LIST_PAGE_SIZE_OPTIONS = ['10', '20', '50'];
+
+/** 模板分页尺寸选项。 */
+export const MESSAGE_TEMPLATE_PAGE_SIZE_OPTIONS = ['12', '24', '48'];

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

@@ -0,0 +1,160 @@
+import type { Ref } from 'vue';
+
+import type {
+  MemberMessageReachDetailDto,
+  MemberMessageReachStatsDto,
+} from '#/api/member/message-reach';
+import type {
+  MessageReachFilterForm,
+  MessageReachPager,
+  MessageTemplateFilterForm,
+  MessageTemplatePager,
+} from '#/views/member/message-reach/types';
+
+import { message } from 'ant-design-vue';
+
+import {
+  estimateMemberMessageAudienceApi,
+  getMemberMessageReachDetailApi,
+  getMemberMessageReachListApi,
+  getMemberMessageReachStatsApi,
+  getMemberMessageTemplateListApi,
+} from '#/api/member/message-reach';
+
+import { mapMessageFilterToQuery, mapTemplateFilterToQuery } from './helpers';
+
+interface CreateDataActionsOptions {
+  audienceEstimateCount: Ref<number>;
+  detail: Ref<MemberMessageReachDetailDto | null>;
+  isDetailLoading: Ref<boolean>;
+  isEstimatingAudience: Ref<boolean>;
+  isMessageLoading: Ref<boolean>;
+  isStatsLoading: Ref<boolean>;
+  isTemplateLoading: Ref<boolean>;
+  messageFilterForm: MessageReachFilterForm;
+  messagePager: Ref<MessageReachPager>;
+  stats: Ref<MemberMessageReachStatsDto>;
+  templateFilterForm: MessageTemplateFilterForm;
+  templatePager: Ref<MessageTemplatePager>;
+}
+
+export function createDataActions(options: CreateDataActionsOptions) {
+  function resetMessagePager() {
+    options.messagePager.value = {
+      ...options.messagePager.value,
+      items: [],
+      totalCount: 0,
+    };
+  }
+
+  function resetTemplatePager() {
+    options.templatePager.value = {
+      ...options.templatePager.value,
+      items: [],
+      totalCount: 0,
+    };
+  }
+
+  async function loadStats() {
+    options.isStatsLoading.value = true;
+    try {
+      options.stats.value = await getMemberMessageReachStatsApi();
+    } catch (error) {
+      console.error(error);
+      message.error('加载消息统计失败');
+    } finally {
+      options.isStatsLoading.value = false;
+    }
+  }
+
+  async function loadMessageList() {
+    options.isMessageLoading.value = true;
+    try {
+      const query = mapMessageFilterToQuery(options.messageFilterForm);
+      const result = await getMemberMessageReachListApi({
+        page: options.messagePager.value.page,
+        pageSize: options.messagePager.value.pageSize,
+        ...query,
+      });
+      options.messagePager.value = {
+        items: result.items ?? [],
+        page: result.page,
+        pageSize: result.pageSize,
+        totalCount: result.totalCount,
+      };
+    } catch (error) {
+      console.error(error);
+      resetMessagePager();
+      message.error('加载消息列表失败');
+    } finally {
+      options.isMessageLoading.value = false;
+    }
+  }
+
+  async function loadTemplateList() {
+    options.isTemplateLoading.value = true;
+    try {
+      const query = mapTemplateFilterToQuery(options.templateFilterForm);
+      const result = await getMemberMessageTemplateListApi({
+        page: options.templatePager.value.page,
+        pageSize: options.templatePager.value.pageSize,
+        ...query,
+      });
+      options.templatePager.value = {
+        items: result.items ?? [],
+        page: result.page,
+        pageSize: result.pageSize,
+        totalCount: result.totalCount,
+      };
+    } catch (error) {
+      console.error(error);
+      resetTemplatePager();
+      message.error('加载模板列表失败');
+    } finally {
+      options.isTemplateLoading.value = false;
+    }
+  }
+
+  async function loadMessageDetail(messageId: string) {
+    options.isDetailLoading.value = true;
+    try {
+      const result = await getMemberMessageReachDetailApi({ messageId });
+      options.detail.value = result;
+      return result;
+    } catch (error) {
+      console.error(error);
+      options.detail.value = null;
+      message.error('加载消息详情失败');
+      return null;
+    } finally {
+      options.isDetailLoading.value = false;
+    }
+  }
+
+  async function estimateAudience(audienceType: 'all' | 'tag', tags: string[]) {
+    options.isEstimatingAudience.value = true;
+    try {
+      const result = await estimateMemberMessageAudienceApi({
+        audienceType,
+        tags,
+      });
+      options.audienceEstimateCount.value = result.reachCount ?? 0;
+      return options.audienceEstimateCount.value;
+    } catch (error) {
+      console.error(error);
+      options.audienceEstimateCount.value = 0;
+      message.error('估算触达人数失败');
+      return 0;
+    } finally {
+      options.isEstimatingAudience.value = false;
+    }
+  }
+
+  return {
+    estimateAudience,
+    loadMessageDetail,
+    loadMessageList,
+    loadStats,
+    loadTemplateList,
+  };
+}

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

@@ -0,0 +1,264 @@
+import type {
+  MemberMessageReachChannel,
+  MemberMessageReachDetailDto,
+  MemberMessageReachStatus,
+  MemberMessageScheduleType,
+  MemberMessageTemplateCategory,
+  SaveMemberMessageReachPayload,
+  SaveMemberMessageTemplatePayload,
+} from '#/api/member/message-reach';
+import type {
+  MessageReachEditorForm,
+  MessageReachFilterForm,
+  MessageTemplateEditorForm,
+  MessageTemplateFilterForm,
+} from '#/views/member/message-reach/types';
+
+import dayjs from 'dayjs';
+
+/** 状态文案。 */
+export const MESSAGE_STATUS_TEXT_MAP: Record<MemberMessageReachStatus, string> =
+  {
+    draft: '草稿',
+    pending: '待发送',
+    sending: '发送中',
+    sent: '已发送',
+    failed: '发送失败',
+  };
+
+/** 状态标签色。 */
+export const MESSAGE_STATUS_COLOR_MAP: Record<
+  MemberMessageReachStatus,
+  string
+> = {
+  draft: 'default',
+  pending: 'processing',
+  sending: 'warning',
+  sent: 'success',
+  failed: 'error',
+};
+
+/** 渠道文案。 */
+export const MESSAGE_CHANNEL_TEXT_MAP: Record<
+  MemberMessageReachChannel,
+  string
+> = {
+  inapp: '站内信',
+  sms: '短信',
+  'wechat-mini': '微信模板',
+};
+
+/** 渠道标签色。 */
+export const MESSAGE_CHANNEL_COLOR_MAP: Record<
+  MemberMessageReachChannel,
+  string
+> = {
+  inapp: 'blue',
+  sms: 'green',
+  'wechat-mini': 'orange',
+};
+
+/** 模板分类文案。 */
+export const MESSAGE_TEMPLATE_CATEGORY_TEXT_MAP: Record<
+  MemberMessageTemplateCategory,
+  string
+> = {
+  marketing: '营销',
+  notice: '通知',
+  recall: '召回',
+};
+
+/** 模板分类颜色。 */
+export const MESSAGE_TEMPLATE_CATEGORY_COLOR_MAP: Record<
+  MemberMessageTemplateCategory,
+  string
+> = {
+  marketing: 'magenta',
+  notice: 'blue',
+  recall: 'red',
+};
+
+/** 收件状态文案。 */
+export const MESSAGE_RECIPIENT_STATUS_TEXT_MAP: Record<
+  'failed' | 'pending' | 'sent',
+  string
+> = {
+  pending: '待发送',
+  sent: '已发送',
+  failed: '发送失败',
+};
+
+/** 收件状态颜色。 */
+export const MESSAGE_RECIPIENT_STATUS_COLOR_MAP: Record<
+  'failed' | 'pending' | 'sent',
+  string
+> = {
+  pending: 'processing',
+  sent: 'success',
+  failed: 'error',
+};
+
+/** 格式化百分比。 */
+export function formatPercent(value: null | number | undefined) {
+  const amount = Number(value ?? 0);
+  if (!Number.isFinite(amount)) {
+    return '0%';
+  }
+
+  const digits = amount % 1 === 0 ? 0 : 1;
+  return `${amount.toFixed(digits)}%`;
+}
+
+/** 格式化数量。 */
+export function formatInteger(value: null | number | undefined) {
+  const amount = Number(value ?? 0);
+  if (!Number.isFinite(amount)) {
+    return '0';
+  }
+  return Math.round(amount).toLocaleString('zh-CN');
+}
+
+/** 格式化时间。 */
+export function formatDateTime(value?: string) {
+  if (!value) {
+    return '—';
+  }
+
+  const parsed = dayjs(value);
+  if (!parsed.isValid()) {
+    return value;
+  }
+  return parsed.format('YYYY-MM-DD HH:mm');
+}
+
+/** 解析消息发送时间。 */
+export function resolveMessageTime(
+  sentAt?: string,
+  scheduledAt?: string,
+): string {
+  if (sentAt) {
+    return formatDateTime(sentAt);
+  }
+  if (scheduledAt) {
+    return formatDateTime(scheduledAt);
+  }
+  return '—';
+}
+
+/** 将列表筛选映射为查询参数。 */
+export function mapMessageFilterToQuery(form: MessageReachFilterForm) {
+  const keyword = form.keyword.trim();
+  return {
+    status: form.status || undefined,
+    channel: form.channel || undefined,
+    keyword: keyword || undefined,
+  };
+}
+
+/** 将模板筛选映射为查询参数。 */
+export function mapTemplateFilterToQuery(form: MessageTemplateFilterForm) {
+  const keyword = form.keyword.trim();
+  return {
+    category: form.category || undefined,
+    keyword: keyword || undefined,
+  };
+}
+
+/** 将详情映射为编辑表单。 */
+export function mapDetailToEditorForm(
+  detail: MemberMessageReachDetailDto,
+  form: MessageReachEditorForm,
+) {
+  form.messageId = detail.messageId;
+  form.templateId = detail.templateId;
+  form.title = detail.title;
+  form.content = detail.content;
+  form.channels = [...detail.channels];
+  form.audienceType = detail.audienceType;
+  form.audienceTags = [...detail.audienceTags];
+  form.scheduleType = detail.scheduleType;
+  form.scheduledAt =
+    detail.scheduleType === 'scheduled' && detail.scheduledAt
+      ? dayjs(detail.scheduledAt)
+      : null;
+}
+
+/** 重置消息编辑表单。 */
+export function resetMessageEditorForm(form: MessageReachEditorForm) {
+  form.messageId = '';
+  form.templateId = undefined;
+  form.title = '';
+  form.content = '';
+  form.channels = ['inapp'];
+  form.audienceType = 'all';
+  form.audienceTags = [];
+  form.scheduleType = 'immediate';
+  form.scheduledAt = null;
+}
+
+/** 重置模板编辑表单。 */
+export function resetTemplateEditorForm(form: MessageTemplateEditorForm) {
+  form.templateId = '';
+  form.name = '';
+  form.category = 'notice';
+  form.content = '';
+}
+
+/** 消息编辑表单转保存请求。 */
+export function mapMessageEditorFormToSavePayload(
+  form: MessageReachEditorForm,
+  submitAction: 'draft' | 'send',
+): SaveMemberMessageReachPayload {
+  const payload: SaveMemberMessageReachPayload = {
+    messageId: form.messageId || undefined,
+    templateId: form.templateId || undefined,
+    title: form.title.trim(),
+    content: form.content.trim(),
+    channels: [...form.channels],
+    audienceType: form.audienceType,
+    audienceTags: [...form.audienceTags],
+    scheduleType: form.scheduleType,
+    scheduledAt:
+      form.scheduleType === 'scheduled' && form.scheduledAt
+        ? form.scheduledAt.toISOString()
+        : undefined,
+    submitAction,
+  };
+  return payload;
+}
+
+/** 模板编辑表单转保存请求。 */
+export function mapTemplateEditorFormToSavePayload(
+  form: MessageTemplateEditorForm,
+): SaveMemberMessageTemplatePayload {
+  return {
+    templateId: form.templateId || undefined,
+    name: form.name.trim(),
+    category: form.category,
+    content: form.content.trim(),
+  };
+}
+
+/** 切换渠道。 */
+export function toggleChannel(
+  channels: MemberMessageReachChannel[],
+  channel: MemberMessageReachChannel,
+) {
+  if (channels.includes(channel)) {
+    return channels.filter((item) => item !== channel);
+  }
+  return [...channels, channel];
+}
+
+/** 切换标签。 */
+export function toggleTag(tags: string[], tag: string) {
+  if (tags.includes(tag)) {
+    return tags.filter((item) => item !== tag);
+  }
+  return [...tags, tag];
+}
+
+/** 解析时间类型。 */
+export function resolveScheduleType(value: string): MemberMessageScheduleType {
+  return value === 'scheduled' ? 'scheduled' : 'immediate';
+}

apps/web-antd/src/views/member/message-reach/composables/message-reach-page/message-actions.ts

@@ -0,0 +1,264 @@
+import type { Dayjs } from 'dayjs';
+
+import type { Ref } from 'vue';
+
+import type {
+  MemberMessageTemplateDto,
+  SaveMemberMessageReachPayload,
+} from '#/api/member/message-reach';
+import type {
+  MemberMessageReachTabKey,
+  MessageReachDetailViewModel,
+  MessageReachEditorForm,
+} from '#/views/member/message-reach/types';
+
+import { message, Modal } from 'ant-design-vue';
+
+import {
+  deleteMemberMessageReachApi,
+  saveMemberMessageReachApi,
+} from '#/api/member/message-reach';
+
+import {
+  mapDetailToEditorForm,
+  mapMessageEditorFormToSavePayload,
+  resetMessageEditorForm,
+  toggleTag,
+} from './helpers';
+
+interface CreateMessageActionsOptions {
+  activeTab: Ref<MemberMessageReachTabKey>;
+  audienceEstimateCount: Ref<number>;
+  canManage: Ref<boolean>;
+  detail: Ref<MessageReachDetailViewModel | null>;
+  detailDrawerMessageId: Ref<string>;
+  form: MessageReachEditorForm;
+  isDetailDrawerOpen: Ref<boolean>;
+  isMessageDrawerOpen: Ref<boolean>;
+  isMessageSubmitting: Ref<boolean>;
+  messageDrawerMode: Ref<'create' | 'edit'>;
+  loadMessageDetail: (
+    messageId: string,
+  ) => Promise<MessageReachDetailViewModel | null>;
+  loadMessageList: () => Promise<void>;
+  loadStats: () => Promise<void>;
+}
+
+export function createMessageActions(options: CreateMessageActionsOptions) {
+  function setMessageDrawerOpen(value: boolean) {
+    options.isMessageDrawerOpen.value = value;
+  }
+
+  function setMessageTitle(value: string) {
+    options.form.title = value;
+  }
+
+  function setMessageContent(value: string) {
+    options.form.content = value;
+  }
+
+  function setMessageChannel(channel: 'inapp' | 'sms' | 'wechat-mini') {
+    if (
+      options.form.channels.length === 1 &&
+      options.form.channels[0] === channel
+    ) {
+      return;
+    }
+    options.form.channels = [channel];
+  }
+
+  function setAudienceType(value: 'all' | 'tag') {
+    options.form.audienceType = value;
+    if (value === 'all') {
+      options.form.audienceTags = [];
+    }
+  }
+
+  function toggleAudienceTag(value: string) {
+    options.form.audienceTags = toggleTag(options.form.audienceTags, value);
+  }
+
+  function setScheduleType(value: 'immediate' | 'scheduled') {
+    options.form.scheduleType = value;
+    if (value === 'immediate') {
+      options.form.scheduledAt = null;
+    }
+  }
+
+  function setScheduledAt(value: Dayjs | null) {
+    options.form.scheduledAt = value;
+  }
+
+  function switchToTemplateTab() {
+    options.activeTab.value = 'template';
+    options.isMessageDrawerOpen.value = false;
+  }
+
+  async function openCreateMessageDrawer() {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    resetMessageEditorForm(options.form);
+    options.audienceEstimateCount.value = 0;
+    options.messageDrawerMode.value = 'create';
+    options.isMessageDrawerOpen.value = true;
+  }
+
+  async function openEditMessageDrawer(messageId: string) {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    const detail = await options.loadMessageDetail(messageId);
+    if (!detail) {
+      return;
+    }
+
+    mapDetailToEditorForm(detail, options.form);
+    options.audienceEstimateCount.value = detail.estimatedReachCount;
+    options.messageDrawerMode.value = 'edit';
+    options.isMessageDrawerOpen.value = true;
+  }
+
+  async function openDetailDrawer(messageId: string) {
+    options.detailDrawerMessageId.value = messageId;
+    options.isDetailDrawerOpen.value = true;
+    await options.loadMessageDetail(messageId);
+  }
+
+  async function refreshDetailIfNeeded(messageId: string) {
+    if (!options.isDetailDrawerOpen.value) {
+      return;
+    }
+    if (options.detailDrawerMessageId.value !== messageId) {
+      return;
+    }
+    await options.loadMessageDetail(messageId);
+  }
+
+  function useTemplateToCreateMessage(template: MemberMessageTemplateDto) {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    resetMessageEditorForm(options.form);
+    options.form.templateId = template.templateId;
+    options.form.title = template.name;
+    options.form.content = template.content;
+    options.audienceEstimateCount.value = 0;
+    options.messageDrawerMode.value = 'create';
+    options.isMessageDrawerOpen.value = true;
+    options.activeTab.value = 'list';
+  }
+
+  function validateMessagePayload(payload: SaveMemberMessageReachPayload) {
+    if (!payload.title) {
+      message.warning('请输入消息标题');
+      return false;
+    }
+    if (!payload.content) {
+      message.warning('请输入消息内容');
+      return false;
+    }
+    if (payload.channels.length === 0) {
+      message.warning('请至少选择一个推送渠道');
+      return false;
+    }
+    if (payload.audienceType === 'tag' && payload.audienceTags.length === 0) {
+      message.warning('请选择目标标签');
+      return false;
+    }
+    if (payload.scheduleType === 'scheduled' && !payload.scheduledAt) {
+      message.warning('请选择定时发送时间');
+      return false;
+    }
+    return true;
+  }
+
+  async function submitMessage(submitAction: 'draft' | 'send') {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    const payload = mapMessageEditorFormToSavePayload(
+      options.form,
+      submitAction,
+    );
+    if (!validateMessagePayload(payload)) {
+      return;
+    }
+
+    options.isMessageSubmitting.value = true;
+    try {
+      const result = await saveMemberMessageReachApi(payload);
+      message.success(
+        submitAction === 'send' ? '发送任务已提交' : '草稿已保存',
+      );
+      options.isMessageDrawerOpen.value = false;
+      await Promise.all([options.loadStats(), options.loadMessageList()]);
+      await refreshDetailIfNeeded(result.messageId);
+    } catch (error) {
+      console.error(error);
+      message.error(submitAction === 'send' ? '发送失败' : '保存草稿失败');
+    } finally {
+      options.isMessageSubmitting.value = false;
+    }
+  }
+
+  async function removeMessage(messageId: string) {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    Modal.confirm({
+      title: '确认删除消息？',
+      content: '删除后无法恢复，且会取消未执行的发送任务。',
+      okText: '删除',
+      okType: 'danger',
+      cancelText: '取消',
+      async onOk() {
+        try {
+          await deleteMemberMessageReachApi({ messageId });
+          message.success('删除成功');
+          if (options.detailDrawerMessageId.value === messageId) {
+            options.isDetailDrawerOpen.value = false;
+            options.detailDrawerMessageId.value = '';
+            options.detail.value = null;
+          }
+          await Promise.all([options.loadStats(), options.loadMessageList()]);
+        } catch (error) {
+          console.error(error);
+          message.error('删除失败');
+        }
+      },
+    });
+  }
+
+  function setDetailDrawerOpen(value: boolean) {
+    options.isDetailDrawerOpen.value = value;
+    if (!value) {
+      options.detailDrawerMessageId.value = '';
+      options.detail.value = null;
+    }
+  }
+
+  return {
+    openCreateMessageDrawer,
+    openDetailDrawer,
+    openEditMessageDrawer,
+    removeMessage,
+    setAudienceType,
+    setDetailDrawerOpen,
+    setMessageContent,
+    setMessageDrawerOpen,
+    setMessageChannel,
+    setMessageTitle,
+    setScheduleType,
+    setScheduledAt,
+    submitMessage,
+    switchToTemplateTab,
+    toggleAudienceTag,
+    useTemplateToCreateMessage,
+  };
+}

apps/web-antd/src/views/member/message-reach/composables/message-reach-page/template-actions.ts

@@ -0,0 +1,144 @@
+import type { Ref } from 'vue';
+
+import type { MessageTemplateEditorForm } from '#/views/member/message-reach/types';
+
+import { message, Modal } from 'ant-design-vue';
+
+import {
+  deleteMemberMessageTemplateApi,
+  getMemberMessageTemplateDetailApi,
+  saveMemberMessageTemplateApi,
+} from '#/api/member/message-reach';
+
+import {
+  mapTemplateEditorFormToSavePayload,
+  resetTemplateEditorForm,
+} from './helpers';
+
+interface CreateTemplateActionsOptions {
+  canManage: Ref<boolean>;
+  form: MessageTemplateEditorForm;
+  isTemplateEditorLoading: Ref<boolean>;
+  isTemplateEditorOpen: Ref<boolean>;
+  isTemplateSubmitting: Ref<boolean>;
+  loadTemplateList: () => Promise<void>;
+  mode: Ref<'create' | 'edit'>;
+}
+
+export function createTemplateActions(options: CreateTemplateActionsOptions) {
+  function setTemplateEditorOpen(value: boolean) {
+    options.isTemplateEditorOpen.value = value;
+  }
+
+  function setTemplateName(value: string) {
+    options.form.name = value;
+  }
+
+  function setTemplateCategory(value: 'marketing' | 'notice' | 'recall') {
+    options.form.category = value;
+  }
+
+  function setTemplateContent(value: string) {
+    options.form.content = value;
+  }
+
+  function openCreateTemplateModal() {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    options.mode.value = 'create';
+    resetTemplateEditorForm(options.form);
+    options.isTemplateEditorOpen.value = true;
+  }
+
+  async function openEditTemplateModal(templateId: string) {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    options.isTemplateEditorLoading.value = true;
+    try {
+      const detail = await getMemberMessageTemplateDetailApi({ templateId });
+      options.mode.value = 'edit';
+      options.form.templateId = detail.templateId;
+      options.form.name = detail.name;
+      options.form.category = detail.category;
+      options.form.content = detail.content;
+      options.isTemplateEditorOpen.value = true;
+    } catch (error) {
+      console.error(error);
+      message.error('加载模板详情失败');
+    } finally {
+      options.isTemplateEditorLoading.value = false;
+    }
+  }
+
+  async function submitTemplate() {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    const payload = mapTemplateEditorFormToSavePayload(options.form);
+    if (!payload.name) {
+      message.warning('请输入模板名称');
+      return;
+    }
+    if (!payload.content) {
+      message.warning('请输入模板内容');
+      return;
+    }
+
+    options.isTemplateSubmitting.value = true;
+    try {
+      await saveMemberMessageTemplateApi(payload);
+      message.success(
+        options.mode.value === 'create' ? '模板创建成功' : '模板保存成功',
+      );
+      options.isTemplateEditorOpen.value = false;
+      await options.loadTemplateList();
+    } catch (error) {
+      console.error(error);
+      message.error(
+        options.mode.value === 'create' ? '模板创建失败' : '模板保存失败',
+      );
+    } finally {
+      options.isTemplateSubmitting.value = false;
+    }
+  }
+
+  function removeTemplate(templateId: string) {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    Modal.confirm({
+      title: '确认删除模板？',
+      content: '删除后不可恢复，且不影响已发送消息。',
+      okText: '删除',
+      okType: 'danger',
+      cancelText: '取消',
+      async onOk() {
+        try {
+          await deleteMemberMessageTemplateApi({ templateId });
+          message.success('删除成功');
+          await options.loadTemplateList();
+        } catch (error) {
+          console.error(error);
+          message.error('删除失败');
+        }
+      },
+    });
+  }
+
+  return {
+    openCreateTemplateModal,
+    openEditTemplateModal,
+    removeTemplate,
+    setTemplateCategory,
+    setTemplateContent,
+    setTemplateEditorOpen,
+    setTemplateName,
+    submitTemplate,
+  };
+}

apps/web-antd/src/views/member/message-reach/composables/useMemberMessageReachPage.ts

@@ -0,0 +1,396 @@
+import type { MemberMessageReachTabKey } from '../types';
+
+import type {
+  MemberMessageReachChannel,
+  MemberMessageReachDetailDto,
+  MemberMessageReachStatus,
+  MemberMessageTemplateCategory,
+} from '#/api/member/message-reach';
+
+import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
+
+import { useAccessStore } from '@vben/stores';
+
+import {
+  createDefaultMessageReachEditorForm,
+  createDefaultMessageReachFilterForm,
+  createDefaultMessageReachPager,
+  createDefaultMessageReachStats,
+  createDefaultMessageTemplateEditorForm,
+  createDefaultMessageTemplateFilterForm,
+  createDefaultMessageTemplatePager,
+} from '../types';
+import {
+  MEMBER_MESSAGE_REACH_MANAGE_PERMISSION,
+  MEMBER_MESSAGE_REACH_VIEW_PERMISSION,
+  MESSAGE_REACH_TAB_OPTIONS,
+} from './message-reach-page/constants';
+import { createDataActions } from './message-reach-page/data-actions';
+import {
+  resetMessageEditorForm,
+  resetTemplateEditorForm,
+} from './message-reach-page/helpers';
+import { createMessageActions } from './message-reach-page/message-actions';
+import { createTemplateActions } from './message-reach-page/template-actions';
+
+export function useMemberMessageReachPage() {
+  const accessStore = useAccessStore();
+
+  const activeTab = ref<MemberMessageReachTabKey>('list');
+
+  const stats = ref(createDefaultMessageReachStats());
+  const isStatsLoading = ref(false);
+
+  const messageFilterForm = reactive(createDefaultMessageReachFilterForm());
+  const messagePager = ref(createDefaultMessageReachPager());
+  const isMessageLoading = ref(false);
+
+  const templateFilterForm = reactive(createDefaultMessageTemplateFilterForm());
+  const templatePager = ref(createDefaultMessageTemplatePager());
+  const isTemplateLoading = ref(false);
+
+  const detail = ref<MemberMessageReachDetailDto | null>(null);
+  const isDetailLoading = ref(false);
+  const isDetailDrawerOpen = ref(false);
+  const detailDrawerMessageId = ref('');
+
+  const messageDrawerMode = ref<'create' | 'edit'>('create');
+  const form = reactive(createDefaultMessageReachEditorForm());
+  const isMessageDrawerOpen = ref(false);
+  const isMessageSubmitting = ref(false);
+  const audienceEstimateCount = ref(0);
+  const isEstimatingAudience = ref(false);
+
+  const templateEditorMode = ref<'create' | 'edit'>('create');
+  const templateForm = reactive(createDefaultMessageTemplateEditorForm());
+  const isTemplateEditorOpen = ref(false);
+  const isTemplateEditorLoading = ref(false);
+  const isTemplateSubmitting = ref(false);
+
+  const accessCodeSet = computed(
+    () => new Set((accessStore.accessCodes ?? []).map(String)),
+  );
+  const canManage = computed(() =>
+    accessCodeSet.value.has(MEMBER_MESSAGE_REACH_MANAGE_PERMISSION),
+  );
+  const canView = computed(
+    () =>
+      canManage.value ||
+      accessCodeSet.value.has(MEMBER_MESSAGE_REACH_VIEW_PERMISSION),
+  );
+
+  const messageDrawerTitle = computed(() =>
+    messageDrawerMode.value === 'create' ? '创建消息' : '编辑消息',
+  );
+
+  const templateEditorTitle = computed(() =>
+    templateEditorMode.value === 'create' ? '新建模板' : '编辑模板',
+  );
+
+  const templateEditorSubmitText = computed(() =>
+    templateEditorMode.value === 'create' ? '创建' : '保存',
+  );
+
+  const {
+    estimateAudience,
+    loadMessageDetail,
+    loadMessageList,
+    loadStats,
+    loadTemplateList,
+  } = createDataActions({
+    audienceEstimateCount,
+    detail,
+    isDetailLoading,
+    isEstimatingAudience,
+    isMessageLoading,
+    isStatsLoading,
+    isTemplateLoading,
+    messageFilterForm,
+    messagePager,
+    stats,
+    templateFilterForm,
+    templatePager,
+  });
+
+  const {
+    openCreateMessageDrawer,
+    openDetailDrawer,
+    openEditMessageDrawer,
+    removeMessage,
+    setAudienceType,
+    setDetailDrawerOpen,
+    setMessageContent,
+    setMessageDrawerOpen,
+    setMessageChannel,
+    setMessageTitle,
+    setScheduleType,
+    setScheduledAt,
+    submitMessage,
+    switchToTemplateTab,
+    toggleAudienceTag,
+    useTemplateToCreateMessage,
+  } = createMessageActions({
+    activeTab,
+    audienceEstimateCount,
+    canManage,
+    detail,
+    detailDrawerMessageId,
+    form,
+    isDetailDrawerOpen,
+    isMessageDrawerOpen,
+    isMessageSubmitting,
+    messageDrawerMode,
+    loadMessageDetail,
+    loadMessageList,
+    loadStats,
+  });
+
+  const {
+    openCreateTemplateModal,
+    openEditTemplateModal,
+    removeTemplate,
+    setTemplateCategory,
+    setTemplateContent,
+    setTemplateEditorOpen,
+    setTemplateName,
+    submitTemplate,
+  } = createTemplateActions({
+    canManage,
+    form: templateForm,
+    isTemplateEditorLoading,
+    isTemplateEditorOpen,
+    isTemplateSubmitting,
+    loadTemplateList,
+    mode: templateEditorMode,
+  });
+
+  function setActiveTab(value: MemberMessageReachTabKey) {
+    activeTab.value = value;
+  }
+
+  function setMessageStatusFilter(value: string) {
+    messageFilterForm.status = (value || undefined) as
+      | MemberMessageReachStatus
+      | undefined;
+  }
+
+  function setMessageChannelFilter(value: string) {
+    messageFilterForm.channel = (value || undefined) as
+      | MemberMessageReachChannel
+      | undefined;
+  }
+
+  function setMessageKeyword(value: string) {
+    messageFilterForm.keyword = value;
+  }
+
+  async function applyMessageFilters() {
+    messagePager.value = {
+      ...messagePager.value,
+      page: 1,
+    };
+    await loadMessageList();
+  }
+
+  async function resetMessageFilters() {
+    messageFilterForm.status = undefined;
+    messageFilterForm.channel = undefined;
+    messageFilterForm.keyword = '';
+    messagePager.value = {
+      ...messagePager.value,
+      page: 1,
+    };
+    await loadMessageList();
+  }
+
+  async function handleMessagePageChange(page: number, pageSize: number) {
+    messagePager.value = {
+      ...messagePager.value,
+      page,
+      pageSize,
+    };
+    await loadMessageList();
+  }
+
+  function setTemplateCategoryFilter(value: string) {
+    templateFilterForm.category = (value || undefined) as
+      | MemberMessageTemplateCategory
+      | undefined;
+  }
+
+  function setTemplateKeyword(value: string) {
+    templateFilterForm.keyword = value;
+  }
+
+  async function applyTemplateFilters() {
+    templatePager.value = {
+      ...templatePager.value,
+      page: 1,
+    };
+    await loadTemplateList();
+  }
+
+  async function resetTemplateFilters() {
+    templateFilterForm.category = undefined;
+    templateFilterForm.keyword = '';
+    templatePager.value = {
+      ...templatePager.value,
+      page: 1,
+    };
+    await loadTemplateList();
+  }
+
+  async function handleTemplatePageChange(page: number, pageSize: number) {
+    templatePager.value = {
+      ...templatePager.value,
+      page,
+      pageSize,
+    };
+    await loadTemplateList();
+  }
+
+  async function setAudienceTypeAndEstimate(value: 'all' | 'tag') {
+    setAudienceType(value);
+    if (value === 'all') {
+      audienceEstimateCount.value = 0;
+      return;
+    }
+    await estimateAudience('tag', form.audienceTags);
+  }
+
+  async function toggleAudienceTagAndEstimate(tag: string) {
+    toggleAudienceTag(tag);
+    if (form.audienceType !== 'tag') {
+      return;
+    }
+    await estimateAudience('tag', form.audienceTags);
+  }
+
+  async function submitDraftMessage() {
+    await submitMessage('draft');
+  }
+
+  async function submitSendMessage() {
+    await submitMessage('send');
+  }
+
+  function clearByPermission() {
+    stats.value = createDefaultMessageReachStats();
+    messagePager.value = createDefaultMessageReachPager();
+    templatePager.value = createDefaultMessageTemplatePager();
+    detail.value = null;
+    isDetailDrawerOpen.value = false;
+    detailDrawerMessageId.value = '';
+    resetMessageEditorForm(form);
+    audienceEstimateCount.value = 0;
+    isMessageDrawerOpen.value = false;
+    resetTemplateEditorForm(templateForm);
+    isTemplateEditorOpen.value = false;
+  }
+
+  async function bootstrapPageData() {
+    await Promise.all([loadStats(), loadMessageList(), loadTemplateList()]);
+  }
+
+  watch(canView, async (value, oldValue) => {
+    if (value === oldValue) {
+      return;
+    }
+
+    if (!value) {
+      clearByPermission();
+      return;
+    }
+
+    await bootstrapPageData();
+  });
+
+  onMounted(async () => {
+    if (!canView.value) {
+      clearByPermission();
+      return;
+    }
+
+    await bootstrapPageData();
+  });
+
+  onActivated(() => {
+    if (!canView.value) {
+      return;
+    }
+
+    if (
+      messagePager.value.totalCount === 0 &&
+      templatePager.value.totalCount === 0
+    ) {
+      void bootstrapPageData();
+    }
+  });
+
+  return {
+    activeTab,
+    applyMessageFilters,
+    applyTemplateFilters,
+    audienceEstimateCount,
+    canManage,
+    canView,
+    detail,
+    form,
+    handleMessagePageChange,
+    handleTemplatePageChange,
+    isDetailDrawerOpen,
+    isDetailLoading,
+    isEstimatingAudience,
+    isMessageDrawerOpen,
+    isMessageLoading,
+    isMessageSubmitting,
+    isStatsLoading,
+    isTemplateEditorLoading,
+    isTemplateEditorOpen,
+    isTemplateLoading,
+    isTemplateSubmitting,
+    messageDrawerTitle,
+    messageFilterForm,
+    messagePager,
+    openCreateMessageDrawer,
+    openCreateTemplateModal,
+    openDetailDrawer,
+    openEditMessageDrawer,
+    openEditTemplateModal,
+    removeMessage,
+    removeTemplate,
+    resetMessageFilters,
+    resetTemplateFilters,
+    setActiveTab,
+    setAudienceTypeAndEstimate,
+    setDetailDrawerOpen,
+    setMessageChannel,
+    setMessageChannelFilter,
+    setMessageContent,
+    setMessageDrawerOpen,
+    setMessageKeyword,
+    setMessageStatusFilter,
+    setMessageTitle,
+    setScheduleType,
+    setScheduledAt,
+    setTemplateCategory,
+    setTemplateCategoryFilter,
+    setTemplateContent,
+    setTemplateEditorOpen,
+    setTemplateKeyword,
+    setTemplateName,
+    stats,
+    submitDraftMessage,
+    submitSendMessage,
+    submitTemplate,
+    switchToTemplateTab,
+    tabOptions: MESSAGE_REACH_TAB_OPTIONS,
+    templateEditorSubmitText,
+    templateEditorTitle,
+    templateFilterForm,
+    templateForm,
+    templatePager,
+    toggleAudienceTagAndEstimate,
+    useTemplateToCreateMessage,
+  };
+}

apps/web-antd/src/views/member/message-reach/index.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+
+import { Empty, Segmented } from 'ant-design-vue';
+
+import MessageReachDetailDrawer from './components/MessageReachDetailDrawer.vue';
+import MessageReachEditorDrawer from './components/MessageReachEditorDrawer.vue';
+import MessageReachFilterBar from './components/MessageReachFilterBar.vue';
+import MessageReachStatsCards from './components/MessageReachStatsCards.vue';
+import MessageReachTableCard from './components/MessageReachTableCard.vue';
+import MessageTemplateCardGrid from './components/MessageTemplateCardGrid.vue';
+import MessageTemplateEditorModal from './components/MessageTemplateEditorModal.vue';
+import MessageTemplateToolbar from './components/MessageTemplateToolbar.vue';
+import { useMemberMessageReachPage } from './composables/useMemberMessageReachPage';
+
+const {
+  activeTab,
+  applyMessageFilters,
+  applyTemplateFilters,
+  audienceEstimateCount,
+  canManage,
+  canView,
+  detail,
+  form,
+  handleMessagePageChange,
+  handleTemplatePageChange,
+  isDetailDrawerOpen,
+  isDetailLoading,
+  isEstimatingAudience,
+  isMessageDrawerOpen,
+  isMessageLoading,
+  isMessageSubmitting,
+  isStatsLoading,
+  isTemplateEditorLoading,
+  isTemplateEditorOpen,
+  isTemplateLoading,
+  isTemplateSubmitting,
+  messageDrawerTitle,
+  messageFilterForm,
+  messagePager,
+  openCreateMessageDrawer,
+  openCreateTemplateModal,
+  openDetailDrawer,
+  openEditMessageDrawer,
+  openEditTemplateModal,
+  removeMessage,
+  removeTemplate,
+  setActiveTab,
+  setAudienceTypeAndEstimate,
+  setDetailDrawerOpen,
+  setMessageChannel,
+  setMessageChannelFilter,
+  setMessageContent,
+  setMessageDrawerOpen,
+  setMessageKeyword,
+  setMessageStatusFilter,
+  setMessageTitle,
+  setScheduleType,
+  setScheduledAt,
+  setTemplateCategory,
+  setTemplateCategoryFilter,
+  setTemplateContent,
+  setTemplateEditorOpen,
+  setTemplateKeyword,
+  setTemplateName,
+  stats,
+  submitDraftMessage,
+  submitSendMessage,
+  submitTemplate,
+  switchToTemplateTab,
+  tabOptions,
+  templateEditorSubmitText,
+  templateEditorTitle,
+  templateFilterForm,
+  templateForm,
+  templatePager,
+  toggleAudienceTagAndEstimate,
+  useTemplateToCreateMessage,
+} = useMemberMessageReachPage();
+</script>
+
+<template>
+  <Page title="消息触达" content-class="page-member-message-reach">
+    <div class="mmr-page">
+      <div class="mmr-topbar">
+        <Segmented
+          class="mmr-tab-switch"
+          :value="activeTab"
+          :options="tabOptions"
+          @update:value="
+            (value) => setActiveTab((value as 'list' | 'template') || 'list')
+          "
+        />
+
+        <span v-if="canView && !canManage" class="mmr-readonly-tip">
+          当前为只读权限
+        </span>
+      </div>
+
+      <template v-if="canView">
+        <section v-show="activeTab === 'list'" class="mmr-tab-panel">
+          <MessageReachFilterBar
+            :filters="messageFilterForm"
+            :can-manage="canManage"
+            @create="openCreateMessageDrawer"
+            @update:status="setMessageStatusFilter"
+            @update:channel="setMessageChannelFilter"
+            @update:keyword="setMessageKeyword"
+            @search="applyMessageFilters"
+          />
+
+          <MessageReachStatsCards :stats="stats" :loading="isStatsLoading" />
+
+          <MessageReachTableCard
+            :can-manage="canManage"
+            :pager="messagePager"
+            :loading="isMessageLoading"
+            @detail="openDetailDrawer"
+            @edit="openEditMessageDrawer"
+            @delete="removeMessage"
+            @page-change="handleMessagePageChange"
+          />
+        </section>
+
+        <section v-show="activeTab === 'template'" class="mmr-tab-panel">
+          <MessageTemplateToolbar
+            :filters="templateFilterForm"
+            :can-manage="canManage"
+            @create="openCreateTemplateModal"
+            @update:category="setTemplateCategoryFilter"
+            @update:keyword="setTemplateKeyword"
+            @search="applyTemplateFilters"
+          />
+
+          <MessageTemplateCardGrid
+            :can-manage="canManage"
+            :pager="templatePager"
+            :loading="isTemplateLoading"
+            @use="useTemplateToCreateMessage"
+            @edit="openEditTemplateModal"
+            @delete="removeTemplate"
+            @page-change="handleTemplatePageChange"
+          />
+        </section>
+      </template>
+
+      <Empty v-else description="暂无消息触达页面访问权限" />
+    </div>
+
+    <MessageReachEditorDrawer
+      :open="isMessageDrawerOpen"
+      :title="messageDrawerTitle"
+      :form="form"
+      :can-manage="canManage"
+      :submitting="isMessageSubmitting"
+      :audience-estimate-count="audienceEstimateCount"
+      :estimating-audience="isEstimatingAudience"
+      @close="setMessageDrawerOpen(false)"
+      @set-title="setMessageTitle"
+      @set-content="setMessageContent"
+      @set-channel="setMessageChannel"
+      @set-audience-type="setAudienceTypeAndEstimate"
+      @toggle-audience-tag="toggleAudienceTagAndEstimate"
+      @set-schedule-type="setScheduleType"
+      @set-scheduled-at="setScheduledAt"
+      @switch-to-template-tab="switchToTemplateTab"
+      @submit-draft="submitDraftMessage"
+      @submit-send="submitSendMessage"
+    />
+
+    <MessageReachDetailDrawer
+      :open="isDetailDrawerOpen"
+      :loading="isDetailLoading"
+      :detail="detail"
+      @close="setDetailDrawerOpen(false)"
+    />
+
+    <MessageTemplateEditorModal
+      :open="isTemplateEditorOpen"
+      :title="templateEditorTitle"
+      :submit-text="templateEditorSubmitText"
+      :form="templateForm"
+      :can-manage="canManage"
+      :loading="isTemplateEditorLoading"
+      :submitting="isTemplateSubmitting"
+      @close="setTemplateEditorOpen(false)"
+      @set-name="setTemplateName"
+      @set-category="setTemplateCategory"
+      @set-content="setTemplateContent"
+      @submit="submitTemplate"
+    />
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>

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

@@ -0,0 +1,27 @@
+.page-member-message-reach {
+  .mmr-page {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .mmr-tab-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .mmr-spacer {
+    flex: 1;
+  }
+
+  .mmr-time-text {
+    font-size: 12px;
+    color: #6b7280;
+    white-space: nowrap;
+  }
+
+  .mmr-action-link {
+    padding-inline: 0;
+  }
+}

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

@@ -0,0 +1,163 @@
+.page-member-message-reach {
+  .mmr-editor-form {
+    .ant-form-item {
+      margin-bottom: 16px;
+    }
+  }
+
+  .mmr-pill-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .mmr-pill {
+    padding: 4px 12px;
+    margin-right: 0;
+    font-size: 13px;
+    line-height: 22px;
+    border-radius: 999px;
+  }
+
+  .mmr-pill.ant-tag-checkable-checked {
+    color: #fff;
+    background: #1677ff;
+  }
+
+  .mmr-tag-panel {
+    margin-top: 10px;
+  }
+
+  .mmr-reach-row {
+    margin-top: 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #1677ff;
+  }
+
+  .mmr-form-hint {
+    margin-top: 6px;
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  .mmr-scheduled-picker {
+    width: 260px;
+    margin-top: 10px;
+  }
+
+  .mmr-template-link-wrap {
+    margin-bottom: 0;
+  }
+
+  .mmr-template-link {
+    padding-left: 0;
+  }
+
+  .mmr-drawer-footer {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+  }
+
+  .mmr-detail-section {
+    margin-bottom: 20px;
+  }
+
+  .mmr-detail-section-title {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #111827;
+  }
+
+  .mmr-detail-title-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .mmr-detail-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+  }
+
+  .mmr-detail-meta {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px 16px;
+    font-size: 13px;
+
+    .label {
+      color: #6b7280;
+    }
+
+    .channels {
+      display: inline-flex;
+      gap: 4px;
+      align-items: center;
+    }
+  }
+
+  .mmr-detail-stat-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .mmr-detail-stat-item {
+    padding: 10px 12px;
+    background: #f8fafc;
+    border-radius: 8px;
+
+    .label {
+      margin-bottom: 4px;
+      font-size: 12px;
+      color: #6b7280;
+    }
+
+    .value {
+      font-size: 18px;
+      font-weight: 700;
+      color: #0f172a;
+    }
+  }
+
+  .mmr-detail-content {
+    padding: 10px 12px;
+    font-size: 13px;
+    line-height: 1.65;
+    color: #374151;
+    white-space: pre-wrap;
+    background: #f8fafc;
+    border: 1px solid #f1f5f9;
+    border-radius: 8px;
+  }
+
+  .mmr-detail-error {
+    margin-top: 10px;
+    font-size: 12px;
+    color: #dc2626;
+  }
+
+  .mmr-recipient-table {
+    .ant-table-thead > tr > th {
+      font-size: 12px;
+      background: #f8fafc;
+    }
+
+    .ant-table-tbody > tr > td {
+      font-size: 12px;
+    }
+  }
+
+  .mmr-error-text {
+    display: inline-block;
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,7 @@
+@import './base.less';
+@import './layout.less';
+@import './list.less';
+@import './template.less';
+@import './drawer.less';
+@import './modal.less';
+@import './responsive.less';

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

@@ -0,0 +1,78 @@
+.page-member-message-reach {
+  .mmr-topbar {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .mmr-tab-switch {
+    --ant-segmented-item-selected-bg: #fff;
+    --ant-segmented-item-selected-color: #1677ff;
+  }
+
+  .mmr-readonly-tip {
+    font-size: 12px;
+    color: #6b7280;
+  }
+
+  .mmr-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    padding: 12px 14px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgb(15 23 42 / 7%);
+  }
+
+  .mmr-select {
+    width: 120px;
+  }
+
+  .mmr-keyword-input {
+    width: 200px;
+  }
+
+  .mmr-stats {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .mmr-stat-card {
+    padding: 16px 18px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 3px 10px rgb(15 23 42 / 7%);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .mmr-stat-card:hover {
+    box-shadow: 0 10px 20px rgb(15 23 42 / 11%);
+    transform: translateY(-1px);
+  }
+
+  .mmr-stat-label {
+    margin-bottom: 6px;
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  .mmr-stat-value {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.1;
+    color: #111827;
+  }
+
+  .mmr-stat-unit {
+    margin-left: 2px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #6b7280;
+  }
+}

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

@@ -0,0 +1,53 @@
+.page-member-message-reach {
+  .mmr-table-wrap {
+    overflow: hidden;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
+  }
+
+  .mmr-table {
+    .ant-table-thead > tr > th {
+      font-size: 13px;
+      font-weight: 600;
+      color: #475569;
+      white-space: nowrap;
+      background: #f8fafc;
+    }
+
+    .ant-table-tbody > tr > td {
+      font-size: 13px;
+      vertical-align: middle;
+      color: #0f172a;
+    }
+  }
+
+  .mmr-message-title {
+    font-weight: 600;
+    color: #0f172a;
+  }
+
+  .mmr-message-metric {
+    margin-top: 2px;
+    font-size: 12px;
+    color: #6b7280;
+  }
+
+  .mmr-channel-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .mmr-table-actions {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .mmr-pagination {
+    display: flex;
+    justify-content: flex-end;
+    padding: 14px 16px 16px;
+  }
+}

apps/web-antd/src/views/member/message-reach/styles/modal.less

@@ -0,0 +1,7 @@
+.page-member-message-reach {
+  .mmr-template-modal-form {
+    .ant-form-item {
+      margin-bottom: 14px;
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+.page-member-message-reach {
+  @media (max-width: 1200px) {
+    .mmr-stats {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .mmr-template-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .mmr-detail-stat-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 768px) {
+    .mmr-toolbar {
+      align-items: stretch;
+      padding: 12px;
+    }
+
+    .mmr-topbar {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .mmr-select,
+    .mmr-keyword-input {
+      width: 100%;
+    }
+
+    .mmr-stats {
+      grid-template-columns: 1fr;
+    }
+
+    .mmr-detail-meta {
+      grid-template-columns: 1fr;
+    }
+
+    .mmr-detail-stat-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .mmr-scheduled-picker {
+      width: 100%;
+    }
+  }
+}

apps/web-antd/src/views/member/message-reach/styles/template.less

@@ -0,0 +1,85 @@
+.page-member-message-reach {
+  .mmr-template-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .mmr-template-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+  }
+
+  .mmr-template-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 172px;
+    padding: 18px 20px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .mmr-template-card:hover {
+    box-shadow: 0 10px 20px rgb(15 23 42 / 12%);
+    transform: translateY(-1px);
+  }
+
+  .mmr-template-head {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .mmr-template-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-weight: 600;
+    color: #0f172a;
+    white-space: nowrap;
+  }
+
+  .mmr-template-preview {
+    display: -webkit-box;
+    min-height: 40px;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    font-size: 12px;
+    line-height: 1.65;
+    color: #6b7280;
+    -webkit-box-orient: vertical;
+  }
+
+  .mmr-template-foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+  }
+
+  .mmr-template-usage {
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  .mmr-template-actions {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .mmr-template-empty {
+    padding: 36px 0;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 3px 10px rgb(15 23 42 / 7%);
+  }
+}

apps/web-antd/src/views/member/message-reach/types.ts

@@ -0,0 +1,147 @@
+/**
+ * 文件职责：会员消息触达页面类型定义与默认值工厂。
+ */
+import type { Dayjs } from 'dayjs';
+
+import type {
+  MemberMessageAudienceType,
+  MemberMessageReachChannel,
+  MemberMessageReachDetailDto,
+  MemberMessageReachListItemDto,
+  MemberMessageReachStatsDto,
+  MemberMessageReachStatus,
+  MemberMessageScheduleType,
+  MemberMessageTemplateCategory,
+  MemberMessageTemplateDto,
+} from '#/api/member/message-reach';
+
+/** 页面主 Tab。 */
+export type MemberMessageReachTabKey = 'list' | 'template';
+
+/** 消息列表筛选表单。 */
+export interface MessageReachFilterForm {
+  channel?: MemberMessageReachChannel;
+  keyword: string;
+  status?: MemberMessageReachStatus;
+}
+
+/** 模板列表筛选表单。 */
+export interface MessageTemplateFilterForm {
+  category?: MemberMessageTemplateCategory;
+  keyword: string;
+}
+
+/** 消息列表分页状态。 */
+export interface MessageReachPager {
+  items: MemberMessageReachListItemDto[];
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+/** 模板列表分页状态。 */
+export interface MessageTemplatePager {
+  items: MemberMessageTemplateDto[];
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+/** 消息编辑表单。 */
+export interface MessageReachEditorForm {
+  audienceTags: string[];
+  audienceType: MemberMessageAudienceType;
+  channels: MemberMessageReachChannel[];
+  content: string;
+  messageId: string;
+  scheduleType: MemberMessageScheduleType;
+  scheduledAt: Dayjs | null;
+  templateId?: string;
+  title: string;
+}
+
+/** 模板编辑表单。 */
+export interface MessageTemplateEditorForm {
+  category: MemberMessageTemplateCategory;
+  content: string;
+  name: string;
+  templateId: string;
+}
+
+/** 页面统计视图模型。 */
+export type MessageReachStatsViewModel = MemberMessageReachStatsDto;
+
+/** 消息详情视图模型。 */
+export type MessageReachDetailViewModel = MemberMessageReachDetailDto;
+
+/** 默认消息列表筛选。 */
+export function createDefaultMessageReachFilterForm(): MessageReachFilterForm {
+  return {
+    status: undefined,
+    channel: undefined,
+    keyword: '',
+  };
+}
+
+/** 默认模板列表筛选。 */
+export function createDefaultMessageTemplateFilterForm(): MessageTemplateFilterForm {
+  return {
+    category: undefined,
+    keyword: '',
+  };
+}
+
+/** 默认消息分页。 */
+export function createDefaultMessageReachPager(): MessageReachPager {
+  return {
+    items: [],
+    page: 1,
+    pageSize: 10,
+    totalCount: 0,
+  };
+}
+
+/** 默认模板分页。 */
+export function createDefaultMessageTemplatePager(): MessageTemplatePager {
+  return {
+    items: [],
+    page: 1,
+    pageSize: 12,
+    totalCount: 0,
+  };
+}
+
+/** 默认消息编辑表单。 */
+export function createDefaultMessageReachEditorForm(): MessageReachEditorForm {
+  return {
+    messageId: '',
+    templateId: undefined,
+    title: '',
+    content: '',
+    channels: ['inapp'],
+    audienceType: 'all',
+    audienceTags: [],
+    scheduleType: 'immediate',
+    scheduledAt: null,
+  };
+}
+
+/** 默认模板编辑表单。 */
+export function createDefaultMessageTemplateEditorForm(): MessageTemplateEditorForm {
+  return {
+    templateId: '',
+    name: '',
+    category: 'notice',
+    content: '',
+  };
+}
+
+/** 默认统计数据。 */
+export function createDefaultMessageReachStats(): MessageReachStatsViewModel {
+  return {
+    monthlySentCount: 0,
+    reachMemberCount: 0,
+    openRate: 0,
+    conversionRate: 0,
+  };
+}

apps/web-antd/src/views/member/points-mall/components/PointsMallProductCard.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { PointMallProductCardViewModel } from '../types';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Tag } from 'ant-design-vue';
+
+import {
+  POINTS_MALL_PRODUCT_STATUS_TEXT_MAP,
+  POINTS_MALL_REDEEM_TYPE_CLASS_MAP,
+} from '../composables/points-mall-page/constants';
+import {
+  formatCurrency,
+  formatPoints,
+} from '../composables/points-mall-page/helpers';
+
+const props = defineProps<{
+  canManage: boolean;
+  item: PointMallProductCardViewModel;
+}>();
+
+const emit = defineEmits<{
+  (event: 'edit', item: PointMallProductCardViewModel): void;
+  (event: 'remove', item: PointMallProductCardViewModel): void;
+  (event: 'toggleStatus', item: PointMallProductCardViewModel): void;
+}>();
+
+const statusTagColor = computed(() =>
+  props.item.status === 'enabled' ? 'green' : 'default',
+);
+
+const statusActionText = computed(() =>
+  props.item.status === 'enabled' ? '下架' : '上架',
+);
+
+const redeemTypeClass = computed(
+  () => POINTS_MALL_REDEEM_TYPE_CLASS_MAP[props.item.redeemType],
+);
+
+const statusText = computed(
+  () =>
+    props.item.statusText ||
+    POINTS_MALL_PRODUCT_STATUS_TEXT_MAP[props.item.status] ||
+    '未知',
+);
+</script>
+
+<template>
+  <div
+    class="mpm-product-card"
+    :class="{ 'is-disabled': item.status !== 'enabled' }"
+  >
+    <div class="mpm-product-image">
+      <img v-if="item.imageUrl" :src="item.imageUrl" :alt="item.name" />
+      <IconifyIcon v-else icon="lucide:image" />
+    </div>
+
+    <div class="mpm-product-body">
+      <div class="mpm-product-name">
+        <span>{{ item.name }}</span>
+        <span class="mpm-type-tag" :class="redeemTypeClass">
+          {{ item.redeemTypeText }}
+        </span>
+      </div>
+
+      <div class="mpm-product-price">
+        {{ formatPoints(item.requiredPoints) }}积分
+        <span v-if="item.exchangeType === 'mixed'" class="cash">
+          + {{ formatCurrency(item.cashAmount) }}
+        </span>
+      </div>
+
+      <div class="mpm-product-meta">
+        <span>库存 {{ formatPoints(item.stockAvailable) }}</span>
+        <span>已兑换 {{ formatPoints(item.redeemedCount) }}</span>
+      </div>
+
+      <div class="mpm-product-footer">
+        <button
+          type="button"
+          class="g-action"
+          :disabled="!canManage"
+          @click="emit('edit', item)"
+        >
+          编辑
+        </button>
+        <button
+          type="button"
+          class="g-action"
+          :disabled="!canManage"
+          @click="emit('toggleStatus', item)"
+        >
+          {{ statusActionText }}
+        </button>
+        <button
+          type="button"
+          class="g-action g-action-danger"
+          :disabled="!canManage"
+          @click="emit('remove', item)"
+        >
+          删除
+        </button>
+        <Tag :color="statusTagColor">{{ statusText }}</Tag>
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallProductEditorDrawer.vue

@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import type { UploadChangeParam, UploadFile } from 'ant-design-vue';
+
+import type { PointMallProductEditorForm } from '../types';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Drawer,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Select,
+  Switch,
+  Upload,
+} from 'ant-design-vue';
+
+import { uploadTenantFileApi } from '#/api/files';
+
+import {
+  POINTS_MALL_EXCHANGE_TYPE_OPTIONS,
+  POINTS_MALL_NOTIFY_CHANNEL_OPTIONS,
+  POINTS_MALL_PICKUP_METHOD_OPTIONS,
+  POINTS_MALL_REDEEM_TYPE_HINT_MAP,
+  POINTS_MALL_REDEEM_TYPE_OPTIONS,
+} from '../composables/points-mall-page/constants';
+
+defineProps<{
+  canManage: boolean;
+  couponOptions: Array<{ label: string; value: string }>;
+  form: PointMallProductEditorForm;
+  loading: boolean;
+  open: boolean;
+  submitText: string;
+  submitting: boolean;
+  title: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'openProductPicker'): void;
+  (event: 'searchCoupon', keyword: string): void;
+  (event: 'setCashAmount', value: null | number): void;
+  (event: 'setCouponTemplateId', value: string): void;
+  (event: 'setDescription', value: string): void;
+  (event: 'setExchangeType', value: 'mixed' | 'points'): void;
+  (event: 'setImageUrl', value: string): void;
+  (event: 'setName', value: string): void;
+  (event: 'setPerMemberLimit', value: null | number): void;
+  (event: 'setPhysicalName', value: string): void;
+  (event: 'setPickupMethod', value: 'delivery' | 'store_pickup'): void;
+  (event: 'setRedeemType', value: 'coupon' | 'physical' | 'product'): void;
+  (event: 'setRequiredPoints', value: null | number): void;
+  (event: 'setStatus', value: 'disabled' | 'enabled'): void;
+  (event: 'setStockTotal', value: null | number): void;
+  (event: 'submit'): void;
+  (event: 'toggleNotifyChannel', value: 'in_app' | 'sms'): void;
+}>();
+
+const isUploading = ref(false);
+
+function parseNullableNumber(value: null | number | string) {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+
+function setRedeemType(value: unknown) {
+  if (value === 'product' || value === 'coupon' || value === 'physical') {
+    emit('setRedeemType', value);
+  }
+}
+
+function setExchangeType(value: unknown) {
+  if (value === 'points' || value === 'mixed') {
+    emit('setExchangeType', value);
+  }
+}
+
+function setPickupMethod(value: unknown) {
+  if (value === 'store_pickup' || value === 'delivery') {
+    emit('setPickupMethod', value);
+  }
+}
+
+function setStatusByChecked(checked: unknown) {
+  emit('setStatus', checked === true ? 'enabled' : 'disabled');
+}
+
+async function handleUploadChange(info: UploadChangeParam<UploadFile>) {
+  const rawFile = info.file.originFileObj;
+  if (!rawFile) {
+    return;
+  }
+
+  isUploading.value = true;
+  try {
+    const result = await uploadTenantFileApi(rawFile, 'dish_image');
+    if (result.url) {
+      emit('setImageUrl', result.url);
+      message.success('上传成功');
+    } else {
+      message.error('上传失败');
+    }
+  } catch (error) {
+    console.error(error);
+    message.error('上传失败');
+  } finally {
+    isUploading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Drawer
+    :open="open"
+    :title="title"
+    width="560"
+    class="mpm-editor-drawer"
+    @close="emit('close')"
+  >
+    <Form layout="vertical">
+      <Form.Item label="兑换类型" required>
+        <div class="mpm-pill-row">
+          <button
+            v-for="item in POINTS_MALL_REDEEM_TYPE_OPTIONS"
+            :key="item.value"
+            type="button"
+            class="mpm-pill"
+            :class="{ checked: form.redeemType === item.value }"
+            :disabled="!canManage || loading"
+            @click="setRedeemType(item.value)"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+        <div class="mpm-form-hint">
+          {{ POINTS_MALL_REDEEM_TYPE_HINT_MAP[form.redeemType] }}
+        </div>
+      </Form.Item>
+
+      <template v-if="form.redeemType === 'product'">
+        <Form.Item label="关联商品" required>
+          <div v-if="form.productId" class="mpm-selected-product">
+            <span class="name">{{ form.productName || form.productId }}</span>
+            <span class="id">ID: {{ form.productId }}</span>
+          </div>
+          <Button
+            :disabled="!canManage || loading"
+            @click="emit('openProductPicker')"
+          >
+            选择商品/套餐
+          </Button>
+          <div class="mpm-form-hint">兑换后系统自动生成该商品的兑换券</div>
+        </Form.Item>
+      </template>
+
+      <template v-else-if="form.redeemType === 'coupon'">
+        <Form.Item label="关联优惠券" required>
+          <Select
+            :value="form.couponTemplateId || undefined"
+            :options="couponOptions"
+            show-search
+            :filter-option="false"
+            :disabled="!canManage || loading"
+            placeholder="请选择优惠券"
+            @search="(value) => emit('searchCoupon', String(value ?? ''))"
+            @update:value="
+              (value) => emit('setCouponTemplateId', String(value ?? ''))
+            "
+          />
+          <div class="mpm-form-hint">
+            选择已在优惠券管理中创建的券，兑换后直接发到顾客券包
+          </div>
+        </Form.Item>
+      </template>
+
+      <template v-else>
+        <Form.Item label="实物名称" required>
+          <Input
+            :value="form.physicalName"
+            :maxlength="64"
+            :disabled="!canManage || loading"
+            placeholder="如：定制保温杯、品牌帆布袋"
+            @update:value="
+              (value) => emit('setPhysicalName', String(value ?? ''))
+            "
+          />
+        </Form.Item>
+        <Form.Item label="领取方式">
+          <div class="mpm-pill-row">
+            <button
+              v-for="item in POINTS_MALL_PICKUP_METHOD_OPTIONS"
+              :key="item.value"
+              type="button"
+              class="mpm-pill"
+              :class="{ checked: form.pickupMethod === item.value }"
+              :disabled="!canManage || loading"
+              @click="setPickupMethod(item.value)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </Form.Item>
+      </template>
+
+      <Form.Item label="展示名称" required>
+        <Input
+          :value="form.name"
+          :maxlength="64"
+          :disabled="!canManage || loading"
+          placeholder="如：招牌奶茶兑换券、满50减15券"
+          @update:value="(value) => emit('setName', String(value ?? ''))"
+        />
+        <div class="mpm-form-hint">顾客在积分商城看到的名称</div>
+      </Form.Item>
+
+      <Form.Item label="展示图片">
+        <div class="mpm-image-field">
+          <img
+            v-if="form.imageUrl"
+            class="mpm-image-preview"
+            :src="form.imageUrl"
+            alt="points-product"
+          />
+          <Upload
+            :show-upload-list="false"
+            :before-upload="() => false"
+            :disabled="!canManage || loading || isUploading"
+            @change="handleUploadChange"
+          >
+            <Button :loading="isUploading" :disabled="!canManage || loading">
+              <IconifyIcon icon="lucide:upload-cloud" />
+              {{ form.imageUrl ? '重新上传' : '点击上传商品图片' }}
+            </Button>
+          </Upload>
+        </div>
+      </Form.Item>
+
+      <Form.Item label="兑换方式" required>
+        <div class="mpm-pill-row">
+          <button
+            v-for="item in POINTS_MALL_EXCHANGE_TYPE_OPTIONS"
+            :key="item.value"
+            type="button"
+            class="mpm-pill"
+            :class="{ checked: form.exchangeType === item.value }"
+            :disabled="!canManage || loading"
+            @click="setExchangeType(item.value)"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+      </Form.Item>
+
+      <Form.Item label="所需积分" required>
+        <InputNumber
+          :value="form.requiredPoints ?? undefined"
+          :min="0"
+          :precision="0"
+          :disabled="!canManage || loading"
+          style="width: 100%"
+          placeholder="请输入所需积分数量"
+          @update:value="
+            (value) => emit('setRequiredPoints', parseNullableNumber(value))
+          "
+        />
+      </Form.Item>
+
+      <Form.Item v-if="form.exchangeType === 'mixed'" label="现金部分" required>
+        <InputNumber
+          :value="form.cashAmount ?? undefined"
+          :min="0"
+          :precision="2"
+          :disabled="!canManage || loading"
+          style="width: 100%"
+          placeholder="请输入需额外支付的金额"
+          @update:value="
+            (value) => emit('setCashAmount', parseNullableNumber(value))
+          "
+        />
+        <div class="mpm-form-hint">用户兑换时需额外支付的现金金额</div>
+      </Form.Item>
+
+      <Form.Item label="库存数量" required>
+        <InputNumber
+          :value="form.stockTotal ?? undefined"
+          :min="0"
+          :precision="0"
+          :disabled="!canManage || loading"
+          style="width: 100%"
+          placeholder="请输入库存数量"
+          @update:value="
+            (value) => emit('setStockTotal', parseNullableNumber(value))
+          "
+        />
+      </Form.Item>
+
+      <Form.Item label="兑换限制">
+        <div class="mpm-inline-fields">
+          <span>每人限兑</span>
+          <InputNumber
+            :value="form.perMemberLimit ?? undefined"
+            :min="0"
+            :precision="0"
+            :disabled="!canManage || loading"
+            placeholder="不限"
+            @update:value="
+              (value) => emit('setPerMemberLimit', parseNullableNumber(value))
+            "
+          />
+          <span>次</span>
+        </div>
+        <div class="mpm-form-hint">留空或填0表示不限制兑换次数</div>
+      </Form.Item>
+
+      <Form.Item label="商品描述">
+        <Input.TextArea
+          :value="form.description"
+          :maxlength="512"
+          :rows="4"
+          :disabled="!canManage || loading"
+          placeholder="请输入商品描述信息，如使用规则、有效期等"
+          @update:value="(value) => emit('setDescription', String(value ?? ''))"
+        />
+      </Form.Item>
+
+      <Form.Item label="到账通知">
+        <div class="mpm-pill-row">
+          <button
+            v-for="item in POINTS_MALL_NOTIFY_CHANNEL_OPTIONS"
+            :key="item.value"
+            type="button"
+            class="mpm-pill"
+            :class="{ checked: form.notifyChannels.includes(item.value) }"
+            :disabled="!canManage || loading"
+            @click="emit('toggleNotifyChannel', item.value)"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+        <div class="mpm-form-hint">
+          选择兑换成功后通知顾客的方式，实物商品建议开启短信通知
+        </div>
+      </Form.Item>
+
+      <Form.Item label="上架状态">
+        <div class="mpm-inline-fields">
+          <Switch
+            :checked="form.status === 'enabled'"
+            :disabled="!canManage || loading"
+            @change="setStatusByChecked"
+          />
+          <span class="mpm-form-hint">
+            {{ form.status === 'enabled' ? '当前上架中' : '当前已下架' }}
+          </span>
+        </div>
+      </Form.Item>
+    </Form>
+
+    <template #footer>
+      <div class="mpm-drawer-footer">
+        <Button @click="emit('close')">取消</Button>
+        <Button
+          type="primary"
+          :loading="submitting"
+          :disabled="!canManage || loading"
+          @click="emit('submit')"
+        >
+          {{ submitText }}
+        </Button>
+      </div>
+    </template>
+  </Drawer>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallProductPickerModal.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ProductPickerItemDto } from '#/api/product';
+
+import { Empty, Input, Modal, Spin } from 'ant-design-vue';
+
+defineProps<{
+  keyword: string;
+  loading: boolean;
+  open: boolean;
+  rows: ProductPickerItemDto[];
+  selectedId: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'search'): void;
+  (event: 'select', value: string): void;
+  (event: 'setKeyword', value: string): void;
+  (event: 'submit'): void;
+}>();
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    title="选择兑换商品"
+    width="760px"
+    ok-text="确认选择"
+    cancel-text="取消"
+    @ok="emit('submit')"
+    @cancel="emit('close')"
+  >
+    <div class="mpm-picker-toolbar">
+      <Input
+        :value="keyword"
+        allow-clear
+        placeholder="搜索商品名称/SPU"
+        @update:value="(value) => emit('setKeyword', String(value ?? ''))"
+        @press-enter="emit('search')"
+      />
+      <button type="button" class="g-btn g-btn-sm" @click="emit('search')">
+        搜索
+      </button>
+    </div>
+
+    <Spin :spinning="loading">
+      <div v-if="rows.length === 0" class="mpm-picker-empty">
+        <Empty description="暂无可选商品" />
+      </div>
+      <div v-else class="mpm-picker-table-wrap">
+        <table class="mpm-picker-table">
+          <thead>
+            <tr>
+              <th class="col-radio"></th>
+              <th>商品</th>
+              <th>分类</th>
+              <th class="col-price">售价</th>
+              <th class="col-status">状态</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="item in rows"
+              :key="item.id"
+              :class="{ checked: selectedId === item.id }"
+              @click="emit('select', item.id)"
+            >
+              <td class="col-radio">
+                <input
+                  type="radio"
+                  name="mpm-product-picker"
+                  :checked="selectedId === item.id"
+                  @change.stop="emit('select', item.id)"
+                />
+              </td>
+              <td>
+                <div class="name">{{ item.name }}</div>
+                <div class="spu">{{ item.spuCode }}</div>
+              </td>
+              <td>{{ item.categoryName }}</td>
+              <td class="col-price">¥{{ item.price.toFixed(2) }}</td>
+              <td class="col-status">{{ item.status }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Spin>
+  </Modal>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallProductToolbar.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { PointMallProductFilterForm } from '../types';
+
+import { Button, Input, Select } from 'ant-design-vue';
+
+import { POINTS_MALL_PRODUCT_STATUS_FILTER_OPTIONS } from '../composables/points-mall-page/constants';
+
+defineProps<{
+  canManage: boolean;
+  filters: PointMallProductFilterForm;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'create'): void;
+  (event: 'reset'): void;
+  (event: 'search'): void;
+  (event: 'setKeyword', value: string): void;
+  (event: 'setStatus', value: '' | 'disabled' | 'enabled'): void;
+}>();
+
+function setStatus(value: unknown) {
+  if (value === '' || value === 'enabled' || value === 'disabled') {
+    emit('setStatus', value);
+    return;
+  }
+  emit('setStatus', '');
+}
+</script>
+
+<template>
+  <div class="mpm-toolbar">
+    <Select
+      class="mpm-filter-select"
+      :value="filters.status"
+      :options="POINTS_MALL_PRODUCT_STATUS_FILTER_OPTIONS"
+      :disabled="loading"
+      @update:value="setStatus"
+    />
+
+    <Input
+      class="mpm-search-input"
+      :value="filters.keyword"
+      :disabled="loading"
+      placeholder="搜索兑换商品"
+      allow-clear
+      @update:value="(value) => emit('setKeyword', String(value ?? ''))"
+      @press-enter="emit('search')"
+    />
+
+    <Button :disabled="loading" @click="emit('search')">搜索</Button>
+    <Button :disabled="loading" @click="emit('reset')">重置</Button>
+
+    <span class="mpm-spacer"></span>
+    <Button
+      type="primary"
+      :disabled="!canManage || loading"
+      @click="emit('create')"
+    >
+      添加兑换商品
+    </Button>
+  </div>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallRecordDetailDrawer.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { PointMallRecordDetailViewModel } from '../types';
+
+import { Drawer, Spin } from 'ant-design-vue';
+
+import {
+  POINTS_MALL_RECORD_STATUS_CLASS_MAP,
+  POINTS_MALL_REDEEM_TYPE_CLASS_MAP,
+} from '../composables/points-mall-page/constants';
+import {
+  formatCurrency,
+  formatPoints,
+} from '../composables/points-mall-page/helpers';
+
+defineProps<{
+  loading: boolean;
+  open: boolean;
+  record: null | PointMallRecordDetailViewModel;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+</script>
+
+<template>
+  <Drawer
+    :open="open"
+    title="兑换详情"
+    width="520"
+    class="mpm-detail-drawer"
+    @close="emit('close')"
+  >
+    <Spin :spinning="loading">
+      <div v-if="record" class="mpm-detail-content">
+        <div class="mpm-detail-top">
+          <div class="name">{{ record.productName }}</div>
+          <span
+            class="mpm-type-tag"
+            :class="POINTS_MALL_REDEEM_TYPE_CLASS_MAP[record.redeemType]"
+          >
+            {{ record.redeemTypeText }}
+          </span>
+        </div>
+
+        <div class="mpm-detail-grid">
+          <div class="item">
+            <span class="label">兑换单号</span>
+            <span class="value mono">{{ record.recordNo }}</span>
+          </div>
+          <div class="item">
+            <span class="label">状态</span>
+            <span
+              class="value mpm-record-status"
+              :class="POINTS_MALL_RECORD_STATUS_CLASS_MAP[record.status]"
+            >
+              {{ record.statusText }}
+            </span>
+          </div>
+          <div class="item">
+            <span class="label">会员</span>
+            <span class="value">{{ record.memberName }}</span>
+          </div>
+          <div class="item">
+            <span class="label">手机号</span>
+            <span class="value">{{ record.memberMobileMasked }}</span>
+          </div>
+          <div class="item">
+            <span class="label">消耗积分</span>
+            <span class="value">{{ formatPoints(record.usedPoints) }}</span>
+          </div>
+          <div class="item">
+            <span class="label">现金部分</span>
+            <span class="value">{{ formatCurrency(record.cashAmount) }}</span>
+          </div>
+          <div class="item">
+            <span class="label">兑换时间</span>
+            <span class="value">{{ record.redeemedAt }}</span>
+          </div>
+          <div class="item">
+            <span class="label">发放时间</span>
+            <span class="value">{{ record.issuedAt || '-' }}</span>
+          </div>
+          <div class="item">
+            <span class="label">核销时间</span>
+            <span class="value">{{ record.verifiedAt || '-' }}</span>
+          </div>
+          <div class="item">
+            <span class="label">核销方式</span>
+            <span class="value">{{ record.verifyMethodText || '-' }}</span>
+          </div>
+          <div class="item">
+            <span class="label">核销备注</span>
+            <span class="value">{{ record.verifyRemark || '-' }}</span>
+          </div>
+          <div class="item">
+            <span class="label">核销人</span>
+            <span class="value">{{ record.verifiedBy || '-' }}</span>
+          </div>
+        </div>
+      </div>
+      <div v-else class="mpm-empty-tip">暂无记录详情</div>
+    </Spin>
+  </Drawer>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallRecordStatsCards.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { PointMallRecordStatsViewModel } from '../types';
+
+import { formatInteger } from '../composables/points-mall-page/helpers';
+
+defineProps<{
+  stats: PointMallRecordStatsViewModel;
+}>();
+</script>
+
+<template>
+  <div class="mpm-stats mpm-record-stats">
+    <div class="mpm-stat-card">
+      <div class="mpm-stat-label">今日兑换</div>
+      <div class="mpm-stat-value is-primary">
+        {{ formatInteger(stats.todayRedeemCount) }}
+      </div>
+    </div>
+    <div class="mpm-stat-card">
+      <div class="mpm-stat-label">待领取实物</div>
+      <div class="mpm-stat-value is-orange">
+        {{ formatInteger(stats.pendingPhysicalCount) }}
+      </div>
+    </div>
+    <div class="mpm-stat-card">
+      <div class="mpm-stat-label">本月消耗积分</div>
+      <div class="mpm-stat-value">
+        {{ formatInteger(stats.currentMonthUsedPoints) }}
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallRecordTable.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { TableColumnType } from 'ant-design-vue';
+
+import type { PointMallRecordPager } from '../types';
+
+import type { MemberPointMallRecordDto } from '#/api/member/points-mall';
+
+import { Pagination, Table } from 'ant-design-vue';
+
+import {
+  POINTS_MALL_RECORD_STATUS_CLASS_MAP,
+  POINTS_MALL_REDEEM_TYPE_CLASS_MAP,
+} from '../composables/points-mall-page/constants';
+import { formatPoints } from '../composables/points-mall-page/helpers';
+
+defineProps<{
+  canManage: boolean;
+  loading: boolean;
+  pager: PointMallRecordPager;
+}>();
+
+const emit = defineEmits<{
+  (event: 'detail', recordId: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+  (event: 'verify', recordId: string): void;
+}>();
+
+const columns: TableColumnType<MemberPointMallRecordDto>[] = [
+  {
+    title: '兑换单号',
+    dataIndex: 'recordNo',
+    key: 'recordNo',
+    width: 190,
+  },
+  {
+    title: '会员',
+    dataIndex: 'memberName',
+    key: 'memberName',
+    width: 160,
+  },
+  {
+    title: '兑换商品',
+    dataIndex: 'productName',
+    key: 'productName',
+    width: 180,
+  },
+  {
+    title: '类型',
+    dataIndex: 'redeemTypeText',
+    key: 'redeemTypeText',
+    width: 120,
+  },
+  {
+    title: '消耗积分',
+    dataIndex: 'usedPoints',
+    key: 'usedPoints',
+    width: 120,
+  },
+  {
+    title: '兑换时间',
+    dataIndex: 'redeemedAt',
+    key: 'redeemedAt',
+    width: 180,
+  },
+  {
+    title: '状态',
+    dataIndex: 'statusText',
+    key: 'statusText',
+    width: 130,
+  },
+  {
+    title: '操作',
+    dataIndex: 'actions',
+    key: 'actions',
+    width: 120,
+    fixed: 'right',
+  },
+];
+
+function canVerify(record: MemberPointMallRecordDto, canManage: boolean) {
+  return (
+    canManage &&
+    record.redeemType === 'physical' &&
+    record.status === 'pending_pickup'
+  );
+}
+
+function asRecord(record: unknown) {
+  return record as MemberPointMallRecordDto;
+}
+</script>
+
+<template>
+  <div class="mpm-record-table-wrap">
+    <Table
+      row-key="recordId"
+      :columns="columns"
+      :loading="loading"
+      :pagination="false"
+      :data-source="pager.items"
+      :scroll="{ x: 1180 }"
+      class="mpm-record-table"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'recordNo'">
+          <div class="mpm-record-no">{{ record.recordNo }}</div>
+        </template>
+
+        <template v-else-if="column.key === 'memberName'">
+          <div class="mpm-record-member">
+            <span class="name">{{ record.memberName }}</span>
+            <span class="phone">{{ record.memberMobileMasked }}</span>
+          </div>
+        </template>
+
+        <template v-else-if="column.key === 'redeemTypeText'">
+          <span
+            class="mpm-type-tag"
+            :class="
+              POINTS_MALL_REDEEM_TYPE_CLASS_MAP[asRecord(record).redeemType]
+            "
+          >
+            {{ asRecord(record).redeemTypeText }}
+          </span>
+        </template>
+
+        <template v-else-if="column.key === 'usedPoints'">
+          <span class="mpm-record-points">
+            {{ formatPoints(asRecord(record).usedPoints) }}
+          </span>
+        </template>
+
+        <template v-else-if="column.key === 'statusText'">
+          <span
+            class="mpm-record-status"
+            :class="
+              POINTS_MALL_RECORD_STATUS_CLASS_MAP[asRecord(record).status]
+            "
+          >
+            {{ asRecord(record).statusText }}
+          </span>
+        </template>
+
+        <template v-else-if="column.key === 'actions'">
+          <button
+            v-if="canVerify(asRecord(record), canManage)"
+            type="button"
+            class="g-action"
+            @click="emit('verify', asRecord(record).recordId)"
+          >
+            核销
+          </button>
+          <button
+            type="button"
+            class="g-action"
+            @click="emit('detail', asRecord(record).recordId)"
+          >
+            详情
+          </button>
+        </template>
+      </template>
+    </Table>
+
+    <div class="mpm-pagination">
+      <Pagination
+        :current="pager.page"
+        :page-size="pager.pageSize"
+        :total="pager.totalCount"
+        show-size-changer
+        :show-total="(value) => `共 ${value} 条`"
+        :page-size-options="['10', '20', '50', '100']"
+        @change="(page, pageSize) => emit('pageChange', page, pageSize)"
+      />
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallRecordToolbar.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { PointMallRecordFilterForm } from '../types';
+
+import { Button, Input, Select } from 'ant-design-vue';
+
+import {
+  POINTS_MALL_RECORD_REDEEM_FILTER_OPTIONS,
+  POINTS_MALL_RECORD_STATUS_FILTER_OPTIONS,
+} from '../composables/points-mall-page/constants';
+
+defineProps<{
+  canManage: boolean;
+  exporting: boolean;
+  filters: PointMallRecordFilterForm;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'export'): void;
+  (event: 'reset'): void;
+  (event: 'search'): void;
+  (event: 'setKeyword', value: string): void;
+  (event: 'setRedeemType', value: '' | 'coupon' | 'physical' | 'product'): void;
+  (
+    event: 'setStatus',
+    value: '' | 'canceled' | 'completed' | 'issued' | 'pending_pickup',
+  ): void;
+}>();
+
+function setRedeemType(value: unknown) {
+  if (
+    value === '' ||
+    value === 'product' ||
+    value === 'coupon' ||
+    value === 'physical'
+  ) {
+    emit('setRedeemType', value);
+    return;
+  }
+  emit('setRedeemType', '');
+}
+
+function setStatus(value: unknown) {
+  if (
+    value === '' ||
+    value === 'pending_pickup' ||
+    value === 'issued' ||
+    value === 'completed' ||
+    value === 'canceled'
+  ) {
+    emit('setStatus', value);
+    return;
+  }
+  emit('setStatus', '');
+}
+</script>
+
+<template>
+  <div class="mpm-toolbar">
+    <Select
+      class="mpm-filter-select"
+      :value="filters.redeemType"
+      :disabled="loading"
+      :options="POINTS_MALL_RECORD_REDEEM_FILTER_OPTIONS"
+      @update:value="setRedeemType"
+    />
+
+    <Select
+      class="mpm-filter-select"
+      :value="filters.status"
+      :disabled="loading"
+      :options="POINTS_MALL_RECORD_STATUS_FILTER_OPTIONS"
+      @update:value="setStatus"
+    />
+
+    <Input
+      class="mpm-search-input"
+      :value="filters.keyword"
+      :disabled="loading"
+      allow-clear
+      placeholder="搜索会员/商品名称"
+      @update:value="(value) => emit('setKeyword', String(value ?? ''))"
+      @press-enter="emit('search')"
+    />
+
+    <Button :disabled="loading" @click="emit('search')">搜索</Button>
+    <Button :disabled="loading" @click="emit('reset')">重置</Button>
+
+    <span class="mpm-spacer"></span>
+
+    <Button
+      :loading="exporting"
+      :disabled="!canManage || loading"
+      @click="emit('export')"
+    >
+      导出
+    </Button>
+  </div>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallRulePanel.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import type { PointMallRuleForm } from '../types';
+
+import { Button, Card, InputNumber, Switch } from 'ant-design-vue';
+
+defineProps<{
+  canManage: boolean;
+  form: PointMallRuleForm;
+  loading: boolean;
+  submitting: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'save'): void;
+  (event: 'setConsumeAmountPerStep', value: null | number): void;
+  (event: 'setConsumeRewardEnabled', value: boolean): void;
+  (event: 'setConsumeRewardPointsPerStep', value: null | number): void;
+  (event: 'setExpiryMode', value: 'permanent' | 'yearly_clear'): void;
+  (event: 'setRegisterRewardEnabled', value: boolean): void;
+  (event: 'setRegisterRewardPoints', value: null | number): void;
+  (event: 'setReviewRewardEnabled', value: boolean): void;
+  (event: 'setReviewRewardPoints', value: null | number): void;
+  (event: 'setSigninRewardEnabled', value: boolean): void;
+  (event: 'setSigninRewardPoints', value: null | number): void;
+}>();
+
+function parseNullableNumber(value: null | number | string) {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+</script>
+
+<template>
+  <div class="mpm-rule-panel">
+    <Card class="mpm-card">
+      <div class="mpm-section-title">积分获取规则</div>
+
+      <div class="mpm-rule-row">
+        <Switch
+          :checked="form.isConsumeRewardEnabled"
+          :disabled="!canManage || loading"
+          @change="(value) => emit('setConsumeRewardEnabled', Boolean(value))"
+        />
+        <span class="mpm-rule-label">消费获取</span>
+        <span class="mpm-rule-text">每消费</span>
+        <InputNumber
+          :value="form.consumeAmountPerStep ?? undefined"
+          :disabled="!canManage || loading"
+          :min="0"
+          :precision="0"
+          class="mpm-rule-input"
+          @update:value="
+            (value) =>
+              emit('setConsumeAmountPerStep', parseNullableNumber(value))
+          "
+        />
+        <span class="mpm-rule-text">元获得</span>
+        <InputNumber
+          :value="form.consumeRewardPointsPerStep ?? undefined"
+          :disabled="!canManage || loading"
+          :min="0"
+          :precision="0"
+          class="mpm-rule-input"
+          @update:value="
+            (value) =>
+              emit('setConsumeRewardPointsPerStep', parseNullableNumber(value))
+          "
+        />
+        <span class="mpm-rule-text">积分</span>
+      </div>
+
+      <div class="mpm-rule-row">
+        <Switch
+          :checked="form.isReviewRewardEnabled"
+          :disabled="!canManage || loading"
+          @change="(value) => emit('setReviewRewardEnabled', Boolean(value))"
+        />
+        <span class="mpm-rule-label">评价奖励</span>
+        <span class="mpm-rule-text">发表评价奖励</span>
+        <InputNumber
+          :value="form.reviewRewardPoints ?? undefined"
+          :disabled="!canManage || loading"
+          :min="0"
+          :precision="0"
+          class="mpm-rule-input"
+          @update:value="
+            (value) => emit('setReviewRewardPoints', parseNullableNumber(value))
+          "
+        />
+        <span class="mpm-rule-text">积分</span>
+      </div>
+
+      <div class="mpm-rule-row">
+        <Switch
+          :checked="form.isRegisterRewardEnabled"
+          :disabled="!canManage || loading"
+          @change="(value) => emit('setRegisterRewardEnabled', Boolean(value))"
+        />
+        <span class="mpm-rule-label">注册奖励</span>
+        <span class="mpm-rule-text">新用户注册赠送</span>
+        <InputNumber
+          :value="form.registerRewardPoints ?? undefined"
+          :disabled="!canManage || loading"
+          :min="0"
+          :precision="0"
+          class="mpm-rule-input"
+          @update:value="
+            (value) =>
+              emit('setRegisterRewardPoints', parseNullableNumber(value))
+          "
+        />
+        <span class="mpm-rule-text">积分</span>
+      </div>
+
+      <div class="mpm-rule-row">
+        <Switch
+          :checked="form.isSigninRewardEnabled"
+          :disabled="!canManage || loading"
+          @change="(value) => emit('setSigninRewardEnabled', Boolean(value))"
+        />
+        <span class="mpm-rule-label">签到奖励</span>
+        <span class="mpm-rule-text">每日签到奖励</span>
+        <InputNumber
+          :value="form.signinRewardPoints ?? undefined"
+          :disabled="!canManage || loading"
+          :min="0"
+          :precision="0"
+          class="mpm-rule-input"
+          @update:value="
+            (value) => emit('setSigninRewardPoints', parseNullableNumber(value))
+          "
+        />
+        <span class="mpm-rule-text">积分</span>
+      </div>
+    </Card>
+
+    <Card class="mpm-card">
+      <div class="mpm-section-title">积分有效期</div>
+      <div class="mpm-pill-row">
+        <button
+          type="button"
+          class="mpm-pill"
+          :class="{ checked: form.expiryMode === 'permanent' }"
+          :disabled="!canManage || loading"
+          @click="emit('setExpiryMode', 'permanent')"
+        >
+          永久有效
+        </button>
+        <button
+          type="button"
+          class="mpm-pill"
+          :class="{ checked: form.expiryMode === 'yearly_clear' }"
+          :disabled="!canManage || loading"
+          @click="emit('setExpiryMode', 'yearly_clear')"
+        >
+          按年清零
+        </button>
+      </div>
+      <div v-if="form.expiryMode === 'yearly_clear'" class="mpm-form-hint">
+        每年12月31日清零当年获得的积分，请提前通知会员
+      </div>
+    </Card>
+
+    <div class="mpm-save-bar">
+      <Button
+        type="primary"
+        size="large"
+        :loading="submitting"
+        :disabled="!canManage || loading"
+        @click="emit('save')"
+      >
+        保存规则
+      </Button>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallRuleStatsCards.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PointMallRuleStatsViewModel } from '../types';
+
+import { formatInteger } from '../composables/points-mall-page/helpers';
+
+defineProps<{
+  stats: PointMallRuleStatsViewModel;
+}>();
+</script>
+
+<template>
+  <div class="mpm-stats mpm-rule-stats">
+    <div class="mpm-stat-card">
+      <div class="mpm-stat-label">累计发放积分</div>
+      <div class="mpm-stat-value is-primary">
+        {{ formatInteger(stats.totalIssuedPoints) }}
+      </div>
+    </div>
+    <div class="mpm-stat-card">
+      <div class="mpm-stat-label">已兑换积分</div>
+      <div class="mpm-stat-value is-orange">
+        {{ formatInteger(stats.redeemedPoints) }}
+      </div>
+    </div>
+    <div class="mpm-stat-card">
+      <div class="mpm-stat-label">积分用户</div>
+      <div class="mpm-stat-value">
+        {{ formatInteger(stats.pointMembers) }} 人
+      </div>
+    </div>
+    <div class="mpm-stat-card">
+      <div class="mpm-stat-label">兑换率</div>
+      <div class="mpm-stat-value is-green">
+        {{ Number(stats.redeemRate ?? 0).toFixed(1) }}%
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/member/points-mall/components/PointsMallVerifyDrawer.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type {
+  PointMallRecordDetailViewModel,
+  PointMallVerifyForm,
+} from '../types';
+
+import { Drawer, Form, Input } from 'ant-design-vue';
+
+import {
+  POINTS_MALL_REDEEM_TYPE_CLASS_MAP,
+  POINTS_MALL_VERIFY_METHOD_OPTIONS,
+} from '../composables/points-mall-page/constants';
+import { formatPoints } from '../composables/points-mall-page/helpers';
+
+defineProps<{
+  canManage: boolean;
+  form: PointMallVerifyForm;
+  loading: boolean;
+  open: boolean;
+  record: null | PointMallRecordDetailViewModel;
+  submitting: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'setVerifyMethod', value: 'manual' | 'scan'): void;
+  (event: 'setVerifyRemark', value: string): void;
+  (event: 'submit'): void;
+}>();
+
+function resolveMemberText(record: PointMallRecordDetailViewModel) {
+  return `${record.memberName} (${record.memberMobileMasked})`;
+}
+</script>
+
+<template>
+  <Drawer
+    :open="open"
+    title="兑换核销"
+    width="460"
+    class="mpm-verify-drawer"
+    @close="emit('close')"
+  >
+    <div v-if="record" class="mpm-verify-content">
+      <div class="mpm-verify-card">
+        <div class="mpm-verify-product">
+          <div class="name">{{ record.productName }}</div>
+          <span
+            class="mpm-type-tag"
+            :class="POINTS_MALL_REDEEM_TYPE_CLASS_MAP[record.redeemType]"
+          >
+            {{ record.redeemTypeText }}
+          </span>
+        </div>
+        <div class="mpm-verify-grid">
+          <div class="item">
+            <span class="label">兑换单号</span>
+            <span class="value mono">{{ record.recordNo }}</span>
+          </div>
+          <div class="item">
+            <span class="label">消耗积分</span>
+            <span class="value is-primary">{{
+              formatPoints(record.usedPoints)
+            }}</span>
+          </div>
+          <div class="item">
+            <span class="label">兑换会员</span>
+            <span class="value">{{ resolveMemberText(record) }}</span>
+          </div>
+          <div class="item">
+            <span class="label">兑换时间</span>
+            <span class="value">{{ record.redeemedAt }}</span>
+          </div>
+        </div>
+      </div>
+
+      <Form layout="vertical">
+        <Form.Item label="核销方式">
+          <div class="mpm-pill-row">
+            <button
+              v-for="item in POINTS_MALL_VERIFY_METHOD_OPTIONS"
+              :key="item.value"
+              type="button"
+              class="mpm-pill"
+              :class="{ checked: form.verifyMethod === item.value }"
+              :disabled="!canManage || loading"
+              @click="emit('setVerifyMethod', item.value)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </Form.Item>
+
+        <Form.Item label="核销备注">
+          <Input.TextArea
+            :value="form.verifyRemark"
+            :rows="3"
+            :maxlength="256"
+            :disabled="!canManage || loading"
+            placeholder="可选，如：顾客已到店领取"
+            @update:value="
+              (value) => emit('setVerifyRemark', String(value ?? ''))
+            "
+          />
+        </Form.Item>
+      </Form>
+    </div>
+
+    <template #footer>
+      <div class="mpm-drawer-footer">
+        <button type="button" class="g-btn" @click="emit('close')">取消</button>
+        <button
+          type="button"
+          class="g-btn g-btn-primary"
+          :disabled="!canManage || loading || submitting"
+          @click="emit('submit')"
+        >
+          确认核销
+        </button>
+      </div>
+    </template>
+  </Drawer>
+</template>

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

@@ -0,0 +1,147 @@
+import type {
+  MemberPointMallExchangeType,
+  MemberPointMallNotifyChannel,
+  MemberPointMallPickupMethod,
+  MemberPointMallProductStatus,
+  MemberPointMallRecordStatus,
+  MemberPointMallRedeemType,
+  MemberPointMallVerifyMethod,
+} from '#/api/member/points-mall';
+import type { PointMallTabKey } from '#/views/member/points-mall/types';
+
+/** 积分商城查看权限。 */
+export const MEMBER_POINTS_MALL_VIEW_PERMISSION =
+  'tenant:member:points-mall:view';
+
+/** 积分商城管理权限。 */
+export const MEMBER_POINTS_MALL_MANAGE_PERMISSION =
+  'tenant:member:points-mall:manage';
+
+/** 页面 Tab 选项。 */
+export const POINTS_MALL_TAB_OPTIONS: Array<{
+  label: string;
+  value: PointMallTabKey;
+}> = [
+  { label: '积分规则', value: 'rules' },
+  { label: '兑换商品', value: 'products' },
+  { label: '兑换记录', value: 'records' },
+];
+
+/** 商品状态筛选。 */
+export const POINTS_MALL_PRODUCT_STATUS_FILTER_OPTIONS: Array<{
+  label: string;
+  value: '' | MemberPointMallProductStatus;
+}> = [
+  { label: '全部状态', value: '' },
+  { label: '上架', value: 'enabled' },
+  { label: '下架', value: 'disabled' },
+];
+
+/** 记录类型筛选。 */
+export const POINTS_MALL_RECORD_REDEEM_FILTER_OPTIONS: Array<{
+  label: string;
+  value: '' | MemberPointMallRedeemType;
+}> = [
+  { label: '全部类型', value: '' },
+  { label: '兑换商品', value: 'product' },
+  { label: '兑换优惠券', value: 'coupon' },
+  { label: '兑换实物', value: 'physical' },
+];
+
+/** 记录状态筛选。 */
+export const POINTS_MALL_RECORD_STATUS_FILTER_OPTIONS: Array<{
+  label: string;
+  value: '' | MemberPointMallRecordStatus;
+}> = [
+  { label: '全部状态', value: '' },
+  { label: '待领取', value: 'pending_pickup' },
+  { label: '已发放', value: 'issued' },
+  { label: '已完成', value: 'completed' },
+  { label: '已取消', value: 'canceled' },
+];
+
+/** 兑换类型选项。 */
+export const POINTS_MALL_REDEEM_TYPE_OPTIONS: Array<{
+  label: string;
+  value: MemberPointMallRedeemType;
+}> = [
+  { label: '兑换商品', value: 'product' },
+  { label: '兑换优惠券', value: 'coupon' },
+  { label: '兑换实物', value: 'physical' },
+];
+
+/** 兑换类型提示。 */
+export const POINTS_MALL_REDEEM_TYPE_HINT_MAP: Record<
+  MemberPointMallRedeemType,
+  string
+> = {
+  product: '顾客兑换后系统自动发放商品兑换券，下单时该商品免费',
+  coupon: '顾客兑换后优惠券直接发到券包',
+  physical: '实物商品需到店自提，不走线上履约',
+};
+
+/** 领取方式选项。 */
+export const POINTS_MALL_PICKUP_METHOD_OPTIONS: Array<{
+  label: string;
+  value: MemberPointMallPickupMethod;
+}> = [
+  { label: '到店自提', value: 'store_pickup' },
+  { label: '快递配送', value: 'delivery' },
+];
+
+/** 兑换方式选项。 */
+export const POINTS_MALL_EXCHANGE_TYPE_OPTIONS: Array<{
+  label: string;
+  value: MemberPointMallExchangeType;
+}> = [
+  { label: '纯积分', value: 'points' },
+  { label: '积分 + 现金', value: 'mixed' },
+];
+
+/** 通知渠道选项。 */
+export const POINTS_MALL_NOTIFY_CHANNEL_OPTIONS: Array<{
+  label: string;
+  value: MemberPointMallNotifyChannel;
+}> = [
+  { label: '站内消息', value: 'in_app' },
+  { label: '短信通知', value: 'sms' },
+];
+
+/** 核销方式选项。 */
+export const POINTS_MALL_VERIFY_METHOD_OPTIONS: Array<{
+  label: string;
+  value: MemberPointMallVerifyMethod;
+}> = [
+  { label: '扫码核销', value: 'scan' },
+  { label: '手动核销', value: 'manual' },
+];
+
+/** 商品状态文案。 */
+export const POINTS_MALL_PRODUCT_STATUS_TEXT_MAP: Record<
+  MemberPointMallProductStatus,
+  string
+> = {
+  enabled: '上架',
+  disabled: '下架',
+};
+
+/** 类型 Tag 样式。 */
+export const POINTS_MALL_REDEEM_TYPE_CLASS_MAP: Record<
+  MemberPointMallRedeemType,
+  'is-blue' | 'is-green' | 'is-orange'
+> = {
+  product: 'is-blue',
+  coupon: 'is-green',
+  physical: 'is-orange',
+};
+
+/** 记录状态样式。 */
+export const POINTS_MALL_RECORD_STATUS_CLASS_MAP: Record<
+  MemberPointMallRecordStatus,
+  'is-gray' | 'is-green' | 'is-orange' | 'is-red'
+> = {
+  pending_pickup: 'is-orange',
+  issued: 'is-green',
+  completed: 'is-green',
+  canceled: 'is-gray',
+};

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

@@ -0,0 +1,207 @@
+import type { Ref } from 'vue';
+
+import type { StoreListItemDto } from '#/api/store';
+import type {
+  PointMallProductCardViewModel,
+  PointMallProductFilterForm,
+  PointMallRecordFilterForm,
+  PointMallRecordPager,
+  PointMallRecordStatsViewModel,
+  PointMallRuleForm,
+  PointMallRuleStatsViewModel,
+} from '#/views/member/points-mall/types';
+
+import { message } from 'ant-design-vue';
+
+import {
+  getMemberPointMallProductListApi,
+  getMemberPointMallRecordListApi,
+  getMemberPointMallRuleDetailApi,
+} from '#/api/member/points-mall';
+import { getStoreListApi } from '#/api/store';
+
+import { mapRecordFilterToQuery, mapRuleToForm } from './helpers';
+
+interface CreateDataActionsOptions {
+  isProductLoading: Ref<boolean>;
+  isRecordLoading: Ref<boolean>;
+  isRuleLoading: Ref<boolean>;
+  isStoreLoading: Ref<boolean>;
+  productFilterForm: PointMallProductFilterForm;
+  productRows: Ref<PointMallProductCardViewModel[]>;
+  recordFilterForm: PointMallRecordFilterForm;
+  recordPager: Ref<PointMallRecordPager>;
+  recordStats: Ref<PointMallRecordStatsViewModel>;
+  ruleForm: PointMallRuleForm;
+  ruleStats: Ref<PointMallRuleStatsViewModel>;
+  selectedStoreId: Ref<string>;
+  stores: Ref<StoreListItemDto[]>;
+}
+
+export function createDataActions(options: CreateDataActionsOptions) {
+  function resetRuleData() {
+    options.ruleStats.value = {
+      totalIssuedPoints: 0,
+      redeemedPoints: 0,
+      pointMembers: 0,
+      redeemRate: 0,
+    };
+  }
+
+  function resetProductData() {
+    options.productRows.value = [];
+  }
+
+  function resetRecordData() {
+    options.recordPager.value = {
+      ...options.recordPager.value,
+      items: [],
+      totalCount: 0,
+    };
+    options.recordStats.value = {
+      todayRedeemCount: 0,
+      pendingPhysicalCount: 0,
+      currentMonthUsedPoints: 0,
+    };
+  }
+
+  async function loadStores() {
+    options.isStoreLoading.value = true;
+    try {
+      const result = await getStoreListApi({
+        page: 1,
+        pageSize: 200,
+      });
+
+      options.stores.value = result.items ?? [];
+
+      if (options.stores.value.length === 0) {
+        options.selectedStoreId.value = '';
+        resetRuleData();
+        resetProductData();
+        resetRecordData();
+        return;
+      }
+
+      if (!options.selectedStoreId.value) {
+        options.selectedStoreId.value = options.stores.value[0]?.id ?? '';
+        return;
+      }
+
+      const exists = options.stores.value.some(
+        (item) => item.id === options.selectedStoreId.value,
+      );
+      if (!exists) {
+        options.selectedStoreId.value = options.stores.value[0]?.id ?? '';
+      }
+    } catch (error) {
+      console.error(error);
+      message.error('加载门店失败');
+    } finally {
+      options.isStoreLoading.value = false;
+    }
+  }
+
+  async function loadRuleDetail() {
+    if (!options.selectedStoreId.value) {
+      resetRuleData();
+      return;
+    }
+
+    options.isRuleLoading.value = true;
+    try {
+      const result = await getMemberPointMallRuleDetailApi({
+        storeId: options.selectedStoreId.value,
+      });
+
+      const form = mapRuleToForm({
+        ...result.rule,
+        storeId: options.selectedStoreId.value,
+      });
+      options.ruleForm.isConsumeRewardEnabled = form.isConsumeRewardEnabled;
+      options.ruleForm.consumeAmountPerStep = form.consumeAmountPerStep;
+      options.ruleForm.consumeRewardPointsPerStep =
+        form.consumeRewardPointsPerStep;
+      options.ruleForm.isReviewRewardEnabled = form.isReviewRewardEnabled;
+      options.ruleForm.reviewRewardPoints = form.reviewRewardPoints;
+      options.ruleForm.isRegisterRewardEnabled = form.isRegisterRewardEnabled;
+      options.ruleForm.registerRewardPoints = form.registerRewardPoints;
+      options.ruleForm.isSigninRewardEnabled = form.isSigninRewardEnabled;
+      options.ruleForm.signinRewardPoints = form.signinRewardPoints;
+      options.ruleForm.expiryMode = form.expiryMode;
+      options.ruleStats.value = result.stats ?? options.ruleStats.value;
+    } catch (error) {
+      console.error(error);
+      resetRuleData();
+      message.error('加载积分规则失败');
+    } finally {
+      options.isRuleLoading.value = false;
+    }
+  }
+
+  async function loadProductList() {
+    if (!options.selectedStoreId.value) {
+      resetProductData();
+      return;
+    }
+
+    options.isProductLoading.value = true;
+    try {
+      const result = await getMemberPointMallProductListApi({
+        storeId: options.selectedStoreId.value,
+        status: options.productFilterForm.status || undefined,
+        keyword: options.productFilterForm.keyword.trim() || undefined,
+      });
+      options.productRows.value = result.items ?? [];
+    } catch (error) {
+      console.error(error);
+      resetProductData();
+      message.error('加载兑换商品失败');
+    } finally {
+      options.isProductLoading.value = false;
+    }
+  }
+
+  async function loadRecordList() {
+    if (!options.selectedStoreId.value) {
+      resetRecordData();
+      return;
+    }
+
+    options.isRecordLoading.value = true;
+    try {
+      const query = mapRecordFilterToQuery(options.recordFilterForm);
+      const result = await getMemberPointMallRecordListApi({
+        storeId: options.selectedStoreId.value,
+        page: options.recordPager.value.page,
+        pageSize: options.recordPager.value.pageSize,
+        ...query,
+      });
+
+      options.recordPager.value = {
+        items: result.items ?? [],
+        page: result.page,
+        pageSize: result.pageSize,
+        totalCount: result.totalCount,
+      };
+      options.recordStats.value = result.stats ?? {
+        todayRedeemCount: 0,
+        pendingPhysicalCount: 0,
+        currentMonthUsedPoints: 0,
+      };
+    } catch (error) {
+      console.error(error);
+      resetRecordData();
+      message.error('加载兑换记录失败');
+    } finally {
+      options.isRecordLoading.value = false;
+    }
+  }
+
+  return {
+    loadProductList,
+    loadRecordList,
+    loadRuleDetail,
+    loadStores,
+  };
+}

apps/web-antd/src/views/member/points-mall/composables/points-mall-page/drawer-actions.ts

@@ -0,0 +1,356 @@
+import type { Ref } from 'vue';
+
+import type {
+  PointMallProductCardViewModel,
+  PointMallProductEditorForm,
+} from '#/views/member/points-mall/types';
+
+import { message } from 'ant-design-vue';
+
+import { getMemberCouponPickerApi } from '#/api/member';
+import {
+  getMemberPointMallProductDetailApi,
+  saveMemberPointMallProductApi,
+} from '#/api/member/points-mall';
+
+import {
+  mapProductEditorFormToSavePayload,
+  mapProductToEditorForm,
+  resetProductEditorForm,
+} from './helpers';
+
+interface CouponOption {
+  label: string;
+  value: string;
+}
+
+interface CreateDrawerActionsOptions {
+  canManage: Ref<boolean>;
+  couponOptions: Ref<CouponOption[]>;
+  drawerMode: Ref<'create' | 'edit'>;
+  form: PointMallProductEditorForm;
+  isDrawerLoading: Ref<boolean>;
+  isDrawerOpen: Ref<boolean>;
+  isDrawerSubmitting: Ref<boolean>;
+  loadProductList: () => Promise<void>;
+  openPicker: (currentProductId?: string) => Promise<void>;
+  selectedStoreId: Ref<string>;
+}
+
+export function createDrawerActions(options: CreateDrawerActionsOptions) {
+  async function loadCouponOptions(keyword?: string) {
+    if (!options.selectedStoreId.value) {
+      options.couponOptions.value = [];
+      return;
+    }
+
+    try {
+      const rows = await getMemberCouponPickerApi({
+        storeId: options.selectedStoreId.value,
+        keyword: keyword?.trim() || undefined,
+      });
+      options.couponOptions.value = rows.map((item) => ({
+        label: item.displayText || item.name,
+        value: item.couponTemplateId,
+      }));
+    } catch (error) {
+      console.error(error);
+      options.couponOptions.value = [];
+      message.error('加载优惠券失败');
+    }
+  }
+
+  async function openCreateDrawer() {
+    if (!options.selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    options.drawerMode.value = 'create';
+    resetProductEditorForm(options.form);
+    options.isDrawerLoading.value = false;
+    options.isDrawerOpen.value = true;
+    await loadCouponOptions();
+  }
+
+  async function openEditDrawer(item: PointMallProductCardViewModel) {
+    if (!options.selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    options.drawerMode.value = 'edit';
+    options.isDrawerLoading.value = true;
+    options.isDrawerOpen.value = true;
+
+    try {
+      const detail = await getMemberPointMallProductDetailApi({
+        storeId: options.selectedStoreId.value,
+        pointMallProductId: item.pointMallProductId,
+      });
+      const mapped = mapProductToEditorForm(detail);
+
+      options.form.pointMallProductId = mapped.pointMallProductId;
+      options.form.redeemType = mapped.redeemType;
+      options.form.productId = mapped.productId;
+      options.form.productName = mapped.productName;
+      options.form.couponTemplateId = mapped.couponTemplateId;
+      options.form.couponTemplateName = mapped.couponTemplateName;
+      options.form.physicalName = mapped.physicalName;
+      options.form.pickupMethod = mapped.pickupMethod;
+      options.form.name = mapped.name;
+      options.form.imageUrl = mapped.imageUrl;
+      options.form.exchangeType = mapped.exchangeType;
+      options.form.requiredPoints = mapped.requiredPoints;
+      options.form.cashAmount = mapped.cashAmount;
+      options.form.stockTotal = mapped.stockTotal;
+      options.form.perMemberLimit = mapped.perMemberLimit;
+      options.form.description = mapped.description;
+      options.form.notifyChannels = [...mapped.notifyChannels];
+      options.form.status = mapped.status;
+
+      if (detail.redeemType === 'coupon') {
+        await loadCouponOptions();
+        const selected = options.couponOptions.value.find(
+          (row) => row.value === detail.couponTemplateId,
+        );
+        options.form.couponTemplateName = selected?.label ?? '';
+      }
+    } catch (error) {
+      console.error(error);
+      message.error('加载兑换商品详情失败');
+      options.isDrawerOpen.value = false;
+    } finally {
+      options.isDrawerLoading.value = false;
+    }
+  }
+
+  function setDrawerOpen(value: boolean) {
+    options.isDrawerOpen.value = value;
+    if (!value) {
+      options.isDrawerLoading.value = false;
+      options.isDrawerSubmitting.value = false;
+    }
+  }
+
+  function setFormName(value: string) {
+    options.form.name = value;
+  }
+
+  function setFormImageUrl(value: string) {
+    options.form.imageUrl = value;
+  }
+
+  function setFormRedeemType(value: PointMallProductEditorForm['redeemType']) {
+    options.form.redeemType = value;
+
+    if (value !== 'product') {
+      options.form.productId = '';
+      options.form.productName = '';
+    }
+    if (value !== 'coupon') {
+      options.form.couponTemplateId = '';
+      options.form.couponTemplateName = '';
+    }
+    if (value !== 'physical') {
+      options.form.physicalName = '';
+      options.form.pickupMethod = 'store_pickup';
+    }
+
+    if (value === 'physical') {
+      options.form.notifyChannels = ['in_app', 'sms'];
+      return;
+    }
+
+    if (!options.form.notifyChannels.includes('in_app')) {
+      options.form.notifyChannels = ['in_app'];
+    }
+  }
+
+  function setFormProduct(value: { id: string; name: string }) {
+    options.form.productId = value.id;
+    options.form.productName = value.name;
+  }
+
+  function setFormCouponTemplateId(value: string) {
+    options.form.couponTemplateId = value;
+    const selected = options.couponOptions.value.find(
+      (item) => item.value === value,
+    );
+    options.form.couponTemplateName = selected?.label ?? '';
+  }
+
+  function setFormPhysicalName(value: string) {
+    options.form.physicalName = value;
+  }
+
+  function setFormPickupMethod(
+    value: PointMallProductEditorForm['pickupMethod'],
+  ) {
+    options.form.pickupMethod = value;
+  }
+
+  function setFormDescription(value: string) {
+    options.form.description = value;
+  }
+
+  function setFormExchangeType(
+    value: PointMallProductEditorForm['exchangeType'],
+  ) {
+    options.form.exchangeType = value;
+    if (value === 'points') {
+      options.form.cashAmount = null;
+    }
+  }
+
+  function setFormRequiredPoints(value: null | number) {
+    options.form.requiredPoints = value;
+  }
+
+  function setFormCashAmount(value: null | number) {
+    options.form.cashAmount = value;
+  }
+
+  function setFormStockTotal(value: null | number) {
+    options.form.stockTotal = value;
+  }
+
+  function setFormPerMemberLimit(value: null | number) {
+    options.form.perMemberLimit = value;
+  }
+
+  function setFormStatus(value: PointMallProductEditorForm['status']) {
+    options.form.status = value;
+  }
+
+  function toggleNotifyChannel(value: 'in_app' | 'sms') {
+    if (options.form.notifyChannels.includes(value)) {
+      if (options.form.notifyChannels.length === 1) {
+        return;
+      }
+      options.form.notifyChannels = options.form.notifyChannels.filter(
+        (item) => item !== value,
+      );
+      return;
+    }
+
+    options.form.notifyChannels = [...options.form.notifyChannels, value];
+  }
+
+  async function openProductPicker() {
+    await options.openPicker(options.form.productId || undefined);
+  }
+
+  function validateForm() {
+    if (!options.form.name.trim()) {
+      message.warning('请填写展示名称');
+      return false;
+    }
+
+    if (!options.form.requiredPoints || options.form.requiredPoints <= 0) {
+      message.warning('所需积分必须大于 0');
+      return false;
+    }
+
+    if (options.form.stockTotal === null || options.form.stockTotal < 0) {
+      message.warning('库存数量不能小于 0');
+      return false;
+    }
+
+    if (options.form.redeemType === 'product' && !options.form.productId) {
+      message.warning('请选择关联商品');
+      return false;
+    }
+
+    if (
+      options.form.redeemType === 'coupon' &&
+      !options.form.couponTemplateId.trim()
+    ) {
+      message.warning('请选择关联优惠券');
+      return false;
+    }
+
+    if (
+      options.form.redeemType === 'physical' &&
+      !options.form.physicalName.trim()
+    ) {
+      message.warning('请填写实物名称');
+      return false;
+    }
+
+    if (
+      options.form.exchangeType === 'mixed' &&
+      (!options.form.cashAmount || options.form.cashAmount <= 0)
+    ) {
+      message.warning('积分+现金模式下，现金部分必须大于 0');
+      return false;
+    }
+
+    if (options.form.notifyChannels.length === 0) {
+      message.warning('请至少选择一种通知方式');
+      return false;
+    }
+
+    return true;
+  }
+
+  async function submitDrawer() {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    if (!options.selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    if (!validateForm()) {
+      return;
+    }
+
+    options.isDrawerSubmitting.value = true;
+    try {
+      await saveMemberPointMallProductApi(
+        mapProductEditorFormToSavePayload(
+          options.form,
+          options.selectedStoreId.value,
+        ),
+      );
+
+      message.success(
+        options.drawerMode.value === 'create' ? '添加成功' : '保存成功',
+      );
+      options.isDrawerOpen.value = false;
+      await options.loadProductList();
+    } catch (error) {
+      console.error(error);
+      message.error('保存失败');
+    } finally {
+      options.isDrawerSubmitting.value = false;
+    }
+  }
+
+  return {
+    loadCouponOptions,
+    openCreateDrawer,
+    openEditDrawer,
+    openProductPicker,
+    setDrawerOpen,
+    setFormCashAmount,
+    setFormCouponTemplateId,
+    setFormDescription,
+    setFormExchangeType,
+    setFormImageUrl,
+    setFormName,
+    setFormPerMemberLimit,
+    setFormPhysicalName,
+    setFormPickupMethod,
+    setFormProduct,
+    setFormRedeemType,
+    setFormRequiredPoints,
+    setFormStatus,
+    setFormStockTotal,
+    submitDrawer,
+    toggleNotifyChannel,
+  };
+}

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

@@ -0,0 +1,234 @@
+import type {
+  ExportMemberPointMallRecordQuery,
+  MemberPointMallProductDto,
+  MemberPointMallRecordListQuery,
+  SaveMemberPointMallProductPayload,
+  SaveMemberPointMallRulePayload,
+} from '#/api/member/points-mall';
+import type {
+  PointMallProductEditorForm,
+  PointMallRecordFilterForm,
+  PointMallRuleForm,
+} from '#/views/member/points-mall/types';
+
+import {
+  createDefaultPointMallProductEditorForm,
+  createDefaultPointMallRuleForm,
+} from '#/views/member/points-mall/types';
+
+/** 数量格式化。 */
+export function formatInteger(value: null | number | undefined) {
+  const num = Number(value ?? 0);
+  if (!Number.isFinite(num)) {
+    return '0';
+  }
+  return Math.round(num).toLocaleString('zh-CN');
+}
+
+/** 积分格式化。 */
+export function formatPoints(value: null | number | undefined) {
+  return formatInteger(value);
+}
+
+/** 金额格式化。 */
+export function formatCurrency(value: null | number | undefined) {
+  const amount = Number(value ?? 0);
+  if (Number.isNaN(amount)) {
+    return '¥0.00';
+  }
+  return `¥${amount.toFixed(2)}`;
+}
+
+/** 判断字符串是否为空。 */
+export function isBlank(value: string | undefined) {
+  return !value || value.trim().length === 0;
+}
+
+/** 规则 DTO -> 表单。 */
+export function mapRuleToForm(
+  rule: SaveMemberPointMallRulePayload,
+): PointMallRuleForm {
+  return {
+    isConsumeRewardEnabled: Boolean(rule.isConsumeRewardEnabled),
+    consumeAmountPerStep: Number(rule.consumeAmountPerStep),
+    consumeRewardPointsPerStep: Number(rule.consumeRewardPointsPerStep),
+    isReviewRewardEnabled: Boolean(rule.isReviewRewardEnabled),
+    reviewRewardPoints: Number(rule.reviewRewardPoints),
+    isRegisterRewardEnabled: Boolean(rule.isRegisterRewardEnabled),
+    registerRewardPoints: Number(rule.registerRewardPoints),
+    isSigninRewardEnabled: Boolean(rule.isSigninRewardEnabled),
+    signinRewardPoints: Number(rule.signinRewardPoints),
+    expiryMode: rule.expiryMode,
+  };
+}
+
+/** 规则表单 -> 保存 DTO。 */
+export function mapRuleFormToSavePayload(
+  form: PointMallRuleForm,
+  storeId: string,
+): SaveMemberPointMallRulePayload {
+  return {
+    storeId,
+    isConsumeRewardEnabled: form.isConsumeRewardEnabled,
+    consumeAmountPerStep: Number(form.consumeAmountPerStep ?? 0),
+    consumeRewardPointsPerStep: Number(form.consumeRewardPointsPerStep ?? 0),
+    isReviewRewardEnabled: form.isReviewRewardEnabled,
+    reviewRewardPoints: Number(form.reviewRewardPoints ?? 0),
+    isRegisterRewardEnabled: form.isRegisterRewardEnabled,
+    registerRewardPoints: Number(form.registerRewardPoints ?? 0),
+    isSigninRewardEnabled: form.isSigninRewardEnabled,
+    signinRewardPoints: Number(form.signinRewardPoints ?? 0),
+    expiryMode: form.expiryMode,
+  };
+}
+
+/** 重置规则表单。 */
+export function resetRuleForm(form: PointMallRuleForm) {
+  const defaults = createDefaultPointMallRuleForm();
+  form.isConsumeRewardEnabled = defaults.isConsumeRewardEnabled;
+  form.consumeAmountPerStep = defaults.consumeAmountPerStep;
+  form.consumeRewardPointsPerStep = defaults.consumeRewardPointsPerStep;
+  form.isReviewRewardEnabled = defaults.isReviewRewardEnabled;
+  form.reviewRewardPoints = defaults.reviewRewardPoints;
+  form.isRegisterRewardEnabled = defaults.isRegisterRewardEnabled;
+  form.registerRewardPoints = defaults.registerRewardPoints;
+  form.isSigninRewardEnabled = defaults.isSigninRewardEnabled;
+  form.signinRewardPoints = defaults.signinRewardPoints;
+  form.expiryMode = defaults.expiryMode;
+}
+
+/** 商品 DTO -> 编辑表单。 */
+export function mapProductToEditorForm(
+  source: MemberPointMallProductDto,
+): PointMallProductEditorForm {
+  return {
+    pointMallProductId: source.pointMallProductId,
+    redeemType: source.redeemType,
+    productId: source.productId ?? '',
+    productName: '',
+    couponTemplateId: source.couponTemplateId ?? '',
+    couponTemplateName: '',
+    physicalName: source.physicalName ?? '',
+    pickupMethod: source.pickupMethod ?? 'store_pickup',
+    name: source.name,
+    imageUrl: source.imageUrl ?? '',
+    exchangeType: source.exchangeType,
+    requiredPoints: source.requiredPoints,
+    cashAmount: source.exchangeType === 'mixed' ? source.cashAmount : null,
+    stockTotal: source.stockTotal,
+    perMemberLimit: source.perMemberLimit ?? null,
+    description: source.description ?? '',
+    notifyChannels: [...source.notifyChannels],
+    status: source.status,
+  };
+}
+
+/** 商品表单 -> 保存 DTO。 */
+export function mapProductEditorFormToSavePayload(
+  form: PointMallProductEditorForm,
+  storeId: string,
+): SaveMemberPointMallProductPayload {
+  return {
+    storeId,
+    pointMallProductId: form.pointMallProductId || undefined,
+    name: form.name.trim(),
+    imageUrl: form.imageUrl.trim() || undefined,
+    redeemType: form.redeemType,
+    productId: form.productId || undefined,
+    couponTemplateId: form.couponTemplateId || undefined,
+    physicalName: form.physicalName.trim() || undefined,
+    pickupMethod:
+      form.redeemType === 'physical' ? form.pickupMethod : undefined,
+    description: form.description.trim() || undefined,
+    exchangeType: form.exchangeType,
+    requiredPoints: Number(form.requiredPoints ?? 0),
+    cashAmount: Number(form.cashAmount ?? 0),
+    stockTotal: Number(form.stockTotal ?? 0),
+    perMemberLimit:
+      form.perMemberLimit && form.perMemberLimit > 0
+        ? Number(form.perMemberLimit)
+        : undefined,
+    notifyChannels: [...form.notifyChannels],
+    status: form.status,
+  };
+}
+
+/** 重置商品编辑表单。 */
+export function resetProductEditorForm(form: PointMallProductEditorForm) {
+  const defaults = createDefaultPointMallProductEditorForm();
+  form.pointMallProductId = defaults.pointMallProductId;
+  form.redeemType = defaults.redeemType;
+  form.productId = defaults.productId;
+  form.productName = defaults.productName;
+  form.couponTemplateId = defaults.couponTemplateId;
+  form.couponTemplateName = defaults.couponTemplateName;
+  form.physicalName = defaults.physicalName;
+  form.pickupMethod = defaults.pickupMethod;
+  form.name = defaults.name;
+  form.imageUrl = defaults.imageUrl;
+  form.exchangeType = defaults.exchangeType;
+  form.requiredPoints = defaults.requiredPoints;
+  form.cashAmount = defaults.cashAmount;
+  form.stockTotal = defaults.stockTotal;
+  form.perMemberLimit = defaults.perMemberLimit;
+  form.description = defaults.description;
+  form.notifyChannels = [...defaults.notifyChannels];
+  form.status = defaults.status;
+}
+
+/** 记录筛选项映射。 */
+export function mapRecordFilterToQuery(
+  filterForm: PointMallRecordFilterForm,
+): Pick<
+  ExportMemberPointMallRecordQuery & MemberPointMallRecordListQuery,
+  'endDate' | 'keyword' | 'redeemType' | 'startDate' | 'status'
+> {
+  const query: Pick<
+    ExportMemberPointMallRecordQuery & MemberPointMallRecordListQuery,
+    'endDate' | 'keyword' | 'redeemType' | 'startDate' | 'status'
+  > = {};
+
+  if (filterForm.redeemType) {
+    query.redeemType = filterForm.redeemType;
+  }
+
+  if (filterForm.status) {
+    query.status = filterForm.status;
+  }
+
+  const keyword = filterForm.keyword.trim();
+  if (keyword) {
+    query.keyword = keyword;
+  }
+
+  if (filterForm.dateRange && filterForm.dateRange.length === 2) {
+    query.startDate = filterForm.dateRange[0].format('YYYY-MM-DD');
+    query.endDate = filterForm.dateRange[1].format('YYYY-MM-DD');
+  }
+
+  return query;
+}
+
+/** base64 下载。 */
+export function downloadBase64File(
+  fileName: string,
+  fileContentBase64: string,
+) {
+  const binary = atob(fileContentBase64);
+  const length = binary.length;
+  const bytes = new Uint8Array(length);
+
+  for (let index = 0; index < length; index++) {
+    bytes[index] = binary.codePointAt(index) ?? 0;
+  }
+
+  const blob = new Blob([bytes], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = fileName;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}

apps/web-antd/src/views/member/points-mall/composables/points-mall-page/picker-actions.ts

@@ -0,0 +1,83 @@
+import type { Ref } from 'vue';
+
+import type { ProductPickerItemDto } from '#/api/product';
+
+import { message } from 'ant-design-vue';
+
+import { searchProductPickerApi } from '#/api/product';
+
+interface CreatePickerActionsOptions {
+  isPickerLoading: Ref<boolean>;
+  isPickerOpen: Ref<boolean>;
+  onPicked: (item: ProductPickerItemDto | undefined) => void;
+  pickerKeyword: Ref<string>;
+  pickerRows: Ref<ProductPickerItemDto[]>;
+  pickerSelectedId: Ref<string>;
+  selectedStoreId: Ref<string>;
+}
+
+export function createPickerActions(options: CreatePickerActionsOptions) {
+  async function loadPickerProducts() {
+    if (!options.selectedStoreId.value) {
+      options.pickerRows.value = [];
+      return;
+    }
+
+    options.isPickerLoading.value = true;
+    try {
+      options.pickerRows.value = await searchProductPickerApi({
+        storeId: options.selectedStoreId.value,
+        keyword: options.pickerKeyword.value.trim() || undefined,
+        limit: 500,
+      });
+    } catch (error) {
+      console.error(error);
+      options.pickerRows.value = [];
+      message.error('加载商品失败');
+    } finally {
+      options.isPickerLoading.value = false;
+    }
+  }
+
+  async function openPicker(currentProductId?: string) {
+    options.pickerKeyword.value = '';
+    options.pickerSelectedId.value = currentProductId ?? '';
+    options.pickerRows.value = [];
+    options.isPickerOpen.value = true;
+    await loadPickerProducts();
+  }
+
+  function setPickerOpen(value: boolean) {
+    options.isPickerOpen.value = value;
+  }
+
+  function setPickerKeyword(value: string) {
+    options.pickerKeyword.value = value;
+  }
+
+  function setPickerSelectedId(value: string) {
+    options.pickerSelectedId.value = value;
+  }
+
+  function submitPicker() {
+    if (!options.pickerSelectedId.value) {
+      message.warning('请选择商品');
+      return;
+    }
+
+    const selected = options.pickerRows.value.find(
+      (item) => item.id === options.pickerSelectedId.value,
+    );
+    options.onPicked(selected);
+    options.isPickerOpen.value = false;
+  }
+
+  return {
+    loadPickerProducts,
+    openPicker,
+    setPickerKeyword,
+    setPickerOpen,
+    setPickerSelectedId,
+    submitPicker,
+  };
+}

apps/web-antd/src/views/member/points-mall/composables/points-mall-page/product-actions.ts

@@ -0,0 +1,80 @@
+import type { Ref } from 'vue';
+
+import type { PointMallProductCardViewModel } from '#/views/member/points-mall/types';
+
+import { message, Modal } from 'ant-design-vue';
+
+import {
+  changeMemberPointMallProductStatusApi,
+  deleteMemberPointMallProductApi,
+} from '#/api/member/points-mall';
+
+interface CreateProductActionsOptions {
+  canManage: Ref<boolean>;
+  loadProductList: () => Promise<void>;
+  selectedStoreId: Ref<string>;
+}
+
+export function createProductActions(options: CreateProductActionsOptions) {
+  async function toggleStatus(item: PointMallProductCardViewModel) {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    if (!options.selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    const targetStatus = item.status === 'enabled' ? 'disabled' : 'enabled';
+    try {
+      await changeMemberPointMallProductStatusApi({
+        storeId: options.selectedStoreId.value,
+        pointMallProductId: item.pointMallProductId,
+        status: targetStatus,
+      });
+      message.success(targetStatus === 'enabled' ? '商品已上架' : '商品已下架');
+      await options.loadProductList();
+    } catch (error) {
+      console.error(error);
+      message.error('状态更新失败');
+    }
+  }
+
+  function removeProduct(item: PointMallProductCardViewModel) {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    if (!options.selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    Modal.confirm({
+      title: '删除兑换商品',
+      content: `确认删除「${item.name}」吗？删除后不可恢复。`,
+      okText: '删除',
+      okType: 'danger',
+      cancelText: '取消',
+      async onOk() {
+        try {
+          await deleteMemberPointMallProductApi({
+            storeId: options.selectedStoreId.value,
+            pointMallProductId: item.pointMallProductId,
+          });
+          message.success('删除成功');
+          await options.loadProductList();
+        } catch (error) {
+          console.error(error);
+          message.error('删除失败');
+        }
+      },
+    });
+  }
+
+  return {
+    removeProduct,
+    toggleStatus,
+  };
+}

apps/web-antd/src/views/member/points-mall/composables/points-mall-page/record-actions.ts

@@ -0,0 +1,158 @@
+import type { Ref } from 'vue';
+
+import type {
+  PointMallRecordDetailViewModel,
+  PointMallVerifyForm,
+} from '#/views/member/points-mall/types';
+
+import { message } from 'ant-design-vue';
+
+import {
+  getMemberPointMallRecordDetailApi,
+  verifyMemberPointMallRecordApi,
+} from '#/api/member/points-mall';
+
+interface CreateRecordActionsOptions {
+  canManage: Ref<boolean>;
+  detailRecord: Ref<null | PointMallRecordDetailViewModel>;
+  isDetailLoading: Ref<boolean>;
+  isDetailOpen: Ref<boolean>;
+  isVerifyLoading: Ref<boolean>;
+  isVerifyOpen: Ref<boolean>;
+  isVerifySubmitting: Ref<boolean>;
+  loadRecordList: () => Promise<void>;
+  selectedRecordId: Ref<string>;
+  selectedStoreId: Ref<string>;
+  verifyForm: PointMallVerifyForm;
+}
+
+export function createRecordActions(options: CreateRecordActionsOptions) {
+  async function loadRecordDetail(recordId: string) {
+    if (!options.selectedStoreId.value || !recordId) {
+      options.detailRecord.value = null;
+      return;
+    }
+
+    const detail = await getMemberPointMallRecordDetailApi({
+      storeId: options.selectedStoreId.value,
+      recordId,
+    });
+    options.detailRecord.value = detail;
+  }
+
+  async function openDetailDrawer(recordId: string) {
+    if (!options.selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    options.selectedRecordId.value = recordId;
+    options.isDetailLoading.value = true;
+    options.isDetailOpen.value = true;
+
+    try {
+      await loadRecordDetail(recordId);
+    } catch (error) {
+      console.error(error);
+      options.isDetailOpen.value = false;
+      message.error('加载记录详情失败');
+    } finally {
+      options.isDetailLoading.value = false;
+    }
+  }
+
+  async function openVerifyDrawer(recordId: string) {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    if (!options.selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    options.selectedRecordId.value = recordId;
+    options.isVerifyLoading.value = true;
+    options.isVerifyOpen.value = true;
+    options.verifyForm.verifyMethod = 'manual';
+    options.verifyForm.verifyRemark = '';
+
+    try {
+      await loadRecordDetail(recordId);
+    } catch (error) {
+      console.error(error);
+      options.isVerifyOpen.value = false;
+      message.error('加载核销信息失败');
+    } finally {
+      options.isVerifyLoading.value = false;
+    }
+  }
+
+  function setDetailOpen(value: boolean) {
+    options.isDetailOpen.value = value;
+    if (!value) {
+      options.isDetailLoading.value = false;
+    }
+  }
+
+  function setVerifyOpen(value: boolean) {
+    options.isVerifyOpen.value = value;
+    if (!value) {
+      options.isVerifyLoading.value = false;
+      options.isVerifySubmitting.value = false;
+    }
+  }
+
+  function setVerifyMethod(value: PointMallVerifyForm['verifyMethod']) {
+    options.verifyForm.verifyMethod = value;
+  }
+
+  function setVerifyRemark(value: string) {
+    options.verifyForm.verifyRemark = value;
+  }
+
+  async function submitVerify() {
+    if (!options.canManage.value) {
+      return;
+    }
+
+    if (!options.selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    if (!options.selectedRecordId.value) {
+      message.warning('请选择需要核销的记录');
+      return;
+    }
+
+    options.isVerifySubmitting.value = true;
+    try {
+      await verifyMemberPointMallRecordApi({
+        storeId: options.selectedStoreId.value,
+        recordId: options.selectedRecordId.value,
+        verifyMethod: options.verifyForm.verifyMethod,
+        verifyRemark: options.verifyForm.verifyRemark.trim() || undefined,
+      });
+      message.success('核销成功');
+      options.isVerifyOpen.value = false;
+      await options.loadRecordList();
+      await loadRecordDetail(options.selectedRecordId.value);
+    } catch (error) {
+      console.error(error);
+      message.error('核销失败');
+    } finally {
+      options.isVerifySubmitting.value = false;
+    }
+  }
+
+  return {
+    openDetailDrawer,
+    openVerifyDrawer,
+    setDetailOpen,
+    setVerifyMethod,
+    setVerifyOpen,
+    setVerifyRemark,
+    submitVerify,
+  };
+}

apps/web-antd/src/views/member/points-mall/composables/useMemberPointsMallPage.ts

@@ -0,0 +1,587 @@
+import type { Dayjs } from 'dayjs';
+
+import type { ProductPickerItemDto } from '#/api/product';
+import type { StoreListItemDto } from '#/api/store';
+import type {
+  PointMallProductCardViewModel,
+  PointMallRecordDetailViewModel,
+  PointMallTabKey,
+} from '#/views/member/points-mall/types';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import { useAccessStore } from '@vben/stores';
+
+import { message } from 'ant-design-vue';
+
+import {
+  exportMemberPointMallRecordApi,
+  saveMemberPointMallRuleApi,
+} from '#/api/member/points-mall';
+
+import {
+  createDefaultPointMallProductEditorForm,
+  createDefaultPointMallProductFilterForm,
+  createDefaultPointMallRecordFilterForm,
+  createDefaultPointMallRecordPager,
+  createDefaultPointMallRecordStats,
+  createDefaultPointMallRuleForm,
+  createDefaultPointMallRuleStats,
+  createDefaultPointMallVerifyForm,
+} from '../types';
+import {
+  MEMBER_POINTS_MALL_MANAGE_PERMISSION,
+  MEMBER_POINTS_MALL_VIEW_PERMISSION,
+  POINTS_MALL_TAB_OPTIONS,
+} from './points-mall-page/constants';
+import { createDataActions } from './points-mall-page/data-actions';
+import { createDrawerActions } from './points-mall-page/drawer-actions';
+import {
+  downloadBase64File,
+  mapRecordFilterToQuery,
+  mapRuleFormToSavePayload,
+  resetRuleForm,
+} from './points-mall-page/helpers';
+import { createPickerActions } from './points-mall-page/picker-actions';
+import { createProductActions } from './points-mall-page/product-actions';
+import { createRecordActions } from './points-mall-page/record-actions';
+
+export function useMemberPointsMallPage() {
+  const accessStore = useAccessStore();
+
+  const stores = ref<StoreListItemDto[]>([]);
+  const selectedStoreId = ref('');
+  const isStoreLoading = ref(false);
+
+  const activeTab = ref<PointMallTabKey>('rules');
+
+  const ruleForm = reactive(createDefaultPointMallRuleForm());
+  const ruleStats = ref(createDefaultPointMallRuleStats());
+  const isRuleLoading = ref(false);
+  const isRuleSubmitting = ref(false);
+
+  const productFilterForm = reactive(createDefaultPointMallProductFilterForm());
+  const productRows = ref<PointMallProductCardViewModel[]>([]);
+  const isProductLoading = ref(false);
+
+  const drawerMode = ref<'create' | 'edit'>('create');
+  const productForm = reactive(createDefaultPointMallProductEditorForm());
+  const isDrawerOpen = ref(false);
+  const isDrawerLoading = ref(false);
+  const isDrawerSubmitting = ref(false);
+  const couponOptions = ref<Array<{ label: string; value: string }>>([]);
+
+  const isPickerOpen = ref(false);
+  const isPickerLoading = ref(false);
+  const pickerKeyword = ref('');
+  const pickerRows = ref<ProductPickerItemDto[]>([]);
+  const pickerSelectedId = ref('');
+
+  const recordFilterForm = reactive(createDefaultPointMallRecordFilterForm());
+  const recordPager = ref(createDefaultPointMallRecordPager());
+  const recordStats = ref(createDefaultPointMallRecordStats());
+  const isRecordLoading = ref(false);
+  const isExporting = ref(false);
+
+  const selectedRecordId = ref('');
+  const detailRecord = ref<null | PointMallRecordDetailViewModel>(null);
+  const isDetailOpen = ref(false);
+  const isDetailLoading = ref(false);
+  const verifyForm = reactive(createDefaultPointMallVerifyForm());
+  const isVerifyOpen = ref(false);
+  const isVerifyLoading = ref(false);
+  const isVerifySubmitting = ref(false);
+
+  const accessCodeSet = computed(
+    () => new Set((accessStore.accessCodes ?? []).map(String)),
+  );
+  const canManage = computed(() =>
+    accessCodeSet.value.has(MEMBER_POINTS_MALL_MANAGE_PERMISSION),
+  );
+  const canView = computed(
+    () =>
+      canManage.value ||
+      accessCodeSet.value.has(MEMBER_POINTS_MALL_VIEW_PERMISSION),
+  );
+
+  const hasStore = computed(() => stores.value.length > 0);
+  const storeOptions = computed(() =>
+    stores.value.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })),
+  );
+
+  const drawerTitle = computed(() =>
+    drawerMode.value === 'create' ? '添加兑换商品' : '编辑兑换商品',
+  );
+  const drawerSubmitText = computed(() => '保存');
+
+  const { loadStores, loadRuleDetail, loadProductList, loadRecordList } =
+    createDataActions({
+      stores,
+      selectedStoreId,
+      isStoreLoading,
+      ruleForm,
+      ruleStats,
+      isRuleLoading,
+      productFilterForm,
+      productRows,
+      isProductLoading,
+      recordFilterForm,
+      recordPager,
+      recordStats,
+      isRecordLoading,
+    });
+
+  const {
+    loadPickerProducts,
+    openPicker,
+    setPickerKeyword,
+    setPickerOpen,
+    setPickerSelectedId,
+    submitPicker,
+  } = createPickerActions({
+    isPickerOpen,
+    isPickerLoading,
+    pickerKeyword,
+    pickerRows,
+    pickerSelectedId,
+    selectedStoreId,
+    onPicked(item) {
+      if (!item) {
+        return;
+      }
+      productForm.productId = item.id;
+      productForm.productName = item.name;
+      if (!productForm.name.trim()) {
+        productForm.name = item.name;
+      }
+    },
+  });
+
+  const {
+    loadCouponOptions,
+    openCreateDrawer,
+    openEditDrawer,
+    openProductPicker,
+    setDrawerOpen,
+    setFormCashAmount,
+    setFormCouponTemplateId,
+    setFormDescription,
+    setFormExchangeType,
+    setFormImageUrl,
+    setFormName,
+    setFormPerMemberLimit,
+    setFormPhysicalName,
+    setFormPickupMethod,
+    setFormRedeemType,
+    setFormRequiredPoints,
+    setFormStatus,
+    setFormStockTotal,
+    submitDrawer,
+    toggleNotifyChannel,
+  } = createDrawerActions({
+    canManage,
+    drawerMode,
+    form: productForm,
+    isDrawerLoading,
+    isDrawerOpen,
+    isDrawerSubmitting,
+    selectedStoreId,
+    couponOptions,
+    loadProductList,
+    openPicker,
+  });
+
+  const { removeProduct, toggleStatus } = createProductActions({
+    canManage,
+    selectedStoreId,
+    loadProductList,
+  });
+
+  const {
+    openDetailDrawer,
+    openVerifyDrawer,
+    setDetailOpen,
+    setVerifyMethod,
+    setVerifyOpen,
+    setVerifyRemark,
+    submitVerify,
+  } = createRecordActions({
+    canManage,
+    selectedStoreId,
+    selectedRecordId,
+    detailRecord,
+    isDetailLoading,
+    isDetailOpen,
+    verifyForm,
+    isVerifyLoading,
+    isVerifyOpen,
+    isVerifySubmitting,
+    loadRecordList,
+  });
+
+  function setSelectedStoreId(value: string) {
+    selectedStoreId.value = value;
+  }
+
+  function setActiveTab(value: PointMallTabKey) {
+    activeTab.value = value;
+  }
+
+  function setRuleConsumeRewardEnabled(value: boolean) {
+    ruleForm.isConsumeRewardEnabled = value;
+  }
+
+  function setRuleConsumeAmountPerStep(value: null | number) {
+    ruleForm.consumeAmountPerStep = value;
+  }
+
+  function setRuleConsumeRewardPointsPerStep(value: null | number) {
+    ruleForm.consumeRewardPointsPerStep = value;
+  }
+
+  function setRuleReviewRewardEnabled(value: boolean) {
+    ruleForm.isReviewRewardEnabled = value;
+  }
+
+  function setRuleReviewRewardPoints(value: null | number) {
+    ruleForm.reviewRewardPoints = value;
+  }
+
+  function setRuleRegisterRewardEnabled(value: boolean) {
+    ruleForm.isRegisterRewardEnabled = value;
+  }
+
+  function setRuleRegisterRewardPoints(value: null | number) {
+    ruleForm.registerRewardPoints = value;
+  }
+
+  function setRuleSigninRewardEnabled(value: boolean) {
+    ruleForm.isSigninRewardEnabled = value;
+  }
+
+  function setRuleSigninRewardPoints(value: null | number) {
+    ruleForm.signinRewardPoints = value;
+  }
+
+  function setRuleExpiryMode(value: 'permanent' | 'yearly_clear') {
+    ruleForm.expiryMode = value;
+  }
+
+  function validateRuleForm() {
+    if (
+      ruleForm.isConsumeRewardEnabled &&
+      (!ruleForm.consumeAmountPerStep || ruleForm.consumeAmountPerStep <= 0)
+    ) {
+      message.warning('消费获取规则中“每消费金额”必须大于 0');
+      return false;
+    }
+
+    if (
+      ruleForm.isConsumeRewardEnabled &&
+      (!ruleForm.consumeRewardPointsPerStep ||
+        ruleForm.consumeRewardPointsPerStep <= 0)
+    ) {
+      message.warning('消费获取规则中“每步积分”必须大于 0');
+      return false;
+    }
+
+    if (
+      ruleForm.isReviewRewardEnabled &&
+      (!ruleForm.reviewRewardPoints || ruleForm.reviewRewardPoints <= 0)
+    ) {
+      message.warning('评价奖励积分必须大于 0');
+      return false;
+    }
+
+    if (
+      ruleForm.isRegisterRewardEnabled &&
+      (!ruleForm.registerRewardPoints || ruleForm.registerRewardPoints <= 0)
+    ) {
+      message.warning('注册奖励积分必须大于 0');
+      return false;
+    }
+
+    if (
+      ruleForm.isSigninRewardEnabled &&
+      (!ruleForm.signinRewardPoints || ruleForm.signinRewardPoints <= 0)
+    ) {
+      message.warning('签到奖励积分必须大于 0');
+      return false;
+    }
+
+    return true;
+  }
+
+  async function saveRule() {
+    if (!canManage.value) {
+      return;
+    }
+
+    if (!selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    if (!validateRuleForm()) {
+      return;
+    }
+
+    isRuleSubmitting.value = true;
+    try {
+      await saveMemberPointMallRuleApi(
+        mapRuleFormToSavePayload(ruleForm, selectedStoreId.value),
+      );
+      message.success('规则已保存');
+      await loadRuleDetail();
+    } catch (error) {
+      console.error(error);
+      message.error('保存规则失败');
+    } finally {
+      isRuleSubmitting.value = false;
+    }
+  }
+
+  function setProductKeyword(value: string) {
+    productFilterForm.keyword = value;
+  }
+
+  function setProductStatusFilter(value: '' | 'disabled' | 'enabled') {
+    productFilterForm.status = value;
+  }
+
+  async function applyProductFilters() {
+    await loadProductList();
+  }
+
+  async function resetProductFilters() {
+    productFilterForm.status = '';
+    productFilterForm.keyword = '';
+    await loadProductList();
+  }
+
+  function setRecordRedeemType(value: '' | 'coupon' | 'physical' | 'product') {
+    recordFilterForm.redeemType = value;
+  }
+
+  function setRecordStatus(
+    value: '' | 'canceled' | 'completed' | 'issued' | 'pending_pickup',
+  ) {
+    recordFilterForm.status = value;
+  }
+
+  function setRecordKeyword(value: string) {
+    recordFilterForm.keyword = value;
+  }
+
+  function setRecordDateRange(value: [Dayjs, Dayjs] | null) {
+    recordFilterForm.dateRange = value ?? null;
+  }
+
+  async function applyRecordFilters() {
+    recordPager.value = {
+      ...recordPager.value,
+      page: 1,
+    };
+    await loadRecordList();
+  }
+
+  async function resetRecordFilters() {
+    recordFilterForm.redeemType = '';
+    recordFilterForm.status = '';
+    recordFilterForm.keyword = '';
+    recordFilterForm.dateRange = null;
+    recordPager.value = {
+      ...recordPager.value,
+      page: 1,
+    };
+    await loadRecordList();
+  }
+
+  async function handleRecordPageChange(page: number, pageSize: number) {
+    recordPager.value = {
+      ...recordPager.value,
+      page,
+      pageSize,
+    };
+    await loadRecordList();
+  }
+
+  async function exportRecords() {
+    if (!selectedStoreId.value) {
+      message.warning('请先选择门店');
+      return;
+    }
+
+    isExporting.value = true;
+    try {
+      const query = mapRecordFilterToQuery(recordFilterForm);
+      const result = await exportMemberPointMallRecordApi({
+        storeId: selectedStoreId.value,
+        ...query,
+      });
+      downloadBase64File(result.fileName, result.fileContentBase64);
+      message.success(`导出成功，共 ${result.totalCount} 条`);
+    } catch (error) {
+      console.error(error);
+      message.error('导出失败');
+    } finally {
+      isExporting.value = false;
+    }
+  }
+
+  function openEditProduct(item: PointMallProductCardViewModel) {
+    void openEditDrawer(item);
+  }
+
+  function openCreateProduct() {
+    void openCreateDrawer();
+  }
+
+  function openProductPickerDrawer() {
+    void openProductPicker();
+  }
+
+  function onPickedProductSelected(id: string) {
+    setPickerSelectedId(id);
+  }
+
+  function submitProductPicker() {
+    submitPicker();
+  }
+
+  function searchPickerProducts() {
+    void loadPickerProducts();
+  }
+
+  function searchCouponOptions(keyword: string) {
+    void loadCouponOptions(keyword);
+  }
+
+  watch(selectedStoreId, async () => {
+    recordPager.value = {
+      ...recordPager.value,
+      page: 1,
+      pageSize: 10,
+    };
+    await Promise.all([loadRuleDetail(), loadProductList(), loadRecordList()]);
+    await loadCouponOptions();
+  });
+
+  onMounted(async () => {
+    await loadStores();
+    if (selectedStoreId.value) {
+      await Promise.all([
+        loadRuleDetail(),
+        loadProductList(),
+        loadRecordList(),
+      ]);
+      await loadCouponOptions();
+    } else {
+      resetRuleForm(ruleForm);
+    }
+  });
+
+  return {
+    activeTab,
+    applyProductFilters,
+    applyRecordFilters,
+    canManage,
+    canView,
+    couponOptions,
+    detailRecord,
+    drawerSubmitText,
+    drawerTitle,
+    exportRecords,
+    hasStore,
+    handleRecordPageChange,
+    isDetailLoading,
+    isDetailOpen,
+    isDrawerLoading,
+    isDrawerOpen,
+    isDrawerSubmitting,
+    isExporting,
+    isPickerLoading,
+    isPickerOpen,
+    isProductLoading,
+    isRecordLoading,
+    isRuleLoading,
+    isRuleSubmitting,
+    isStoreLoading,
+    isVerifyLoading,
+    isVerifyOpen,
+    isVerifySubmitting,
+    openCreateProduct,
+    openDetailDrawer,
+    openEditProduct,
+    openProductPickerDrawer,
+    openVerifyDrawer,
+    pickerKeyword,
+    pickerRows,
+    pickerSelectedId,
+    productFilterForm,
+    productForm,
+    productRows,
+    recordFilterForm,
+    recordPager,
+    recordStats,
+    removeProduct,
+    resetProductFilters,
+    resetRecordFilters,
+    ruleForm,
+    ruleStats,
+    saveRule,
+    selectedStoreId,
+    setActiveTab,
+    setDetailOpen,
+    setDrawerOpen,
+    setFormCashAmount,
+    setFormCouponTemplateId,
+    setFormDescription,
+    setFormExchangeType,
+    setFormImageUrl,
+    setFormName,
+    setFormPerMemberLimit,
+    setFormPhysicalName,
+    setFormPickupMethod,
+    setFormRedeemType,
+    setFormRequiredPoints,
+    setFormStatus,
+    setFormStockTotal,
+    setPickedProductId: onPickedProductSelected,
+    setPickerKeyword,
+    setPickerOpen,
+    setProductKeyword,
+    setProductStatusFilter,
+    setRecordDateRange,
+    setRecordKeyword,
+    setRecordRedeemType,
+    setRecordStatus,
+    setRuleConsumeAmountPerStep,
+    setRuleConsumeRewardEnabled,
+    setRuleConsumeRewardPointsPerStep,
+    setRuleExpiryMode,
+    setRuleRegisterRewardEnabled,
+    setRuleRegisterRewardPoints,
+    setRuleReviewRewardEnabled,
+    setRuleReviewRewardPoints,
+    setRuleSigninRewardEnabled,
+    setRuleSigninRewardPoints,
+    setSelectedStoreId,
+    searchCouponOptions,
+    searchPickerProducts,
+    setVerifyMethod,
+    setVerifyOpen,
+    setVerifyRemark,
+    storeOptions,
+    submitDrawer,
+    submitProductPicker,
+    submitVerify,
+    tabOptions: POINTS_MALL_TAB_OPTIONS,
+    toggleNotifyChannel,
+    toggleStatus,
+    verifyForm,
+  };
+}

apps/web-antd/src/views/member/points-mall/index.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+
+import { Empty, Select, Spin } from 'ant-design-vue';
+
+import PointsMallProductCard from './components/PointsMallProductCard.vue';
+import PointsMallProductEditorDrawer from './components/PointsMallProductEditorDrawer.vue';
+import PointsMallProductPickerModal from './components/PointsMallProductPickerModal.vue';
+import PointsMallProductToolbar from './components/PointsMallProductToolbar.vue';
+import PointsMallRecordDetailDrawer from './components/PointsMallRecordDetailDrawer.vue';
+import PointsMallRecordStatsCards from './components/PointsMallRecordStatsCards.vue';
+import PointsMallRecordTable from './components/PointsMallRecordTable.vue';
+import PointsMallRecordToolbar from './components/PointsMallRecordToolbar.vue';
+import PointsMallRulePanel from './components/PointsMallRulePanel.vue';
+import PointsMallRuleStatsCards from './components/PointsMallRuleStatsCards.vue';
+import PointsMallVerifyDrawer from './components/PointsMallVerifyDrawer.vue';
+import { useMemberPointsMallPage } from './composables/useMemberPointsMallPage';
+
+const {
+  activeTab,
+  applyProductFilters,
+  applyRecordFilters,
+  canManage,
+  canView,
+  couponOptions,
+  detailRecord,
+  drawerSubmitText,
+  drawerTitle,
+  exportRecords,
+  hasStore,
+  handleRecordPageChange,
+  isDetailLoading,
+  isDetailOpen,
+  isDrawerLoading,
+  isDrawerOpen,
+  isDrawerSubmitting,
+  isExporting,
+  isPickerLoading,
+  isPickerOpen,
+  isProductLoading,
+  isRecordLoading,
+  isRuleLoading,
+  isRuleSubmitting,
+  isStoreLoading,
+  isVerifyLoading,
+  isVerifyOpen,
+  isVerifySubmitting,
+  openCreateProduct,
+  openDetailDrawer,
+  openEditProduct,
+  openProductPickerDrawer,
+  openVerifyDrawer,
+  pickerKeyword,
+  pickerRows,
+  pickerSelectedId,
+  productFilterForm,
+  productForm,
+  productRows,
+  recordFilterForm,
+  recordPager,
+  recordStats,
+  removeProduct,
+  resetProductFilters,
+  resetRecordFilters,
+  ruleForm,
+  ruleStats,
+  saveRule,
+  selectedStoreId,
+  setActiveTab,
+  setDetailOpen,
+  setDrawerOpen,
+  setFormCashAmount,
+  setFormCouponTemplateId,
+  setFormDescription,
+  setFormExchangeType,
+  setFormImageUrl,
+  setFormName,
+  setFormPerMemberLimit,
+  setFormPhysicalName,
+  setFormPickupMethod,
+  setFormRedeemType,
+  setFormRequiredPoints,
+  setFormStatus,
+  setFormStockTotal,
+  setPickedProductId,
+  setPickerKeyword,
+  setPickerOpen,
+  setProductKeyword,
+  setProductStatusFilter,
+  setRecordKeyword,
+  setRecordRedeemType,
+  setRecordStatus,
+  setRuleConsumeAmountPerStep,
+  setRuleConsumeRewardEnabled,
+  setRuleConsumeRewardPointsPerStep,
+  setRuleExpiryMode,
+  setRuleRegisterRewardEnabled,
+  setRuleRegisterRewardPoints,
+  setRuleReviewRewardEnabled,
+  setRuleReviewRewardPoints,
+  setRuleSigninRewardEnabled,
+  setRuleSigninRewardPoints,
+  setSelectedStoreId,
+  setVerifyMethod,
+  setVerifyOpen,
+  setVerifyRemark,
+  searchCouponOptions,
+  searchPickerProducts,
+  storeOptions,
+  submitDrawer,
+  submitProductPicker,
+  submitVerify,
+  tabOptions,
+  toggleNotifyChannel,
+  toggleStatus,
+  verifyForm,
+} = useMemberPointsMallPage();
+</script>
+
+<template>
+  <Page title="积分商城" content-class="page-member-points-mall">
+    <div class="mpm-page">
+      <div class="mpm-toolbar mpm-toolbar-top">
+        <Select
+          class="mpm-store-select"
+          :value="selectedStoreId"
+          :options="storeOptions"
+          :loading="isStoreLoading"
+          placeholder="请选择门店"
+          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
+        />
+
+        <div class="mpm-segments">
+          <button
+            v-for="item in tabOptions"
+            :key="item.value"
+            type="button"
+            class="mpm-segment-item"
+            :class="{ active: activeTab === item.value }"
+            @click="setActiveTab(item.value)"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+
+        <span v-if="canView && !canManage" class="mpm-readonly-tip">
+          当前为只读权限
+        </span>
+      </div>
+
+      <Empty v-if="!canView" description="暂无积分商城页面访问权限" />
+
+      <div v-else-if="!hasStore" class="mpm-empty">
+        <Empty description="暂无门店，请先创建门店" />
+      </div>
+
+      <template v-else>
+        <section v-show="activeTab === 'rules'" class="mpm-tab-panel">
+          <Spin :spinning="isRuleLoading">
+            <PointsMallRuleStatsCards :stats="ruleStats" />
+            <PointsMallRulePanel
+              :form="ruleForm"
+              :can-manage="canManage"
+              :loading="isRuleLoading"
+              :submitting="isRuleSubmitting"
+              @set-consume-reward-enabled="setRuleConsumeRewardEnabled"
+              @set-consume-amount-per-step="setRuleConsumeAmountPerStep"
+              @set-consume-reward-points-per-step="
+                setRuleConsumeRewardPointsPerStep
+              "
+              @set-review-reward-enabled="setRuleReviewRewardEnabled"
+              @set-review-reward-points="setRuleReviewRewardPoints"
+              @set-register-reward-enabled="setRuleRegisterRewardEnabled"
+              @set-register-reward-points="setRuleRegisterRewardPoints"
+              @set-signin-reward-enabled="setRuleSigninRewardEnabled"
+              @set-signin-reward-points="setRuleSigninRewardPoints"
+              @set-expiry-mode="setRuleExpiryMode"
+              @save="saveRule"
+            />
+          </Spin>
+        </section>
+
+        <section v-show="activeTab === 'products'" class="mpm-tab-panel">
+          <PointsMallProductToolbar
+            :filters="productFilterForm"
+            :can-manage="canManage"
+            :loading="isProductLoading"
+            @set-status="setProductStatusFilter"
+            @set-keyword="setProductKeyword"
+            @search="applyProductFilters"
+            @reset="resetProductFilters"
+            @create="openCreateProduct"
+          />
+
+          <Spin :spinning="isProductLoading">
+            <div v-if="productRows.length > 0" class="mpm-product-grid">
+              <PointsMallProductCard
+                v-for="item in productRows"
+                :key="item.pointMallProductId"
+                :item="item"
+                :can-manage="canManage"
+                @edit="openEditProduct"
+                @toggle-status="toggleStatus"
+                @remove="removeProduct"
+              />
+            </div>
+            <div v-else class="mpm-empty">
+              <Empty description="暂无兑换商品" />
+            </div>
+          </Spin>
+        </section>
+
+        <section v-show="activeTab === 'records'" class="mpm-tab-panel">
+          <PointsMallRecordToolbar
+            :filters="recordFilterForm"
+            :can-manage="canManage"
+            :loading="isRecordLoading"
+            :exporting="isExporting"
+            @set-redeem-type="setRecordRedeemType"
+            @set-status="setRecordStatus"
+            @set-keyword="setRecordKeyword"
+            @search="applyRecordFilters"
+            @reset="resetRecordFilters"
+            @export="exportRecords"
+          />
+
+          <PointsMallRecordStatsCards :stats="recordStats" />
+
+          <div class="mpm-table-panel">
+            <PointsMallRecordTable
+              :can-manage="canManage"
+              :loading="isRecordLoading"
+              :pager="recordPager"
+              @page-change="handleRecordPageChange"
+              @verify="openVerifyDrawer"
+              @detail="openDetailDrawer"
+            />
+          </div>
+        </section>
+      </template>
+    </div>
+
+    <PointsMallProductEditorDrawer
+      :open="isDrawerOpen"
+      :title="drawerTitle"
+      :submit-text="drawerSubmitText"
+      :submitting="isDrawerSubmitting"
+      :loading="isDrawerLoading"
+      :can-manage="canManage"
+      :form="productForm"
+      :coupon-options="couponOptions"
+      @close="setDrawerOpen(false)"
+      @set-name="setFormName"
+      @set-image-url="setFormImageUrl"
+      @set-redeem-type="setFormRedeemType"
+      @set-coupon-template-id="setFormCouponTemplateId"
+      @set-physical-name="setFormPhysicalName"
+      @set-pickup-method="setFormPickupMethod"
+      @set-description="setFormDescription"
+      @set-exchange-type="setFormExchangeType"
+      @set-required-points="setFormRequiredPoints"
+      @set-cash-amount="setFormCashAmount"
+      @set-stock-total="setFormStockTotal"
+      @set-per-member-limit="setFormPerMemberLimit"
+      @set-status="setFormStatus"
+      @toggle-notify-channel="toggleNotifyChannel"
+      @submit="submitDrawer"
+      @open-product-picker="openProductPickerDrawer"
+      @search-coupon="searchCouponOptions"
+    />
+
+    <PointsMallProductPickerModal
+      :open="isPickerOpen"
+      :loading="isPickerLoading"
+      :keyword="pickerKeyword"
+      :rows="pickerRows"
+      :selected-id="pickerSelectedId"
+      @close="setPickerOpen(false)"
+      @set-keyword="setPickerKeyword"
+      @search="searchPickerProducts"
+      @select="setPickedProductId"
+      @submit="submitProductPicker"
+    />
+
+    <PointsMallVerifyDrawer
+      :open="isVerifyOpen"
+      :loading="isVerifyLoading"
+      :submitting="isVerifySubmitting"
+      :can-manage="canManage"
+      :record="detailRecord"
+      :form="verifyForm"
+      @close="setVerifyOpen(false)"
+      @set-verify-method="setVerifyMethod"
+      @set-verify-remark="setVerifyRemark"
+      @submit="submitVerify"
+    />
+
+    <PointsMallRecordDetailDrawer
+      :open="isDetailOpen"
+      :loading="isDetailLoading"
+      :record="detailRecord"
+      @close="setDetailOpen(false)"
+    />
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>

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

@@ -0,0 +1,140 @@
+.page-member-points-mall {
+  --mpm-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  --mpm-shadow-sm: 0 1px 2px rgb(0 0 0 / 4%);
+  --mpm-shadow-md: 0 8px 22px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 8%);
+  --mpm-border: #e7eaf0;
+  --mpm-text: #1f2937;
+  --mpm-subtext: #6b7280;
+  --mpm-muted: #9ca3af;
+  --mpm-bg: #fff;
+
+  .g-action {
+    padding: 0;
+    font-size: 13px;
+    color: #1677ff;
+    cursor: pointer;
+    background: none;
+    border: none;
+  }
+
+  .g-action + .g-action {
+    margin-left: 12px;
+  }
+
+  .g-action-danger {
+    color: #ef4444;
+  }
+
+  .g-btn {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+    height: 34px;
+    padding: 0 14px;
+    font-size: 13px;
+    color: #374151;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    transition: all var(--mpm-transition);
+  }
+
+  .g-btn:hover {
+    color: #1677ff;
+    border-color: #1677ff;
+  }
+
+  .g-btn-primary {
+    color: #fff;
+    background: #1677ff;
+    border-color: #1677ff;
+  }
+
+  .g-btn-primary:hover {
+    color: #fff;
+    background: #4096ff;
+    border-color: #4096ff;
+  }
+
+  .g-btn-sm {
+    height: 30px;
+    padding: 0 12px;
+  }
+
+  .mpm-pill {
+    height: 34px;
+    padding: 0 14px;
+    font-size: 13px;
+    color: #4b5563;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    transition: all var(--mpm-transition);
+  }
+
+  .mpm-pill.checked {
+    color: #1677ff;
+    background: #e6f4ff;
+    border-color: #1677ff;
+  }
+
+  .mpm-pill:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .mpm-pill-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .mpm-form-hint {
+    margin-top: 6px;
+    font-size: 12px;
+    color: var(--mpm-muted);
+  }
+
+  .mpm-inline-fields {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .mpm-inline-fields .ant-input-number {
+    width: 140px;
+  }
+
+  .mpm-type-tag {
+    display: inline-flex;
+    align-items: center;
+    height: 22px;
+    padding: 0 8px;
+    font-size: 12px;
+    border-radius: 6px;
+  }
+
+  .mpm-type-tag.is-blue {
+    color: #1677ff;
+    background: #e6f4ff;
+  }
+
+  .mpm-type-tag.is-green {
+    color: #16a34a;
+    background: #dcfce7;
+  }
+
+  .mpm-type-tag.is-orange {
+    color: #d97706;
+    background: #fef3c7;
+  }
+
+  .mpm-drawer-footer {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+}

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

@@ -0,0 +1,13 @@
+.page-member-points-mall {
+  .mpm-editor-drawer,
+  .mpm-verify-drawer,
+  .mpm-detail-drawer {
+    .ant-drawer-body {
+      padding: 16px 20px;
+    }
+
+    .ant-drawer-footer {
+      padding: 10px 16px;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+@import './base.less';
+@import './layout.less';
+@import './rules.less';
+@import './products.less';
+@import './records.less';
+@import './drawer.less';
+@import './modal.less';
+@import './responsive.less';

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

@@ -0,0 +1,154 @@
+.page-member-points-mall {
+  .mpm-page {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .mpm-tab-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .mpm-toolbar {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 12px 14px;
+    background: var(--mpm-bg);
+    border: 1px solid var(--mpm-border);
+    border-radius: 10px;
+    box-shadow: var(--mpm-shadow-sm);
+  }
+
+  .mpm-toolbar-top {
+    gap: 12px;
+  }
+
+  .mpm-store-select {
+    width: 220px;
+  }
+
+  .mpm-filter-select {
+    width: 140px;
+  }
+
+  .mpm-search-input {
+    width: 220px;
+  }
+
+  .mpm-spacer {
+    flex: 1;
+  }
+
+  .mpm-readonly-tip {
+    margin-left: auto;
+    font-size: 12px;
+    color: #a1a1aa;
+  }
+
+  .mpm-segments {
+    display: inline-flex;
+    overflow: hidden;
+    background: #f5f5f5;
+    border: 1px solid #e7e7e7;
+    border-radius: 9px;
+  }
+
+  .mpm-segment-item {
+    min-width: 108px;
+    height: 34px;
+    padding: 0 16px;
+    font-size: 13px;
+    color: #4b5563;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    transition: all var(--mpm-transition);
+  }
+
+  .mpm-segment-item.active {
+    font-weight: 600;
+    color: #1677ff;
+    background: #fff;
+    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+  }
+
+  .mpm-stats {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .mpm-record-stats {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .mpm-stat-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 98px;
+    padding: 16px;
+    background: #fff;
+    border: 1px solid var(--mpm-border);
+    border-radius: 10px;
+    box-shadow: var(--mpm-shadow-sm);
+    transition: box-shadow var(--mpm-transition);
+  }
+
+  .mpm-stat-card:hover {
+    box-shadow: var(--mpm-shadow-md);
+  }
+
+  .mpm-stat-label {
+    font-size: 13px;
+    color: var(--mpm-muted);
+  }
+
+  .mpm-stat-value {
+    margin-top: 8px;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.1;
+    color: var(--mpm-text);
+  }
+
+  .mpm-stat-value.is-primary {
+    color: #1677ff;
+  }
+
+  .mpm-stat-value.is-green {
+    color: #16a34a;
+  }
+
+  .mpm-stat-value.is-orange {
+    color: #d97706;
+  }
+
+  .mpm-card {
+    border: 1px solid var(--mpm-border);
+    box-shadow: var(--mpm-shadow-sm);
+  }
+
+  .mpm-section-title {
+    padding-left: 10px;
+    margin-bottom: 12px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--mpm-text);
+    border-left: 3px solid #1677ff;
+  }
+
+  .mpm-empty {
+    padding: 28px 14px;
+    font-size: 13px;
+    color: #9ca3af;
+    text-align: center;
+    background: #fff;
+    border: 1px solid var(--mpm-border);
+    border-radius: 10px;
+    box-shadow: var(--mpm-shadow-sm);
+  }
+}

apps/web-antd/src/views/member/points-mall/styles/modal.less

@@ -0,0 +1,77 @@
+.page-member-points-mall {
+  .mpm-picker-toolbar {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .mpm-picker-empty {
+    padding: 32px 12px;
+    border: 1px dashed #e5e7eb;
+    border-radius: 10px;
+  }
+
+  .mpm-picker-table-wrap {
+    max-height: 420px;
+    overflow: auto;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+  }
+
+  .mpm-picker-table {
+    width: 100%;
+    min-width: 680px;
+    border-collapse: collapse;
+  }
+
+  .mpm-picker-table th,
+  .mpm-picker-table td {
+    padding: 10px 12px;
+    font-size: 13px;
+    color: #334155;
+    text-align: left;
+    white-space: nowrap;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  .mpm-picker-table th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    font-size: 12px;
+    color: #64748b;
+    background: #f8fafc;
+  }
+
+  .mpm-picker-table tr {
+    cursor: pointer;
+  }
+
+  .mpm-picker-table tr.checked {
+    background: #eff6ff;
+  }
+
+  .mpm-picker-table .name {
+    font-size: 13px;
+    color: #111827;
+  }
+
+  .mpm-picker-table .spu {
+    margin-top: 2px;
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  .mpm-picker-table .col-radio {
+    width: 52px;
+  }
+
+  .mpm-picker-table .col-price {
+    width: 120px;
+  }
+
+  .mpm-picker-table .col-status {
+    width: 120px;
+  }
+}

apps/web-antd/src/views/member/points-mall/styles/products.less

@@ -0,0 +1,129 @@
+.page-member-points-mall {
+  .mpm-product-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  .mpm-product-card {
+    overflow: hidden;
+    background: #fff;
+    border: 1px solid var(--mpm-border);
+    border-radius: 10px;
+    box-shadow: var(--mpm-shadow-sm);
+    transition: all var(--mpm-transition);
+  }
+
+  .mpm-product-card:hover {
+    box-shadow: var(--mpm-shadow-md);
+    transform: translateY(-1px);
+  }
+
+  .mpm-product-card.is-disabled {
+    opacity: 0.58;
+  }
+
+  .mpm-product-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 140px;
+    color: #9ca3af;
+    background: #f3f4f6;
+  }
+
+  .mpm-product-image .iconify {
+    width: 32px;
+    height: 32px;
+  }
+
+  .mpm-product-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .mpm-product-body {
+    padding: 14px 16px;
+  }
+
+  .mpm-product-name {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--mpm-text);
+  }
+
+  .mpm-product-price {
+    margin-top: 10px;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.1;
+    color: #1677ff;
+  }
+
+  .mpm-product-price .cash {
+    margin-left: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--mpm-subtext);
+  }
+
+  .mpm-product-meta {
+    display: flex;
+    gap: 12px;
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--mpm-muted);
+  }
+
+  .mpm-product-footer {
+    display: flex;
+    align-items: center;
+    padding-top: 10px;
+    margin-top: 10px;
+    border-top: 1px solid #f1f5f9;
+  }
+
+  .mpm-product-footer .ant-tag {
+    margin-left: auto;
+  }
+
+  .mpm-image-field {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .mpm-image-preview {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+  }
+
+  .mpm-selected-product {
+    padding: 10px 12px;
+    margin-bottom: 8px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+  }
+
+  .mpm-selected-product .name {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--mpm-text);
+  }
+
+  .mpm-selected-product .id {
+    display: block;
+    margin-top: 2px;
+    font-size: 12px;
+    color: var(--mpm-muted);
+  }
+}

apps/web-antd/src/views/member/points-mall/styles/records.less

@@ -0,0 +1,179 @@
+.page-member-points-mall {
+  .mpm-table-panel {
+    padding: 10px 12px;
+    background: #fff;
+    border: 1px solid var(--mpm-border);
+    border-radius: 12px;
+    box-shadow: var(--mpm-shadow-sm);
+  }
+
+  .mpm-record-table-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .mpm-record-no {
+    font-family: ui-monospace, sfmono-regular, menlo, monospace;
+    font-size: 12px;
+    color: #334155;
+  }
+
+  .mpm-record-member {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .mpm-record-member .name {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--mpm-text);
+  }
+
+  .mpm-record-member .phone {
+    font-size: 12px;
+    color: var(--mpm-muted);
+  }
+
+  .mpm-record-points {
+    font-weight: 600;
+    color: #111827;
+  }
+
+  .mpm-record-status {
+    position: relative;
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    font-size: 12px;
+    color: #4b5563;
+  }
+
+  .mpm-record-status::before {
+    width: 6px;
+    height: 6px;
+    content: '';
+    background: #9ca3af;
+    border-radius: 999px;
+  }
+
+  .mpm-record-status.is-green::before {
+    background: #16a34a;
+  }
+
+  .mpm-record-status.is-orange::before {
+    background: #d97706;
+  }
+
+  .mpm-record-status.is-gray::before {
+    background: #9ca3af;
+  }
+
+  .mpm-record-status.is-red::before {
+    background: #ef4444;
+  }
+
+  .mpm-pagination {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .mpm-verify-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .mpm-verify-card {
+    padding: 14px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+  }
+
+  .mpm-verify-product .name {
+    margin-bottom: 6px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--mpm-text);
+  }
+
+  .mpm-verify-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  .mpm-verify-grid .item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .mpm-verify-grid .label {
+    font-size: 12px;
+    color: var(--mpm-muted);
+  }
+
+  .mpm-verify-grid .value {
+    font-size: 13px;
+    color: var(--mpm-text);
+  }
+
+  .mpm-verify-grid .value.mono {
+    font-family: ui-monospace, sfmono-regular, menlo, monospace;
+  }
+
+  .mpm-verify-grid .value.is-primary {
+    font-weight: 600;
+    color: #1677ff;
+  }
+
+  .mpm-detail-content {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .mpm-detail-top .name {
+    margin-bottom: 6px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--mpm-text);
+  }
+
+  .mpm-detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px 14px;
+  }
+
+  .mpm-detail-grid .item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .mpm-detail-grid .label {
+    font-size: 12px;
+    color: var(--mpm-muted);
+  }
+
+  .mpm-detail-grid .value {
+    font-size: 13px;
+    color: var(--mpm-text);
+  }
+
+  .mpm-detail-grid .value.mono {
+    font-family: ui-monospace, sfmono-regular, menlo, monospace;
+  }
+
+  .mpm-empty-tip {
+    padding: 20px 0;
+    font-size: 13px;
+    color: var(--mpm-muted);
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,42 @@
+.page-member-points-mall {
+  @media (max-width: 1400px) {
+    .mpm-product-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .mpm-toolbar {
+      flex-wrap: wrap;
+    }
+
+    .mpm-store-select,
+    .mpm-search-input {
+      width: 100%;
+    }
+
+    .mpm-stats,
+    .mpm-record-stats {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .mpm-product-grid {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 768px) {
+    .mpm-rule-row {
+      flex-wrap: wrap;
+    }
+
+    .mpm-rule-label {
+      min-width: auto;
+    }
+
+    .mpm-verify-grid,
+    .mpm-detail-grid {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+}

apps/web-antd/src/views/member/points-mall/styles/rules.less

@@ -0,0 +1,40 @@
+.page-member-points-mall {
+  .mpm-rule-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .mpm-rule-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 14px 0;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  .mpm-rule-row:last-child {
+    border-bottom: none;
+  }
+
+  .mpm-rule-label {
+    min-width: 96px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--mpm-text);
+  }
+
+  .mpm-rule-text {
+    font-size: 13px;
+    color: var(--mpm-subtext);
+  }
+
+  .mpm-rule-input {
+    width: 86px;
+  }
+
+  .mpm-save-bar {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

apps/web-antd/src/views/member/points-mall/types.ts

@@ -0,0 +1,191 @@
+import type { Dayjs } from 'dayjs';
+
+import type {
+  MemberPointMallExchangeType,
+  MemberPointMallExpiryMode,
+  MemberPointMallNotifyChannel,
+  MemberPointMallPickupMethod,
+  MemberPointMallProductDto,
+  MemberPointMallProductStatus,
+  MemberPointMallRecordDetailDto,
+  MemberPointMallRecordDto,
+  MemberPointMallRecordStatsDto,
+  MemberPointMallRecordStatus,
+  MemberPointMallRedeemType,
+  MemberPointMallRuleStatsDto,
+  MemberPointMallVerifyMethod,
+} from '#/api/member/points-mall';
+
+/** 页面主 Tab。 */
+export type PointMallTabKey = 'products' | 'records' | 'rules';
+
+/** 规则编辑表单。 */
+export interface PointMallRuleForm {
+  consumeAmountPerStep: null | number;
+  consumeRewardPointsPerStep: null | number;
+  expiryMode: MemberPointMallExpiryMode;
+  isConsumeRewardEnabled: boolean;
+  isRegisterRewardEnabled: boolean;
+  isReviewRewardEnabled: boolean;
+  isSigninRewardEnabled: boolean;
+  registerRewardPoints: null | number;
+  reviewRewardPoints: null | number;
+  signinRewardPoints: null | number;
+}
+
+/** 商品筛选表单。 */
+export interface PointMallProductFilterForm {
+  keyword: string;
+  status: '' | MemberPointMallProductStatus;
+}
+
+/** 商品编辑表单。 */
+export interface PointMallProductEditorForm {
+  cashAmount: null | number;
+  couponTemplateId: string;
+  couponTemplateName: string;
+  description: string;
+  exchangeType: MemberPointMallExchangeType;
+  imageUrl: string;
+  name: string;
+  notifyChannels: MemberPointMallNotifyChannel[];
+  perMemberLimit: null | number;
+  physicalName: string;
+  pickupMethod: MemberPointMallPickupMethod;
+  pointMallProductId: string;
+  productId: string;
+  productName: string;
+  redeemType: MemberPointMallRedeemType;
+  requiredPoints: null | number;
+  status: MemberPointMallProductStatus;
+  stockTotal: null | number;
+}
+
+/** 记录筛选表单。 */
+export interface PointMallRecordFilterForm {
+  dateRange: [Dayjs, Dayjs] | null;
+  keyword: string;
+  redeemType: '' | MemberPointMallRedeemType;
+  status: '' | MemberPointMallRecordStatus;
+}
+
+/** 记录分页状态。 */
+export interface PointMallRecordPager {
+  items: MemberPointMallRecordDto[];
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+/** 核销表单。 */
+export interface PointMallVerifyForm {
+  verifyMethod: MemberPointMallVerifyMethod;
+  verifyRemark: string;
+}
+
+/** 商品卡片模型。 */
+export type PointMallProductCardViewModel = MemberPointMallProductDto;
+
+/** 规则统计模型。 */
+export type PointMallRuleStatsViewModel = MemberPointMallRuleStatsDto;
+
+/** 记录统计模型。 */
+export type PointMallRecordStatsViewModel = MemberPointMallRecordStatsDto;
+
+/** 记录详情模型。 */
+export type PointMallRecordDetailViewModel = MemberPointMallRecordDetailDto;
+
+/** 创建默认规则表单。 */
+export function createDefaultPointMallRuleForm(): PointMallRuleForm {
+  return {
+    isConsumeRewardEnabled: true,
+    consumeAmountPerStep: 1,
+    consumeRewardPointsPerStep: 1,
+    isReviewRewardEnabled: true,
+    reviewRewardPoints: 10,
+    isRegisterRewardEnabled: true,
+    registerRewardPoints: 100,
+    isSigninRewardEnabled: false,
+    signinRewardPoints: 5,
+    expiryMode: 'yearly_clear',
+  };
+}
+
+/** 创建默认商品筛选表单。 */
+export function createDefaultPointMallProductFilterForm(): PointMallProductFilterForm {
+  return {
+    status: '',
+    keyword: '',
+  };
+}
+
+/** 创建默认商品编辑表单。 */
+export function createDefaultPointMallProductEditorForm(): PointMallProductEditorForm {
+  return {
+    pointMallProductId: '',
+    redeemType: 'product',
+    productId: '',
+    productName: '',
+    couponTemplateId: '',
+    couponTemplateName: '',
+    physicalName: '',
+    pickupMethod: 'store_pickup',
+    name: '',
+    imageUrl: '',
+    exchangeType: 'points',
+    requiredPoints: null,
+    cashAmount: null,
+    stockTotal: null,
+    perMemberLimit: null,
+    description: '',
+    notifyChannels: ['in_app'],
+    status: 'enabled',
+  };
+}
+
+/** 创建默认记录筛选表单。 */
+export function createDefaultPointMallRecordFilterForm(): PointMallRecordFilterForm {
+  return {
+    redeemType: '',
+    status: '',
+    keyword: '',
+    dateRange: null,
+  };
+}
+
+/** 创建默认记录分页。 */
+export function createDefaultPointMallRecordPager(): PointMallRecordPager {
+  return {
+    items: [],
+    page: 1,
+    pageSize: 10,
+    totalCount: 0,
+  };
+}
+
+/** 创建默认规则统计。 */
+export function createDefaultPointMallRuleStats(): PointMallRuleStatsViewModel {
+  return {
+    totalIssuedPoints: 0,
+    redeemedPoints: 0,
+    pointMembers: 0,
+    redeemRate: 0,
+  };
+}
+
+/** 创建默认记录统计。 */
+export function createDefaultPointMallRecordStats(): PointMallRecordStatsViewModel {
+  return {
+    todayRedeemCount: 0,
+    pendingPhysicalCount: 0,
+    currentMonthUsedPoints: 0,
+  };
+}
+
+/** 创建默认核销表单。 */
+export function createDefaultPointMallVerifyForm(): PointMallVerifyForm {
+  return {
+    verifyMethod: 'manual',
+    verifyRemark: '',
+  };
+}

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

@@ -3,11 +3,12 @@ import type {
   SaveMemberStoredCardPlanPayload,
 } from '#/api/member/stored-card';
 import type {
-  createDefaultStoredCardPlanEditorForm,
   StoredCardPlanEditorForm,
-  type StoredCardRecordFilterForm,
+  StoredCardRecordFilterForm,
 } from '#/views/member/stored-card/types';
 
+import { createDefaultStoredCardPlanEditorForm } from '#/views/member/stored-card/types';
+
 /** 金额格式化。 */
 export function formatCurrency(value: null | number | undefined) {
   const amount = Number(value ?? 0);