diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index fcc64770..a74ce8d0 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index 2e8fb5bc..e28a6ae1 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -7,12 +7,14 @@ import { IconifyIcon } from '@vben/icons';
 import { $te } from '@vben/locales';
 import {
   AsyncComponents,
+  createRequiredValidation,
   setupVbenVxeTable,
   useVbenVxeGrid,
 } from '@vben/plugins/vxe-table';
 import {
   erpCountInputFormatter,
   erpNumberFormatter,
+  fenToYuan,
   formatPast2,
   isFunction,
   isString,
@@ -343,11 +345,17 @@ setupVbenVxeTable({
         return `${erpNumberFormatter(cellValue, digits)}元`;
       },
     });
+
+    vxeUI.formats.add('formatFenToYuanAmount', {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
+        return `${erpNumberFormatter(fenToYuan(cellValue), digits)}元`;
+      },
+    });
   },
   useVbenForm,
 });
 
-export { useVbenVxeGrid };
+export { createRequiredValidation, useVbenVxeGrid };
 
 const [VxeTable, VxeColumn, VxeToolbar] = AsyncComponents;
 export { VxeColumn, VxeTable, VxeToolbar };
diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index 49c623b7..cc1683f6 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -40,6 +40,7 @@ export namespace BpmProcessInstanceApi {
     nodeType: BpmNodeTypeEnum;
     startTime?: Date;
     status: number;
+    processInstanceId?: string;
     tasks: ApprovalTaskInfo[];
   }
 
diff --git a/apps/web-antd/src/api/bpm/task/index.ts b/apps/web-antd/src/api/bpm/task/index.ts
index 510ea174..7d9f2509 100644
--- a/apps/web-antd/src/api/bpm/task/index.ts
+++ b/apps/web-antd/src/api/bpm/task/index.ts
@@ -130,3 +130,8 @@ export const getChildrenTaskList = async (id: string) => {
     `/bpm/task/list-by-parent-task-id?parentTaskId=${id}`,
   );
 };
+
+// 撤回任务
+export const withdrawTask = async (taskId: string) => {
+  return await requestClient.put('/bpm/task/withdraw', null, { params: { taskId } });
+};
diff --git a/apps/web-antd/src/api/erp/finance/account/index.ts b/apps/web-antd/src/api/erp/finance/account/index.ts
new file mode 100644
index 00000000..e180af65
--- /dev/null
+++ b/apps/web-antd/src/api/erp/finance/account/index.ts
@@ -0,0 +1,68 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpAccountApi {
+  /** ERP 结算账户信息 */
+  export interface Account {
+    id?: number; // 结算账户编号
+    no: string; // 账户编码
+    remark: string; // 备注
+    status: number; // 开启状态
+    sort: number; // 排序
+    defaultStatus: boolean; // 是否默认
+    name: string; // 账户名称
+  }
+
+  /** 结算账户分页查询参数 */
+  export interface AccountPageParam extends PageParam {
+    name?: string;
+    no?: string;
+    status?: number;
+  }
+}
+
+/** 查询结算账户分页 */
+export function getAccountPage(params: ErpAccountApi.AccountPageParam) {
+  return requestClient.get<PageResult<ErpAccountApi.Account>>(
+    '/erp/account/page',
+    { params },
+  );
+}
+
+/** 查询结算账户精简列表 */
+export function getAccountSimpleList() {
+  return requestClient.get<ErpAccountApi.Account[]>('/erp/account/simple-list');
+}
+
+/** 查询结算账户详情 */
+export function getAccount(id: number) {
+  return requestClient.get<ErpAccountApi.Account>(`/erp/account/get?id=${id}`);
+}
+
+/** 新增结算账户 */
+export function createAccount(data: ErpAccountApi.Account) {
+  return requestClient.post('/erp/account/create', data);
+}
+
+/** 修改结算账户 */
+export function updateAccount(data: ErpAccountApi.Account) {
+  return requestClient.put('/erp/account/update', data);
+}
+
+/** 修改结算账户默认状态 */
+export function updateAccountDefaultStatus(id: number, defaultStatus: boolean) {
+  return requestClient.put('/erp/account/update-default-status', null, {
+    params: { id, defaultStatus },
+  });
+}
+
+/** 删除结算账户 */
+export function deleteAccount(id: number) {
+  return requestClient.delete(`/erp/account/delete?id=${id}`);
+}
+
+/** 导出结算账户 Excel */
+export function exportAccount(params: any) {
+  return requestClient.download('/erp/account/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/erp/finance/payment/index.ts b/apps/web-antd/src/api/erp/finance/payment/index.ts
new file mode 100644
index 00000000..e9dc1847
--- /dev/null
+++ b/apps/web-antd/src/api/erp/finance/payment/index.ts
@@ -0,0 +1,103 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpFinancePaymentApi {
+  /** 付款单信息 */
+  export interface FinancePayment {
+    id?: number; // 付款单编号
+    no: string; // 付款单号
+    supplierId: number; // 供应商编号
+    paymentTime: Date; // 付款时间
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+  }
+
+  /** 付款单分页查询参数 */
+  export interface FinancePaymentPageParams extends PageParam {
+    no?: string;
+    supplierId?: number;
+    status?: number;
+  }
+
+  /** 付款单状态更新参数 */
+  export interface FinancePaymentStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询付款单分页
+ */
+export function getFinancePaymentPage(
+  params: ErpFinancePaymentApi.FinancePaymentPageParams,
+) {
+  return requestClient.get<PageResult<ErpFinancePaymentApi.FinancePayment>>(
+    '/erp/finance-payment/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询付款单详情
+ */
+export function getFinancePayment(id: number) {
+  return requestClient.get<ErpFinancePaymentApi.FinancePayment>(
+    `/erp/finance-payment/get?id=${id}`,
+  );
+}
+
+/**
+ * 新增付款单
+ */
+export function createFinancePayment(
+  data: ErpFinancePaymentApi.FinancePayment,
+) {
+  return requestClient.post('/erp/finance-payment/create', data);
+}
+
+/**
+ * 修改付款单
+ */
+export function updateFinancePayment(
+  data: ErpFinancePaymentApi.FinancePayment,
+) {
+  return requestClient.put('/erp/finance-payment/update', data);
+}
+
+/**
+ * 更新付款单的状态
+ */
+export function updateFinancePaymentStatus(
+  params: ErpFinancePaymentApi.FinancePaymentStatusParams,
+) {
+  return requestClient.put('/erp/finance-payment/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除付款单
+ */
+export function deleteFinancePayment(ids: number[]) {
+  return requestClient.delete('/erp/finance-payment/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出付款单 Excel
+ */
+export function exportFinancePayment(
+  params: ErpFinancePaymentApi.FinancePaymentPageParams,
+) {
+  return requestClient.download('/erp/finance-payment/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/finance/receipt/index.ts b/apps/web-antd/src/api/erp/finance/receipt/index.ts
new file mode 100644
index 00000000..37b70e76
--- /dev/null
+++ b/apps/web-antd/src/api/erp/finance/receipt/index.ts
@@ -0,0 +1,103 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpFinanceReceiptApi {
+  /** 收款单信息 */
+  export interface FinanceReceipt {
+    id?: number; // 收款单编号
+    no: string; // 收款单号
+    customerId: number; // 客户编号
+    receiptTime: Date; // 收款时间
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+  }
+
+  /** 收款单分页查询参数 */
+  export interface FinanceReceiptPageParams extends PageParam {
+    no?: string;
+    customerId?: number;
+    status?: number;
+  }
+
+  /** 收款单状态更新参数 */
+  export interface FinanceReceiptStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询收款单分页
+ */
+export function getFinanceReceiptPage(
+  params: ErpFinanceReceiptApi.FinanceReceiptPageParams,
+) {
+  return requestClient.get<PageResult<ErpFinanceReceiptApi.FinanceReceipt>>(
+    '/erp/finance-receipt/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询收款单详情
+ */
+export function getFinanceReceipt(id: number) {
+  return requestClient.get<ErpFinanceReceiptApi.FinanceReceipt>(
+    `/erp/finance-receipt/get?id=${id}`,
+  );
+}
+
+/**
+ * 新增收款单
+ */
+export function createFinanceReceipt(
+  data: ErpFinanceReceiptApi.FinanceReceipt,
+) {
+  return requestClient.post('/erp/finance-receipt/create', data);
+}
+
+/**
+ * 修改收款单
+ */
+export function updateFinanceReceipt(
+  data: ErpFinanceReceiptApi.FinanceReceipt,
+) {
+  return requestClient.put('/erp/finance-receipt/update', data);
+}
+
+/**
+ * 更新收款单的状态
+ */
+export function updateFinanceReceiptStatus(
+  params: ErpFinanceReceiptApi.FinanceReceiptStatusParams,
+) {
+  return requestClient.put('/erp/finance-receipt/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除收款单
+ */
+export function deleteFinanceReceipt(ids: number[]) {
+  return requestClient.delete('/erp/finance-receipt/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出收款单 Excel
+ */
+export function exportFinanceReceipt(
+  params: ErpFinanceReceiptApi.FinanceReceiptPageParams,
+) {
+  return requestClient.download('/erp/finance-receipt/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/product/category/index.ts b/apps/web-antd/src/api/erp/product/category/index.ts
new file mode 100644
index 00000000..b16a91e3
--- /dev/null
+++ b/apps/web-antd/src/api/erp/product/category/index.ts
@@ -0,0 +1,60 @@
+import { requestClient } from '#/api/request';
+
+export namespace ErpProductCategoryApi {
+  /** ERP 产品分类信息 */
+  export interface ProductCategory {
+    id?: number; // 分类编号
+    parentId: number; // 父分类编号
+    name: string; // 分类名称
+    code: string; // 分类编码
+    sort: number; // 分类排序
+    status: number; // 开启状态
+  }
+}
+
+/** 查询产品分类列表 */
+export function getProductCategoryList() {
+  return requestClient.get<ErpProductCategoryApi.ProductCategory[]>(
+    '/erp/product-category/list',
+  );
+}
+
+/** 查询产品分类精简列表 */
+export function getProductCategorySimpleList() {
+  return requestClient.get<ErpProductCategoryApi.ProductCategory[]>(
+    '/erp/product-category/simple-list',
+  );
+}
+
+/** 查询产品分类详情 */
+export function getProductCategory(id: number) {
+  return requestClient.get<ErpProductCategoryApi.ProductCategory>(
+    `/erp/product-category/get?id=${id}`,
+  );
+}
+
+/** 新增产品分类 */
+export function createProductCategory(
+  data: ErpProductCategoryApi.ProductCategory,
+) {
+  return requestClient.post('/erp/product-category/create', data);
+}
+
+/** 修改产品分类 */
+export function updateProductCategory(
+  data: ErpProductCategoryApi.ProductCategory,
+) {
+  return requestClient.put('/erp/product-category/update', data);
+}
+
+/** 删除产品分类 */
+export function deleteProductCategory(id: number) {
+  return requestClient.delete(`/erp/product-category/delete?id=${id}`);
+}
+
+/** 导出产品分类 Excel */
+export function exportProductCategory(params: any) {
+  return requestClient.download('/erp/product-category/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/product/product/index.ts b/apps/web-antd/src/api/erp/product/product/index.ts
new file mode 100644
index 00000000..157827ff
--- /dev/null
+++ b/apps/web-antd/src/api/erp/product/product/index.ts
@@ -0,0 +1,61 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpProductApi {
+  /** ERP 产品信息 */
+  export interface Product {
+    id?: number; // 产品编号
+    name: string; // 产品名称
+    barCode: string; // 产品条码
+    categoryId: number; // 产品类型编号
+    unitId: number; // 单位编号
+    unitName?: string; // 单位名字
+    status: number; // 产品状态
+    standard: string; // 产品规格
+    remark: string; // 产品备注
+    expiryDay: number; // 保质期天数
+    weight: number; // 重量（kg）
+    purchasePrice: number; // 采购价格，单位：元
+    salePrice: number; // 销售价格，单位：元
+    minPrice: number; // 最低价格，单位：元
+  }
+}
+
+/** 查询产品分页 */
+export function getProductPage(params: PageParam) {
+  return requestClient.get<PageResult<ErpProductApi.Product>>(
+    '/erp/product/page',
+    { params },
+  );
+}
+
+/** 查询产品精简列表 */
+export function getProductSimpleList() {
+  return requestClient.get<ErpProductApi.Product[]>('/erp/product/simple-list');
+}
+
+/** 查询产品详情 */
+export function getProduct(id: number) {
+  return requestClient.get<ErpProductApi.Product>(`/erp/product/get?id=${id}`);
+}
+
+/** 新增产品 */
+export function createProduct(data: ErpProductApi.Product) {
+  return requestClient.post('/erp/product/create', data);
+}
+
+/** 修改产品 */
+export function updateProduct(data: ErpProductApi.Product) {
+  return requestClient.put('/erp/product/update', data);
+}
+
+/** 删除产品 */
+export function deleteProduct(id: number) {
+  return requestClient.delete(`/erp/product/delete?id=${id}`);
+}
+
+/** 导出产品 Excel */
+export function exportProduct(params: any) {
+  return requestClient.download('/erp/product/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/erp/product/unit/index.ts b/apps/web-antd/src/api/erp/product/unit/index.ts
new file mode 100644
index 00000000..317c09c8
--- /dev/null
+++ b/apps/web-antd/src/api/erp/product/unit/index.ts
@@ -0,0 +1,62 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpProductUnitApi {
+  /** ERP 产品单位信息 */
+  export interface ProductUnit {
+    id?: number; // 单位编号
+    name: string; // 单位名字
+    status: number; // 单位状态
+  }
+
+  /** 产品单位分页查询参数 */
+  export interface ProductUnitPageParam extends PageParam {
+    name?: string;
+    status?: number;
+  }
+}
+
+/** 查询产品单位分页 */
+export function getProductUnitPage(
+  params: ErpProductUnitApi.ProductUnitPageParam,
+) {
+  return requestClient.get<PageResult<ErpProductUnitApi.ProductUnit>>(
+    '/erp/product-unit/page',
+    { params },
+  );
+}
+
+/** 查询产品单位精简列表 */
+export function getProductUnitSimpleList() {
+  return requestClient.get<ErpProductUnitApi.ProductUnit[]>(
+    '/erp/product-unit/simple-list',
+  );
+}
+
+/** 查询产品单位详情 */
+export function getProductUnit(id: number) {
+  return requestClient.get<ErpProductUnitApi.ProductUnit>(
+    `/erp/product-unit/get?id=${id}`,
+  );
+}
+
+/** 新增产品单位 */
+export function createProductUnit(data: ErpProductUnitApi.ProductUnit) {
+  return requestClient.post('/erp/product-unit/create', data);
+}
+
+/** 修改产品单位 */
+export function updateProductUnit(data: ErpProductUnitApi.ProductUnit) {
+  return requestClient.put('/erp/product-unit/update', data);
+}
+
+/** 删除产品单位 */
+export function deleteProductUnit(id: number) {
+  return requestClient.delete(`/erp/product-unit/delete?id=${id}`);
+}
+
+/** 导出产品单位 Excel */
+export function exportProductUnit(params: any) {
+  return requestClient.download('/erp/product-unit/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/erp/purchase/in/index.ts b/apps/web-antd/src/api/erp/purchase/in/index.ts
new file mode 100644
index 00000000..fde2c0fb
--- /dev/null
+++ b/apps/web-antd/src/api/erp/purchase/in/index.ts
@@ -0,0 +1,102 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpPurchaseInApi {
+  /** 采购入库信息 */
+  export interface PurchaseIn {
+    id?: number; // 入库工单编号
+    no: string; // 采购入库号
+    supplierId: number; // 供应商编号
+    inTime: Date; // 入库时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+    outCount: number; // 采购出库数量
+    returnCount: number; // 采购退货数量
+  }
+
+  /** 采购入库分页查询参数 */
+  export interface PurchaseInPageParams extends PageParam {
+    no?: string;
+    supplierId?: number;
+    status?: number;
+  }
+
+  /** 采购入库状态更新参数 */
+  export interface PurchaseInStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询采购入库分页
+ */
+export function getPurchaseInPage(
+  params: ErpPurchaseInApi.PurchaseInPageParams,
+) {
+  return requestClient.get<PageResult<ErpPurchaseInApi.PurchaseIn>>(
+    '/erp/purchase-in/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询采购入库详情
+ */
+export function getPurchaseIn(id: number) {
+  return requestClient.get<ErpPurchaseInApi.PurchaseIn>(
+    `/erp/purchase-in/get?id=${id}`,
+  );
+}
+
+/**
+ * 新增采购入库
+ */
+export function createPurchaseIn(data: ErpPurchaseInApi.PurchaseIn) {
+  return requestClient.post('/erp/purchase-in/create', data);
+}
+
+/**
+ * 修改采购入库
+ */
+export function updatePurchaseIn(data: ErpPurchaseInApi.PurchaseIn) {
+  return requestClient.put('/erp/purchase-in/update', data);
+}
+
+/**
+ * 更新采购入库的状态
+ */
+export function updatePurchaseInStatus(
+  params: ErpPurchaseInApi.PurchaseInStatusParams,
+) {
+  return requestClient.put('/erp/purchase-in/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除采购入库
+ */
+export function deletePurchaseIn(ids: number[]) {
+  return requestClient.delete('/erp/purchase-in/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出采购入库 Excel
+ */
+export function exportPurchaseIn(
+  params: ErpPurchaseInApi.PurchaseInPageParams,
+) {
+  return requestClient.download('/erp/purchase-in/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/purchase/order/index.ts b/apps/web-antd/src/api/erp/purchase/order/index.ts
new file mode 100644
index 00000000..ae84c243
--- /dev/null
+++ b/apps/web-antd/src/api/erp/purchase/order/index.ts
@@ -0,0 +1,116 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpPurchaseOrderApi {
+  /** ERP 采购订单项信息 */
+  export interface PurchaseOrderItem {
+    id?: number; // 订单项编号
+    orderId?: number; // 采购订单编号
+    productId?: number; // 产品编号
+    productName?: string; // 产品名称
+    productBarCode?: string; // 产品条码
+    productUnitId?: number; // 产品单位编号
+    productUnitName?: string; // 产品单位名称
+    productPrice?: number; // 产品单价，单位：元
+    totalProductPrice?: number; // 产品总价，单位：元
+    count?: number; // 数量
+    totalPrice?: number; // 总价，单位：元
+    taxPercent?: number; // 税率，百分比
+    taxPrice?: number; // 税额，单位：元
+    totalTaxPrice?: number; // 含税总价，单位：元
+    remark?: string; // 备注
+    stockCount?: number; // 库存数量（显示字段）
+  }
+
+  /** ERP 采购订单信息 */
+  export interface PurchaseOrder {
+    id?: number; // 订单工单编号
+    no?: string; // 采购订单号
+    supplierId?: number; // 供应商编号
+    supplierName?: string; // 供应商名称
+    orderTime?: Date | string; // 订单时间
+    totalCount?: number; // 合计数量
+    totalPrice?: number; // 合计金额，单位：元
+    totalProductPrice?: number; // 产品金额，单位：元
+    discountPercent?: number; // 优惠率，百分比
+    discountPrice?: number; // 优惠金额，单位：元
+    depositPrice?: number; // 定金金额，单位：元
+    accountId?: number; // 结算账户编号
+    status?: number; // 状态
+    remark?: string; // 备注
+    fileUrl?: string; // 附件地址
+    inCount?: number; // 采购入库数量
+    returnCount?: number; // 采购退货数量
+    inStatus?: number; // 入库状态
+    returnStatus?: number; // 退货状态
+    productNames?: string; // 产品名称列表
+    creatorName?: string; // 创建人名称
+    createTime?: Date; // 创建时间
+    items?: PurchaseOrderItem[]; // 订单项列表
+  }
+
+  /** 采购订单分页查询参数 */
+  export interface PurchaseOrderPageParam extends PageParam {
+    no?: string;
+    supplierId?: number;
+    productId?: number;
+    orderTime?: string[];
+    status?: number;
+    remark?: string;
+    creator?: string;
+    inStatus?: number;
+    returnStatus?: number;
+  }
+}
+
+/** 查询采购订单分页 */
+export function getPurchaseOrderPage(
+  params: ErpPurchaseOrderApi.PurchaseOrderPageParam,
+) {
+  return requestClient.get<PageResult<ErpPurchaseOrderApi.PurchaseOrder>>(
+    '/erp/purchase-order/page',
+    { params },
+  );
+}
+
+/** 查询采购订单详情 */
+export function getPurchaseOrder(id: number) {
+  return requestClient.get<ErpPurchaseOrderApi.PurchaseOrder>(
+    `/erp/purchase-order/get?id=${id}`,
+  );
+}
+
+/** 新增采购订单 */
+export function createPurchaseOrder(data: ErpPurchaseOrderApi.PurchaseOrder) {
+  return requestClient.post('/erp/purchase-order/create', data);
+}
+
+/** 修改采购订单 */
+export function updatePurchaseOrder(data: ErpPurchaseOrderApi.PurchaseOrder) {
+  return requestClient.put('/erp/purchase-order/update', data);
+}
+
+/** 更新采购订单的状态 */
+export function updatePurchaseOrderStatus(id: number, status: number) {
+  return requestClient.put('/erp/purchase-order/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除采购订单 */
+export function deletePurchaseOrder(id: number) {
+  return requestClient.delete(`/erp/purchase-order/delete?id=${id}`);
+}
+
+/** 批量删除采购订单 */
+export function deletePurchaseOrderList(ids: number[]) {
+  return requestClient.delete('/erp/purchase-order/delete', {
+    params: { ids: ids.join(',') },
+  });
+}
+
+/** 导出采购订单 Excel */
+export function exportPurchaseOrder(params: any) {
+  return requestClient.download('/erp/purchase-order/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/erp/purchase/return/index.ts b/apps/web-antd/src/api/erp/purchase/return/index.ts
new file mode 100644
index 00000000..461a76f7
--- /dev/null
+++ b/apps/web-antd/src/api/erp/purchase/return/index.ts
@@ -0,0 +1,104 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpPurchaseReturnApi {
+  /** 采购退货信息 */
+  export interface PurchaseReturn {
+    id?: number; // 采购退货编号
+    no: string; // 采购退货号
+    supplierId: number; // 供应商编号
+    returnTime: Date; // 退货时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+  }
+
+  /** 采购退货分页查询参数 */
+  export interface PurchaseReturnPageParams extends PageParam {
+    no?: string;
+    supplierId?: number;
+    status?: number;
+  }
+
+  /** 采购退货状态更新参数 */
+  export interface PurchaseReturnStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询采购退货分页
+ */
+export function getPurchaseReturnPage(
+  params: ErpPurchaseReturnApi.PurchaseReturnPageParams,
+) {
+  return requestClient.get<PageResult<ErpPurchaseReturnApi.PurchaseReturn>>(
+    '/erp/purchase-return/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询采购退货详情
+ */
+export function getPurchaseReturn(id: number) {
+  return requestClient.get<ErpPurchaseReturnApi.PurchaseReturn>(
+    `/erp/purchase-return/get?id=${id}`,
+  );
+}
+
+/**
+ * 新增采购退货
+ */
+export function createPurchaseReturn(
+  data: ErpPurchaseReturnApi.PurchaseReturn,
+) {
+  return requestClient.post('/erp/purchase-return/create', data);
+}
+
+/**
+ * 修改采购退货
+ */
+export function updatePurchaseReturn(
+  data: ErpPurchaseReturnApi.PurchaseReturn,
+) {
+  return requestClient.put('/erp/purchase-return/update', data);
+}
+
+/**
+ * 更新采购退货的状态
+ */
+export function updatePurchaseReturnStatus(
+  params: ErpPurchaseReturnApi.PurchaseReturnStatusParams,
+) {
+  return requestClient.put('/erp/purchase-return/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除采购退货
+ */
+export function deletePurchaseReturn(ids: number[]) {
+  return requestClient.delete('/erp/purchase-return/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出采购退货 Excel
+ */
+export function exportPurchaseReturn(
+  params: ErpPurchaseReturnApi.PurchaseReturnPageParams,
+) {
+  return requestClient.download('/erp/purchase-return/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/purchase/supplier/index.ts b/apps/web-antd/src/api/erp/purchase/supplier/index.ts
new file mode 100644
index 00000000..fb74b9f3
--- /dev/null
+++ b/apps/web-antd/src/api/erp/purchase/supplier/index.ts
@@ -0,0 +1,73 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpSupplierApi {
+  /** ERP 供应商信息 */
+  export interface Supplier {
+    id?: number; // 供应商编号
+    name: string; // 供应商名称
+    contact: string; // 联系人
+    mobile: string; // 手机号码
+    telephone: string; // 联系电话
+    email: string; // 电子邮箱
+    fax: string; // 传真
+    remark: string; // 备注
+    status: number; // 开启状态
+    sort: number; // 排序
+    taxNo: string; // 纳税人识别号
+    taxPercent: number; // 税率
+    bankName: string; // 开户行
+    bankAccount: string; // 开户账号
+    bankAddress: string; // 开户地址
+  }
+
+  /** 供应商分页查询参数 */
+  export interface SupplierPageParam extends PageParam {
+    name?: string;
+    mobile?: string;
+    status?: number;
+  }
+}
+
+/** 查询供应商分页 */
+export function getSupplierPage(params: ErpSupplierApi.SupplierPageParam) {
+  return requestClient.get<PageResult<ErpSupplierApi.Supplier>>(
+    '/erp/supplier/page',
+    { params },
+  );
+}
+
+/** 获得供应商精简列表 */
+export function getSupplierSimpleList() {
+  return requestClient.get<ErpSupplierApi.Supplier[]>(
+    '/erp/supplier/simple-list',
+  );
+}
+
+/** 查询供应商详情 */
+export function getSupplier(id: number) {
+  return requestClient.get<ErpSupplierApi.Supplier>(
+    `/erp/supplier/get?id=${id}`,
+  );
+}
+
+/** 新增供应商 */
+export function createSupplier(data: ErpSupplierApi.Supplier) {
+  return requestClient.post('/erp/supplier/create', data);
+}
+
+/** 修改供应商 */
+export function updateSupplier(data: ErpSupplierApi.Supplier) {
+  return requestClient.put('/erp/supplier/update', data);
+}
+
+/** 删除供应商 */
+export function deleteSupplier(id: number) {
+  return requestClient.delete(`/erp/supplier/delete?id=${id}`);
+}
+
+/** 导出供应商 Excel */
+export function exportSupplier(params: any) {
+  return requestClient.download('/erp/supplier/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/erp/sale/customer/index.ts b/apps/web-antd/src/api/erp/sale/customer/index.ts
new file mode 100644
index 00000000..6cebd018
--- /dev/null
+++ b/apps/web-antd/src/api/erp/sale/customer/index.ts
@@ -0,0 +1,73 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpCustomerApi {
+  /** ERP 客户信息 */
+  export interface Customer {
+    id?: number; // 客户编号
+    name: string; // 客户名称
+    contact: string; // 联系人
+    mobile: string; // 手机号码
+    telephone: string; // 联系电话
+    email: string; // 电子邮箱
+    fax: string; // 传真
+    remark: string; // 备注
+    status: number; // 开启状态
+    sort: number; // 排序
+    taxNo: string; // 纳税人识别号
+    taxPercent: number; // 税率
+    bankName: string; // 开户行
+    bankAccount: string; // 开户账号
+    bankAddress: string; // 开户地址
+  }
+
+  /** 客户分页查询参数 */
+  export interface CustomerPageParam extends PageParam {
+    name?: string;
+    mobile?: string;
+    status?: number;
+  }
+}
+
+/** 查询客户分页 */
+export function getCustomerPage(params: ErpCustomerApi.CustomerPageParam) {
+  return requestClient.get<PageResult<ErpCustomerApi.Customer>>(
+    '/erp/customer/page',
+    { params },
+  );
+}
+
+/** 查询客户精简列表 */
+export function getCustomerSimpleList() {
+  return requestClient.get<ErpCustomerApi.Customer[]>(
+    '/erp/customer/simple-list',
+  );
+}
+
+/** 查询客户详情 */
+export function getCustomer(id: number) {
+  return requestClient.get<ErpCustomerApi.Customer>(
+    `/erp/customer/get?id=${id}`,
+  );
+}
+
+/** 新增客户 */
+export function createCustomer(data: ErpCustomerApi.Customer) {
+  return requestClient.post('/erp/customer/create', data);
+}
+
+/** 修改客户 */
+export function updateCustomer(data: ErpCustomerApi.Customer) {
+  return requestClient.put('/erp/customer/update', data);
+}
+
+/** 删除客户 */
+export function deleteCustomer(id: number) {
+  return requestClient.delete(`/erp/customer/delete?id=${id}`);
+}
+
+/** 导出客户 Excel */
+export function exportCustomer(params: any) {
+  return requestClient.download('/erp/customer/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/erp/sale/order/index.ts b/apps/web-antd/src/api/erp/sale/order/index.ts
new file mode 100644
index 00000000..211a28e2
--- /dev/null
+++ b/apps/web-antd/src/api/erp/sale/order/index.ts
@@ -0,0 +1,70 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpSaleOrderApi {
+  /** ERP 销售订单信息 */
+  export interface SaleOrder {
+    id?: number; // 订单工单编号
+    no: string; // 销售订单号
+    customerId: number; // 客户编号
+    orderTime: Date; // 订单时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+    outCount: number; // 销售出库数量
+    returnCount: number; // 销售退货数量
+  }
+
+  /** 销售订单分页查询参数 */
+  export interface SaleOrderPageParam extends PageParam {
+    no?: string;
+    customerId?: number;
+    status?: number;
+  }
+}
+
+/** 查询销售订单分页 */
+export function getSaleOrderPage(params: ErpSaleOrderApi.SaleOrderPageParam) {
+  return requestClient.get<PageResult<ErpSaleOrderApi.SaleOrder>>(
+    '/erp/sale-order/page',
+    { params },
+  );
+}
+
+/** 查询销售订单详情 */
+export function getSaleOrder(id: number) {
+  return requestClient.get<ErpSaleOrderApi.SaleOrder>(
+    `/erp/sale-order/get?id=${id}`,
+  );
+}
+
+/** 新增销售订单 */
+export function createSaleOrder(data: ErpSaleOrderApi.SaleOrder) {
+  return requestClient.post('/erp/sale-order/create', data);
+}
+
+/** 修改销售订单 */
+export function updateSaleOrder(data: ErpSaleOrderApi.SaleOrder) {
+  return requestClient.put('/erp/sale-order/update', data);
+}
+
+/** 更新销售订单的状态 */
+export function updateSaleOrderStatus(id: number, status: number) {
+  return requestClient.put('/erp/sale-order/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除销售订单 */
+export function deleteSaleOrder(ids: number[]) {
+  return requestClient.delete('/erp/sale-order/delete', {
+    params: { ids: ids.join(',') },
+  });
+}
+
+/** 导出销售订单 Excel */
+export function exportSaleOrder(params: any) {
+  return requestClient.download('/erp/sale-order/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/erp/sale/out/index.ts b/apps/web-antd/src/api/erp/sale/out/index.ts
new file mode 100644
index 00000000..62045216
--- /dev/null
+++ b/apps/web-antd/src/api/erp/sale/out/index.ts
@@ -0,0 +1,92 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpSaleOutApi {
+  /** 销售出库信息 */
+  export interface SaleOut {
+    id?: number; // 销售出库编号
+    no: string; // 销售出库号
+    customerId: number; // 客户编号
+    outTime: Date; // 出库时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+  }
+
+  /** 销售出库分页查询参数 */
+  export interface SaleOutPageParams extends PageParam {
+    no?: string;
+    customerId?: number;
+    status?: number;
+  }
+
+  /** 销售出库状态更新参数 */
+  export interface SaleOutStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询销售出库分页
+ */
+export function getSaleOutPage(params: ErpSaleOutApi.SaleOutPageParams) {
+  return requestClient.get<PageResult<ErpSaleOutApi.SaleOut>>(
+    '/erp/sale-out/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询销售出库详情
+ */
+export function getSaleOut(id: number) {
+  return requestClient.get<ErpSaleOutApi.SaleOut>(`/erp/sale-out/get?id=${id}`);
+}
+
+/**
+ * 新增销售出库
+ */
+export function createSaleOut(data: ErpSaleOutApi.SaleOut) {
+  return requestClient.post('/erp/sale-out/create', data);
+}
+
+/**
+ * 修改销售出库
+ */
+export function updateSaleOut(data: ErpSaleOutApi.SaleOut) {
+  return requestClient.put('/erp/sale-out/update', data);
+}
+
+/**
+ * 更新销售出库的状态
+ */
+export function updateSaleOutStatus(params: ErpSaleOutApi.SaleOutStatusParams) {
+  return requestClient.put('/erp/sale-out/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除销售出库
+ */
+export function deleteSaleOut(ids: number[]) {
+  return requestClient.delete('/erp/sale-out/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出销售出库 Excel
+ */
+export function exportSaleOut(params: ErpSaleOutApi.SaleOutPageParams) {
+  return requestClient.download('/erp/sale-out/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/sale/return/index.ts b/apps/web-antd/src/api/erp/sale/return/index.ts
new file mode 100644
index 00000000..0ebcfc75
--- /dev/null
+++ b/apps/web-antd/src/api/erp/sale/return/index.ts
@@ -0,0 +1,100 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpSaleReturnApi {
+  /** 销售退货信息 */
+  export interface SaleReturn {
+    id?: number; // 销售退货编号
+    no: string; // 销售退货号
+    customerId: number; // 客户编号
+    returnTime: Date; // 退货时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+  }
+
+  /** 销售退货分页查询参数 */
+  export interface SaleReturnPageParams extends PageParam {
+    no?: string;
+    customerId?: number;
+    status?: number;
+  }
+
+  /** 销售退货状态更新参数 */
+  export interface SaleReturnStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询销售退货分页
+ */
+export function getSaleReturnPage(
+  params: ErpSaleReturnApi.SaleReturnPageParams,
+) {
+  return requestClient.get<PageResult<ErpSaleReturnApi.SaleReturn>>(
+    '/erp/sale-return/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询销售退货详情
+ */
+export function getSaleReturn(id: number) {
+  return requestClient.get<ErpSaleReturnApi.SaleReturn>(
+    `/erp/sale-return/get?id=${id}`,
+  );
+}
+
+/**
+ * 新增销售退货
+ */
+export function createSaleReturn(data: ErpSaleReturnApi.SaleReturn) {
+  return requestClient.post('/erp/sale-return/create', data);
+}
+
+/**
+ * 修改销售退货
+ */
+export function updateSaleReturn(data: ErpSaleReturnApi.SaleReturn) {
+  return requestClient.put('/erp/sale-return/update', data);
+}
+
+/**
+ * 更新销售退货的状态
+ */
+export function updateSaleReturnStatus(
+  params: ErpSaleReturnApi.SaleReturnStatusParams,
+) {
+  return requestClient.put('/erp/sale-return/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除销售退货
+ */
+export function deleteSaleReturn(ids: number[]) {
+  return requestClient.delete('/erp/sale-return/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出销售退货 Excel
+ */
+export function exportSaleReturn(
+  params: ErpSaleReturnApi.SaleReturnPageParams,
+) {
+  return requestClient.download('/erp/sale-return/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/statistics/purchase/index.ts b/apps/web-antd/src/api/erp/statistics/purchase/index.ts
new file mode 100644
index 00000000..170b9c11
--- /dev/null
+++ b/apps/web-antd/src/api/erp/statistics/purchase/index.ts
@@ -0,0 +1,31 @@
+import { requestClient } from '#/api/request';
+
+export namespace ErpPurchaseStatisticsApi {
+  /** ERP 采购全局统计 */
+  export interface PurchaseSummary {
+    todayPrice: number; // 今日采购金额
+    yesterdayPrice: number; // 昨日采购金额
+    monthPrice: number; // 本月采购金额
+    yearPrice: number; // 今年采购金额
+  }
+
+  /** ERP 采购时间段统计 */
+  export interface PurchaseTimeSummary {
+    time: string; // 时间
+    price: number; // 采购金额
+  }
+}
+
+/** 获得采购统计 */
+export function getPurchaseSummary() {
+  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseSummary>(
+    '/erp/purchase-statistics/summary',
+  );
+}
+
+/** 获得采购时间段统计 */
+export function getPurchaseTimeSummary() {
+  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(
+    '/erp/purchase-statistics/time-summary',
+  );
+}
diff --git a/apps/web-antd/src/api/erp/statistics/sale/index.ts b/apps/web-antd/src/api/erp/statistics/sale/index.ts
new file mode 100644
index 00000000..c4c7986a
--- /dev/null
+++ b/apps/web-antd/src/api/erp/statistics/sale/index.ts
@@ -0,0 +1,31 @@
+import { requestClient } from '#/api/request';
+
+export namespace ErpSaleStatisticsApi {
+  /** ERP 销售全局统计 */
+  export interface SaleSummary {
+    todayPrice: number; // 今日销售金额
+    yesterdayPrice: number; // 昨日销售金额
+    monthPrice: number; // 本月销售金额
+    yearPrice: number; // 今年销售金额
+  }
+
+  /** ERP 销售时间段统计 */
+  export interface SaleTimeSummary {
+    time: string; // 时间
+    price: number; // 销售金额
+  }
+}
+
+/** 获得销售统计 */
+export function getSaleSummary() {
+  return requestClient.get<ErpSaleStatisticsApi.SaleSummary>(
+    '/erp/sale-statistics/summary',
+  );
+}
+
+/** 获得销售时间段统计 */
+export function getSaleTimeSummary() {
+  return requestClient.get<ErpSaleStatisticsApi.SaleTimeSummary[]>(
+    '/erp/sale-statistics/time-summary',
+  );
+}
diff --git a/apps/web-antd/src/api/erp/stock/check/index.ts b/apps/web-antd/src/api/erp/stock/check/index.ts
new file mode 100644
index 00000000..090d8786
--- /dev/null
+++ b/apps/web-antd/src/api/erp/stock/check/index.ts
@@ -0,0 +1,98 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpStockCheckApi {
+  /** 库存盘点单信息 */
+  export interface StockCheck {
+    id?: number; // 盘点编号
+    no: string; // 盘点单号
+    checkTime: Date; // 盘点时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+  }
+
+  /** 库存盘点单分页查询参数 */
+  export interface StockCheckPageParams extends PageParam {
+    no?: string;
+    status?: number;
+  }
+
+  /** 库存盘点单状态更新参数 */
+  export interface StockCheckStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询库存盘点单分页
+ */
+export function getStockCheckPage(
+  params: ErpStockCheckApi.StockCheckPageParams,
+) {
+  return requestClient.get<PageResult<ErpStockCheckApi.StockCheck>>(
+    '/erp/stock-check/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询库存盘点单详情
+ */
+export function getStockCheck(id: number) {
+  return requestClient.get<ErpStockCheckApi.StockCheck>(
+    `/erp/stock-check/get?id=${id}`,
+  );
+}
+
+/**
+ * 新增库存盘点单
+ */
+export function createStockCheck(data: ErpStockCheckApi.StockCheck) {
+  return requestClient.post('/erp/stock-check/create', data);
+}
+
+/**
+ * 修改库存盘点单
+ */
+export function updateStockCheck(data: ErpStockCheckApi.StockCheck) {
+  return requestClient.put('/erp/stock-check/update', data);
+}
+
+/**
+ * 更新库存盘点单的状态
+ */
+export function updateStockCheckStatus(
+  params: ErpStockCheckApi.StockCheckStatusParams,
+) {
+  return requestClient.put('/erp/stock-check/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除库存盘点单
+ */
+export function deleteStockCheck(ids: number[]) {
+  return requestClient.delete('/erp/stock-check/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出库存盘点单 Excel
+ */
+export function exportStockCheck(
+  params: ErpStockCheckApi.StockCheckPageParams,
+) {
+  return requestClient.download('/erp/stock-check/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/stock/in/index.ts b/apps/web-antd/src/api/erp/stock/in/index.ts
new file mode 100644
index 00000000..8fe9bafd
--- /dev/null
+++ b/apps/web-antd/src/api/erp/stock/in/index.ts
@@ -0,0 +1,113 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpStockInApi {
+  /** 其它入库单信息 */
+  export interface StockIn {
+    id?: number; // 入库编号
+    no: string; // 入库单号
+    supplierId: number; // 供应商编号
+    supplierName?: string; // 供应商名称
+    inTime: Date; // 入库时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+    fileUrl?: string; // 附件
+    productNames?: string; // 产品信息
+    creatorName?: string; // 创建人
+    items?: StockInItem[]; // 入库产品清单
+  }
+
+  /** 其它入库单产品信息 */
+  export interface StockInItem {
+    id?: number; // 编号
+    warehouseId: number; // 仓库编号
+    productId: number; // 产品编号
+    productName?: string; // 产品名称
+    productUnitId?: number; // 产品单位编号
+    productUnitName?: string; // 产品单位名称
+    productBarCode?: string; // 产品条码
+    count: number; // 数量
+    productPrice: number; // 产品单价
+    totalPrice: number; // 总价
+    stockCount?: number; // 库存数量
+    remark?: string; // 备注
+  }
+
+  /** 其它入库单分页查询参数 */
+  export interface StockInPageParams extends PageParam {
+    no?: string;
+    supplierId?: number;
+    status?: number;
+  }
+
+  /** 其它入库单状态更新参数 */
+  export interface StockInStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询其它入库单分页
+ */
+export function getStockInPage(params: ErpStockInApi.StockInPageParams) {
+  return requestClient.get<PageResult<ErpStockInApi.StockIn>>(
+    '/erp/stock-in/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询其它入库单详情
+ */
+export function getStockIn(id: number) {
+  return requestClient.get<ErpStockInApi.StockIn>(`/erp/stock-in/get?id=${id}`);
+}
+
+/**
+ * 新增其它入库单
+ */
+export function createStockIn(data: ErpStockInApi.StockIn) {
+  return requestClient.post('/erp/stock-in/create', data);
+}
+
+/**
+ * 修改其它入库单
+ */
+export function updateStockIn(data: ErpStockInApi.StockIn) {
+  return requestClient.put('/erp/stock-in/update', data);
+}
+
+/**
+ * 更新其它入库单的状态
+ */
+export function updateStockInStatus(params: ErpStockInApi.StockInStatusParams) {
+  return requestClient.put('/erp/stock-in/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除其它入库单
+ */
+export function deleteStockIn(ids: number[]) {
+  return requestClient.delete('/erp/stock-in/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出其它入库单 Excel
+ */
+export function exportStockIn(params: ErpStockInApi.StockInPageParams) {
+  return requestClient.download('/erp/stock-in/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/stock/move/index.ts b/apps/web-antd/src/api/erp/stock/move/index.ts
new file mode 100644
index 00000000..765d27eb
--- /dev/null
+++ b/apps/web-antd/src/api/erp/stock/move/index.ts
@@ -0,0 +1,94 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpStockMoveApi {
+  /** 库存调拨单信息 */
+  export interface StockMove {
+    id?: number; // 调拨编号
+    no: string; // 调拨单号
+    outTime: Date; // 调拨时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+  }
+
+  /** 库存调拨单分页查询参数 */
+  export interface StockMovePageParams extends PageParam {
+    no?: string;
+    status?: number;
+  }
+
+  /** 库存调拨单状态更新参数 */
+  export interface StockMoveStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询库存调拨单分页
+ */
+export function getStockMovePage(params: ErpStockMoveApi.StockMovePageParams) {
+  return requestClient.get<PageResult<ErpStockMoveApi.StockMove>>(
+    '/erp/stock-move/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询库存调拨单详情
+ */
+export function getStockMove(id: number) {
+  return requestClient.get<ErpStockMoveApi.StockMove>(
+    `/erp/stock-move/get?id=${id}`,
+  );
+}
+
+/**
+ * 新增库存调拨单
+ */
+export function createStockMove(data: ErpStockMoveApi.StockMove) {
+  return requestClient.post('/erp/stock-move/create', data);
+}
+
+/**
+ * 修改库存调拨单
+ */
+export function updateStockMove(data: ErpStockMoveApi.StockMove) {
+  return requestClient.put('/erp/stock-move/update', data);
+}
+
+/**
+ * 更新库存调拨单的状态
+ */
+export function updateStockMoveStatus(
+  params: ErpStockMoveApi.StockMoveStatusParams,
+) {
+  return requestClient.put('/erp/stock-move/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除库存调拨单
+ */
+export function deleteStockMove(ids: number[]) {
+  return requestClient.delete('/erp/stock-move/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出库存调拨单 Excel
+ */
+export function exportStockMove(params: ErpStockMoveApi.StockMovePageParams) {
+  return requestClient.download('/erp/stock-move/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/stock/out/index.ts b/apps/web-antd/src/api/erp/stock/out/index.ts
new file mode 100644
index 00000000..2224e2dd
--- /dev/null
+++ b/apps/web-antd/src/api/erp/stock/out/index.ts
@@ -0,0 +1,96 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+namespace ErpStockOutApi {
+  /** 其它出库单信息 */
+  export interface StockOut {
+    id?: number; // 出库编号
+    no: string; // 出库单号
+    customerId: number; // 客户编号
+    outTime: Date; // 出库时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+  }
+
+  /** 其它出库单分页查询参数 */
+  export interface StockOutPageParams extends PageParam {
+    no?: string;
+    customerId?: number;
+    status?: number;
+  }
+
+  /** 其它出库单状态更新参数 */
+  export interface StockOutStatusParams {
+    id: number;
+    status: number;
+  }
+}
+
+/**
+ * 查询其它出库单分页
+ */
+export function getStockOutPage(params: ErpStockOutApi.StockOutPageParams) {
+  return requestClient.get<PageResult<ErpStockOutApi.StockOut>>(
+    '/erp/stock-out/page',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 查询其它出库单详情
+ */
+export function getStockOut(id: number) {
+  return requestClient.get<ErpStockOutApi.StockOut>(
+    `/erp/stock-out/get?id=${id}`,
+  );
+}
+
+/**
+ * 新增其它出库单
+ */
+export function createStockOut(data: ErpStockOutApi.StockOut) {
+  return requestClient.post('/erp/stock-out/create', data);
+}
+
+/**
+ * 修改其它出库单
+ */
+export function updateStockOut(data: ErpStockOutApi.StockOut) {
+  return requestClient.put('/erp/stock-out/update', data);
+}
+
+/**
+ * 更新其它出库单的状态
+ */
+export function updateStockOutStatus(
+  params: ErpStockOutApi.StockOutStatusParams,
+) {
+  return requestClient.put('/erp/stock-out/update-status', null, {
+    params,
+  });
+}
+
+/**
+ * 删除其它出库单
+ */
+export function deleteStockOut(ids: number[]) {
+  return requestClient.delete('/erp/stock-out/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/**
+ * 导出其它出库单 Excel
+ */
+export function exportStockOut(params: ErpStockOutApi.StockOutPageParams) {
+  return requestClient.download('/erp/stock-out/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/stock/record/index.ts b/apps/web-antd/src/api/erp/stock/record/index.ts
new file mode 100644
index 00000000..364091bf
--- /dev/null
+++ b/apps/web-antd/src/api/erp/stock/record/index.ts
@@ -0,0 +1,47 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpStockRecordApi {
+  /** ERP 产品库存明细 */
+  export interface StockRecord {
+    id?: number; // 编号
+    productId: number; // 产品编号
+    warehouseId: number; // 仓库编号
+    count: number; // 出入库数量
+    totalCount: number; // 总库存量
+    bizType: number; // 业务类型
+    bizId: number; // 业务编号
+    bizItemId: number; // 业务项编号
+    bizNo: string; // 业务单号
+  }
+
+  /** 库存记录分页查询参数 */
+  export interface StockRecordPageParam extends PageParam {
+    productId?: number;
+    warehouseId?: number;
+    bizType?: number;
+  }
+}
+
+/** 查询产品库存明细分页 */
+export function getStockRecordPage(
+  params: ErpStockRecordApi.StockRecordPageParam,
+) {
+  return requestClient.get<PageResult<ErpStockRecordApi.StockRecord>>(
+    '/erp/stock-record/page',
+    { params },
+  );
+}
+
+/** 查询产品库存明细详情 */
+export function getStockRecord(id: number) {
+  return requestClient.get<ErpStockRecordApi.StockRecord>(
+    `/erp/stock-record/get?id=${id}`,
+  );
+}
+
+/** 导出产品库存明细 Excel */
+export function exportStockRecord(params: any) {
+  return requestClient.download('/erp/stock-record/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/erp/stock/stock/index.ts b/apps/web-antd/src/api/erp/stock/stock/index.ts
new file mode 100644
index 00000000..3ef12dff
--- /dev/null
+++ b/apps/web-antd/src/api/erp/stock/stock/index.ts
@@ -0,0 +1,74 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpStockApi {
+  /** 产品库存信息 */
+  export interface Stock {
+    id?: number; // 编号
+    productId: number; // 产品编号
+    warehouseId: number; // 仓库编号
+    count: number; // 库存数量
+  }
+
+  /** 产品库存分页查询参数 */
+  export interface StockPageParams extends PageParam {
+    productId?: number;
+    warehouseId?: number;
+  }
+
+  /** 产品库存查询参数 */
+  export interface StockQueryParams {
+    productId: number;
+    warehouseId: number;
+  }
+}
+
+/**
+ * 查询产品库存分页
+ */
+export function getStockPage(params: ErpStockApi.StockPageParams) {
+  return requestClient.get<PageResult<ErpStockApi.Stock>>('/erp/stock/page', {
+    params,
+  });
+}
+
+/**
+ * 查询产品库存详情
+ */
+export function getStock(id: number) {
+  return requestClient.get<ErpStockApi.Stock>(`/erp/stock/get?id=${id}`);
+}
+
+/**
+ * 根据产品和仓库查询库存详情
+ */
+export function getStockByProductAndWarehouse(
+  params: ErpStockApi.StockQueryParams,
+) {
+  return requestClient.get<ErpStockApi.Stock>('/erp/stock/get', {
+    params,
+  });
+}
+
+/**
+ * 获得产品库存数量
+ */
+export function getStockCount(productId: number, warehouseId?: number) {
+  const params: any = { productId };
+  if (warehouseId !== undefined) {
+    params.warehouseId = warehouseId;
+  }
+  return requestClient.get<number>('/erp/stock/get-count', {
+    params,
+  });
+}
+
+/**
+ * 导出产品库存 Excel
+ */
+export function exportStock(params: ErpStockApi.StockPageParams) {
+  return requestClient.download('/erp/stock/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/erp/stock/warehouse/index.ts b/apps/web-antd/src/api/erp/stock/warehouse/index.ts
new file mode 100644
index 00000000..a1cac8ea
--- /dev/null
+++ b/apps/web-antd/src/api/erp/stock/warehouse/index.ts
@@ -0,0 +1,77 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpWarehouseApi {
+  /** ERP 仓库信息 */
+  export interface Warehouse {
+    id?: number; // 仓库编号
+    name: string; // 仓库名称
+    address: string; // 仓库地址
+    sort: number; // 排序
+    remark: string; // 备注
+    principal: string; // 负责人
+    warehousePrice: number; // 仓储费，单位：元
+    truckagePrice: number; // 搬运费，单位：元
+    status: number; // 开启状态
+    defaultStatus: boolean; // 是否默认
+  }
+
+  /** 仓库分页查询参数 */
+  export interface WarehousePageParam extends PageParam {
+    name?: string;
+    status?: number;
+  }
+}
+
+/** 查询仓库分页 */
+export function getWarehousePage(params: ErpWarehouseApi.WarehousePageParam) {
+  return requestClient.get<PageResult<ErpWarehouseApi.Warehouse>>(
+    '/erp/warehouse/page',
+    { params },
+  );
+}
+
+/** 查询仓库精简列表 */
+export function getWarehouseSimpleList() {
+  return requestClient.get<ErpWarehouseApi.Warehouse[]>(
+    '/erp/warehouse/simple-list',
+  );
+}
+
+/** 查询仓库详情 */
+export function getWarehouse(id: number) {
+  return requestClient.get<ErpWarehouseApi.Warehouse>(
+    `/erp/warehouse/get?id=${id}`,
+  );
+}
+
+/** 新增仓库 */
+export function createWarehouse(data: ErpWarehouseApi.Warehouse) {
+  return requestClient.post('/erp/warehouse/create', data);
+}
+
+/** 修改仓库 */
+export function updateWarehouse(data: ErpWarehouseApi.Warehouse) {
+  return requestClient.put('/erp/warehouse/update', data);
+}
+
+/** 修改仓库默认状态 */
+export function updateWarehouseDefaultStatus(
+  id: number,
+  defaultStatus: boolean,
+) {
+  return requestClient.put('/erp/warehouse/update-default-status', null, {
+    params: { id, defaultStatus },
+  });
+}
+
+/** 删除仓库 */
+export function deleteWarehouse(id: number) {
+  return requestClient.delete(`/erp/warehouse/delete?id=${id}`);
+}
+
+/** 导出仓库 Excel */
+export function exportWarehouse(params: any) {
+  return requestClient.download('/erp/warehouse/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/system/mail/log/index.ts b/apps/web-antd/src/api/system/mail/log/index.ts
index 52c9947c..c32b790e 100644
--- a/apps/web-antd/src/api/system/mail/log/index.ts
+++ b/apps/web-antd/src/api/system/mail/log/index.ts
@@ -8,7 +8,9 @@ export namespace SystemMailLogApi {
     id: number;
     userId: number;
     userType: number;
-    toMail: string;
+    toMails: string[];
+    ccMails?: string[];
+    bccMails?: string[];
     accountId: number;
     fromMail: string;
     templateId: number;
@@ -32,15 +34,3 @@ export function getMailLogPage(params: PageParam) {
     { params },
   );
 }
-
-/** 查询邮件日志详情 */
-export function getMailLog(id: number) {
-  return requestClient.get<SystemMailLogApi.MailLog>(
-    `/system/mail-log/get?id=${id}`,
-  );
-}
-
-/** 重新发送邮件 */
-export function resendMail(id: number) {
-  return requestClient.put(`/system/mail-log/resend?id=${id}`);
-}
diff --git a/apps/web-antd/src/api/system/mail/template/index.ts b/apps/web-antd/src/api/system/mail/template/index.ts
index d1bd075f..5f7e7525 100644
--- a/apps/web-antd/src/api/system/mail/template/index.ts
+++ b/apps/web-antd/src/api/system/mail/template/index.ts
@@ -20,7 +20,9 @@ export namespace SystemMailTemplateApi {
 
   /** 邮件发送信息 */
   export interface MailSendReq {
-    mail: string;
+    toMails: string[];
+    ccMails?: string[];
+    bccMails?: string[];
     templateCode: string;
     templateParams: Record<string, any>;
   }
diff --git a/apps/web-antd/src/components/Tinyflow/ui/index.css b/apps/web-antd/src/components/Tinyflow/ui/index.css
index 1e126fa7..f5a473a1 100644
--- a/apps/web-antd/src/components/Tinyflow/ui/index.css
+++ b/apps/web-antd/src/components/Tinyflow/ui/index.css
@@ -1,13 +1,12 @@
 .svelte-flow {
-  direction: ltr;
   --xy-edge-stroke-default: #b1b1b7;
   --xy-edge-stroke-width-default: 1;
   --xy-edge-stroke-selected-default: #555;
   --xy-connectionline-stroke-default: #b1b1b7;
   --xy-connectionline-stroke-width-default: 1;
-  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
+  --xy-attribution-background-color-default: rgb(255 255 255 / 50%);
   --xy-minimap-background-color-default: #fff;
-  --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
+  --xy-minimap-mask-background-color-default: rgb(240 240 240 / 60%);
   --xy-minimap-mask-stroke-color-default: transparent;
   --xy-minimap-mask-stroke-width-default: 1;
   --xy-minimap-node-background-color-default: #e2e2e2;
@@ -17,40 +16,43 @@
   --xy-background-pattern-dots-color-default: #91919a;
   --xy-background-pattern-lines-color-default: #eee;
   --xy-background-pattern-cross-color-default: #e2e2e2;
-  background-color: var(
-    --xy-background-color,
-    var(--xy-background-color-default)
-  );
   --xy-node-color-default: inherit;
   --xy-node-border-default: 1px solid #1a192b;
   --xy-node-background-color-default: #fff;
-  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
-  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  --xy-node-group-background-color-default: rgb(240 240 240 / 25%);
+  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgb(0 0 0 / 8%);
   --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
   --xy-node-border-radius-default: 3px;
   --xy-handle-background-color-default: #1a192b;
   --xy-handle-border-color-default: #fff;
-  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
-  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
+  --xy-selection-background-color-default: rgb(0 89 220 / 8%);
+  --xy-selection-border-default: 1px dotted rgb(0 89 220 / 80%);
   --xy-controls-button-background-color-default: #fefefe;
   --xy-controls-button-background-color-hover-default: #f4f4f4;
   --xy-controls-button-color-default: inherit;
   --xy-controls-button-color-hover-default: inherit;
   --xy-controls-button-border-color-default: #eee;
-  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-  --xy-edge-label-background-color-default: #ffffff;
+  --xy-controls-box-shadow-default: 0 0 2px 1px rgb(0 0 0 / 8%);
+  --xy-edge-label-background-color-default: #fff;
   --xy-edge-label-color-default: inherit;
   --xy-resize-background-color-default: #3367d9;
+
+  direction: ltr;
+  background-color: var(
+    --xy-background-color,
+    var(--xy-background-color-default)
+  );
 }
+
 .svelte-flow.dark {
   --xy-edge-stroke-default: #3e3e3e;
   --xy-edge-stroke-width-default: 1;
   --xy-edge-stroke-selected-default: #727272;
   --xy-connectionline-stroke-default: #b1b1b7;
   --xy-connectionline-stroke-width-default: 1;
-  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
+  --xy-attribution-background-color-default: rgb(150 150 150 / 25%);
   --xy-minimap-background-color-default: #141414;
-  --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
+  --xy-minimap-mask-background-color-default: rgb(60 60 60 / 60%);
   --xy-minimap-mask-stroke-color-default: transparent;
   --xy-minimap-mask-stroke-width-default: 1;
   --xy-minimap-node-background-color-default: #2b2b2b;
@@ -63,73 +65,86 @@
   --xy-node-color-default: #f8f8f8;
   --xy-node-border-default: 1px solid #3c3c3c;
   --xy-node-background-color-default: #1e1e1e;
-  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
-  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
+  --xy-node-group-background-color-default: rgb(240 240 240 / 25%);
+  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgb(255 255 255 / 8%);
   --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
   --xy-handle-background-color-default: #bebebe;
   --xy-handle-border-color-default: #1e1e1e;
-  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
-  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
+  --xy-selection-background-color-default: rgb(200 200 220 / 8%);
+  --xy-selection-border-default: 1px dotted rgb(200 200 220 / 80%);
   --xy-controls-button-background-color-default: #2b2b2b;
   --xy-controls-button-background-color-hover-default: #3e3e3e;
   --xy-controls-button-color-default: #f8f8f8;
   --xy-controls-button-color-hover-default: #fff;
   --xy-controls-button-border-color-default: #5b5b5b;
-  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+  --xy-controls-box-shadow-default: 0 0 2px 1px rgb(0 0 0 / 8%);
   --xy-edge-label-background-color-default: #141414;
   --xy-edge-label-color-default: #f8f8f8;
 }
+
 .svelte-flow__background {
+  z-index: -1;
+  pointer-events: none;
   background-color: var(
     --xy-background-color,
     var(--xy-background-color-props, var(--xy-background-color-default))
   );
-  pointer-events: none;
-  z-index: -1;
 }
+
 .svelte-flow__container {
   position: absolute;
-  width: 100%;
-  height: 100%;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
 }
+
 .svelte-flow__pane {
   z-index: 1;
 }
+
 .svelte-flow__pane.draggable {
   cursor: grab;
 }
+
 .svelte-flow__pane.dragging {
   cursor: grabbing;
 }
+
 .svelte-flow__pane.selection {
   cursor: pointer;
 }
+
 .svelte-flow__viewport {
-  transform-origin: 0 0;
   z-index: 2;
   pointer-events: none;
+  transform-origin: 0 0;
 }
+
 .svelte-flow__renderer {
   z-index: 4;
 }
+
 .svelte-flow__selection {
   z-index: 6;
 }
+
 .svelte-flow__nodesselection-rect:focus,
 .svelte-flow__nodesselection-rect:focus-visible {
   outline: none;
 }
+
 .svelte-flow__edge-path {
+  fill: none;
   stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
   stroke-width: var(
     --xy-edge-stroke-width,
     var(--xy-edge-stroke-width-default)
   );
-  fill: none;
 }
+
 .svelte-flow__connection-path {
+  fill: none;
   stroke: var(
     --xy-connectionline-stroke,
     var(--xy-connectionline-stroke-default)
@@ -138,38 +153,46 @@
     --xy-connectionline-stroke-width,
     var(--xy-connectionline-stroke-width-default)
   );
-  fill: none;
 }
+
 .svelte-flow .svelte-flow__edges {
   position: absolute;
 }
+
 .svelte-flow .svelte-flow__edges svg {
-  overflow: visible;
   position: absolute;
+  overflow: visible;
   pointer-events: none;
 }
+
 .svelte-flow__edge {
-  pointer-events: visibleStroke;
+  pointer-events: visiblestroke;
 }
+
 .svelte-flow__edge.selectable {
   cursor: pointer;
 }
+
 .svelte-flow__edge.animated path {
   stroke-dasharray: 5;
   animation: dashdraw 0.5s linear infinite;
 }
+
 .svelte-flow__edge.animated path.svelte-flow__edge-interaction {
   stroke-dasharray: none;
   animation: none;
 }
+
 .svelte-flow__edge.inactive {
   pointer-events: none;
 }
+
 .svelte-flow__edge.selected,
 .svelte-flow__edge:focus,
 .svelte-flow__edge:focus-visible {
   outline: none;
 }
+
 .svelte-flow__edge.selected .svelte-flow__edge-path,
 .svelte-flow__edge.selectable:focus .svelte-flow__edge-path,
 .svelte-flow__edge.selectable:focus-visible .svelte-flow__edge-path {
@@ -178,68 +201,77 @@
     var(--xy-edge-stroke-selected-default)
   );
 }
+
 .svelte-flow__edge-textwrapper {
   pointer-events: all;
 }
+
 .svelte-flow__edge .svelte-flow__edge-text {
   pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
 }
+
 .svelte-flow__connection {
   pointer-events: none;
 }
+
 .svelte-flow__connection .animated {
   stroke-dasharray: 5;
   animation: dashdraw 0.5s linear infinite;
 }
+
 svg.svelte-flow__connectionline {
+  position: absolute;
   z-index: 1001;
   overflow: visible;
-  position: absolute;
 }
+
 .svelte-flow__nodes {
   pointer-events: none;
   transform-origin: 0 0;
 }
+
 .svelte-flow__node {
   position: absolute;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  pointer-events: all;
-  transform-origin: 0 0;
   box-sizing: border-box;
+  pointer-events: all;
   cursor: default;
+  user-select: none;
+  transform-origin: 0 0;
 }
+
 .svelte-flow__node.selectable {
   cursor: pointer;
 }
+
 .svelte-flow__node.draggable {
-  cursor: grab;
   pointer-events: all;
+  cursor: grab;
 }
+
 .svelte-flow__node.draggable.dragging {
   cursor: grabbing;
 }
+
 .svelte-flow__nodesselection {
   z-index: 3;
-  transform-origin: left top;
   pointer-events: none;
+  transform-origin: left top;
 }
+
 .svelte-flow__nodesselection-rect {
   position: absolute;
   pointer-events: all;
   cursor: grab;
 }
+
 .svelte-flow__handle {
   position: absolute;
-  pointer-events: none;
-  min-width: 5px;
-  min-height: 5px;
   width: 6px;
+  min-width: 5px;
   height: 6px;
+  min-height: 5px;
+  pointer-events: none;
   background-color: var(
     --xy-handle-background-color,
     var(--xy-handle-background-color-default)
@@ -248,98 +280,113 @@ svg.svelte-flow__connectionline {
     var(--xy-handle-border-color, var(--xy-handle-border-color-default));
   border-radius: 100%;
 }
+
 .svelte-flow__handle.connectingfrom {
   pointer-events: all;
 }
+
 .svelte-flow__handle.connectionindicator {
   pointer-events: all;
   cursor: crosshair;
 }
+
 .svelte-flow__handle-bottom {
   top: auto;
-  left: 50%;
   bottom: 0;
+  left: 50%;
   transform: translate(-50%, 50%);
 }
+
 .svelte-flow__handle-top {
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .svelte-flow__handle-left {
   top: 50%;
   left: 0;
   transform: translate(-50%, -50%);
 }
+
 .svelte-flow__handle-right {
   top: 50%;
   right: 0;
   transform: translate(50%, -50%);
 }
+
 .svelte-flow__edgeupdater {
-  cursor: move;
   pointer-events: all;
+  cursor: move;
 }
+
 .svelte-flow__panel {
   position: absolute;
   z-index: 5;
   margin: 15px;
 }
+
 .svelte-flow__panel.top {
   top: 0;
 }
+
 .svelte-flow__panel.bottom {
   bottom: 0;
 }
+
 .svelte-flow__panel.left {
   left: 0;
 }
+
 .svelte-flow__panel.right {
   right: 0;
 }
+
 .svelte-flow__panel.center {
   left: 50%;
   transform: translate(-50%);
 }
+
 .svelte-flow__attribution {
+  padding: 2px 3px;
+  margin: 0;
   font-size: 10px;
   background: var(
     --xy-attribution-background-color,
     var(--xy-attribution-background-color-default)
   );
-  padding: 2px 3px;
-  margin: 0;
 }
+
 .svelte-flow__attribution a {
-  text-decoration: none;
   color: #999;
+  text-decoration: none;
 }
+
 @keyframes dashdraw {
   0% {
     stroke-dashoffset: 10;
   }
 }
+
 .svelte-flow__edgelabel-renderer {
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
-  left: 0;
-  top: 0;
 }
+
 .svelte-flow__viewport-portal {
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  left: 0;
-  top: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
 }
+
 .svelte-flow__minimap {
   background: var(
     --xy-minimap-background-color-props,
@@ -349,9 +396,11 @@ svg.svelte-flow__connectionline {
     )
   );
 }
+
 .svelte-flow__minimap-svg {
   display: block;
 }
+
 .svelte-flow__minimap-mask {
   fill: var(
     --xy-minimap-mask-background-color-props,
@@ -375,6 +424,7 @@ svg.svelte-flow__connectionline {
     )
   );
 }
+
 .svelte-flow__minimap-node {
   fill: var(
     --xy-minimap-node-background-color-props,
@@ -398,6 +448,7 @@ svg.svelte-flow__connectionline {
     )
   );
 }
+
 .svelte-flow__background-pattern.dots {
   fill: var(
     --xy-background-pattern-color-props,
@@ -407,6 +458,7 @@ svg.svelte-flow__connectionline {
     )
   );
 }
+
 .svelte-flow__background-pattern.lines {
   stroke: var(
     --xy-background-pattern-color-props,
@@ -416,6 +468,7 @@ svg.svelte-flow__connectionline {
     )
   );
 }
+
 .svelte-flow__background-pattern.cross {
   stroke: var(
     --xy-background-pattern-color-props,
@@ -425,6 +478,7 @@ svg.svelte-flow__connectionline {
     )
   );
 }
+
 .svelte-flow__controls {
   display: flex;
   flex-direction: column;
@@ -433,21 +487,29 @@ svg.svelte-flow__connectionline {
     var(--xy-controls-box-shadow-default)
   );
 }
+
 .svelte-flow__controls.horizontal {
   flex-direction: row;
 }
+
 .svelte-flow__controls-button {
   display: flex;
-  justify-content: center;
   align-items: center;
-  height: 26px;
+  justify-content: center;
   width: 26px;
+  height: 26px;
   padding: 4px;
-  border: none;
+  color: var(
+    --xy-controls-button-color-props,
+    var(--xy-controls-button-color, var(--xy-controls-button-color-default))
+  );
+  cursor: pointer;
+  user-select: none;
   background: var(
     --xy-controls-button-background-color,
     var(--xy-controls-button-background-color-default)
   );
+  border: none;
   border-bottom: 1px solid
     var(
       --xy-controls-button-border-color-props,
@@ -456,50 +518,48 @@ svg.svelte-flow__connectionline {
         var(--xy-controls-button-border-color-default)
       )
     );
-  color: var(
-    --xy-controls-button-color-props,
-    var(--xy-controls-button-color, var(--xy-controls-button-color-default))
-  );
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
 }
+
 .svelte-flow__controls-button svg {
   width: 100%;
   max-width: 12px;
   max-height: 12px;
-  fill: currentColor;
+  fill: currentcolor;
 }
+
 .svelte-flow__edge.updating .svelte-flow__edge-path {
   stroke: #777;
 }
+
 .svelte-flow__edge-text {
   font-size: 10px;
 }
+
 .svelte-flow__node.selectable:focus,
 .svelte-flow__node.selectable:focus-visible {
   outline: none;
 }
+
 .svelte-flow__node-input,
 .svelte-flow__node-default,
 .svelte-flow__node-output,
 .svelte-flow__node-group {
-  padding: 10px;
-  border-radius: var(
-    --xy-node-border-radius,
-    var(--xy-node-border-radius-default)
-  );
   width: 150px;
+  padding: 10px;
   font-size: 12px;
   color: var(--xy-node-color, var(--xy-node-color-default));
   text-align: center;
-  border: var(--xy-node-border, var(--xy-node-border-default));
   background-color: var(
     --xy-node-background-color,
     var(--xy-node-background-color-default)
   );
+  border: var(--xy-node-border, var(--xy-node-border-default));
+  border-radius: var(
+    --xy-node-border-radius,
+    var(--xy-node-border-radius-default)
+  );
 }
+
 .svelte-flow__node-input.selectable:hover,
 .svelte-flow__node-default.selectable:hover,
 .svelte-flow__node-output.selectable:hover,
@@ -509,6 +569,7 @@ svg.svelte-flow__connectionline {
     var(--xy-node-boxshadow-hover-default)
   );
 }
+
 .svelte-flow__node-input.selectable.selected,
 .svelte-flow__node-input.selectable:focus,
 .svelte-flow__node-input.selectable:focus-visible,
@@ -526,12 +587,14 @@ svg.svelte-flow__connectionline {
     var(--xy-node-boxshadow-selected-default)
   );
 }
+
 .svelte-flow__node-group {
   background-color: var(
     --xy-node-group-background-color,
     var(--xy-node-group-background-color-default)
   );
 }
+
 .svelte-flow__nodesselection-rect,
 .svelte-flow__selection {
   background: var(
@@ -540,20 +603,15 @@ svg.svelte-flow__connectionline {
   );
   border: var(--xy-selection-border, var(--xy-selection-border-default));
 }
+
 .svelte-flow__nodesselection-rect:focus,
 .svelte-flow__nodesselection-rect:focus-visible,
 .svelte-flow__selection:focus,
 .svelte-flow__selection:focus-visible {
   outline: none;
 }
+
 .svelte-flow__controls-button:hover {
-  background: var(
-    --xy-controls-button-background-color-hover-props,
-    var(
-      --xy-controls-button-background-color-hover,
-      var(--xy-controls-button-background-color-hover-default)
-    )
-  );
   color: var(
     --xy-controls-button-color-hover-props,
     var(
@@ -561,413 +619,490 @@ svg.svelte-flow__connectionline {
       var(--xy-controls-button-color-hover-default)
     )
   );
+  background: var(
+    --xy-controls-button-background-color-hover-props,
+    var(
+      --xy-controls-button-background-color-hover,
+      var(--xy-controls-button-background-color-hover-default)
+    )
+  );
 }
+
 .svelte-flow__controls-button:disabled {
   pointer-events: none;
 }
+
 .svelte-flow__controls-button:disabled svg {
   fill-opacity: 0.4;
 }
+
 .svelte-flow__controls-button:last-child {
   border-bottom: none;
 }
+
 .svelte-flow__resize-control {
   position: absolute;
 }
+
 .svelte-flow__resize-control.left,
 .svelte-flow__resize-control.right {
   cursor: ew-resize;
 }
+
 .svelte-flow__resize-control.top,
 .svelte-flow__resize-control.bottom {
   cursor: ns-resize;
 }
+
 .svelte-flow__resize-control.top.left,
 .svelte-flow__resize-control.bottom.right {
   cursor: nwse-resize;
 }
+
 .svelte-flow__resize-control.bottom.left,
 .svelte-flow__resize-control.top.right {
   cursor: nesw-resize;
 }
+
 .svelte-flow__resize-control.handle {
   width: 4px;
   height: 4px;
-  border: 1px solid #fff;
-  border-radius: 1px;
   background-color: var(
     --xy-resize-background-color,
     var(--xy-resize-background-color-default)
   );
+  border: 1px solid #fff;
+  border-radius: 1px;
   transform: translate(-50%, -50%);
 }
+
 .svelte-flow__resize-control.handle.left {
+  top: 50%;
   left: 0;
-  top: 50%;
 }
+
 .svelte-flow__resize-control.handle.right {
-  left: 100%;
   top: 50%;
+  left: 100%;
 }
+
 .svelte-flow__resize-control.handle.top {
-  left: 50%;
   top: 0;
-}
-.svelte-flow__resize-control.handle.bottom {
   left: 50%;
-  top: 100%;
 }
+
+.svelte-flow__resize-control.handle.bottom {
+  top: 100%;
+  left: 50%;
+}
+
 .svelte-flow__resize-control.handle.top.left,
 .svelte-flow__resize-control.handle.bottom.left {
   left: 0;
 }
+
 .svelte-flow__resize-control.handle.top.right,
 .svelte-flow__resize-control.handle.bottom.right {
   left: 100%;
 }
+
 .svelte-flow__resize-control.line {
   border-color: var(
     --xy-resize-background-color,
     var(--xy-resize-background-color-default)
   );
-  border-width: 0;
   border-style: solid;
+  border-width: 0;
 }
+
 .svelte-flow__resize-control.line.left,
 .svelte-flow__resize-control.line.right {
-  width: 1px;
-  transform: translate(-50%);
   top: 0;
+  width: 1px;
   height: 100%;
+  transform: translate(-50%);
 }
+
 .svelte-flow__resize-control.line.left {
   left: 0;
   border-left-width: 1px;
 }
+
 .svelte-flow__resize-control.line.right {
   left: 100%;
   border-right-width: 1px;
 }
+
 .svelte-flow__resize-control.line.top,
 .svelte-flow__resize-control.line.bottom {
-  height: 1px;
-  transform: translateY(-50%);
   left: 0;
   width: 100%;
+  height: 1px;
+  transform: translateY(-50%);
 }
+
 .svelte-flow__resize-control.line.top {
   top: 0;
   border-top-width: 1px;
 }
+
 .svelte-flow__resize-control.line.bottom {
-  border-bottom-width: 1px;
   top: 100%;
+  border-bottom-width: 1px;
 }
+
 .svelte-flow__edge-label {
-  text-align: center;
   position: absolute;
   padding: 2px;
   font-size: 10px;
-  cursor: pointer;
   color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
+  text-align: center;
+  cursor: pointer;
   background: var(
     --xy-edge-label-background-color,
     var(--xy-edge-label-background-color-default)
   );
 }
+
 .svelte-flow__nodes,
 .svelte-flow__edgelabel-renderer {
   z-index: 0;
 }
+
 :root,
 :root .tf-theme-light {
   --tf-primary-color: #2563eb;
   --xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
   --xy-handle-background-color: var(--tf-primary-color);
 }
+
 .tf-btn {
   display: flex;
+  gap: 2px;
   align-items: center;
   justify-content: center;
-  gap: 2px;
-  background: #fff;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  border-radius: 5px;
+  width: fit-content;
+  height: fit-content;
   padding: 5px;
   margin: 0;
-  height: fit-content;
-  width: fit-content;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
+
 .tf-btn svg {
-  fill: currentColor;
   width: 16px;
   height: 16px;
+  fill: currentcolor;
 }
+
 .tf-btn:hover {
   border: 1px solid var(--tf-primary-color);
 }
+
 .tf-input,
 .tf-textarea {
-  display: flex;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  padding: 5px 10px;
   box-sizing: border-box;
+  display: flex;
+  padding: 5px 10px;
   resize: vertical;
   outline: none;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
+
 .tf-input::placeholder,
 .tf-textarea::placeholder {
   color: #ccc;
 }
+
 .tf-input:focus,
 .tf-textarea:focus {
   border-color: var(--tf-primary-color);
   box-shadow: 0 0 5px #51cbee33;
 }
+
 .tf-input[disabled],
 .tf-textarea[disabled] {
-  background-color: #f0f0f0;
-  cursor: not-allowed;
   color: #aaa;
+  cursor: not-allowed;
+  background-color: #f0f0f0;
 }
+
 .tf-select-input {
   display: flex;
-  border: 1px solid #ccc;
-  padding: 3px 10px;
-  border-radius: 5px;
-  font-size: 14px;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
+  height: 27px;
+  padding: 3px 10px;
+  font-size: 14px;
   cursor: pointer;
   background: #fff;
-  height: 27px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
+
 .tf-select-input:focus {
   border-color: var(--tf-primary-color);
   box-shadow: 0 0 5px #51cbee33;
 }
+
 .tf-select-input-value {
-  height: 21px;
-  min-width: 10px;
-  font-size: 12px;
   display: flex;
   align-items: center;
+  min-width: 10px;
+  height: 21px;
+  font-size: 12px;
 }
+
 .tf-select-input-arrow {
   display: block;
   width: 16px;
   height: 16px;
   color: #666;
 }
+
 .tf-select-input-placeholder {
   color: #ccc;
 }
+
 .tf-select-content {
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  margin-top: 5px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 5px;
-  width: max-content;
-  min-width: 100%;
   z-index: 9999;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  min-width: 100%;
+  padding: 5px;
+  margin-top: 5px;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
+
 .tf-select-content-item {
   display: flex;
+  gap: 2px;
   align-items: center;
   padding: 5px 10px;
-  border: none;
-  background: #fff;
-  border-radius: 5px;
-  cursor: pointer;
   line-height: 100%;
-  gap: 2px;
+  cursor: pointer;
+  background: #fff;
+  border: none;
+  border-radius: 5px;
 }
+
 .tf-select-content-item span {
-  width: 16px;
   display: flex;
+  width: 16px;
 }
+
 .tf-select-content-item svg {
   width: 16px;
   height: 16px;
   margin: auto;
 }
+
 .tf-select-content-item:hover {
   background: #f0f0f0;
 }
+
 .tf-select-content-children {
   padding-left: 14px;
 }
+
 .tf-checkbox {
   width: 14px;
   height: 14px;
 }
+
 .tf-tabs {
   display: flex;
-  align-items: center;
-  justify-content: center;
   gap: 5px;
-  padding: 5px;
-  border-radius: 5px;
-  border: none;
-  background: #f4f4f5;
-}
-.tf-tabs .tf-tabs-item {
-  flex-grow: 1;
-  padding: 5px 10px;
-  cursor: pointer;
-  border-radius: 5px;
-  display: flex;
   align-items: center;
   justify-content: center;
+  padding: 5px;
+  background: #f4f4f5;
+  border: none;
+  border-radius: 5px;
+}
+
+.tf-tabs .tf-tabs-item {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
   font-size: 14px;
   color: #808088;
+  cursor: pointer;
+  border-radius: 5px;
 }
+
 .tf-tabs .tf-tabs-item.active {
-  background: #fff;
-  color: #333;
   font-weight: 500;
+  color: #333;
+  background: #fff;
   box-shadow: 0 0 5px #00000026;
 }
+
 h3.tf-heading {
-  font-weight: 700;
-  font-size: 14px;
   margin-top: 2px;
   margin-bottom: 3px;
+  font-size: 14px;
+  font-weight: 700;
   color: #333;
 }
+
 .tf-collapse {
   border: none;
   border-radius: 5px;
 }
+
 .tf-collapse-item-title {
   display: flex;
   align-items: center;
-  cursor: pointer;
   font-size: 14px;
+  cursor: pointer;
 }
+
 .tf-collapse-item-title-icon {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 26px;
   height: 26px;
+  padding: 3px;
+  margin-right: 10px;
   color: #2563eb;
   background: #cedafb;
   border-radius: 5px;
-  padding: 3px;
-  justify-content: center;
-  align-items: center;
-  margin-right: 10px;
 }
+
 .tf-collapse-item-title-icon svg {
   width: 22px;
   height: 22px;
   color: #3474ff;
 }
+
 .tf-collapse-item-title-arrow {
   display: block;
   width: 16px;
   height: 16px;
   margin-left: auto;
 }
+
 .tf-collapse-item-description {
-  font-size: 12px;
   margin: 10px 0;
+  font-size: 12px;
   color: #999;
 }
+
 .svelte-flow__nodes .svelte-flow__node {
+  box-sizing: border-box;
   border: 3px solid transparent;
   border-radius: 5px;
-  box-sizing: border-box;
 }
+
 .svelte-flow__nodes .svelte-flow__node .svelte-flow__handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 16px;
   height: 16px;
   background: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   border: none;
 }
-.svelte-flow__nodes .svelte-flow__node .svelte-flow__handle:after {
-  content: ' ';
-  background: #2563eb;
+
+.svelte-flow__nodes .svelte-flow__node .svelte-flow__handle::after {
   width: 8px;
   height: 8px;
+  content: ' ';
+  background: #2563eb;
   border-radius: 100%;
   transition:
     width 0.1s,
     height 0.1s;
 }
-.svelte-flow__nodes .svelte-flow__node .svelte-flow__handle:hover:after {
+
+.svelte-flow__nodes .svelte-flow__node .svelte-flow__handle:hover::after {
   width: 16px;
   height: 16px;
 }
-.svelte-flow__nodes .svelte-flow__node div.loop_handle_wrapper:after {
+
+.svelte-flow__nodes .svelte-flow__node div.loop_handle_wrapper::after {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 20px;
+  color: #fff;
   content: '循环体';
   background: #2563eb;
-  width: 100px;
-  height: 20px;
   border-radius: 0;
-  display: flex;
-  color: #fff;
-  justify-content: center;
-  align-items: center;
 }
-.svelte-flow__nodes .svelte-flow__node div.loop_handle_wrapper:hover:after {
+
+.svelte-flow__nodes .svelte-flow__node div.loop_handle_wrapper:hover::after {
   width: 100px;
   height: 20px;
 }
-.svelte-flow__nodes .svelte-flow__node:after {
-  content: ' ';
+
+.svelte-flow__nodes .svelte-flow__node::after {
   position: absolute;
-  border-radius: 5px;
   top: -2px;
   left: -2px;
-  border: 1px solid #ccc;
-  height: calc(100% + 2px);
   width: calc(100% + 2px);
+  height: calc(100% + 2px);
+  content: ' ';
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
+
 .svelte-flow__nodes .svelte-flow__node:hover {
   border: 3px solid #bacaef7d;
 }
+
 .svelte-flow__nodes .svelte-flow__node.selectable.selected {
   border: 3px solid #bacaef7d;
   box-shadow: var(--xy-node-boxshadow-selected);
 }
-.svelte-flow__nodes .svelte-flow__node:hover:after {
+
+.svelte-flow__nodes .svelte-flow__node:hover::after {
   display: none;
 }
-.svelte-flow__nodes .svelte-flow__node.selectable.selected:after {
+
+.svelte-flow__nodes .svelte-flow__node.selectable.selected::after {
   display: none;
 }
+
 .tf-node-wrapper {
-  border-radius: 5px;
   min-width: 300px;
   background: #fff;
+  border-radius: 5px;
 }
+
 .tf-node-wrapper-title {
-  height: 30px;
-  background: #eff1f5;
-  color: #bcbcbc;
-  font-size: 12px;
   display: flex;
   align-items: center;
+  height: 30px;
   padding-left: 5px;
-  border-bottom: 1px solid #ccc;
+  font-size: 12px;
   font-weight: 300;
+  color: #bcbcbc;
   letter-spacing: 1px;
+  background: #eff1f5;
+  border-bottom: 1px solid #ccc;
 }
+
 .tf-node-wrapper-body {
   padding: 10px;
 }
+
 .svelte-flow__attribution a {
   display: none;
 }
+
 .tf-toolbar {
   position: absolute;
   top: 10px;
@@ -975,69 +1110,78 @@ h3.tf-heading {
   z-index: 9999;
   display: flex;
   gap: 5px;
+  transform: translate(-220px);
   transition:
     transform 0.5s ease,
     opacity 0.5s ease;
-  transform: translate(-220px);
 }
+
 .tf-toolbar.show {
   transform: translate(0);
 }
+
 .tf-toolbar-container {
+  width: 180px;
+  padding: 10px;
   background: #fff;
   border: 1px solid #eee;
   border-radius: 5px;
   box-shadow: 0 0 5px #0000001a;
-  padding: 10px;
-  width: 180px;
 }
+
 .tf-toolbar-container-header {
   display: flex;
 }
+
 .tf-toolbar-container-body {
   display: flex;
   margin-top: 20px;
 }
+
 .tf-toolbar-container-body .tf-toolbar-container-base,
 .tf-toolbar-container-body .tf-toolbar-container-tools {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   gap: 4px;
-  flex-grow: 1;
 }
+
 .tf-toolbar-container-body .tf-toolbar-container-base .tf-btn,
 .tf-toolbar-container-body .tf-toolbar-container-tools .tf-btn {
-  border: none;
-  width: 100%;
-  justify-content: flex-start;
-  height: 40px;
   gap: 10px;
+  justify-content: flex-start;
+  width: 100%;
+  height: 40px;
   cursor: grabbing;
+  border: none;
   border-radius: 5px;
 }
+
 .tf-toolbar-container-body .tf-toolbar-container-base .tf-btn svg,
 .tf-toolbar-container-body .tf-toolbar-container-tools .tf-btn svg {
   width: 20px;
   height: 20px;
   fill: #2563eb;
 }
+
 .tf-toolbar-container-body .tf-toolbar-container-base .tf-btn:hover,
 .tf-toolbar-container-body .tf-toolbar-container-tools .tf-btn:hover {
   background: #f1f1f1;
 }
-.tinyflow-logo:after {
-  content: 'Tinyflow.ai';
-  font-size: 145px;
+
+.tinyflow-logo::after {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
+  font-size: 145px;
   font-weight: 800;
   color: #03153b54;
   text-shadow:
     1px 3px 6px #cedafb,
     0 0 0 #000,
     1px 3px 6px #fff;
+  content: 'Tinyflow.ai';
   opacity: 0.1;
 }
diff --git a/apps/web-antd/src/components/table-action/table-action.vue b/apps/web-antd/src/components/table-action/table-action.vue
index 96d2f540..c8a48a73 100644
--- a/apps/web-antd/src/components/table-action/table-action.vue
+++ b/apps/web-antd/src/components/table-action/table-action.vue
@@ -4,7 +4,7 @@ import type { PropType } from 'vue';
 
 import type { ActionItem, PopConfirm } from './typing';
 
-import { computed, unref } from 'vue';
+import { computed, unref, watch } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { IconifyIcon } from '@vben/icons';
@@ -60,21 +60,20 @@ function isIfShow(action: ActionItem): boolean {
 
 /** 处理按钮 actions */
 const getActions = computed(() => {
-  return (props.actions || []).filter((action: ActionItem) => isIfShow(action));
+  const actions = props.actions || [];
+  return actions.filter((action: ActionItem) => isIfShow(action));
 });
 
 /** 处理下拉菜单 actions */
 const getDropdownList = computed(() => {
-  return (props.dropDownActions || []).filter((action: ActionItem) =>
-    isIfShow(action),
-  );
+  const dropDownActions = props.dropDownActions || [];
+  return dropDownActions.filter((action: ActionItem) => isIfShow(action));
 });
 
 /** Space 组件的 size */
 const spaceSize = computed(() => {
-  return unref(getActions)?.some((item: ActionItem) => item.type === 'link')
-    ? 0
-    : 8;
+  const actions = unref(getActions);
+  return actions?.some((item: ActionItem) => item.type === 'link') ? 0 : 8;
 });
 
 /** 获取 PopConfirm 属性 */
@@ -137,6 +136,15 @@ function handleButtonClick(action: ActionItem) {
     action.onClick();
   }
 }
+
+/** 监听props变化，强制重新计算 */
+watch(
+  () => [props.actions, props.dropDownActions],
+  () => {
+    // 这里不需要额外处理，computed会自动重新计算
+  },
+  { deep: true },
+);
 </script>
 
 <template>
diff --git a/apps/web-antd/src/store/auth.ts b/apps/web-antd/src/store/auth.ts
index 3d9ca968..dcef7117 100644
--- a/apps/web-antd/src/store/auth.ts
+++ b/apps/web-antd/src/store/auth.ts
@@ -44,16 +44,26 @@ export const useAuthStore = defineStore('auth', () => {
     // 异步处理用户登录操作并获取 accessToken
     let userInfo: null | UserInfo = null;
     try {
+      let loginResult: AuthApi.LoginResult;
       loginLoading.value = true;
-      const { accessToken, refreshToken } =
-        type === 'mobile'
-          ? await smsLogin(params as AuthApi.SmsLoginParams)
-          : type === 'register'
-            ? await register(params as AuthApi.RegisterParams)
-            : // eslint-disable-next-line unicorn/no-nested-ternary
-              type === 'social'
-              ? await socialLogin(params as AuthApi.SocialLoginParams)
-              : await loginApi(params);
+      switch (type) {
+        case 'mobile': {
+          loginResult = await smsLogin(params as AuthApi.SmsLoginParams);
+          break;
+        }
+        case 'register': {
+          loginResult = await register(params as AuthApi.RegisterParams);
+          break;
+        }
+        case 'social': {
+          loginResult = await socialLogin(params as AuthApi.SocialLoginParams);
+          break;
+        }
+        default: {
+          loginResult = await loginApi(params);
+        }
+      }
+      const { accessToken, refreshToken } = loginResult;
 
       // 如果成功获取到 accessToken
       if (accessToken) {
diff --git a/apps/web-antd/src/views/ai/chat/index/index.vue b/apps/web-antd/src/views/ai/chat/index/index.vue
index 98f0f781..1e33796f 100644
--- a/apps/web-antd/src/views/ai/chat/index/index.vue
+++ b/apps/web-antd/src/views/ai/chat/index/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO @gjd：https://t.zsxq.com/pmNb1 AI 对话、绘图底部没对齐
 import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
 import type { AiChatMessageApi } from '#/api/ai/chat/message';
 
@@ -23,6 +24,7 @@ import MessageList from './components/message/MessageList.vue';
 import MessageListEmpty from './components/message/MessageListEmpty.vue';
 import MessageLoading from './components/message/MessageLoading.vue';
 import MessageNewConversation from './components/message/MessageNewConversation.vue';
+
 /** AI 聊天对话 列表 */
 defineOptions({ name: 'AiChat' });
 
diff --git a/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue b/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
index ab8cf353..3c0cc938 100644
--- a/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
+++ b/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
@@ -69,7 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
diff --git a/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue b/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
index e4dc3b57..a53426c8 100644
--- a/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
+++ b/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
@@ -66,7 +66,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
diff --git a/apps/web-antd/src/views/ai/image/manager/index.vue b/apps/web-antd/src/views/ai/image/manager/index.vue
index 5744e881..f77b82bb 100644
--- a/apps/web-antd/src/views/ai/image/manager/index.vue
+++ b/apps/web-antd/src/views/ai/image/manager/index.vue
@@ -79,7 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiImageApi.Image>,
@@ -104,7 +104,10 @@ onMounted(async () => {
       </template>
       <template #userId="{ row }">
         <span>
-          {{ userList.find((item) => item.id === row.userId)?.nickname }}
+          {{
+            userList.find((item: SystemUserApi.User) => item.id === row.userId)
+              ?.nickname
+          }}
         </span>
       </template>
       <template #publicStatus="{ row }">
diff --git a/apps/web-antd/src/views/ai/knowledge/document/index.vue b/apps/web-antd/src/views/ai/knowledge/document/index.vue
index bf616ca0..96e70747 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/index.vue
@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiKnowledgeDocumentApi.KnowledgeDocument>,
diff --git a/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue b/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
index f52c7b81..fa0a9267 100644
--- a/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
@@ -95,7 +95,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiKnowledgeKnowledgeApi.Knowledge>,
diff --git a/apps/web-antd/src/views/ai/knowledge/segment/index.vue b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
index 53a7297f..8e1c9b18 100644
--- a/apps/web-antd/src/views/ai/knowledge/segment/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
@@ -86,7 +86,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiKnowledgeKnowledgeApi.Knowledge>,
diff --git a/apps/web-antd/src/views/ai/mindmap/manager/index.vue b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
index 6976846c..8fa73b76 100644
--- a/apps/web-antd/src/views/ai/mindmap/manager/index.vue
+++ b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
@@ -70,7 +70,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiMindmapApi.MindMap>,
@@ -108,7 +108,10 @@ onMounted(async () => {
       </template>
       <template #userId="{ row }">
         <span>
-          {{ userList.find((item) => item.id === row.userId)?.nickname }}
+          {{
+            userList.find((item: SystemUserApi.User) => item.id === row.userId)
+              ?.nickname
+          }}
         </span>
       </template>
       <template #actions="{ row }">
diff --git a/apps/web-antd/src/views/ai/model/apiKey/index.vue b/apps/web-antd/src/views/ai/model/apiKey/index.vue
index 29b13689..5f34dad3 100644
--- a/apps/web-antd/src/views/ai/model/apiKey/index.vue
+++ b/apps/web-antd/src/views/ai/model/apiKey/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiModelApiKeyApi.ApiKey>,
diff --git a/apps/web-antd/src/views/ai/model/chatRole/index.vue b/apps/web-antd/src/views/ai/model/chatRole/index.vue
index c1cc3402..783fef49 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/index.vue
+++ b/apps/web-antd/src/views/ai/model/chatRole/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiModelChatRoleApi.ChatRole>,
diff --git a/apps/web-antd/src/views/ai/model/model/index.vue b/apps/web-antd/src/views/ai/model/model/index.vue
index 6bdd6fe7..5d56056a 100644
--- a/apps/web-antd/src/views/ai/model/model/index.vue
+++ b/apps/web-antd/src/views/ai/model/model/index.vue
@@ -79,7 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiModelModelApi.Model>,
@@ -112,7 +112,11 @@ onMounted(async () => {
       </template>
       <template #keyId="{ row }">
         <span>
-          {{ apiKeyList.find((item) => item.id === row.keyId)?.name }}
+          {{
+            apiKeyList.find(
+              (item: AiModelApiKeyApi.ApiKey) => item.id === row.keyId,
+            )?.name
+          }}
         </span>
       </template>
       <template #actions="{ row }">
diff --git a/apps/web-antd/src/views/ai/model/tool/index.vue b/apps/web-antd/src/views/ai/model/tool/index.vue
index e708b560..2da162e7 100644
--- a/apps/web-antd/src/views/ai/model/tool/index.vue
+++ b/apps/web-antd/src/views/ai/model/tool/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiModelToolApi.Tool>,
diff --git a/apps/web-antd/src/views/ai/music/manager/index.vue b/apps/web-antd/src/views/ai/music/manager/index.vue
index 6293341a..66d58776 100644
--- a/apps/web-antd/src/views/ai/music/manager/index.vue
+++ b/apps/web-antd/src/views/ai/music/manager/index.vue
@@ -79,7 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiMusicApi.Music>,
diff --git a/apps/web-antd/src/views/ai/workflow/index.vue b/apps/web-antd/src/views/ai/workflow/index.vue
index e2a86c5b..d6355c14 100644
--- a/apps/web-antd/src/views/ai/workflow/index.vue
+++ b/apps/web-antd/src/views/ai/workflow/index.vue
@@ -76,7 +76,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<any>,
diff --git a/apps/web-antd/src/views/ai/write/manager/index.vue b/apps/web-antd/src/views/ai/write/manager/index.vue
index 32a7e17d..1f85dee6 100644
--- a/apps/web-antd/src/views/ai/write/manager/index.vue
+++ b/apps/web-antd/src/views/ai/write/manager/index.vue
@@ -62,7 +62,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiWriteApi.AiWritePageReq>,
diff --git a/apps/web-antd/src/views/basic/productunit/index.vue b/apps/web-antd/src/views/basic/productunit/index.vue
index e1cb3feb..c5d533a4 100644
--- a/apps/web-antd/src/views/basic/productunit/index.vue
+++ b/apps/web-antd/src/views/basic/productunit/index.vue
@@ -114,7 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<ProductUnitApi.ProductUnit>,
diff --git a/apps/web-antd/src/views/basic/productunitgroup/index.vue b/apps/web-antd/src/views/basic/productunitgroup/index.vue
index 8d11fcd8..7e4e399b 100644
--- a/apps/web-antd/src/views/basic/productunitgroup/index.vue
+++ b/apps/web-antd/src/views/basic/productunitgroup/index.vue
@@ -118,7 +118,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<ProductUnitGroupApi.ProductUnitGroup>,
diff --git a/apps/web-antd/src/views/bpm/category/index.vue b/apps/web-antd/src/views/bpm/category/index.vue
index 7d840c21..ecfbbe98 100644
--- a/apps/web-antd/src/views/bpm/category/index.vue
+++ b/apps/web-antd/src/views/bpm/category/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmCategoryApi.Category>,
diff --git a/apps/web-antd/src/views/bpm/form/index.vue b/apps/web-antd/src/views/bpm/form/index.vue
index 90b6aad2..dae5127d 100644
--- a/apps/web-antd/src/views/bpm/form/index.vue
+++ b/apps/web-antd/src/views/bpm/form/index.vue
@@ -109,7 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {
diff --git a/apps/web-antd/src/views/bpm/group/index.vue b/apps/web-antd/src/views/bpm/group/index.vue
index 772243b2..f5395dae 100644
--- a/apps/web-antd/src/views/bpm/group/index.vue
+++ b/apps/web-antd/src/views/bpm/group/index.vue
@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmUserGroupApi.UserGroup>,
diff --git a/apps/web-antd/src/views/bpm/model/definition/index.vue b/apps/web-antd/src/views/bpm/model/definition/index.vue
index f15dd28a..ab0441e6 100644
--- a/apps/web-antd/src/views/bpm/model/definition/index.vue
+++ b/apps/web-antd/src/views/bpm/model/definition/index.vue
@@ -76,7 +76,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
   } as VxeTableGridOptions,
 });
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index 82dd908c..8427ceac 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -123,6 +123,7 @@ const formData: any = ref({
     enable: false,
     summary: [],
   },
+  allowWithdrawTask: false,
 });
 
 // 流程数据
@@ -178,6 +179,16 @@ async function initData() {
     // 特殊：复制场景
     if (route.params.type === 'copy') {
       delete formData.value.id;
+      if (formData.value.bpmnXml) {
+        formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
+          formData.value.name,
+          `${formData.value.name}副本`,
+        );
+        formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
+          formData.value.key,
+          `${formData.value.key}_copy`,
+        );
+      }
       formData.value.name += '副本';
       formData.value.key += '_copy';
     }
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index 87f0a545..3ef3b29a 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -69,7 +69,27 @@ const selectedUsers = ref<number[]>();
 
 const rules: Record<string, Rule[]> = {
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  key: [
+    { required: true, message: '流程标识不能为空', trigger: 'blur' },
+    {
+      validator: (_rule: any, value: string, callback: any) => {
+        if (!value) {
+          callback();
+          return;
+        }
+        if (!/^[a-z_][\-\w.$]*$/i.test(value)) {
+          callback(
+            new Error(
+              '只能包含字母、数字、下划线、连字符和点号，且必须以字母或下划线开头',
+            ),
+          );
+          return;
+        }
+        callback();
+      },
+      trigger: 'blur',
+    },
+  ],
   category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
index 7244890f..82248658 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
@@ -220,6 +220,9 @@ function initData() {
   if (modelData.value.taskAfterTriggerSetting) {
     taskAfterTriggerEnable.value = true;
   }
+  if (modelData.value.allowWithdrawTask === undefined) {
+    modelData.value.allowWithdrawTask = false;
+  }
 }
 
 /** 监听表单 ID 变化，加载表单数据 */
@@ -272,6 +275,18 @@ defineExpose({ initData, validate });
         </div>
       </div>
     </FormItem>
+    <FormItem class="mb-5" label="审批人权限">
+      <div class="mt-1 flex flex-col">
+        <Checkbox v-model:checked="modelData.allowWithdrawTask">
+          允许审批人撤回任务
+        </Checkbox>
+        <div class="ml-6">
+          <TypographyText type="secondary">
+            审批人可撤回正在审批节点的前一节点
+          </TypographyText>
+        </div>
+      </div>
+    </FormItem>
     <FormItem v-if="modelData.processIdRule" class="mb-5" label="流程编码">
       <Row :gutter="8" align="middle">
         <Col :span="1">
diff --git a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
index f1ace0ae..ad67b16e 100644
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -415,6 +415,7 @@ const handleRenameSuccess = () => {
     >
       <div class="flex h-12 items-center">
         <!-- 头部：分类名 -->
+        <!-- TODO @jason：1）无法拖动排序；2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。 -->
         <div class="flex items-center">
           <Tooltip v-if="isCategorySorting" title="拖动排序">
             <span
diff --git a/apps/web-antd/src/views/bpm/oa/leave/index.vue b/apps/web-antd/src/views/bpm/oa/leave/index.vue
index 959f9b20..6b000247 100644
--- a/apps/web-antd/src/views/bpm/oa/leave/index.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/index.vue
@@ -38,7 +38,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmOALeaveApi.Leave>,
diff --git a/apps/web-antd/src/views/bpm/processExpression/index.vue b/apps/web-antd/src/views/bpm/processExpression/index.vue
index 5296c731..05531473 100644
--- a/apps/web-antd/src/views/bpm/processExpression/index.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/index.vue
@@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmProcessExpressionApi.ProcessExpression>,
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 3283c5d4..95720d43 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -2,6 +2,8 @@
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemUserApi } from '#/api/system/user';
 
+// TODO @jason：业务表单审批时，读取不到界面，参见 https://t.zsxq.com/eif2e
+
 import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
index d4e4b674..fd0c4efe 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -4,7 +4,7 @@ import type { Rule } from 'ant-design-vue/es/form';
 
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -102,6 +102,7 @@ const approveSignFormRef = ref();
 const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
   [],
 ); // 下一个审批节点信息
+const nextAssigneesTimelineRef = ref(); // 下一个节点审批人时间线组件的引用
 const approveReasonForm: any = reactive({
   reason: '',
   signPicUrl: '',
@@ -278,6 +279,10 @@ function closePopover(type: string, formRef: any | FormInstance) {
   }
   if (popOverVisible.value[type]) popOverVisible.value[type] = false;
   nextAssigneesActivityNode.value = [];
+  // 清理 Timeline 组件中的自定义审批人数据
+  if (nextAssigneesTimelineRef.value) {
+    nextAssigneesTimelineRef.value.batchSetCustomApproveUsers({});
+  }
 }
 
 /** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
@@ -290,6 +295,7 @@ async function initNextAssigneesFormField() {
     processVariablesStr: JSON.stringify(variables),
   });
   if (data && data.length > 0) {
+    const customApproveUsersData: Record<string, any[]> = {}; // 用于收集需要设置到 Timeline 组件的自定义审批人数据
     data.forEach((node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
       if (
         // 情况一：当前节点没有审批人，并且是发起人自选
@@ -302,7 +308,23 @@ async function initNextAssigneesFormField() {
       ) {
         nextAssigneesActivityNode.value.push(node);
       }
+
+      // 如果节点有 candidateUsers，设置到 customApproveUsers 中
+      if (node.candidateUsers && node.candidateUsers.length > 0) {
+        customApproveUsersData[node.id] = node.candidateUsers;
+      }
     });
+
+    // 将 candidateUsers 设置到 Timeline 组件中
+    await nextTick(); // 等待下一个 tick，确保 Timeline 组件已经渲染
+    if (
+      nextAssigneesTimelineRef.value &&
+      Object.keys(customApproveUsersData).length > 0
+    ) {
+      nextAssigneesTimelineRef.value.batchSetCustomApproveUsers(
+        customApproveUsersData,
+      );
+    }
   }
 }
 
@@ -364,6 +386,10 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
       await TaskApi.approveTask(data);
       popOverVisible.value.approve = false;
       nextAssigneesActivityNode.value = [];
+      // 清理 Timeline 组件中的自定义审批人数据
+      if (nextAssigneesTimelineRef.value) {
+        nextAssigneesTimelineRef.value.batchSetCustomApproveUsers({});
+      }
       message.success('审批通过成功');
     } else {
       // 审批不通过数据
@@ -733,9 +759,10 @@ defineExpose({ loadTodoTask });
               >
                 <div class="-mb-8 -mt-3.5 ml-2.5">
                   <ProcessInstanceTimeline
+                    ref="nextAssigneesTimelineRef"
                     :activity-nodes="nextAssigneesActivityNode"
                     :show-status-icon="false"
-                    :use-next-assignees="true"
+                    :enable-approve-user-select="true"
                     @select-user-confirm="selectNextAssigneesConfirm"
                   />
                 </div>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
index f588d07d..a4535caf 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -23,12 +23,12 @@ defineOptions({ name: 'BpmProcessInstanceTimeline' });
 const props = withDefaults(
   defineProps<{
     activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[]; // 审批节点信息
+    enableApproveUserSelect?: boolean; // 是否开启审批人自选功能
     showStatusIcon?: boolean; // 是否显示头像右下角状态图标
-    useNextAssignees?: boolean; //  是否用于下一个节点审批人选择
   }>(),
   {
     showStatusIcon: true, // 默认值为 true
-    useNextAssignees: false, // 默认值为 false
+    enableApproveUserSelect: false, // 默认值为 false
   },
 );
 
@@ -183,6 +183,9 @@ function handleUserSelectConfirm(userList: any[]) {
 
 /** 跳转子流程 */
 function handleChildProcess(activity: any) {
+  if (!activity.processInstanceId) {
+    return;
+  }
   push({
     name: 'BpmProcessInstanceDetail',
     query: {
@@ -197,12 +200,12 @@ function shouldShowCustomUserSelect(
 ) {
   return (
     isEmpty(activity.tasks) &&
-    isEmpty(activity.candidateUsers) &&
-    (BpmCandidateStrategyEnum.START_USER_SELECT ===
-      activity.candidateStrategy ||
-      (BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
-        activity.candidateStrategy &&
-        props.useNextAssignees))
+    ((BpmCandidateStrategyEnum.START_USER_SELECT ===
+      activity.candidateStrategy &&
+      isEmpty(activity.candidateUsers)) ||
+      (props.enableApproveUserSelect &&
+        BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
+          activity.candidateStrategy))
   );
 }
 
@@ -225,6 +228,21 @@ function handleUserSelectClosed() {
 function handleUserSelectCancel() {
   selectedUsers.value = [];
 }
+
+/** 设置自定义审批人 */
+const setCustomApproveUsers = (activityId: string, users: any[]) => {
+  customApproveUsers.value[activityId] = users || [];
+};
+
+/** 批量设置多个节点的自定义审批人 */
+const batchSetCustomApproveUsers = (data: Record<string, any[]>) => {
+  Object.keys(data).forEach((activityId) => {
+    customApproveUsers.value[activityId] = data[activityId] || [];
+  });
+};
+
+// 暴露方法给父组件
+defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers });
 </script>
 
 <template>
@@ -291,6 +309,7 @@ function handleUserSelectCancel() {
               ghost
               size="small"
               @click="handleChildProcess(activity)"
+              :disabled="!activity.processInstanceId"
             >
               查看子流程
             </Button>
diff --git a/apps/web-antd/src/views/bpm/processInstance/index.vue b/apps/web-antd/src/views/bpm/processInstance/index.vue
index 351a369b..90103f68 100644
--- a/apps/web-antd/src/views/bpm/processInstance/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/index.vue
@@ -90,7 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {
diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
index 4ebfe92b..a04bab6a 100644
--- a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
@@ -99,7 +99,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
diff --git a/apps/web-antd/src/views/bpm/processInstance/report/index.vue b/apps/web-antd/src/views/bpm/processInstance/report/index.vue
index 3ff85f6c..44cb23bf 100644
--- a/apps/web-antd/src/views/bpm/processInstance/report/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/report/index.vue
@@ -115,7 +115,7 @@ const createGrid = () => {
         keyField: 'id',
       },
       toolbarConfig: {
-        refresh: { code: 'query' },
+        refresh: true,
         search: true,
       },
       proxyConfig: {
diff --git a/apps/web-antd/src/views/bpm/processListener/index.vue b/apps/web-antd/src/views/bpm/processListener/index.vue
index bd13f990..9de49849 100644
--- a/apps/web-antd/src/views/bpm/processListener/index.vue
+++ b/apps/web-antd/src/views/bpm/processListener/index.vue
@@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmProcessListenerApi.ProcessListener>,
diff --git a/apps/web-antd/src/views/bpm/task/copy/index.vue b/apps/web-antd/src/views/bpm/task/copy/index.vue
index bf008ded..437f2551 100644
--- a/apps/web-antd/src/views/bpm/task/copy/index.vue
+++ b/apps/web-antd/src/views/bpm/task/copy/index.vue
@@ -48,7 +48,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {
diff --git a/apps/web-antd/src/views/bpm/task/done/index.vue b/apps/web-antd/src/views/bpm/task/done/index.vue
index 280773cf..abd6fcbf 100644
--- a/apps/web-antd/src/views/bpm/task/done/index.vue
+++ b/apps/web-antd/src/views/bpm/task/done/index.vue
@@ -4,8 +4,10 @@ import type { BpmTaskApi } from '#/api/bpm/task';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
+import { message } from 'ant-design-vue';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getTaskDonePage } from '#/api/bpm/task';
+import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
 import { router } from '#/router';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -23,7 +25,15 @@ function handleHistory(row: BpmTaskApi.TaskManager) {
   });
 }
 
-const [Grid] = useVbenVxeGrid({
+/** 撤回任务 */
+async function handleWithdraw(row: BpmTaskApi.TaskManager) {
+  await withdrawTask(row.id);
+  message.success('撤回成功');
+  // 刷新表格数据
+  await gridApi.query();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
@@ -46,13 +56,13 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmTaskApi.Task>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 </script>
 
@@ -75,6 +85,13 @@ const [Grid] = useVbenVxeGrid({
       <template #actions="{ row }">
         <TableAction
           :actions="[
+            {
+              label: '撤回',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              color: 'warning',
+              onClick: handleWithdraw.bind(null, row),
+            },
             {
               label: '历史',
               type: 'link',
diff --git a/apps/web-antd/src/views/bpm/task/manager/index.vue b/apps/web-antd/src/views/bpm/task/manager/index.vue
index d1ed284b..dd47e9dc 100644
--- a/apps/web-antd/src/views/bpm/task/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/task/manager/index.vue
@@ -45,7 +45,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {
diff --git a/apps/web-antd/src/views/bpm/task/todo/index.vue b/apps/web-antd/src/views/bpm/task/todo/index.vue
index fb85ea0c..06fa5bcc 100644
--- a/apps/web-antd/src/views/bpm/task/todo/index.vue
+++ b/apps/web-antd/src/views/bpm/task/todo/index.vue
@@ -47,7 +47,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {
diff --git a/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
index 2c52c2ff..4941a481 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
@@ -55,7 +55,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmClueApi.Clue>,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
index 3e3032af..15ad94a9 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
@@ -77,7 +77,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContractApi.Contract>,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
index 52922be6..1cbe6471 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
@@ -77,7 +77,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContractApi.Contract>,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
index 610e1ae1..bcb51c1d 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
@@ -55,7 +55,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
index 7cc3a6bc..8e81583e 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
@@ -55,7 +55,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
index 87fd0489..decb6ea9 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
@@ -65,7 +65,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue b/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
index 0220ad60..688823b9 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
@@ -72,7 +72,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue b/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
index 10be8699..a913cc3f 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
@@ -72,7 +72,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
diff --git a/apps/web-antd/src/views/crm/business/index.vue b/apps/web-antd/src/views/crm/business/index.vue
index 1dec06d4..85210cba 100644
--- a/apps/web-antd/src/views/crm/business/index.vue
+++ b/apps/web-antd/src/views/crm/business/index.vue
@@ -97,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessApi.Business>,
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue b/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
index e24b6b4a..03531810 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
@@ -120,7 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessApi.Business>,
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list.vue b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
index d6dfa1b2..d2f14eef 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
@@ -146,7 +146,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessApi.Business>,
diff --git a/apps/web-antd/src/views/crm/business/status/index.vue b/apps/web-antd/src/views/crm/business/status/index.vue
index 1b20532e..bab2b4ac 100644
--- a/apps/web-antd/src/views/crm/business/status/index.vue
+++ b/apps/web-antd/src/views/crm/business/status/index.vue
@@ -72,7 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessStatusApi.BusinessStatus>,
diff --git a/apps/web-antd/src/views/crm/clue/index.vue b/apps/web-antd/src/views/crm/clue/index.vue
index 26ab94a7..88482fcc 100644
--- a/apps/web-antd/src/views/crm/clue/index.vue
+++ b/apps/web-antd/src/views/crm/clue/index.vue
@@ -90,7 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmClueApi.Clue>,
diff --git a/apps/web-antd/src/views/crm/contact/index.vue b/apps/web-antd/src/views/crm/contact/index.vue
index b96d2175..097cfa22 100644
--- a/apps/web-antd/src/views/crm/contact/index.vue
+++ b/apps/web-antd/src/views/crm/contact/index.vue
@@ -102,7 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContactApi.Contact>,
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue b/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue
index 44c23375..0fdcc605 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue
@@ -120,7 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContactApi.Contact>,
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
index 287fb46d..a9254670 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
@@ -143,7 +143,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContactApi.Contact>,
diff --git a/apps/web-antd/src/views/crm/contract/index.vue b/apps/web-antd/src/views/crm/contract/index.vue
index c9ef83bc..c5f138d0 100644
--- a/apps/web-antd/src/views/crm/contract/index.vue
+++ b/apps/web-antd/src/views/crm/contract/index.vue
@@ -139,7 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContractApi.Contract>,
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
index 3dfe57dd..c4ca1714 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
@@ -93,7 +93,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessApi.Business>,
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index 64baa7d4..960908e7 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -108,7 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
index 5e93e497..1981a5bf 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerLimitConfigApi.CustomerLimitConfig>,
diff --git a/apps/web-antd/src/views/crm/customer/pool/index.vue b/apps/web-antd/src/views/crm/customer/pool/index.vue
index adc0bb8d..cb166ccf 100644
--- a/apps/web-antd/src/views/crm/customer/pool/index.vue
+++ b/apps/web-antd/src/views/crm/customer/pool/index.vue
@@ -52,7 +52,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,
diff --git a/apps/web-antd/src/views/crm/followup/index.vue b/apps/web-antd/src/views/crm/followup/index.vue
index 6f0e42f3..9a808360 100644
--- a/apps/web-antd/src/views/crm/followup/index.vue
+++ b/apps/web-antd/src/views/crm/followup/index.vue
@@ -132,7 +132,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
   } as VxeTableGridOptions<CrmFollowUpApi.FollowUpRecord>,
 });
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
index f240c365..d52d75be 100644
--- a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
@@ -169,7 +169,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmPermissionApi.Permission>,
diff --git a/apps/web-antd/src/views/crm/product/category/index.vue b/apps/web-antd/src/views/crm/product/category/index.vue
index 5b929d92..ca2803b2 100644
--- a/apps/web-antd/src/views/crm/product/category/index.vue
+++ b/apps/web-antd/src/views/crm/product/category/index.vue
@@ -90,7 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       parentField: 'parentId',
diff --git a/apps/web-antd/src/views/crm/product/index.vue b/apps/web-antd/src/views/crm/product/index.vue
index 93bcbd45..f6aae540 100644
--- a/apps/web-antd/src/views/crm/product/index.vue
+++ b/apps/web-antd/src/views/crm/product/index.vue
@@ -94,7 +94,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmProductApi.Product>,
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-list.vue b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
index fe840fb6..f31ddd88 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
@@ -42,7 +42,7 @@ const [Grid] = useVbenVxeGrid({
       },
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     keepSource: true,
diff --git a/apps/web-antd/src/views/crm/product/modules/product-table.vue b/apps/web-antd/src/views/crm/product/modules/product-table.vue
index 4b01eacd..9518396d 100644
--- a/apps/web-antd/src/views/crm/product/modules/product-table.vue
+++ b/apps/web-antd/src/views/crm/product/modules/product-table.vue
@@ -66,7 +66,7 @@ function handleUpdateValue(row: any) {
   } else {
     tableData.value[index] = row;
   }
-  emit('update:products', tableData.value);
+  emit('update:products', [...tableData.value]);
 }
 
 /** 表格配置 */
diff --git a/apps/web-antd/src/views/crm/receivable/index.vue b/apps/web-antd/src/views/crm/receivable/index.vue
index c24268f0..ac77d182 100644
--- a/apps/web-antd/src/views/crm/receivable/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/index.vue
@@ -134,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
index 675ddb30..1c7f447f 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
@@ -91,7 +91,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
diff --git a/apps/web-antd/src/views/crm/receivable/plan/index.vue b/apps/web-antd/src/views/crm/receivable/plan/index.vue
index 33b66a85..4f8c2657 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -113,7 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
index 22104862..af506a9a 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
@@ -104,7 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
diff --git a/apps/web-antd/src/views/erp/home/components/SummaryCard.vue b/apps/web-antd/src/views/erp/home/components/SummaryCard.vue
new file mode 100644
index 00000000..fc36c15d
--- /dev/null
+++ b/apps/web-antd/src/views/erp/home/components/SummaryCard.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+
+import { computed } from 'vue';
+
+import { AnalysisOverview } from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+interface Props {
+  saleSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
+  purchaseSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  saleSummary: () => ({}),
+  purchaseSummary: () => ({}),
+});
+
+/** 概览数据 */
+// TODO @nehc：应该是有 8 个小卡片，少了 4 个？
+const overviewItems = computed<AnalysisOverviewItem[]>(() => [
+  {
+    icon: SvgCardIcon,
+    title: '今日销售',
+    totalTitle: '今日采购',
+    totalValue: props.purchaseSummary?.todayPrice || 0,
+    value: props.saleSummary?.todayPrice || 0,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '昨日销售',
+    totalTitle: '昨日采购',
+    totalValue: props.purchaseSummary?.yesterdayPrice || 0,
+    value: props.saleSummary?.yesterdayPrice || 0,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '本月销售',
+    totalTitle: '本月采购',
+    totalValue: props.purchaseSummary?.monthPrice || 0,
+    value: props.saleSummary?.monthPrice || 0,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '今年销售',
+    totalTitle: '今年采购',
+    totalValue: props.purchaseSummary?.yearPrice || 0,
+    value: props.saleSummary?.yearPrice || 0,
+  },
+]);
+</script>
+
+<template>
+  <AnalysisOverview :items="overviewItems" />
+</template>
diff --git a/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue b/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
new file mode 100644
index 00000000..52bbcd76
--- /dev/null
+++ b/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import type { EChartsOption } from 'echarts';
+
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { ErpPurchaseStatisticsApi } from '#/api/erp/statistics/purchase';
+import type { ErpSaleStatisticsApi } from '#/api/erp/statistics/sale';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Card } from 'ant-design-vue';
+
+import {
+  getPurchaseSummary,
+  getPurchaseTimeSummary,
+} from '#/api/erp/statistics/purchase';
+import { getSaleSummary, getSaleTimeSummary } from '#/api/erp/statistics/sale';
+
+interface Props {
+  title: string;
+  type?: 'purchase' | 'sale';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'sale',
+});
+
+/** 销售统计数据 */
+const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
+const getSaleStatistics = async () => {
+  saleSummary.value = await getSaleSummary();
+  saleTimeSummaryList.value = await getSaleTimeSummary();
+};
+
+/** 采购统计数据 */
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
+const purchaseTimeSummaryList =
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
+const getPurchaseStatistics = async () => {
+  purchaseSummary.value = await getPurchaseSummary();
+  purchaseTimeSummaryList.value = await getPurchaseTimeSummary();
+};
+
+/** 获取当前类型的时段数据 */
+const currentTimeSummaryList = ref<Array<{ price: number; time: string }>>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 折线图配置 */
+const lineChartOptions: EChartsOption = {
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [
+    {
+      name: '金额',
+      type: 'line',
+      smooth: true,
+      areaStyle: {},
+      data: [],
+    },
+  ],
+  toolbox: {
+    feature: {
+      dataZoom: {
+        yAxisIndex: false,
+      },
+      brush: {
+        type: ['lineX', 'clear'],
+      },
+      saveAsImage: {
+        show: true,
+        name: props.title,
+      },
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+    data: [],
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+};
+
+/** 初始化数据 */
+const initData = async () => {
+  if (props.type === 'sale') {
+    await getSaleStatistics();
+    currentTimeSummaryList.value = saleTimeSummaryList.value;
+  } else {
+    await getPurchaseStatistics();
+    currentTimeSummaryList.value = purchaseTimeSummaryList.value;
+  }
+};
+
+/** 监听数据变化并更新图表 */
+watch(
+  () => currentTimeSummaryList.value,
+  (val) => {
+    if (!val || val.length === 0) {
+      return;
+    }
+
+    // 更新图表数据
+    const xAxisData = val.map((item) => item.time);
+    const seriesData = val.map((item) => item.price);
+
+    const options = {
+      ...lineChartOptions,
+      xAxis: {
+        ...lineChartOptions.xAxis,
+        data: xAxisData,
+      },
+      series: [
+        {
+          ...lineChartOptions.series![0],
+          data: seriesData,
+        },
+      ],
+    };
+
+    renderEcharts(options);
+  },
+  { immediate: true },
+);
+
+/** 组件挂载时初始化数据 */
+onMounted(() => {
+  initData();
+});
+
+/** 暴露数据给父组件使用 */
+defineExpose({
+  saleSummary,
+  purchaseSummary,
+  saleTimeSummaryList,
+  purchaseTimeSummaryList,
+});
+</script>
+
+<template>
+  <Card>
+    <template #title>
+      <span>{{ title }}</span>
+    </template>
+    <!-- 折线图 -->
+    <EchartsUI ref="chartRef" />
+  </Card>
+</template>
diff --git a/apps/web-antd/src/views/erp/home/index.vue b/apps/web-antd/src/views/erp/home/index.vue
index ed90b24c..8befaf71 100644
--- a/apps/web-antd/src/views/erp/home/index.vue
+++ b/apps/web-antd/src/views/erp/home/index.vue
@@ -1,7 +1,21 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { DocAlert, Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Col, Row, Spin } from 'ant-design-vue';
+
+import SummaryCard from './components/SummaryCard.vue';
+import TimeSummaryChart from './components/TimeSummaryChart.vue';
+
+/** ERP首页 */
+defineOptions({ name: 'ErpHome' });
+
+const loading = ref(false); // 加载中
+
+/** 图表组件引用 */
+const saleChartRef = ref();
+const purchaseChartRef = ref();
 </script>
 
 <template>
@@ -12,23 +26,28 @@ import { Button } from 'ant-design-vue';
         url="https://doc.iocoder.cn/erp/build/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/home/index.vue"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/home/index.vue
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <Spin :spinning="loading">
+      <div class="flex flex-col gap-4">
+        <!-- 销售/采购的全局统计 -->
+        <SummaryCard />
+
+        <!-- 销售/采购的时段统计 -->
+        <Row :gutter="16">
+          <!-- 销售统计 -->
+          <Col :md="12" :sm="12" :xs="24">
+            <TimeSummaryChart ref="saleChartRef" title="销售统计" type="sale" />
+          </Col>
+          <!-- 采购统计 -->
+          <Col :md="12" :sm="12" :xs="24">
+            <TimeSummaryChart
+              ref="purchaseChartRef"
+              title="采购统计"
+              type="purchase"
+            />
+          </Col>
+        </Row>
+      </div>
+    </Spin>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
new file mode 100644
index 00000000..0aa86f65
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -0,0 +1,427 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        style: { display: 'none' },
+      },
+      fieldName: 'id',
+      label: 'ID',
+      hideLabel: true,
+      formItemClass: 'hidden',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+      fieldName: 'no',
+      label: '订单单号',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      fieldName: 'supplierId',
+      label: '供应商',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择订单时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        style: { width: '100%' },
+      },
+      fieldName: 'orderTime',
+      label: '订单时间',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 2, maxRows: 4 },
+        class: 'w-full',
+      },
+      fieldName: 'remark',
+      label: '备注',
+      formItemClass: 'col-span-3',
+    },
+    {
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: true,
+      },
+      fieldName: 'fileUrl',
+      label: '附件',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'product',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        style: { width: '100%' },
+      },
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+      rules: z.number().min(0).optional(),
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '付款优惠',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'discountPrice',
+      label: '付款优惠',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'totalPrice',
+      label: '优惠后金额',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      fieldName: 'accountId',
+      label: '结算账户',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入支付订金',
+        precision: 2,
+        style: { width: '100%' },
+        min: 0,
+      },
+      fieldName: 'depositPrice',
+      label: '支付订金',
+      rules: z.number().min(0).optional(),
+    },
+  ];
+}
+
+/** 采购订单项表格列定义 */
+export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 100,
+      slots: { default: 'taxPercent' },
+    },
+    {
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      title: '税额合计',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始时间', '结束时间'],
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'returnStatus',
+      label: '退货状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未退货', value: 0 },
+          { label: '部分退货', value: 1 },
+          { label: '全部退货', value: 2 },
+        ],
+        placeholder: '请选择退货状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '订单单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'productNames',
+      title: '产品信息',
+      showOverflow: 'tooltip',
+      minWidth: 120,
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'orderTime',
+      title: '订单时间',
+      width: 160,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      minWidth: 120,
+    },
+    {
+      field: 'inCount',
+      title: '入库数量',
+      minWidth: 120,
+    },
+    {
+      field: 'returnCount',
+      title: '退货数量',
+      minWidth: 120,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatNumber',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatNumber',
+      minWidth: 120,
+    },
+    {
+      field: 'depositPrice',
+      title: '支付订金',
+      formatter: 'formatNumber',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/erp/purchase/order/index.vue b/apps/web-antd/src/views/erp/purchase/order/index.vue
index e7c22293..6331bd67 100644
--- a/apps/web-antd/src/views/erp/purchase/order/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/index.vue
@@ -1,34 +1,268 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePurchaseOrder,
+  deletePurchaseOrderList,
+  exportPurchaseOrder,
+  getPurchaseOrderPage,
+  updatePurchaseOrderStatus,
+} from '#/api/erp/purchase/order';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import PurchaseOrderForm from './modules/form.vue';
+
+/** ERP 采购订单列表 */
+defineOptions({ name: 'ErpPurchaseOrder' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: PurchaseOrderForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+// TODO @nehc handleRowCheckboxChange 放的位置；
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpPurchaseOrderApi.PurchaseOrder[];
+}) {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 详情 */
+function handleDetail(row: ErpPurchaseOrderApi.PurchaseOrder) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+/** 新增 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑 */
+function handleEdit(row: ErpPurchaseOrderApi.PurchaseOrder) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除 */
+async function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrder) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    if (row.id) await deletePurchaseOrder(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess'),
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } catch {
+    // 处理错误
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 批量删除 */
+// TODO @nehc handleBatchDelete 是不是和别的模块，一个风格
+async function handleBatchDelete() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deletePurchaseOrderList(checkedIds.value);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess'),
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } catch {
+    // 处理错误
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 审批/反审批操作 */
+function handleUpdateStatus(
+  row: ErpPurchaseOrderApi.PurchaseOrder,
+  status: number,
+) {
+  // TODO @nehc 是不是和别的模块，类似的 status 处理一个风格
+  const hideLoading = message.loading({
+    content: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  updatePurchaseOrderStatus(row.id, status)
+    .then(() => {
+      message.success({
+        content: `${status === 20 ? '审批' : '反审批'}成功`,
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      // 处理错误
+    })
+    .finally(() => {
+      hideLoading();
+    });
+}
+
+/** 导出 */
+async function handleExport() {
+  const data = await exportPurchaseOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '采购订单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPurchaseOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="【采购】采购订单、入库、退货"
         url="https://doc.iocoder.cn/erp/purchase/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="采购订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['采购订单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:purchase-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:purchase-order:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-order:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleBatchDelete,
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:purchase-order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:purchase-order:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'link',
+              auth: ['erp:purchase-order:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              color: 'error',
+              auth: ['erp:purchase-order:delete'],
+              onClick: handleDelete.bind(null, row),
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
new file mode 100644
index 00000000..b6118932
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -0,0 +1,363 @@
+<script lang="ts" setup>
+// TODO @nehc：看看整个逻辑，和 erp 风格的主子表，能不能更统一一些；
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { erpPriceMultiply } from '@vben/utils';
+
+import { Input, InputNumber, Select } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getStockCount } from '#/api/erp/stock/stock';
+
+import { usePurchaseOrderItemTableColumns } from '../data';
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+  discountPercent: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:total-price',
+]);
+
+// TODO @nehc:这种一次性的，是不是可以不定义哈？
+interface Props {
+  items?: ErpPurchaseOrderApi.PurchaseOrderItem[];
+  disabled?: boolean;
+  discountPercent?: number;
+}
+
+const tableData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]);
+const productOptions = ref<any[]>([]);
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    editConfig: {
+      trigger: 'click',
+      mode: 'cell',
+    },
+    columns: usePurchaseOrderItemTableColumns(),
+    data: tableData.value,
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    minHeight: 250,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    await nextTick();
+    tableData.value = [...items];
+    await nextTick();
+    // TODO @nehc：这里，是不是直接 await 下？
+    gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 计算 discountPrice、totalPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPercent],
+  () => {
+    if (!tableData.value || tableData.value.length === 0) {
+      return;
+    }
+    const totalPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.totalPrice || 0),
+      0,
+    );
+    const discountPrice =
+      props.discountPercent === null
+        ? 0
+        : erpPriceMultiply(totalPrice, props.discountPercent / 100);
+    // TODO @nehc：这里的 idea 红色告警？
+    const finalTotalPrice = totalPrice - discountPrice;
+
+    // 发送计算结果给父组件
+    emit('update:discount-price', discountPrice);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+});
+
+function handleAdd() {
+  const newRow = {
+    productId: null,
+    productName: '',
+    productUnitId: null,
+    productUnitName: '',
+    productBarCode: '',
+    count: 1,
+    productPrice: 0,
+    totalProductPrice: 0,
+    taxPercent: 0,
+    taxPrice: 0,
+    totalPrice: 0,
+    stockCount: 0,
+    remark: '',
+  };
+  // TODO @nehc：这里的红色告警哈？
+  tableData.value.push(newRow);
+  gridApi.grid.insertAt(newRow, -1);
+  emit('update:items', [...tableData.value]);
+}
+
+function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
+  gridApi.grid.remove(row);
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+
+  const stockCount = await getStockCount(productId);
+
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = stockCount || 0;
+  row.productPrice = product.purchasePrice;
+  row.count = row.count || 1;
+
+  handlePriceChange(row);
+}
+
+function handlePriceChange(row: any) {
+  if (row.productPrice && row.count) {
+    row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+    row.taxPrice =
+      erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
+    row.totalPrice = row.totalProductPrice + row.taxPrice;
+  }
+  handleUpdateValue(row);
+}
+
+function handleUpdateValue(row: any) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+const getSummaries = (): {
+  count: number;
+  productName: string;
+  taxPrice: number;
+  totalPrice: number;
+  totalProductPrice: number;
+} => {
+  return {
+    productName: '合计',
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalProductPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalProductPrice || 0),
+      0,
+    ),
+    taxPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.taxPrice || 0),
+      0,
+    ),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+};
+
+const validate = async (): Promise<boolean> => {
+  try {
+    for (let i = 0; i < tableData.value.length; i++) {
+      const item = tableData.value[i];
+      if (item) {
+        if (!item.productId) {
+          throw new Error(`第 ${i + 1} 行：产品不能为空`);
+        }
+        if (!item.count || item.count <= 0) {
+          throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+        }
+        if (!item.productPrice || item.productPrice <= 0) {
+          throw new Error(`第 ${i + 1} 行：产品单价不能为空`);
+        }
+      }
+    }
+    return true;
+  } catch (error) {
+    console.error('验证失败:', error);
+    throw error;
+  }
+};
+
+const getData = (): ErpPurchaseOrderApi.PurchaseOrderItem[] => tableData.value;
+const init = (
+  items: ErpPurchaseOrderApi.PurchaseOrderItem[] | undefined,
+): void => {
+  tableData.value =
+    items && items.length > 0
+      ? items.map((item) => {
+          const newItem = { ...item };
+          if (newItem.productPrice && newItem.count) {
+            newItem.totalProductPrice =
+              erpPriceMultiply(newItem.productPrice, newItem.count) ?? 0;
+            newItem.taxPrice =
+              erpPriceMultiply(
+                newItem.totalProductPrice,
+                (newItem.taxPercent || 0) / 100,
+              ) ?? 0;
+            newItem.totalPrice = newItem.totalProductPrice + newItem.taxPrice;
+          }
+          return newItem;
+        })
+      : [];
+  nextTick(() => {
+    gridApi.grid.reloadData(tableData.value);
+  });
+};
+
+defineExpose({
+  validate,
+  getData,
+  init,
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #productId="{ row }">
+      <Select
+        v-if="!disabled"
+        v-model:value="row.productId"
+        :options="productOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+        style="width: 100%"
+        placeholder="请选择产品"
+        show-search
+        @change="handleProductChange($event, row)"
+      />
+      <span v-else>{{ row.productName || '-' }}</span>
+    </template>
+
+    <template #count="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.count"
+        :min="0"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.count || '-' }}</span>
+    </template>
+
+    <template #productPrice="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.productPrice"
+        :min="0"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.productPrice || '-' }}</span>
+    </template>
+
+    <template #taxPercent="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
+
+    <template #remark="{ row }">
+      <Input v-if="!disabled" v-model:value="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+
+    <template #bottom>
+      <div class="border-border bg-muted mt-2 rounded border p-2">
+        <div class="text-muted-foreground flex justify-between text-sm">
+          <span class="text-foreground font-medium">合计：</span>
+          <div class="flex space-x-4">
+            <span>数量：{{ getSummaries().count }}</span>
+            <span>金额：{{ getSummaries().totalProductPrice }}</span>
+            <span>税额：{{ getSummaries().taxPrice }}</span>
+            <span>税额合计：{{ getSummaries().totalPrice }}</span>
+          </div>
+        </div>
+      </div>
+
+      <TableAction
+        v-if="!disabled"
+        class="mt-4 flex justify-center"
+        :actions="[
+          {
+            label: '添加产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+
+    <template #actions="{ row }">
+      <TableAction
+        v-if="!disabled"
+        :actions="[
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
new file mode 100644
index 00000000..828acbe1
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -0,0 +1,218 @@
+<script lang="ts" setup>
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPurchaseOrder,
+  getPurchaseOrder,
+  updatePurchaseOrder,
+} from '#/api/erp/purchase/order';
+
+import { useFormSchema } from '../data';
+import PurchaseOrderItemForm from './PurchaseOrderItemForm.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpPurchaseOrderApi.PurchaseOrder>();
+const formType = ref('');
+const itemFormRef = ref();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') return '添加采购订单';
+  if (formType.value === 'update') return '编辑采购订单';
+  return '采购订单详情';
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    if (formData.value && changedFields.includes('discountPercent')) {
+      formData.value.discountPercent = values.discountPercent;
+    }
+  },
+});
+
+const handleUpdateItems = (items: ErpPurchaseOrderApi.PurchaseOrderItem[]) => {
+  formData.value = modalApi.getData<ErpPurchaseOrderApi.PurchaseOrder>();
+  if (formData.value) {
+    formData.value.items = items;
+  }
+};
+
+const handleUpdateDiscountPrice = (discountPrice: number) => {
+  if (formData.value) {
+    formData.value.discountPrice = discountPrice;
+    formApi.setValues({
+      discountPrice: formData.value.discountPrice,
+    });
+  }
+};
+
+const handleUpdateTotalPrice = (totalPrice: number) => {
+  if (formData.value) {
+    formData.value.totalPrice = totalPrice;
+    formApi.setValues({
+      totalPrice: formData.value.totalPrice,
+    });
+  }
+};
+
+// TODO @nehc：这里的注释使用 /** */ 和别的模块一致哈；
+/**
+ * 创建或更新采购订单
+ */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    await nextTick();
+
+    // TODO @nehc：应该不会不存在，直接校验，简洁一点！另外，可以看看别的模块，主子表的处理哈；
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    if (itemFormInstance && typeof itemFormInstance.validate === 'function') {
+      try {
+        const isValid = await itemFormInstance.validate();
+        if (!isValid) {
+          message.error('子表单验证失败');
+          return;
+        }
+      } catch (error) {
+        // TODO @nehc：这里的红色告警，看看怎么处理掉
+        message.error(error.message || '子表单验证失败');
+        return;
+      }
+    } else {
+      message.error('子表单验证方法不存在');
+      return;
+    }
+
+    // 验证产品清单不能为空
+    if (!formData.value?.items || formData.value.items.length === 0) {
+      message.error('产品清单不能为空，请至少添加一个产品');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as ErpPurchaseOrderApi.PurchaseOrder;
+    data.items = formData.value?.items;
+    // 将文件数组转换为字符串
+    if (data.fileUrl && Array.isArray(data.fileUrl)) {
+      data.fileUrl = data.fileUrl.length > 0 ? data.fileUrl[0] : '';
+    }
+    try {
+      await (formType.value === 'create'
+        ? createPurchaseOrder(data)
+        : updatePurchaseOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success(formType.value === 'create' ? '新增成功' : '更新成功');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    if (!data) {
+      return;
+    }
+    formType.value = data.type;
+
+    if (!data.id) {
+      // 初始化空的表单数据
+      formData.value = { items: [] } as ErpPurchaseOrderApi.PurchaseOrder;
+      await nextTick();
+      // TODO @nehc：看看有没办法简化
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init([]);
+      }
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      formData.value = await getPurchaseOrder(data.id);
+      // 将字符串形式的文件 URL 转换为数组形式以适配 FileUpload 组件
+      // TODO @nehc：这里的 idea 会有黄色告警，看看是不是简化下？
+      // TODO @nehc：记忆中，好像不用数组的转换，可以在看看？
+      if (
+        formData.value.fileUrl &&
+        typeof formData.value.fileUrl === 'string'
+      ) {
+        formData.value.fileUrl = formData.value.fileUrl
+          ? [formData.value.fileUrl]
+          : [];
+      }
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      // 初始化子表单
+      await nextTick();
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init(formData.value.items || []);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+defineExpose({ modalApi });
+</script>
+
+<template>
+  <Modal
+    v-bind="$attrs"
+    :title="getTitle"
+    class="w-1/2"
+    :closable="true"
+    :mask-closable="true"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #product="slotProps">
+        <PurchaseOrderItemForm
+          v-bind="slotProps"
+          ref="itemFormRef"
+          class="w-full"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          :discount-percent="formData?.discountPercent ?? 0"
+          @update:items="handleUpdateItems"
+          @update:discount-price="handleUpdateDiscountPrice"
+          @update:total-price="handleUpdateTotalPrice"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/erp/purchase/supplier/data.ts b/apps/web-antd/src/views/erp/purchase/supplier/data.ts
new file mode 100644
index 00000000..daa268c2
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/supplier/data.ts
@@ -0,0 +1,233 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'contact',
+      label: '联系人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      },
+    },
+    {
+      fieldName: 'telephone',
+      label: '联系电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系电话',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '电子邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入电子邮箱',
+      },
+    },
+    {
+      fieldName: 'fax',
+      label: '传真',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入传真',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        precision: 0,
+        class: 'w-full',
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'taxNo',
+      label: '纳税人识别号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入纳税人识别号',
+      },
+    },
+    {
+      fieldName: 'taxPercent',
+      label: '税率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入税率',
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+    },
+    {
+      fieldName: 'bankName',
+      label: '开户行',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入开户行',
+      },
+    },
+    {
+      fieldName: 'bankAccount',
+      label: '开户账号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入开户账号',
+      },
+    },
+    {
+      fieldName: 'bankAddress',
+      label: '开户地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入开户地址',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'telephone',
+      label: '联系电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系电话',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '供应商名称',
+      minWidth: 150,
+    },
+    {
+      field: 'contact',
+      title: '联系人',
+      minWidth: 120,
+    },
+    {
+      field: 'mobile',
+      title: '手机号码',
+      minWidth: 130,
+    },
+    {
+      field: 'telephone',
+      title: '联系电话',
+      minWidth: 130,
+    },
+    {
+      field: 'email',
+      title: '电子邮箱',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      fixed: 'right',
+      width: 160,
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/erp/purchase/supplier/index.vue b/apps/web-antd/src/views/erp/purchase/supplier/index.vue
index a987c6c4..98288f4a 100644
--- a/apps/web-antd/src/views/erp/purchase/supplier/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/supplier/index.vue
@@ -1,34 +1,156 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
 
-import { Button } from 'ant-design-vue';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSupplier,
+  exportSupplier,
+  getSupplierPage,
+} from '#/api/erp/purchase/supplier';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import SupplierForm from './modules/form.vue';
+
+/** 供应商管理 */
+defineOptions({ name: 'ErpSupplier' });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 添加供应商 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑供应商 */
+function handleEdit(row: ErpSupplierApi.Supplier) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除供应商 */
+async function handleDelete(row: ErpSupplierApi.Supplier) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteSupplier(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+/** 导出供应商 */
+async function handleExport() {
+  const data = await exportSupplier(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '供应商.xls', source: data });
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: SupplierForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSupplierPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSupplierApi.Supplier>,
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="【采购】采购订单、入库、退货"
         url="https://doc.iocoder.cn/erp/purchase/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/supplier/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/supplier/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="供应商列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['供应商']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:supplier:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:supplier:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:supplier:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:supplier:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/erp/purchase/supplier/modules/form.vue b/apps/web-antd/src/views/erp/purchase/supplier/modules/form.vue
new file mode 100644
index 00000000..91775665
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/supplier/modules/form.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createSupplier,
+  getSupplier,
+  updateSupplier,
+} from '#/api/erp/purchase/supplier';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formType = ref<'create' | 'update'>('create');
+const supplierId = ref<number>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpSupplierApi.Supplier;
+    try {
+      if (formType.value === 'create') {
+        await createSupplier(data);
+        message.success($t('ui.actionMessage.createSuccess'));
+      } else {
+        await updateSupplier(data);
+        message.success($t('ui.actionMessage.updateSuccess'));
+      }
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: 'create' | 'update' }>();
+    if (!data) {
+      return;
+    }
+    formType.value = data.type;
+    supplierId.value = data.id;
+
+    modalApi.lock();
+    try {
+      if (data.type === 'update' && data.id) {
+        // 编辑模式，加载数据
+        const supplierData = await getSupplier(data.id);
+        await formApi.setValues(supplierData);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+defineExpose({
+  modalApi,
+});
+</script>
+
+<template>
+  <Modal
+    :title="formType === 'create' ? '新增供应商' : '编辑供应商'"
+    class="w-3/5"
+  >
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/erp/stock/in/data.ts b/apps/web-antd/src/views/erp/stock/in/data.ts
new file mode 100644
index 00000000..68b667fc
--- /dev/null
+++ b/apps/web-antd/src/views/erp/stock/in/data.ts
@@ -0,0 +1,297 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { createRequiredValidation } from '#/adapter/vxe-table';
+import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        style: { display: 'none' },
+      },
+      fieldName: 'id',
+      label: 'ID',
+      hideLabel: true,
+      formItemClass: 'hidden',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+      fieldName: 'no',
+      label: '入库单号',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      fieldName: 'supplierId',
+      label: '供应商',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择入库时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        style: { width: '100%' },
+      },
+      fieldName: 'inTime',
+      label: '入库时间',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 2, maxRows: 4 },
+        class: 'w-full',
+      },
+      fieldName: 'remark',
+      label: '备注',
+      formItemClass: 'col-span-3',
+    },
+    {
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: true,
+      },
+      fieldName: 'fileUrl',
+      label: '附件',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'product',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+  ];
+}
+
+/** 入库产品清单表格列定义 */
+export function useStockInItemTableColumns(
+  isValidating?: any,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 150,
+      slots: { default: 'warehouseId' },
+      className: createRequiredValidation(isValidating, 'warehouseId'),
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+      className: createRequiredValidation(isValidating, 'productId'),
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 100,
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      slots: { default: 'count' },
+      className: createRequiredValidation(isValidating, 'count'),
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalPrice',
+      title: '金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '入库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+    {
+      fieldName: 'inTime',
+      label: '入库时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '入库单号',
+      minWidth: 180,
+    },
+    {
+      field: 'productNames',
+      title: '产品信息',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'inTime',
+      title: '入库时间',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDateTime',
+      },
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 90,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 300,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/erp/stock/in/index.vue b/apps/web-antd/src/views/erp/stock/in/index.vue
index ae06852c..55891fa9 100644
--- a/apps/web-antd/src/views/erp/stock/in/index.vue
+++ b/apps/web-antd/src/views/erp/stock/in/index.vue
@@ -1,34 +1,220 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockInApi } from '#/api/erp/stock/in';
 
-import { Button } from 'ant-design-vue';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteStockIn,
+  exportStockIn,
+  getStockInPage,
+  updateStockInStatus,
+} from '#/api/erp/stock/in';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import StockInForm from './modules/form.vue';
+
+/** 其它入库单管理 */
+defineOptions({ name: 'ErpStockIn' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: StockInForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出入库单 */
+async function handleExport() {
+  const data = await exportStockIn(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '其它入库单.xls', source: data });
+}
+
+/** 新增/编辑/详情 */
+function openForm(type: string, id?: number) {
+  formModalApi.setData({ type, id }).open();
+}
+
+/** 删除 */
+async function handleDelete(ids: any[]) {
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteStockIn(ids);
+    message.success({
+      content: '删除成功',
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 审核/反审核 */
+async function handleUpdateStatus(id: any, status: number) {
+  const statusText = status === 20 ? '审核' : '反审核';
+  const hideLoading = message.loading({
+    content: `${statusText}中...`,
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await updateStockInStatus({ id, status });
+    message.success({
+      content: `${statusText}成功`,
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockInPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    checkboxConfig: {
+      reserve: true,
+    },
+  } as VxeTableGridOptions<ErpStockInApi.StockIn>,
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="【库存】其它入库、其它出库"
         url="https://doc.iocoder.cn/erp/stock-in-out/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/in/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/in/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <Grid table-title="其它入库单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['其它入库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:stock-in:create'],
+              onClick: () => openForm('create'),
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'default',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock-in:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'default',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-in:delete'],
+              popConfirm: {
+                title: '是否删除所选中数据？',
+                confirm: () => {
+                  const checkboxRecords = gridApi.grid.getCheckboxRecords();
+                  if (checkboxRecords.length === 0) {
+                    message.warning('请选择要删除的数据');
+                    return;
+                  }
+                  handleDelete(checkboxRecords.map((item) => item.id));
+                },
+              },
+            },
+          ]"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:stock-in:query'],
+              onClick: () => openForm('detail', row.id),
+            },
+            {
+              label: '编辑',
+              auth: ['erp:stock-in:update'],
+              icon: ACTION_ICON.EDIT,
+              disabled: row.status !== 10,
+              onClick: () => openForm('update', row.id),
+            },
+            {
+              label: '审核',
+              auth: ['erp:stock-in:update'],
+              ifShow: row.status === 10,
+              popConfirm: {
+                title: '确认要审核该入库单吗？',
+                confirm: () => handleUpdateStatus(row.id, 20),
+              },
+            },
+            {
+              label: '反审核',
+              danger: true,
+              auth: ['erp:stock-in:update'],
+              ifShow: row.status === 20,
+              popConfirm: {
+                title: '确认要反审核该入库单吗？',
+                confirm: () => handleUpdateStatus(row.id, 10),
+              },
+            },
+            {
+              label: '删除',
+              danger: true,
+              auth: ['erp:stock-in:delete'],
+              disabled: row.status !== 10,
+              popConfirm: {
+                title: '确认要删除该入库单吗？',
+                confirm: () => handleDelete([row.id]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 表单弹窗 -->
+    <FormModal @success="onRefresh" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/erp/stock/in/modules/StockInItemForm.vue b/apps/web-antd/src/views/erp/stock/in/modules/StockInItemForm.vue
new file mode 100644
index 00000000..d96e57ea
--- /dev/null
+++ b/apps/web-antd/src/views/erp/stock/in/modules/StockInItemForm.vue
@@ -0,0 +1,363 @@
+<script lang="ts" setup>
+// TODO @nehc：这里的组件名
+import type { ErpStockInApi } from '#/api/erp/stock/in';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { erpPriceMultiply } from '@vben/utils';
+
+import { Input, InputNumber, Select } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getStockCount } from '#/api/erp/stock/stock';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+import { useStockInItemTableColumns } from '../data';
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+});
+
+const emit = defineEmits(['update:items']);
+
+interface Props {
+  items?: ErpStockInApi.StockInItem[];
+  disabled?: boolean;
+}
+
+const tableData = ref<ErpStockInApi.StockInItem[]>([]);
+const productOptions = ref<any[]>([]);
+const warehouseOptions = ref<any[]>([]);
+const isValidating = ref(false);
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    editConfig: {
+      trigger: 'click',
+      mode: 'cell',
+    },
+    columns: useStockInItemTableColumns(isValidating),
+    data: tableData.value,
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    minHeight: 250,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    showFooter: true,
+    footerCellClassName: 'stock-in-footer-cell',
+    footerMethod: ({ columns }) => {
+      const footers: any[][] = [];
+      const sums = getSummaries();
+      const footerData: any[] = [];
+      columns.forEach((column, columnIndex) => {
+        if (columnIndex === 0) {
+          footerData.push('合计');
+        } else if (column.field === 'count') {
+          footerData.push(sums.count);
+        } else if (column.field === 'totalPrice') {
+          footerData.push(sums.totalPrice);
+        } else {
+          footerData.push('');
+        }
+      });
+      footers.push(footerData);
+      return footers;
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    await nextTick();
+    tableData.value = [...items];
+    await nextTick();
+    gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+});
+
+function handleAdd() {
+  const newRow = {
+    warehouseId: null,
+    productId: null,
+    productName: '',
+    productUnitId: null,
+    productUnitName: '',
+    productBarCode: '',
+    count: 1,
+    productPrice: 0,
+    totalPrice: 0,
+    stockCount: 0,
+    remark: '',
+  };
+  tableData.value.push(newRow);
+  gridApi.grid.insertAt(newRow, -1);
+  emit('update:items', [...tableData.value]);
+  // 触发表格重新渲染以更新cellClassName
+  nextTick(() => {
+    gridApi.grid.refreshColumn();
+  });
+}
+
+function handleDelete(row: ErpStockInApi.StockInItem) {
+  gridApi.grid.remove(row);
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+async function handleWarehouseChange(warehouseId: any, row: any) {
+  const warehouse = warehouseOptions.value.find((w) => w.id === warehouseId);
+  if (!warehouse) {
+    return;
+  }
+
+  row.warehouseId = warehouseId;
+
+  // 如果已选择产品，重新获取库存
+  if (row.productId) {
+    const stockCount = await getStockCount(row.productId, warehouseId);
+    row.stockCount = stockCount || 0;
+  }
+
+  handleUpdateValue(row);
+}
+
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+
+  // 获取库存数量
+  const stockCount = row.warehouseId
+    ? await getStockCount(productId, row.warehouseId)
+    : await getStockCount(productId);
+
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = stockCount || 0;
+  row.productPrice = product.purchasePrice || 0;
+  row.count = row.count || 1;
+
+  handlePriceChange(row);
+}
+
+function handlePriceChange(row: any) {
+  if (row.productPrice && row.count) {
+    row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+  }
+  handleUpdateValue(row);
+}
+
+function handleUpdateValue(row: any) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+  // 触发表格重新渲染以更新cellClassName
+  nextTick(() => {
+    gridApi.grid.refreshColumn();
+  });
+}
+
+const getSummaries = (): {
+  count: number;
+  totalPrice: number;
+} => {
+  return {
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+};
+
+/** 验证表单 */
+function validate(): Promise<boolean> {
+  return new Promise((resolve) => {
+    isValidating.value = true;
+
+    // 触发表格重新渲染以显示验证错误
+    nextTick(() => {
+      gridApi.grid.refreshColumn();
+    });
+
+    // 验证是否有产品清单
+    if (!tableData.value || tableData.value.length === 0) {
+      resolve(false);
+      return;
+    }
+
+    // 验证每一行的必填字段
+    for (const item of tableData.value) {
+      if (
+        !item.warehouseId ||
+        !item.productId ||
+        !item.count ||
+        item.count <= 0
+      ) {
+        resolve(false);
+        return;
+      }
+    }
+
+    // 验证通过，清除验证状态
+    isValidating.value = false;
+    nextTick(() => {
+      gridApi.grid.refreshColumn();
+    });
+
+    resolve(true);
+  });
+}
+
+/** 初始化表格数据 */
+function init(items: ErpStockInApi.StockInItem[]) {
+  tableData.value = items || [];
+  gridApi.grid.reloadData(tableData.value);
+}
+
+defineExpose({
+  validate,
+  init,
+  handleAdd,
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4 flex justify-between">
+      <span class="text-lg font-medium"></span>
+    </div>
+
+    <Grid>
+      <template #warehouseId="{ row }">
+        <Select
+          v-model:value="row.warehouseId"
+          :options="warehouseOptions"
+          :field-names="{ label: 'name', value: 'id' }"
+          placeholder="请选择仓库"
+          :disabled="disabled"
+          show-search
+          @change="(value) => handleWarehouseChange(value, row)"
+          class="w-full"
+        />
+      </template>
+
+      <template #productId="{ row }">
+        <Select
+          v-model:value="row.productId"
+          :options="productOptions"
+          :field-names="{ label: 'name', value: 'id' }"
+          placeholder="请选择产品"
+          :disabled="disabled"
+          show-search
+          @change="(value) => handleProductChange(value, row)"
+          class="w-full"
+        />
+      </template>
+
+      <template #count="{ row }">
+        <InputNumber
+          v-model:value="row.count"
+          :disabled="disabled"
+          :min="0.001"
+          :precision="3"
+          @change="() => handlePriceChange(row)"
+          class="w-full"
+        />
+      </template>
+
+      <template #productPrice="{ row }">
+        <InputNumber
+          v-model:value="row.productPrice"
+          :disabled="disabled"
+          :min="0.01"
+          :precision="2"
+          @change="() => handlePriceChange(row)"
+          class="w-full"
+        />
+      </template>
+
+      <template #remark="{ row }">
+        <Input
+          v-model:value="row.remark"
+          :disabled="disabled"
+          placeholder="请输入备注"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          v-if="!disabled"
+          :actions="[
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该产品吗？',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+
+      <template #bottom>
+        <TableAction
+          v-if="!disabled"
+          class="mt-4 flex justify-center"
+          :actions="[
+            {
+              label: '添加产品',
+              type: 'default',
+              onClick: handleAdd,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
+
+<style scoped>
+:deep(.vxe-table .vxe-footer--column.stock-in-footer-cell .vxe-cell) {
+  background-color: #f5f5f5 !important;
+}
+</style>
diff --git a/apps/web-antd/src/views/erp/stock/in/modules/form.vue b/apps/web-antd/src/views/erp/stock/in/modules/form.vue
new file mode 100644
index 00000000..fffca097
--- /dev/null
+++ b/apps/web-antd/src/views/erp/stock/in/modules/form.vue
@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import type { ErpStockInApi } from '#/api/erp/stock/in';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createStockIn,
+  getStockIn,
+  updateStockIn,
+  updateStockInStatus,
+} from '#/api/erp/stock/in';
+
+import { useFormSchema } from '../data';
+import StockInItemForm from './StockInItemForm.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpStockInApi.StockIn>();
+const formType = ref('');
+const itemFormRef = ref();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') return '添加其它入库单';
+  if (formType.value === 'update') return '编辑其它入库单';
+  return '其它入库单详情';
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const handleUpdateItems = (items: ErpStockInApi.StockInItem[]) => {
+  formData.value = modalApi.getData<ErpStockInApi.StockIn>();
+  if (formData.value) {
+    formData.value.items = items;
+  }
+};
+
+/**
+ * 创建或更新其它入库单
+ */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    await nextTick();
+
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    if (itemFormInstance && typeof itemFormInstance.validate === 'function') {
+      try {
+        const isValid = await itemFormInstance.validate();
+        if (!isValid) {
+          message.error('产品清单验证失败，请检查必填项');
+          return;
+        }
+      } catch (error) {
+        message.error(error.message || '产品清单验证失败');
+        return;
+      }
+    } else {
+      message.error('产品清单验证方法不存在');
+      return;
+    }
+
+    // 验证产品清单不能为空
+    if (!formData.value?.items || formData.value.items.length === 0) {
+      message.error('产品清单不能为空，请至少添加一个产品');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpStockInApi.StockIn;
+    data.items = formData.value?.items;
+    // 将文件数组转换为字符串
+    if (data.fileUrl && Array.isArray(data.fileUrl)) {
+      data.fileUrl = data.fileUrl.length > 0 ? data.fileUrl[0] : '';
+    }
+    try {
+      await (formType.value === 'create'
+        ? createStockIn(data)
+        : updateStockIn(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success(formType.value === 'create' ? '新增成功' : '更新成功');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    if (!data) {
+      return;
+    }
+    formType.value = data.type;
+
+    if (!data.id) {
+      // 初始化空的表单数据
+      formData.value = { items: [] } as ErpStockInApi.StockIn;
+      await nextTick();
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init([]);
+      }
+      // 如果是新增，自动添加一行
+      if (formType.value === 'create' && itemFormInstance) {
+        itemFormInstance.handleAdd();
+      }
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      formData.value = await getStockIn(data.id);
+      // 将字符串形式的文件URL转换为数组形式以适配FileUpload组件
+      if (
+        formData.value.fileUrl &&
+        typeof formData.value.fileUrl === 'string'
+      ) {
+        formData.value.fileUrl = formData.value.fileUrl
+          ? [formData.value.fileUrl]
+          : [];
+      }
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      // 初始化子表单
+      await nextTick();
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init(formData.value.items || []);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 审核/反审核 */
+async function handleUpdateStatus(id: number, status: number) {
+  try {
+    await updateStockInStatus({ id, status });
+    message.success(status === 20 ? '审核成功' : '反审核成功');
+    emit('success');
+    await modalApi.close();
+  } catch (error) {
+    message.error(error.message || '操作失败');
+  }
+}
+
+defineExpose({ modalApi, handleUpdateStatus });
+</script>
+
+<template>
+  <Modal
+    v-bind="$attrs"
+    :title="getTitle"
+    class="w-4/5"
+    :closable="true"
+    :mask-closable="true"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #product="slotProps">
+        <StockInItemForm
+          v-bind="slotProps"
+          ref="itemFormRef"
+          class="w-full"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          @update:items="handleUpdateItems"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/erp/stock/record/data.ts b/apps/web-antd/src/views/erp/stock/record/data.ts
new file mode 100644
index 00000000..3f805492
--- /dev/null
+++ b/apps/web-antd/src/views/erp/stock/record/data.ts
@@ -0,0 +1,146 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+    {
+      fieldName: 'bizType',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择类型',
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'bizNo',
+      label: '业务单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入业务单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 150,
+    },
+    {
+      field: 'categoryName',
+      title: '产品分类',
+      width: 120,
+    },
+    {
+      field: 'unitName',
+      title: '产品单位',
+      width: 100,
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      width: 120,
+    },
+    {
+      field: 'bizType',
+      title: '类型',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE },
+      },
+    },
+    {
+      field: 'bizNo',
+      title: '出入库单号',
+      width: 200,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'createTime',
+      title: '出入库日期',
+      width: 180,
+      cellRender: {
+        name: 'CellDateTime',
+      },
+    },
+    {
+      field: 'count',
+      title: '出入库数量',
+      width: 120,
+      cellRender: {
+        name: 'CellAmount',
+        props: {
+          digits: 2,
+        },
+      },
+    },
+    {
+      field: 'totalCount',
+      title: '库存量',
+      width: 100,
+      cellRender: {
+        name: 'CellAmount',
+        props: {
+          digits: 2,
+        },
+      },
+    },
+    {
+      field: 'creatorName',
+      title: '操作人',
+      width: 100,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web-antd/src/views/erp/stock/record/index.vue b/apps/web-antd/src/views/erp/stock/record/index.vue
index 33dddb83..a05f403e 100644
--- a/apps/web-antd/src/views/erp/stock/record/index.vue
+++ b/apps/web-antd/src/views/erp/stock/record/index.vue
@@ -1,32 +1,78 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockRecordApi } from '#/api/erp/stock/record';
 
-import { Button } from 'ant-design-vue';
+import { DocAlert, Page } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportStockRecord, getStockRecordPage } from '#/api/erp/stock/record';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 产品库存明细管理 */
+defineOptions({ name: 'ErpStockRecord' });
+
+/** 导出库存明细 */
+async function handleExport() {
+  const data = await exportStockRecord(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品库存明细.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockRecordApi.StockRecord>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【库存】产品库存、库存明细"
-      url="https://doc.iocoder.cn/erp/stock/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/record/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/record/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】产品库存、库存明细"
+        url="https://doc.iocoder.cn/erp/stock/"
+      />
+    </template>
+
+    <Grid table-title="产品库存明细列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock-record:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/erp/stock/stock/data.ts b/apps/web-antd/src/views/erp/stock/stock/data.ts
new file mode 100644
index 00000000..4d0e52b7
--- /dev/null
+++ b/apps/web-antd/src/views/erp/stock/stock/data.ts
@@ -0,0 +1,76 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 150,
+    },
+    {
+      field: 'unitName',
+      title: '产品单位',
+      minWidth: 100,
+    },
+    {
+      field: 'categoryName',
+      title: '产品分类',
+      minWidth: 120,
+    },
+    {
+      field: 'count',
+      title: '库存量',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellAmount',
+        props: {
+          digits: 2,
+        },
+      },
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 120,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/erp/stock/stock/index.vue b/apps/web-antd/src/views/erp/stock/stock/index.vue
index 04305f88..8cd51e59 100644
--- a/apps/web-antd/src/views/erp/stock/stock/index.vue
+++ b/apps/web-antd/src/views/erp/stock/stock/index.vue
@@ -1,32 +1,78 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockApi } from '#/api/erp/stock/stock';
 
-import { Button } from 'ant-design-vue';
+import { DocAlert, Page } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportStock, getStockPage } from '#/api/erp/stock/stock';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 产品库存管理 */
+defineOptions({ name: 'ErpStock' });
+
+/** 导出库存 */
+async function handleExport() {
+  const data = await exportStock(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品库存.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockApi.Stock>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【库存】产品库存、库存明细"
-      url="https://doc.iocoder.cn/erp/stock/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/stock/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/stock/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】产品库存、库存明细"
+        url="https://doc.iocoder.cn/erp/stock/"
+      />
+    </template>
+
+    <Grid table-title="产品库存列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/erp/stock/warehouse/data.ts b/apps/web-antd/src/views/erp/stock/warehouse/data.ts
new file mode 100644
index 00000000..8adfd1da
--- /dev/null
+++ b/apps/web-antd/src/views/erp/stock/warehouse/data.ts
@@ -0,0 +1,214 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '仓库名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'address',
+      label: '仓库地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库地址',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'warehousePrice',
+      label: '仓储费(元)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入仓储费，单位：元/天/KG',
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+    },
+    {
+      fieldName: 'truckagePrice',
+      label: '搬运费(元)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入搬运费，单位：元',
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+    },
+    {
+      fieldName: 'principal',
+      label: '负责人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入负责人',
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        precision: 0,
+        class: 'w-full',
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '仓库名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '仓库状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择仓库状态',
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = ErpWarehouseApi.Warehouse>(
+  onDefaultStatusChange?: (
+    newStatus: boolean,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '仓库名称',
+      minWidth: 150,
+    },
+    {
+      field: 'address',
+      title: '仓库地址',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'warehousePrice',
+      title: '仓储费(元)',
+      width: 120,
+      cellRender: {
+        name: 'CellMoney',
+      },
+    },
+    {
+      field: 'truckagePrice',
+      title: '搬运费(元)',
+      width: 120,
+      cellRender: {
+        name: 'CellMoney',
+      },
+    },
+    {
+      field: 'principal',
+      title: '负责人',
+      width: 100,
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 80,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'defaultStatus',
+      title: '是否默认',
+      width: 100,
+      cellRender: {
+        attrs: { beforeChange: onDefaultStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: true,
+          unCheckedValue: false,
+        },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      cellRender: {
+        name: 'CellDateTime',
+      },
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/erp/stock/warehouse/index.vue b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
index ec015127..57c51d07 100644
--- a/apps/web-antd/src/views/erp/stock/warehouse/index.vue
+++ b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
@@ -1,32 +1,180 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
 
-import { Button } from 'ant-design-vue';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWarehouse,
+  exportWarehouse,
+  getWarehousePage,
+  updateWarehouseDefaultStatus,
+} from '#/api/erp/stock/warehouse';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import WarehouseForm from './modules/form.vue';
+
+/** 仓库管理 */
+defineOptions({ name: 'ErpWarehouse' });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 添加仓库 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑仓库 */
+function handleEdit(row: ErpWarehouseApi.Warehouse) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除仓库 */
+async function handleDelete(row: ErpWarehouseApi.Warehouse) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteWarehouse(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+/** 修改默认状态 */
+async function handleDefaultStatusChange(
+  newStatus: boolean,
+  row: ErpWarehouseApi.Warehouse,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newStatus ? '开启' : '取消';
+
+    confirm({
+      content: `确认要${text}"${row.name}"默认吗?`,
+    })
+      .then(async () => {
+        // 更新默认状态
+        await updateWarehouseDefaultStatus(row.id!, newStatus);
+        message.success(`${text}默认状态成功`);
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 导出仓库 */
+async function handleExport() {
+  const data = await exportWarehouse(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '仓库.xls', source: data });
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: WarehouseForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleDefaultStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWarehousePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpWarehouseApi.Warehouse>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【库存】产品库存、库存明细"
-      url="https://doc.iocoder.cn/erp/stock/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/warehouse/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/warehouse/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】产品库存、库存明细"
+        url="https://doc.iocoder.cn/erp/stock/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="仓库列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['仓库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:warehouse:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:warehouse:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:warehouse:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:warehouse:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/erp/stock/warehouse/modules/form.vue b/apps/web-antd/src/views/erp/stock/warehouse/modules/form.vue
new file mode 100644
index 00000000..cbcda5d6
--- /dev/null
+++ b/apps/web-antd/src/views/erp/stock/warehouse/modules/form.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWarehouse,
+  getWarehouse,
+  updateWarehouse,
+} from '#/api/erp/stock/warehouse';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formType = ref<'create' | 'update'>('create');
+const warehouseId = ref<number>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpWarehouseApi.Warehouse;
+    try {
+      if (formType.value === 'create') {
+        await createWarehouse(data);
+        message.success($t('ui.actionMessage.createSuccess'));
+      } else {
+        await updateWarehouse(data);
+        message.success($t('ui.actionMessage.updateSuccess'));
+      }
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: 'create' | 'update' }>();
+    if (!data) {
+      return;
+    }
+    formType.value = data.type;
+    warehouseId.value = data.id;
+
+    modalApi.lock();
+    try {
+      if (data.type === 'update' && data.id) {
+        const warehouseData = await getWarehouse(data.id);
+        await formApi.setValues(warehouseData);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+defineExpose({
+  modalApi,
+});
+</script>
+
+<template>
+  <Modal :title="formType === 'create' ? '新增仓库' : '编辑仓库'" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/index.vue b/apps/web-antd/src/views/infra/apiAccessLog/index.vue
index 0b0a9c85..4536d32e 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/index.vue
+++ b/apps/web-antd/src/views/infra/apiAccessLog/index.vue
@@ -59,7 +59,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraApiAccessLogApi.ApiAccessLog>,
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/index.vue b/apps/web-antd/src/views/infra/apiErrorLog/index.vue
index c432e413..791436b8 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/index.vue
+++ b/apps/web-antd/src/views/infra/apiErrorLog/index.vue
@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraApiErrorLogApi.ApiErrorLog>,
diff --git a/apps/web-antd/src/views/infra/codegen/index.vue b/apps/web-antd/src/views/infra/codegen/index.vue
index 1e113ace..2473a093 100644
--- a/apps/web-antd/src/views/infra/codegen/index.vue
+++ b/apps/web-antd/src/views/infra/codegen/index.vue
@@ -175,7 +175,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraCodegenApi.CodegenTable>,
diff --git a/apps/web-antd/src/views/infra/config/index.vue b/apps/web-antd/src/views/infra/config/index.vue
index b1950e6a..68b7e9a3 100644
--- a/apps/web-antd/src/views/infra/config/index.vue
+++ b/apps/web-antd/src/views/infra/config/index.vue
@@ -115,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraConfigApi.Config>,
diff --git a/apps/web-antd/src/views/infra/demo/demo01/index.vue b/apps/web-antd/src/views/infra/demo/demo01/index.vue
index 48eed538..e92d2065 100644
--- a/apps/web-antd/src/views/infra/demo/demo01/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/index.vue
@@ -114,7 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,
diff --git a/apps/web-antd/src/views/infra/demo/demo02/index.vue b/apps/web-antd/src/views/infra/demo/demo02/index.vue
index ecff2a70..dd268656 100644
--- a/apps/web-antd/src/views/infra/demo/demo02/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo02/index.vue
@@ -105,7 +105,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo02CategoryApi.Demo02Category>,
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
index 0e795534..2c850ee9 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
@@ -142,7 +142,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isCurrent: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
index c92e8100..d5b15c91 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
@@ -133,7 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       enabled: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     height: '600px',
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
index a752b599..ab46b974 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
@@ -133,7 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       enabled: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     height: '600px',
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
index f003d8c9..79ce1b32 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
@@ -140,7 +140,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
index 85d19daa..3dc77de6 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
@@ -134,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
diff --git a/apps/web-antd/src/views/infra/file/index.vue b/apps/web-antd/src/views/infra/file/index.vue
index b9df5e8a..cf92953c 100644
--- a/apps/web-antd/src/views/infra/file/index.vue
+++ b/apps/web-antd/src/views/infra/file/index.vue
@@ -115,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraFileApi.File>,
diff --git a/apps/web-antd/src/views/infra/fileConfig/index.vue b/apps/web-antd/src/views/infra/fileConfig/index.vue
index 4687f08e..019b3e25 100644
--- a/apps/web-antd/src/views/infra/fileConfig/index.vue
+++ b/apps/web-antd/src/views/infra/fileConfig/index.vue
@@ -149,7 +149,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraFileConfigApi.FileConfig>,
diff --git a/apps/web-antd/src/views/infra/job/index.vue b/apps/web-antd/src/views/infra/job/index.vue
index c3b63002..23798dc5 100644
--- a/apps/web-antd/src/views/infra/job/index.vue
+++ b/apps/web-antd/src/views/infra/job/index.vue
@@ -161,7 +161,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraJobApi.Job>,
diff --git a/apps/web-antd/src/views/infra/job/logger/index.vue b/apps/web-antd/src/views/infra/job/logger/index.vue
index 84c5e0a0..32620585 100644
--- a/apps/web-antd/src/views/infra/job/logger/index.vue
+++ b/apps/web-antd/src/views/infra/job/logger/index.vue
@@ -59,7 +59,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraJobLogApi.JobLog>,
diff --git a/apps/web-antd/src/views/mall/product/brand/index.vue b/apps/web-antd/src/views/mall/product/brand/index.vue
index a9669af9..5f5bf55b 100644
--- a/apps/web-antd/src/views/mall/product/brand/index.vue
+++ b/apps/web-antd/src/views/mall/product/brand/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBrandApi.Brand>,
diff --git a/apps/web-antd/src/views/mall/product/category/index.vue b/apps/web-antd/src/views/mall/product/category/index.vue
index ebb17103..5d534bbf 100644
--- a/apps/web-antd/src/views/mall/product/category/index.vue
+++ b/apps/web-antd/src/views/mall/product/category/index.vue
@@ -97,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       parentField: 'parentId',
diff --git a/apps/web-antd/src/views/mall/product/comment/index.vue b/apps/web-antd/src/views/mall/product/comment/index.vue
index f6e58063..66f750a8 100644
--- a/apps/web-antd/src/views/mall/product/comment/index.vue
+++ b/apps/web-antd/src/views/mall/product/comment/index.vue
@@ -109,7 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallCommentApi.Comment>,
diff --git a/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue b/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue
index 5be3a96b..253580df 100644
--- a/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue
+++ b/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue
@@ -87,7 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isCurrent: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallPropertyApi.Property>,
diff --git a/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue b/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue
index e34dcca5..a2ce568a 100644
--- a/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue
+++ b/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue
@@ -87,7 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallPropertyApi.PropertyValue>,
diff --git a/apps/web-antd/src/views/mall/product/spu/index.vue b/apps/web-antd/src/views/mall/product/spu/index.vue
index aa408522..740cd64f 100644
--- a/apps/web-antd/src/views/mall/product/spu/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/index.vue
@@ -198,7 +198,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       resizable: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallSpuApi.Spu>,
diff --git a/apps/web-antd/src/views/mall/promotion/article/category/index.vue b/apps/web-antd/src/views/mall/promotion/article/category/index.vue
index ca3c71c1..ab62e4eb 100644
--- a/apps/web-antd/src/views/mall/promotion/article/category/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/article/category/index.vue
@@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallArticleCategoryApi.ArticleCategory>,
diff --git a/apps/web-antd/src/views/mall/promotion/article/index.vue b/apps/web-antd/src/views/mall/promotion/article/index.vue
index 7c035ec0..2d4c1dce 100644
--- a/apps/web-antd/src/views/mall/promotion/article/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/article/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallArticleApi.Article>,
diff --git a/apps/web-antd/src/views/mall/promotion/banner/index.vue b/apps/web-antd/src/views/mall/promotion/banner/index.vue
index d5ad127c..9c5ebcf1 100644
--- a/apps/web-antd/src/views/mall/promotion/banner/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/banner/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBannerApi.Banner>,
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue b/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
index c6291ade..4256e90e 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
@@ -107,7 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBargainActivityApi.BargainActivity>,
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/record/index.vue b/apps/web-antd/src/views/mall/promotion/bargain/record/index.vue
index 88075484..134c2145 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/record/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/record/index.vue
@@ -46,7 +46,7 @@ const [Grid] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBargainRecordApi.BargainRecord>,
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/record/modules/list.vue b/apps/web-antd/src/views/mall/promotion/bargain/record/modules/list.vue
index 4d584bdc..49223d5d 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/record/modules/list.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/record/modules/list.vue
@@ -54,7 +54,7 @@ const [Grid] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
   } as VxeTableGridOptions<MallBargainHelpApi.BargainHelp>,
 });
diff --git a/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue b/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
index 287071e0..75b47008 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
@@ -111,7 +111,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallCombinationActivityApi.CombinationActivity>,
diff --git a/apps/web-antd/src/views/mall/promotion/combination/record/index.vue b/apps/web-antd/src/views/mall/promotion/combination/record/index.vue
index b10a156b..6057f019 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/record/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/record/index.vue
@@ -45,7 +45,7 @@ const [Grid] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions,
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
index 27fbb2e3..a6c811a6 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
@@ -83,7 +83,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallCouponApi.Coupon>,
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
index 98529564..e6ec5998 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
diff --git a/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue b/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
index de252278..410c8f1e 100644
--- a/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
@@ -107,7 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallDiscountActivityApi.DiscountActivity>,
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/index.vue b/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
index e4c8c7a7..fc50e5df 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
@@ -73,7 +73,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallDiyPageApi.DiyPage>,
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
index 74e47ed0..5e13bcfa 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
@@ -91,7 +91,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallDiyTemplateApi.DiyTemplate>,
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/index.vue b/apps/web-antd/src/views/mall/promotion/point/activity/index.vue
index 7e6c5c4b..0306c253 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/index.vue
@@ -88,7 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallPointActivityApi.PointActivity>,
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
index acc5112d..89fae90a 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
@@ -107,7 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallRewardActivityApi.RewardActivity>,
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue b/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
index 0d3a6cb0..0259984c 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
@@ -103,7 +103,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallSeckillActivityApi.SeckillActivity>,
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue b/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
index c6b7a45b..e60d0f89 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
@@ -106,7 +106,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallSeckillConfigApi.SeckillConfig>,
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/index.vue
index c9e05584..8b3f58d4 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/index.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/index.vue
@@ -60,7 +60,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
diff --git a/apps/web-antd/src/views/mall/trade/brokerage/record/index.vue b/apps/web-antd/src/views/mall/trade/brokerage/record/index.vue
index 619cef76..17a2ad39 100644
--- a/apps/web-antd/src/views/mall/trade/brokerage/record/index.vue
+++ b/apps/web-antd/src/views/mall/trade/brokerage/record/index.vue
@@ -36,7 +36,7 @@ const [Grid] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBrokerageRecordApi.BrokerageRecord>,
diff --git a/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue b/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
index 1839c52d..3d6276e9 100644
--- a/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
+++ b/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
@@ -136,7 +136,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
diff --git a/apps/web-antd/src/views/mall/trade/brokerage/user/modules/order-list-modal.vue b/apps/web-antd/src/views/mall/trade/brokerage/user/modules/order-list-modal.vue
index 8706aa32..95e94a81 100644
--- a/apps/web-antd/src/views/mall/trade/brokerage/user/modules/order-list-modal.vue
+++ b/apps/web-antd/src/views/mall/trade/brokerage/user/modules/order-list-modal.vue
@@ -171,7 +171,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBrokerageRecordApi.BrokerageRecord>,
diff --git a/apps/web-antd/src/views/mall/trade/brokerage/user/modules/user-list-modal.vue b/apps/web-antd/src/views/mall/trade/brokerage/user/modules/user-list-modal.vue
index d69d6b35..a2a4a297 100644
--- a/apps/web-antd/src/views/mall/trade/brokerage/user/modules/user-list-modal.vue
+++ b/apps/web-antd/src/views/mall/trade/brokerage/user/modules/user-list-modal.vue
@@ -141,7 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
diff --git a/apps/web-antd/src/views/mall/trade/brokerage/withdraw/index.vue b/apps/web-antd/src/views/mall/trade/brokerage/withdraw/index.vue
index 9d945e75..a143e828 100644
--- a/apps/web-antd/src/views/mall/trade/brokerage/withdraw/index.vue
+++ b/apps/web-antd/src/views/mall/trade/brokerage/withdraw/index.vue
@@ -109,7 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallBrokerageWithdrawApi.BrokerageWithdraw>,
diff --git a/apps/web-antd/src/views/mall/trade/delivery/express/index.vue b/apps/web-antd/src/views/mall/trade/delivery/express/index.vue
index 5a52b282..356e27bc 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/express/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/express/index.vue
@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallDeliveryExpressApi.DeliveryExpress>,
diff --git a/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/index.vue b/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/index.vue
index 5235097c..3e8d2d7c 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/index.vue
@@ -79,7 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallDeliveryExpressTemplateApi.ExpressTemplate>,
diff --git a/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue b/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
index 8a32abf0..d32fc30b 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -162,7 +162,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallOrderApi.Order>,
diff --git a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue
index 0fec6490..705cac7f 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue
@@ -88,7 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallDeliveryPickUpStoreApi.PickUpStore>,
diff --git a/apps/web-antd/src/views/mall/trade/order/index.vue b/apps/web-antd/src/views/mall/trade/order/index.vue
index 1e6a4302..ca531533 100644
--- a/apps/web-antd/src/views/mall/trade/order/index.vue
+++ b/apps/web-antd/src/views/mall/trade/order/index.vue
@@ -91,7 +91,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallOrderApi.Order>,
diff --git a/apps/web-antd/src/views/member/group/index.vue b/apps/web-antd/src/views/member/group/index.vue
index b4de637e..c7275576 100644
--- a/apps/web-antd/src/views/member/group/index.vue
+++ b/apps/web-antd/src/views/member/group/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberGroupApi.Group>,
diff --git a/apps/web-antd/src/views/member/level/index.vue b/apps/web-antd/src/views/member/level/index.vue
index a2dec54f..dab90a0f 100644
--- a/apps/web-antd/src/views/member/level/index.vue
+++ b/apps/web-antd/src/views/member/level/index.vue
@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberLevelApi.Level>,
diff --git a/apps/web-antd/src/views/member/point/record/index.vue b/apps/web-antd/src/views/member/point/record/index.vue
index 2a29563a..15d1a813 100644
--- a/apps/web-antd/src/views/member/point/record/index.vue
+++ b/apps/web-antd/src/views/member/point/record/index.vue
@@ -32,7 +32,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberPointRecordApi.Record>,
diff --git a/apps/web-antd/src/views/member/signin/config/index.vue b/apps/web-antd/src/views/member/signin/config/index.vue
index 42b5ef26..e3945647 100644
--- a/apps/web-antd/src/views/member/signin/config/index.vue
+++ b/apps/web-antd/src/views/member/signin/config/index.vue
@@ -73,7 +73,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInConfigApi.SignInConfig>,
diff --git a/apps/web-antd/src/views/member/signin/record/index.vue b/apps/web-antd/src/views/member/signin/record/index.vue
index f129dc09..a89b1210 100644
--- a/apps/web-antd/src/views/member/signin/record/index.vue
+++ b/apps/web-antd/src/views/member/signin/record/index.vue
@@ -32,7 +32,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
diff --git a/apps/web-antd/src/views/member/tag/index.vue b/apps/web-antd/src/views/member/tag/index.vue
index cb04045a..c3221622 100644
--- a/apps/web-antd/src/views/member/tag/index.vue
+++ b/apps/web-antd/src/views/member/tag/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberTagApi.Tag>,
diff --git a/apps/web-antd/src/views/member/user/components/user-address-list.vue b/apps/web-antd/src/views/member/user/components/user-address-list.vue
index 87687f10..af46eeba 100644
--- a/apps/web-antd/src/views/member/user/components/user-address-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-address-list.vue
@@ -75,7 +75,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberAddressApi.Address>,
diff --git a/apps/web-antd/src/views/member/user/components/user-balance-list.vue b/apps/web-antd/src/views/member/user/components/user-balance-list.vue
index 295e7bfb..35853c2e 100644
--- a/apps/web-antd/src/views/member/user/components/user-balance-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-balance-list.vue
@@ -56,7 +56,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<WalletTransactionApi.Transaction>,
diff --git a/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue b/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
index 72790ac0..990d4554 100644
--- a/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
@@ -118,7 +118,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
diff --git a/apps/web-antd/src/views/member/user/components/user-point-list.vue b/apps/web-antd/src/views/member/user/components/user-point-list.vue
index cc7dddd7..d82e93f6 100644
--- a/apps/web-antd/src/views/member/user/components/user-point-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-point-list.vue
@@ -61,7 +61,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberPointRecordApi.Record>,
diff --git a/apps/web-antd/src/views/member/user/components/user-sign-list.vue b/apps/web-antd/src/views/member/user/components/user-sign-list.vue
index 77ef261e..59ba62dd 100644
--- a/apps/web-antd/src/views/member/user/components/user-sign-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-sign-list.vue
@@ -52,7 +52,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
diff --git a/apps/web-antd/src/views/member/user/index.vue b/apps/web-antd/src/views/member/user/index.vue
index b03dfdb7..e2fe6d0c 100644
--- a/apps/web-antd/src/views/member/user/index.vue
+++ b/apps/web-antd/src/views/member/user/index.vue
@@ -113,7 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberUserApi.User>,
diff --git a/apps/web-antd/src/views/mp/account/index.vue b/apps/web-antd/src/views/mp/account/index.vue
index cb105a87..39be684a 100644
--- a/apps/web-antd/src/views/mp/account/index.vue
+++ b/apps/web-antd/src/views/mp/account/index.vue
@@ -114,7 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MpAccountApi.Account>,
diff --git a/apps/web-antd/src/views/mp/tag/index.vue b/apps/web-antd/src/views/mp/tag/index.vue
index b9471c42..a195f67c 100644
--- a/apps/web-antd/src/views/mp/tag/index.vue
+++ b/apps/web-antd/src/views/mp/tag/index.vue
@@ -134,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MpTagApi.Tag>,
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 0528779e..5969c1f7 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -125,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<PayAppApi.App>,
diff --git a/apps/web-antd/src/views/pay/demo/order/index.vue b/apps/web-antd/src/views/pay/demo/order/index.vue
index f9f40823..3eff1a81 100644
--- a/apps/web-antd/src/views/pay/demo/order/index.vue
+++ b/apps/web-antd/src/views/pay/demo/order/index.vue
@@ -82,7 +82,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<DemoOrderApi.Order>,
diff --git a/apps/web-antd/src/views/pay/demo/withdraw/index.vue b/apps/web-antd/src/views/pay/demo/withdraw/index.vue
index fd683883..d2d6cc51 100644
--- a/apps/web-antd/src/views/pay/demo/withdraw/index.vue
+++ b/apps/web-antd/src/views/pay/demo/withdraw/index.vue
@@ -70,7 +70,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<DemoWithdrawApi.Withdraw>,
diff --git a/apps/web-antd/src/views/pay/notify/index.vue b/apps/web-antd/src/views/pay/notify/index.vue
index f2077663..4c79dc09 100644
--- a/apps/web-antd/src/views/pay/notify/index.vue
+++ b/apps/web-antd/src/views/pay/notify/index.vue
@@ -48,7 +48,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<any>,
diff --git a/apps/web-antd/src/views/pay/order/index.vue b/apps/web-antd/src/views/pay/order/index.vue
index e2f982c7..098b88e3 100644
--- a/apps/web-antd/src/views/pay/order/index.vue
+++ b/apps/web-antd/src/views/pay/order/index.vue
@@ -57,7 +57,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       resizable: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<PayOrderApi.Order>,
diff --git a/apps/web-antd/src/views/pay/refund/index.vue b/apps/web-antd/src/views/pay/refund/index.vue
index a34d0d83..2d2913c0 100644
--- a/apps/web-antd/src/views/pay/refund/index.vue
+++ b/apps/web-antd/src/views/pay/refund/index.vue
@@ -55,7 +55,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<any>,
diff --git a/apps/web-antd/src/views/pay/transfer/index.vue b/apps/web-antd/src/views/pay/transfer/index.vue
index 1a77fc81..4461706f 100644
--- a/apps/web-antd/src/views/pay/transfer/index.vue
+++ b/apps/web-antd/src/views/pay/transfer/index.vue
@@ -56,7 +56,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<PayTransferApi.Transfer>,
diff --git a/apps/web-antd/src/views/pay/wallet/balance/index.vue b/apps/web-antd/src/views/pay/wallet/balance/index.vue
index 56dce177..a8aa1a3a 100644
--- a/apps/web-antd/src/views/pay/wallet/balance/index.vue
+++ b/apps/web-antd/src/views/pay/wallet/balance/index.vue
@@ -48,7 +48,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<PayWalletApi.Wallet>,
diff --git a/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue b/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
index b86896ec..6c2b497a 100644
--- a/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
+++ b/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
@@ -76,7 +76,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<any>,
diff --git a/apps/web-antd/src/views/pay/wallet/transaction/index.vue b/apps/web-antd/src/views/pay/wallet/transaction/index.vue
index dafb495c..4116a8e7 100644
--- a/apps/web-antd/src/views/pay/wallet/transaction/index.vue
+++ b/apps/web-antd/src/views/pay/wallet/transaction/index.vue
@@ -48,7 +48,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
   } as VxeTableGridOptions<any>,
 });
diff --git a/apps/web-antd/src/views/system/area/index.vue b/apps/web-antd/src/views/system/area/index.vue
index 30a77505..96159c0c 100644
--- a/apps/web-antd/src/views/system/area/index.vue
+++ b/apps/web-antd/src/views/system/area/index.vue
@@ -46,7 +46,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       rowField: 'id',
diff --git a/apps/web-antd/src/views/system/dept/index.vue b/apps/web-antd/src/views/system/dept/index.vue
index 5c1eebd1..e3dbc8ff 100644
--- a/apps/web-antd/src/views/system/dept/index.vue
+++ b/apps/web-antd/src/views/system/dept/index.vue
@@ -119,7 +119,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     treeConfig: {
diff --git a/apps/web-antd/src/views/system/dict/modules/data-grid.vue b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
index 58a6158f..57c6f87d 100644
--- a/apps/web-antd/src/views/system/dict/modules/data-grid.vue
+++ b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
@@ -122,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemDictDataApi.DictData>,
diff --git a/apps/web-antd/src/views/system/dict/modules/type-grid.vue b/apps/web-antd/src/views/system/dict/modules/type-grid.vue
index 98600900..0104303d 100644
--- a/apps/web-antd/src/views/system/dict/modules/type-grid.vue
+++ b/apps/web-antd/src/views/system/dict/modules/type-grid.vue
@@ -128,7 +128,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemDictTypeApi.DictType>,
diff --git a/apps/web-antd/src/views/system/loginlog/index.vue b/apps/web-antd/src/views/system/loginlog/index.vue
index 60bf38dd..9f57405b 100644
--- a/apps/web-antd/src/views/system/loginlog/index.vue
+++ b/apps/web-antd/src/views/system/loginlog/index.vue
@@ -56,7 +56,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemLoginLogApi.LoginLog>,
diff --git a/apps/web-antd/src/views/system/mail/account/index.vue b/apps/web-antd/src/views/system/mail/account/index.vue
index e7344f42..0d462695 100644
--- a/apps/web-antd/src/views/system/mail/account/index.vue
+++ b/apps/web-antd/src/views/system/mail/account/index.vue
@@ -107,7 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailAccountApi.MailAccount>,
diff --git a/apps/web-antd/src/views/system/mail/log/data.ts b/apps/web-antd/src/views/system/mail/log/data.ts
index 977e0174..9248fdb1 100644
--- a/apps/web-antd/src/views/system/mail/log/data.ts
+++ b/apps/web-antd/src/views/system/mail/log/data.ts
@@ -88,8 +88,28 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       formatter: 'formatDateTime',
     },
     {
-      field: 'toMail',
-      title: '收件邮箱',
+      field: 'userType',
+      title: '接收用户',
+      width: 150,
+      slots: { default: 'userInfo' },
+    },
+    {
+      field: 'toMails',
+      title: '接收信息',
+      width: 300,
+      formatter: ({ row }) => {
+        const lines: string[] = [];
+        if (row.toMails && row.toMails.length > 0) {
+          lines.push(`收件：${row.toMails.join('、')}`);
+        }
+        if (row.ccMails && row.ccMails.length > 0) {
+          lines.push(`抄送：${row.ccMails.join('、')}`);
+        }
+        if (row.bccMails && row.bccMails.length > 0) {
+          lines.push(`密送：${row.bccMails.join('、')}`);
+        }
+        return lines.join('\n');
+      },
     },
     {
       field: 'templateTitle',
@@ -136,21 +156,48 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       label: '创建时间',
       content: (data) => formatDateTime(data?.createTime || '') as string,
     },
-    {
-      field: 'toMail',
-      label: '收件邮箱',
-    },
     {
       field: 'fromMail',
       label: '发送邮箱',
     },
     {
       field: 'userId',
-      label: '用户编号',
+      label: '接收用户',
+      content: (data) => {
+        if (data?.userType && data?.userId) {
+          return h('div', [
+            h(DictTag, {
+              type: DICT_TYPE.USER_TYPE,
+              value: data.userType,
+            }),
+            ` (${data.userId})`,
+          ]);
+        }
+        return '无';
+      },
     },
     {
-      field: 'userType',
-      label: '用户类型',
+      field: 'toMails',
+      label: '接收信息',
+      content: (data) => {
+        const lines: string[] = [];
+        if (data?.toMails && data.toMails.length > 0) {
+          lines.push(`收件：${data.toMails.join('、')}`);
+        }
+        if (data?.ccMails && data.ccMails.length > 0) {
+          lines.push(`抄送：${data.ccMails.join('、')}`);
+        }
+        if (data?.bccMails && data.bccMails.length > 0) {
+          lines.push(`密送：${data.bccMails.join('、')}`);
+        }
+        return h(
+          'div',
+          {
+            style: { whiteSpace: 'pre-line' },
+          },
+          lines.join('\n'),
+        );
+      },
     },
     {
       field: 'templateId',
diff --git a/apps/web-antd/src/views/system/mail/log/index.vue b/apps/web-antd/src/views/system/mail/log/index.vue
index 1c754aa3..c0cd79f4 100644
--- a/apps/web-antd/src/views/system/mail/log/index.vue
+++ b/apps/web-antd/src/views/system/mail/log/index.vue
@@ -6,6 +6,8 @@ import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getMailLogPage } from '#/api/system/mail/log';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Detail from './modules/detail.vue';
@@ -48,7 +50,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailLogApi.MailLog>,
@@ -62,6 +64,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <DetailModal @success="onRefresh" />
     <Grid table-title="邮件日志列表">
+      <template #userInfo="{ row }">
+        <div v-if="row.userType && row.userId" class="flex items-center gap-1">
+          <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
+          <span>({{ row.userId }})</span>
+        </div>
+        <div v-else>-</div>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/system/mail/template/data.ts b/apps/web-antd/src/views/system/mail/template/data.ts
index 7b46a9e6..a3df7484 100644
--- a/apps/web-antd/src/views/system/mail/template/data.ts
+++ b/apps/web-antd/src/views/system/mail/template/data.ts
@@ -121,13 +121,31 @@ export function useSendMailFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'mail',
+      fieldName: 'toMails',
       label: '收件邮箱',
-      component: 'Input',
+      component: 'Textarea',
       componentProps: {
-        placeholder: '请输入收件邮箱',
+        placeholder: '请输入收件邮箱，每行一个邮箱地址',
+        rows: 3,
+      },
+    },
+    {
+      fieldName: 'ccMails',
+      label: '抄送邮箱',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入抄送邮箱，每行一个邮箱地址',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'bccMails',
+      label: '密送邮箱',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入密送邮箱，每行一个邮箱地址',
+        rows: 2,
       },
-      rules: z.string().email('请输入正确的邮箱'),
     },
   ];
 }
diff --git a/apps/web-antd/src/views/system/mail/template/index.vue b/apps/web-antd/src/views/system/mail/template/index.vue
index c45b3e71..21907b96 100644
--- a/apps/web-antd/src/views/system/mail/template/index.vue
+++ b/apps/web-antd/src/views/system/mail/template/index.vue
@@ -124,7 +124,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailTemplateApi.MailTemplate>,
diff --git a/apps/web-antd/src/views/system/mail/template/modules/send-form.vue b/apps/web-antd/src/views/system/mail/template/modules/send-form.vue
index 1752ad06..e72e6473 100644
--- a/apps/web-antd/src/views/system/mail/template/modules/send-form.vue
+++ b/apps/web-antd/src/views/system/mail/template/modules/send-form.vue
@@ -42,8 +42,17 @@ const [Modal, modalApi] = useVbenModal({
         paramsObj[param] = values[`param_${param}`];
       });
     }
+    const parseEmails = (text: string): string[] => {
+      if (!text) return [];
+      return text
+        .split('\n')
+        .map((email) => email.trim())
+        .filter((email) => email.length > 0);
+    };
     const data: SystemMailTemplateApi.MailSendReq = {
-      mail: values.mail,
+      toMails: parseEmails(values.toMails || ''),
+      ccMails: parseEmails(values.ccMails || ''),
+      bccMails: parseEmails(values.bccMails || ''),
       templateCode: formData.value?.code || '',
       templateParams: paramsObj,
     };
diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index 9519bb27..0853605d 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/apps/web-antd/src/views/system/menu/index.vue
@@ -86,7 +86,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       parentField: 'parentId',
diff --git a/apps/web-antd/src/views/system/notice/index.vue b/apps/web-antd/src/views/system/notice/index.vue
index 3d84e9e9..014ca535 100644
--- a/apps/web-antd/src/views/system/notice/index.vue
+++ b/apps/web-antd/src/views/system/notice/index.vue
@@ -125,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNoticeApi.Notice>,
diff --git a/apps/web-antd/src/views/system/notify/message/index.vue b/apps/web-antd/src/views/system/notify/message/index.vue
index 2b3c28d3..6fe5e625 100644
--- a/apps/web-antd/src/views/system/notify/message/index.vue
+++ b/apps/web-antd/src/views/system/notify/message/index.vue
@@ -48,7 +48,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
diff --git a/apps/web-antd/src/views/system/notify/my/index.vue b/apps/web-antd/src/views/system/notify/my/index.vue
index 7a101543..2ed5db6f 100644
--- a/apps/web-antd/src/views/system/notify/my/index.vue
+++ b/apps/web-antd/src/views/system/notify/my/index.vue
@@ -123,7 +123,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     checkboxConfig: {
diff --git a/apps/web-antd/src/views/system/notify/template/index.vue b/apps/web-antd/src/views/system/notify/template/index.vue
index 54601ec5..9408af8f 100644
--- a/apps/web-antd/src/views/system/notify/template/index.vue
+++ b/apps/web-antd/src/views/system/notify/template/index.vue
@@ -125,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNotifyTemplateApi.NotifyTemplate>,
diff --git a/apps/web-antd/src/views/system/oauth2/client/index.vue b/apps/web-antd/src/views/system/oauth2/client/index.vue
index 9f3fd3b3..388827b6 100644
--- a/apps/web-antd/src/views/system/oauth2/client/index.vue
+++ b/apps/web-antd/src/views/system/oauth2/client/index.vue
@@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOAuth2ClientApi.OAuth2Client>,
diff --git a/apps/web-antd/src/views/system/oauth2/token/index.vue b/apps/web-antd/src/views/system/oauth2/token/index.vue
index ece898e1..8e0573b5 100644
--- a/apps/web-antd/src/views/system/oauth2/token/index.vue
+++ b/apps/web-antd/src/views/system/oauth2/token/index.vue
@@ -61,7 +61,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOAuth2TokenApi.OAuth2Token>,
diff --git a/apps/web-antd/src/views/system/operatelog/index.vue b/apps/web-antd/src/views/system/operatelog/index.vue
index d19a225b..b40c149c 100644
--- a/apps/web-antd/src/views/system/operatelog/index.vue
+++ b/apps/web-antd/src/views/system/operatelog/index.vue
@@ -56,7 +56,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOperateLogApi.OperateLog>,
diff --git a/apps/web-antd/src/views/system/post/index.vue b/apps/web-antd/src/views/system/post/index.vue
index 126d7fd3..305222f8 100644
--- a/apps/web-antd/src/views/system/post/index.vue
+++ b/apps/web-antd/src/views/system/post/index.vue
@@ -114,7 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemPostApi.Post>,
diff --git a/apps/web-antd/src/views/system/role/index.vue b/apps/web-antd/src/views/system/role/index.vue
index 3e64e8eb..b04805ee 100644
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@@ -137,7 +137,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemRoleApi.Role>,
diff --git a/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue b/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
index c7319b9c..a495dbd9 100644
--- a/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
+++ b/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
@@ -74,11 +74,11 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      await formApi.setValues(await getRole(data.id as number));
-
       // 加载部门列表
       await loadDeptTree();
       toggleExpandAll();
+      // 设置表单值, 一定要在加载树之后
+      await formApi.setValues(await getRole(data.id as number));
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue b/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
index aa1843f9..6227e2b3 100644
--- a/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
+++ b/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
@@ -66,19 +66,19 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+    // 加载菜单列表
+    await loadMenuTree();
     const data = modalApi.getData<SystemRoleApi.Role>();
     if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
-      await formApi.setValues(data);
-
       // 加载角色菜单
       const menuIds = await getRoleMenuList(data.id as number);
       await formApi.setFieldValue('menuIds', menuIds);
-      // 加载菜单列表
-      await loadMenuTree();
+
+      await formApi.setValues(data);
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-antd/src/views/system/sms/channel/index.vue b/apps/web-antd/src/views/system/sms/channel/index.vue
index f172f155..ee8ae780 100644
--- a/apps/web-antd/src/views/system/sms/channel/index.vue
+++ b/apps/web-antd/src/views/system/sms/channel/index.vue
@@ -122,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     checkboxConfig: {
diff --git a/apps/web-antd/src/views/system/sms/log/index.vue b/apps/web-antd/src/views/system/sms/log/index.vue
index 9f230e0c..137ed105 100644
--- a/apps/web-antd/src/views/system/sms/log/index.vue
+++ b/apps/web-antd/src/views/system/sms/log/index.vue
@@ -56,7 +56,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsLogApi.SmsLog>,
diff --git a/apps/web-antd/src/views/system/sms/template/index.vue b/apps/web-antd/src/views/system/sms/template/index.vue
index 0c0d349c..5daa00d1 100644
--- a/apps/web-antd/src/views/system/sms/template/index.vue
+++ b/apps/web-antd/src/views/system/sms/template/index.vue
@@ -125,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
diff --git a/apps/web-antd/src/views/system/social/client/index.vue b/apps/web-antd/src/views/system/social/client/index.vue
index c930c925..56756169 100644
--- a/apps/web-antd/src/views/system/social/client/index.vue
+++ b/apps/web-antd/src/views/system/social/client/index.vue
@@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSocialClientApi.SocialClient>,
diff --git a/apps/web-antd/src/views/system/social/user/index.vue b/apps/web-antd/src/views/system/social/user/index.vue
index 49e0213d..1659a3a2 100644
--- a/apps/web-antd/src/views/system/social/user/index.vue
+++ b/apps/web-antd/src/views/system/social/user/index.vue
@@ -44,7 +44,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSocialUserApi.SocialUser>,
diff --git a/apps/web-antd/src/views/system/tenant/index.vue b/apps/web-antd/src/views/system/tenant/index.vue
index cf5f1dc0..463f33a6 100644
--- a/apps/web-antd/src/views/system/tenant/index.vue
+++ b/apps/web-antd/src/views/system/tenant/index.vue
@@ -126,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantApi.Tenant>,
diff --git a/apps/web-antd/src/views/system/tenantPackage/index.vue b/apps/web-antd/src/views/system/tenantPackage/index.vue
index 28287d30..1e967c53 100644
--- a/apps/web-antd/src/views/system/tenantPackage/index.vue
+++ b/apps/web-antd/src/views/system/tenantPackage/index.vue
@@ -107,7 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantPackageApi.TenantPackage>,
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index d1069e97..a0275ece 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -186,7 +186,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemUserApi.User>,
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index a2d84f23..43a43dac 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-ele/src/adapter/component/index.ts b/apps/web-ele/src/adapter/component/index.ts
index a4fca913..7a5d9f07 100644
--- a/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/web-ele/src/adapter/component/index.ts
@@ -120,6 +120,12 @@ const ElUpload = defineAsyncComponent(() =>
     import('element-plus/es/components/upload/style/css'),
   ]).then(([res]) => res.ElUpload),
 );
+const ElCascader = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/cascader/index'),
+    import('element-plus/es/components/cascader/style/css'),
+  ]).then(([res]) => res.ElCascader),
+);
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
@@ -157,6 +163,7 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiCascader'
   | 'ApiSelect'
   | 'ApiTreeSelect'
   | 'Checkbox'
@@ -197,6 +204,16 @@ async function initComponentAdapter() {
         visibleEvent: 'onVisibleChange',
       },
     ),
+    ApiCascader: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiCascader',
+      },
+      'select',
+      {
+        component: ElCascader,
+      },
+    ),
     ApiTreeSelect: withDefaultPlaceholder(
       {
         ...ApiComponent,
@@ -205,7 +222,6 @@ async function initComponentAdapter() {
       'select',
       {
         component: ElTreeSelect,
-        props: { label: 'label', children: 'children' },
         nodeKey: 'value',
         loadingSlot: 'loading',
         optionsPropName: 'data',
diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts
index d160c3c9..9c36e196 100644
--- a/apps/web-ele/src/adapter/vxe-table.ts
+++ b/apps/web-ele/src/adapter/vxe-table.ts
@@ -10,7 +10,14 @@ import {
   setupVbenVxeTable,
   useVbenVxeGrid,
 } from '@vben/plugins/vxe-table';
-import { isFunction, isString } from '@vben/utils';
+import {
+  erpCountInputFormatter,
+  erpNumberFormatter,
+  fenToYuan,
+  formatPast2,
+  isFunction,
+  isString,
+} from '@vben/utils';
 
 import { ElButton, ElImage, ElPopconfirm, ElSwitch } from 'element-plus';
 
@@ -69,10 +76,16 @@ setupVbenVxeTable({
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
-      renderTableDefault(_renderOpts, params) {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
         const { column, row } = params;
         const src = row[column.field];
-        return h(ElImage, { src, previewSrcList: [src] });
+        return h(ElImage, {
+          src,
+          previewSrcList: [src],
+          class: props?.class,
+          previewTeleported: true,
+        });
       },
     });
 
@@ -267,19 +280,28 @@ setupVbenVxeTable({
 
     // 添加数量格式化，例如金额
     // TODO @xingyu：建议金额，和数量分开哈；原因是，有些团队希望金额，单独控制；
+    vxeUI.formats.add('formatPast2', {
+      tableCellFormatMethod({ cellValue }) {
+        return formatPast2(cellValue);
+      },
+    });
+
+    // add by 星语：数量格式化，例如说：金额
     vxeUI.formats.add('formatNumber', {
-      cellFormatMethod({ cellValue }, digits = 2) {
-        if (cellValue === null || cellValue === undefined) {
-          return '';
-        }
-        if (isString(cellValue)) {
-          cellValue = Number.parseFloat(cellValue);
-        }
-        // 如果非 number，则直接返回空串
-        if (Number.isNaN(cellValue)) {
-          return '';
-        }
-        return cellValue.toFixed(digits);
+      tableCellFormatMethod({ cellValue }) {
+        return erpCountInputFormatter(cellValue);
+      },
+    });
+
+    vxeUI.formats.add('formatAmount2', {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
+        return `${erpNumberFormatter(cellValue, digits)}元`;
+      },
+    });
+
+    vxeUI.formats.add('formatFenToYuanAmount', {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
+        return `${erpNumberFormatter(fenToYuan(cellValue), digits)}元`;
       },
     });
   },
diff --git a/apps/web-ele/src/api/ai/chat/conversation/index.ts b/apps/web-ele/src/api/ai/chat/conversation/index.ts
new file mode 100644
index 00000000..fe26a316
--- /dev/null
+++ b/apps/web-ele/src/api/ai/chat/conversation/index.ts
@@ -0,0 +1,75 @@
+import type { PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiChatConversationApi {
+  export interface ChatConversation {
+    id: number; // ID 编号
+    userId: number; // 用户编号
+    title: string; // 对话标题
+    pinned: boolean; // 是否置顶
+    roleId: number; // 角色编号
+    modelId: number; // 模型编号
+    model: string; // 模型标志
+    temperature: number; // 温度参数
+    maxTokens: number; // 单条回复的最大 Token 数量
+    maxContexts: number; // 上下文的最大 Message 数量
+    createTime?: Date; // 创建时间
+    // 额外字段
+    systemMessage?: string; // 角色设定
+    modelName?: string; // 模型名字
+    roleAvatar?: string; // 角色头像
+    modelMaxTokens?: string; // 模型的单条回复的最大 Token 数量
+    modelMaxContexts?: string; // 模型的上下文的最大 Message 数量
+  }
+}
+
+// 获得【我的】聊天对话
+export function getChatConversationMy(id: number) {
+  return requestClient.get<AiChatConversationApi.ChatConversation>(
+    `/ai/chat/conversation/get-my?id=${id}`,
+  );
+}
+
+// 新增【我的】聊天对话
+export function createChatConversationMy(
+  data: AiChatConversationApi.ChatConversation,
+) {
+  return requestClient.post('/ai/chat/conversation/create-my', data);
+}
+
+//  更新【我的】聊天对话
+export function updateChatConversationMy(
+  data: AiChatConversationApi.ChatConversation,
+) {
+  return requestClient.put(`/ai/chat/conversation/update-my`, data);
+}
+
+//  删除【我的】聊天对话
+export function deleteChatConversationMy(id: number) {
+  return requestClient.delete(`/ai/chat/conversation/delete-my?id=${id}`);
+}
+
+//  删除【我的】所有对话，置顶除外
+export function deleteChatConversationMyByUnpinned() {
+  return requestClient.delete(`/ai/chat/conversation/delete-by-unpinned`);
+}
+
+//  获得【我的】聊天对话列表
+export function getChatConversationMyList() {
+  return requestClient.get<AiChatConversationApi.ChatConversation[]>(
+    `/ai/chat/conversation/my-list`,
+  );
+}
+
+//  获得【我的】聊天对话列表
+export function getChatConversationPage(params: any) {
+  return requestClient.get<
+    PageResult<AiChatConversationApi.ChatConversation[]>
+  >(`/ai/chat/conversation/page`, { params });
+}
+
+//  管理员删除消息
+export function deleteChatConversationByAdmin(id: number) {
+  return requestClient.delete(`/ai/chat/conversation/delete-by-admin?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/chat/message/index.ts b/apps/web-ele/src/api/ai/chat/message/index.ts
new file mode 100644
index 00000000..131d9540
--- /dev/null
+++ b/apps/web-ele/src/api/ai/chat/message/index.ts
@@ -0,0 +1,98 @@
+import type { PageResult } from '@vben/request';
+
+import { useAppConfig } from '@vben/hooks';
+import { fetchEventSource } from '@vben/request';
+import { useAccessStore } from '@vben/stores';
+
+import { requestClient } from '#/api/request';
+
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const accessStore = useAccessStore();
+
+export namespace AiChatMessageApi {
+  export interface ChatMessage {
+    id: number; // 编号
+    conversationId: number; // 对话编号
+    type: string; // 消息类型
+    userId: string; // 用户编号
+    roleId: string; // 角色编号
+    model: number; // 模型标志
+    modelId: number; // 模型编号
+    content: string; // 聊天内容
+    tokens: number; // 消耗 Token 数量
+    segmentIds?: number[]; // 段落编号
+    segments?: {
+      content: string; // 段落内容
+      documentId: number; // 文档编号
+      documentName: string; // 文档名称
+      id: number; // 段落编号
+    }[];
+    createTime: Date; // 创建时间
+    roleAvatar: string; // 角色头像
+    userAvatar: string; // 用户头像
+  }
+}
+
+// 消息列表
+export function getChatMessageListByConversationId(
+  conversationId: null | number,
+) {
+  return requestClient.get<AiChatMessageApi.ChatMessage[]>(
+    `/ai/chat/message/list-by-conversation-id?conversationId=${conversationId}`,
+  );
+}
+
+// 发送 Stream 消息
+export function sendChatMessageStream(
+  conversationId: number,
+  content: string,
+  ctrl: any,
+  enableContext: boolean,
+  onMessage: any,
+  onError: any,
+  onClose: any,
+) {
+  const token = accessStore.accessToken;
+  return fetchEventSource(`${apiURL}/ai/chat/message/send-stream`, {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    openWhenHidden: true,
+    body: JSON.stringify({
+      conversationId,
+      content,
+      useContext: enableContext,
+    }),
+    onmessage: onMessage,
+    onerror: onError,
+    onclose: onClose,
+    signal: ctrl.signal,
+  });
+}
+
+// 删除消息
+export function deleteChatMessage(id: number) {
+  return requestClient.delete(`/ai/chat/message/delete?id=${id}`);
+}
+
+// 删除指定对话的消息
+export function deleteByConversationId(conversationId: number) {
+  return requestClient.delete(
+    `/ai/chat/message/delete-by-conversation-id?conversationId=${conversationId}`,
+  );
+}
+
+// 获得消息分页
+export function getChatMessagePage(params: any) {
+  return requestClient.get<PageResult<AiChatMessageApi.ChatMessage>>(
+    '/ai/chat/message/page',
+    { params },
+  );
+}
+
+// 管理员删除消息
+export function deleteChatMessageByAdmin(id: number) {
+  return requestClient.delete(`/ai/chat/message/delete-by-admin?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/image/index.ts b/apps/web-ele/src/api/ai/image/index.ts
new file mode 100644
index 00000000..19970eea
--- /dev/null
+++ b/apps/web-ele/src/api/ai/image/index.ts
@@ -0,0 +1,109 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiImageApi {
+  export interface ImageMidjourneyButtons {
+    customId: string; // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
+    emoji: string; // 图标 emoji
+    label: string; // Make Variations 文本
+    style: number; // 样式: 2（Primary）、3（Green）
+  }
+  // AI 绘图
+  export interface Image {
+    id: number; // 编号
+    platform: string; // 平台
+    model: string; // 模型
+    prompt: string; // 提示词
+    width: number; // 图片宽度
+    height: number; // 图片高度
+    status: number; // 状态
+    publicStatus: boolean; // 公开状态
+    picUrl: string; // 任务地址
+    errorMessage: string; // 错误信息
+    options: any; // 配置 Map<string, string>
+    taskId: number; // 任务编号
+    buttons: ImageMidjourneyButtons[]; // mj 操作按钮
+    createTime: Date; // 创建时间
+    finishTime: Date; // 完成时间
+  }
+
+  export interface ImageDrawReq {
+    prompt: string; // 提示词
+    modelId: number; // 模型
+    style: string; // 图像生成的风格
+    width: string; // 图片宽度
+    height: string; // 图片高度
+    options: object; // 绘制参数，Map<String, String>
+  }
+
+  export interface ImageMidjourneyImagineReq {
+    prompt: string; // 提示词
+    modelId: number; // 模型
+    base64Array?: string[]; // size不能为空
+    width: string; // 图片宽度
+    height: string; // 图片高度
+    version: string; // 版本
+  }
+
+  export interface ImageMidjourneyAction {
+    id: number; // 图片编号
+    customId: string; // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
+  }
+}
+
+// 获取【我的】绘图分页
+export function getImagePageMy(params: PageParam) {
+  return requestClient.get<PageResult<AiImageApi.Image>>('/ai/image/my-page', {
+    params,
+  });
+}
+
+// 获取【我的】绘图记录
+export function getImageMy(id: number) {
+  return requestClient.get<AiImageApi.Image>(`/ai/image/get-my?id=${id}`);
+}
+
+// 获取【我的】绘图记录列表
+export function getImageListMyByIds(ids: number[]) {
+  return requestClient.get<AiImageApi.Image[]>(`/ai/image/my-list-by-ids`, {
+    params: { ids: ids.join(',') },
+  });
+}
+
+// 生成图片
+export function drawImage(data: AiImageApi.ImageDrawReq) {
+  return requestClient.post(`/ai/image/draw`, data);
+}
+
+// 删除【我的】绘画记录
+export function deleteImageMy(id: number) {
+  return requestClient.delete(`/ai/image/delete-my?id=${id}`);
+}
+
+// ================ midjourney 专属 ================
+// 【Midjourney】生成图片
+export function midjourneyImagine(data: AiImageApi.ImageMidjourneyImagineReq) {
+  return requestClient.post(`/ai/image/midjourney/imagine`, data);
+}
+
+// 【Midjourney】Action 操作（二次生成图片）
+export function midjourneyAction(data: AiImageApi.ImageMidjourneyAction) {
+  return requestClient.post(`/ai/image/midjourney/action`, data);
+}
+
+// ================ 绘图管理 ================
+// 查询绘画分页
+export function getImagePage(params: any) {
+  return requestClient.get<AiImageApi.Image[]>(`/ai/image/page`, { params });
+}
+
+// 更新绘画发布状态
+export function updateImage(data: any) {
+  return requestClient.put(`/ai/image/update`, data);
+}
+
+// 删除绘画
+export function deleteImage(id: number) {
+  return requestClient.delete(`/ai/image/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/knowledge/document/index.ts b/apps/web-ele/src/api/ai/knowledge/document/index.ts
new file mode 100644
index 00000000..6c754d53
--- /dev/null
+++ b/apps/web-ele/src/api/ai/knowledge/document/index.ts
@@ -0,0 +1,53 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiKnowledgeDocumentApi {
+  export interface KnowledgeDocument {
+    id: number; // 编号
+    knowledgeId: number; // 知识库编号
+    name: string; // 文档名称
+    contentLength: number; // 字符数
+    tokens: number; // token 数
+    segmentMaxTokens: number; // 分片最大 token 数
+    retrievalCount: number; // 召回次数
+    status: number; // 是否启用
+  }
+}
+
+// 查询知识库文档分页
+export function getKnowledgeDocumentPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<AiKnowledgeDocumentApi.KnowledgeDocument>
+  >('/ai/knowledge/document/page', { params });
+}
+
+// 查询知识库文档详情
+export function getKnowledgeDocument(id: number) {
+  return requestClient.get(`/ai/knowledge/document/get?id=${id}`);
+}
+
+// 新增知识库文档（单个）
+export function createKnowledge(data: any) {
+  return requestClient.post('/ai/knowledge/document/create', data);
+}
+
+// 新增知识库文档（多个）
+export function createKnowledgeDocumentList(data: any) {
+  return requestClient.post('/ai/knowledge/document/create-list', data);
+}
+
+// 修改知识库文档
+export function updateKnowledgeDocument(data: any) {
+  return requestClient.put('/ai/knowledge/document/update', data);
+}
+
+// 修改知识库文档状态
+export function updateKnowledgeDocumentStatus(data: any) {
+  return requestClient.put('/ai/knowledge/document/update-status', data);
+}
+
+// 删除知识库文档
+export function deleteKnowledgeDocument(id: number) {
+  return requestClient.delete(`/ai/knowledge/document/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/knowledge/knowledge/index.ts b/apps/web-ele/src/api/ai/knowledge/knowledge/index.ts
new file mode 100644
index 00000000..7140d8b4
--- /dev/null
+++ b/apps/web-ele/src/api/ai/knowledge/knowledge/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiKnowledgeKnowledgeApi {
+  export interface Knowledge {
+    id: number; // 编号
+    name: string; // 知识库名称
+    description: string; // 知识库描述
+    embeddingModelId: number; // 嵌入模型编号，高质量模式时维护
+    topK: number; // topK
+    similarityThreshold: number; // 相似度阈值
+  }
+}
+
+// 查询知识库分页
+export function getKnowledgePage(params: PageParam) {
+  return requestClient.get<PageResult<AiKnowledgeKnowledgeApi.Knowledge>>(
+    '/ai/knowledge/page',
+    { params },
+  );
+}
+
+// 查询知识库详情
+export function getKnowledge(id: number) {
+  return requestClient.get<AiKnowledgeKnowledgeApi.Knowledge>(
+    `/ai/knowledge/get?id=${id}`,
+  );
+}
+// 新增知识库
+export function createKnowledge(data: AiKnowledgeKnowledgeApi.Knowledge) {
+  return requestClient.post('/ai/knowledge/create', data);
+}
+
+// 修改知识库
+export function updateKnowledge(data: AiKnowledgeKnowledgeApi.Knowledge) {
+  return requestClient.put('/ai/knowledge/update', data);
+}
+
+// 删除知识库
+export function deleteKnowledge(id: number) {
+  return requestClient.delete(`/ai/knowledge/delete?id=${id}`);
+}
+
+// 获取知识库简单列表
+export function getSimpleKnowledgeList() {
+  return requestClient.get<AiKnowledgeKnowledgeApi.Knowledge[]>(
+    '/ai/knowledge/simple-list',
+  );
+}
diff --git a/apps/web-ele/src/api/ai/knowledge/segment/index.ts b/apps/web-ele/src/api/ai/knowledge/segment/index.ts
new file mode 100644
index 00000000..2635c772
--- /dev/null
+++ b/apps/web-ele/src/api/ai/knowledge/segment/index.ts
@@ -0,0 +1,78 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiKnowledgeSegmentApi {
+  // AI 知识库分段
+  export interface KnowledgeSegment {
+    id: number; // 编号
+    documentId: number; // 文档编号
+    knowledgeId: number; // 知识库编号
+    vectorId: string; // 向量库编号
+    content: string; // 切片内容
+    contentLength: number; // 切片内容长度
+    tokens: number; // token 数量
+    retrievalCount: number; // 召回次数
+    status: number; // 文档状态
+    createTime: number; // 创建时间
+  }
+}
+
+// 查询知识库分段分页
+export function getKnowledgeSegmentPage(params: PageParam) {
+  return requestClient.get<PageResult<AiKnowledgeSegmentApi.KnowledgeSegment>>(
+    '/ai/knowledge/segment/page',
+    { params },
+  );
+}
+
+// 查询知识库分段详情
+export function getKnowledgeSegment(id: number) {
+  return requestClient.get<AiKnowledgeSegmentApi.KnowledgeSegment>(
+    `/ai/knowledge/segment/get?id=${id}`,
+  );
+}
+
+// 新增知识库分段
+export function createKnowledgeSegment(
+  data: AiKnowledgeSegmentApi.KnowledgeSegment,
+) {
+  return requestClient.post('/ai/knowledge/segment/create', data);
+}
+
+// 修改知识库分段
+export function updateKnowledgeSegment(
+  data: AiKnowledgeSegmentApi.KnowledgeSegment,
+) {
+  return requestClient.put('/ai/knowledge/segment/update', data);
+}
+
+// 修改知识库分段状态
+export function updateKnowledgeSegmentStatus(data: any) {
+  return requestClient.put('/ai/knowledge/segment/update-status', data);
+}
+// 删除知识库分段
+export function deleteKnowledgeSegment(id: number) {
+  return requestClient.delete(`/ai/knowledge/segment/delete?id=${id}`);
+}
+
+// 切片内容
+export function splitContent(url: string, segmentMaxTokens: number) {
+  return requestClient.get('/ai/knowledge/segment/split', {
+    params: { url, segmentMaxTokens },
+  });
+}
+
+// 获取文档处理列表
+export function getKnowledgeSegmentProcessList(documentIds: number[]) {
+  return requestClient.get('/ai/knowledge/segment/get-process-list', {
+    params: { documentIds: documentIds.join(',') },
+  });
+}
+
+// 搜索知识库分段
+export function searchKnowledgeSegment(params: any) {
+  return requestClient.get('/ai/knowledge/segment/search', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/ai/mindmap/index.ts b/apps/web-ele/src/api/ai/mindmap/index.ts
new file mode 100644
index 00000000..69e43734
--- /dev/null
+++ b/apps/web-ele/src/api/ai/mindmap/index.ts
@@ -0,0 +1,64 @@
+import { useAppConfig } from '@vben/hooks';
+import { fetchEventSource } from '@vben/request';
+import { useAccessStore } from '@vben/stores';
+
+import { requestClient } from '#/api/request';
+
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const accessStore = useAccessStore();
+export namespace AiMindmapApi {
+  // AI 思维导图
+  export interface MindMap {
+    id: number; // 编号
+    userId: number; // 用户编号
+    prompt: string; // 生成内容提示
+    generatedContent: string; // 生成的思维导图内容
+    platform: string; // 平台
+    model: string; // 模型
+    errorMessage: string; // 错误信息
+  }
+
+  // AI 思维导图生成
+  export interface AiMindMapGenerateReq {
+    prompt: string;
+  }
+}
+
+export function generateMindMap({
+  data,
+  onClose,
+  onMessage,
+  onError,
+  ctrl,
+}: {
+  ctrl: AbortController;
+  data: AiMindmapApi.AiMindMapGenerateReq;
+  onClose?: (...args: any[]) => void;
+  onError?: (...args: any[]) => void;
+  onMessage?: (res: any) => void;
+}) {
+  const token = accessStore.accessToken;
+  return fetchEventSource(`${apiURL}/ai/mind-map/generate-stream`, {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    openWhenHidden: true,
+    body: JSON.stringify(data),
+    onmessage: onMessage,
+    onerror: onError,
+    onclose: onClose,
+    signal: ctrl.signal,
+  });
+}
+
+// 查询思维导图分页
+export function getMindMapPage(params: any) {
+  return requestClient.get(`/ai/mind-map/page`, { params });
+}
+
+// 删除思维导图
+export function deleteMindMap(id: number) {
+  return requestClient.delete(`/ai/mind-map/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/model/apiKey/index.ts b/apps/web-ele/src/api/ai/model/apiKey/index.ts
new file mode 100644
index 00000000..80dcbec1
--- /dev/null
+++ b/apps/web-ele/src/api/ai/model/apiKey/index.ts
@@ -0,0 +1,48 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiModelApiKeyApi {
+  export interface ApiKey {
+    id: number; // 编号
+    name: string; // 名称
+    apiKey: string; // 密钥
+    platform: string; // 平台
+    url: string; // 自定义 API 地址
+    status: number; // 状态
+  }
+}
+
+// 查询 API 密钥分页
+export function getApiKeyPage(params: PageParam) {
+  return requestClient.get<PageResult<AiModelApiKeyApi.ApiKey>>(
+    '/ai/api-key/page',
+    { params },
+  );
+}
+
+// 获得 API 密钥列表
+export function getApiKeySimpleList() {
+  return requestClient.get<AiModelApiKeyApi.ApiKey[]>(
+    '/ai/api-key/simple-list',
+  );
+}
+
+// 查询 API 密钥详情
+export function getApiKey(id: number) {
+  return requestClient.get<AiModelApiKeyApi.ApiKey>(`/ai/api-key/get?id=${id}`);
+}
+// 新增 API 密钥
+export function createApiKey(data: AiModelApiKeyApi.ApiKey) {
+  return requestClient.post('/ai/api-key/create', data);
+}
+
+// 修改 API 密钥
+export function updateApiKey(data: AiModelApiKeyApi.ApiKey) {
+  return requestClient.put('/ai/api-key/update', data);
+}
+
+// 删除 API 密钥
+export function deleteApiKey(id: number) {
+  return requestClient.delete(`/ai/api-key/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/model/chatRole/index.ts b/apps/web-ele/src/api/ai/model/chatRole/index.ts
new file mode 100644
index 00000000..d52dbfee
--- /dev/null
+++ b/apps/web-ele/src/api/ai/model/chatRole/index.ts
@@ -0,0 +1,85 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiModelChatRoleApi {
+  export interface ChatRole {
+    id: number; // 角色编号
+    modelId: number; // 模型编号
+    name: string; // 角色名称
+    avatar: string; // 角色头像
+    category: string; // 角色类别
+    sort: number; // 角色排序
+    description: string; // 角色描述
+    systemMessage: string; // 角色设定
+    welcomeMessage: string; // 角色设定
+    publicStatus: boolean; // 是否公开
+    status: number; // 状态
+    knowledgeIds?: number[]; // 引用的知识库 ID 列表
+    toolIds?: number[]; // 引用的工具 ID 列表
+  }
+
+  // AI 聊天角色 分页请求
+  export interface ChatRolePageReq {
+    name?: string; // 角色名称
+    category?: string; // 角色类别
+    publicStatus: boolean; // 是否公开
+    pageNo: number; // 是否公开
+    pageSize: number; // 是否公开
+  }
+}
+
+// 查询聊天角色分页
+export function getChatRolePage(params: PageParam) {
+  return requestClient.get<PageResult<AiModelChatRoleApi.ChatRole>>(
+    '/ai/chat-role/page',
+    { params },
+  );
+}
+
+// 查询聊天角色详情
+export function getChatRole(id: number) {
+  return requestClient.get<AiModelChatRoleApi.ChatRole>(
+    `/ai/chat-role/get?id=${id}`,
+  );
+}
+// 新增聊天角色
+export function createChatRole(data: AiModelChatRoleApi.ChatRole) {
+  return requestClient.post('/ai/chat-role/create', data);
+}
+
+// 修改聊天角色
+export function updateChatRole(data: AiModelChatRoleApi.ChatRole) {
+  return requestClient.put('/ai/chat-role/update', data);
+}
+
+// 删除聊天角色
+export function deleteChatRole(id: number) {
+  return requestClient.delete(`/ai/chat-role/delete?id=${id}`);
+}
+
+// ======= chat 聊天
+// 获取 my role
+export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReq) {
+  return requestClient.get('/ai/chat-role/my-page', { params });
+}
+
+// 获取角色分类
+export function getCategoryList() {
+  return requestClient.get('/ai/chat-role/category-list');
+}
+
+// 创建角色
+export function createMy(data: AiModelChatRoleApi.ChatRole) {
+  return requestClient.post('/ai/chat-role/create-my', data);
+}
+
+// 更新角色
+export function updateMy(data: AiModelChatRoleApi.ChatRole) {
+  return requestClient.put('/ai/chat-role/update', data);
+}
+
+// 删除角色 my
+export function deleteMy(id: number) {
+  return requestClient.delete(`/ai/chat-role/delete-my?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/model/model/index.ts b/apps/web-ele/src/api/ai/model/model/index.ts
new file mode 100644
index 00000000..deafcee8
--- /dev/null
+++ b/apps/web-ele/src/api/ai/model/model/index.ts
@@ -0,0 +1,55 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiModelModelApi {
+  export interface Model {
+    id: number; // 编号
+    keyId: number; // API 秘钥编号
+    name: string; // 模型名字
+    model: string; // 模型标识
+    platform: string; // 模型平台
+    type: number; // 模型类型
+    sort: number; // 排序
+    status: number; // 状态
+    temperature?: number; // 温度参数
+    maxTokens?: number; // 单条回复的最大 Token 数量
+    maxContexts?: number; // 上下文的最大 Message 数量
+  }
+}
+
+// 查询模型分页
+export function getModelPage(params: PageParam) {
+  return requestClient.get<PageResult<AiModelModelApi.Model>>(
+    '/ai/model/page',
+    { params },
+  );
+}
+
+// 获得模型列表
+export function getModelSimpleList(type?: number) {
+  return requestClient.get<AiModelModelApi.Model[]>('/ai/model/simple-list', {
+    params: {
+      type,
+    },
+  });
+}
+
+// 查询模型详情
+export function getModel(id: number) {
+  return requestClient.get<AiModelModelApi.Model>(`/ai/model/get?id=${id}`);
+}
+// 新增模型
+export function createModel(data: AiModelModelApi.Model) {
+  return requestClient.post('/ai/model/create', data);
+}
+
+// 修改模型
+export function updateModel(data: AiModelModelApi.Model) {
+  return requestClient.put('/ai/model/update', data);
+}
+
+// 删除模型
+export function deleteModel(id: number) {
+  return requestClient.delete(`/ai/model/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/model/tool/index.ts b/apps/web-ele/src/api/ai/model/tool/index.ts
new file mode 100644
index 00000000..6fac9d74
--- /dev/null
+++ b/apps/web-ele/src/api/ai/model/tool/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiModelToolApi {
+  export interface Tool {
+    id: number; // 工具编号
+    name: string; // 工具名称
+    description: string; // 工具描述
+    status: number; // 状态
+  }
+}
+
+// 查询工具分页
+export function getToolPage(params: PageParam) {
+  return requestClient.get<PageResult<AiModelToolApi.Tool>>('/ai/tool/page', {
+    params,
+  });
+}
+
+// 查询工具详情
+export function getTool(id: number) {
+  return requestClient.get<AiModelToolApi.Tool>(`/ai/tool/get?id=${id}`);
+}
+// 新增工具
+export function createTool(data: AiModelToolApi.Tool) {
+  return requestClient.post('/ai/tool/create', data);
+}
+
+// 修改工具
+export function updateTool(data: AiModelToolApi.Tool) {
+  return requestClient.put('/ai/tool/update', data);
+}
+
+// 删除工具
+export function deleteTool(id: number) {
+  return requestClient.delete(`/ai/tool/delete?id=${id}`);
+}
+
+// 获取工具简单列表
+export function getToolSimpleList() {
+  return requestClient.get<AiModelToolApi.Tool[]>('/ai/tool/simple-list');
+}
diff --git a/apps/web-ele/src/api/ai/music/index.ts b/apps/web-ele/src/api/ai/music/index.ts
new file mode 100644
index 00000000..384fdf8e
--- /dev/null
+++ b/apps/web-ele/src/api/ai/music/index.ts
@@ -0,0 +1,44 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AiMusicApi {
+  // AI 音乐
+  export interface Music {
+    id: number; // 编号
+    userId: number; // 用户编号
+    title: string; // 音乐名称
+    lyric: string; // 歌词
+    imageUrl: string; // 图片地址
+    audioUrl: string; // 音频地址
+    videoUrl: string; // 视频地址
+    status: number; // 音乐状态
+    gptDescriptionPrompt: string; // 描述词
+    prompt: string; // 提示词
+    platform: string; // 模型平台
+    model: string; // 模型
+    generateMode: number; // 生成模式
+    tags: string; // 音乐风格标签
+    duration: number; // 音乐时长
+    publicStatus: boolean; // 是否发布
+    taskId: string; // 任务id
+    errorMessage: string; // 错误信息
+  }
+}
+
+// 查询音乐分页
+export function getMusicPage(params: PageParam) {
+  return requestClient.get<PageResult<AiMusicApi.Music>>(`/ai/music/page`, {
+    params,
+  });
+}
+
+// 更新音乐
+export function updateMusic(data: any) {
+  return requestClient.put('/ai/music/update', data);
+}
+
+// 删除音乐
+export function deleteMusic(id: number) {
+  return requestClient.delete(`/ai/music/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/ai/workflow/index.ts b/apps/web-ele/src/api/ai/workflow/index.ts
new file mode 100644
index 00000000..a383d0cd
--- /dev/null
+++ b/apps/web-ele/src/api/ai/workflow/index.ts
@@ -0,0 +1,29 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export function getWorkflowPage(params: PageParam) {
+  return requestClient.get<PageResult<any>>('/ai/workflow/page', {
+    params,
+  });
+}
+
+export const getWorkflow = (id: number | string) => {
+  return requestClient.get(`/ai/workflow/get?id=${id}`);
+};
+
+export const createWorkflow = (data: any) => {
+  return requestClient.post('/ai/workflow/create', data);
+};
+
+export const updateWorkflow = (data: any) => {
+  return requestClient.put('/ai/workflow/update', data);
+};
+
+export const deleteWorkflow = (id: number | string) => {
+  return requestClient.delete(`/ai/workflow/delete?id=${id}`);
+};
+
+export const testWorkflow = (data: any) => {
+  return requestClient.post('/ai/workflow/test', data);
+};
diff --git a/apps/web-ele/src/api/ai/write/index.ts b/apps/web-ele/src/api/ai/write/index.ts
new file mode 100644
index 00000000..919f1750
--- /dev/null
+++ b/apps/web-ele/src/api/ai/write/index.ts
@@ -0,0 +1,95 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { AiWriteTypeEnum } from '#/utils';
+
+import { useAppConfig } from '@vben/hooks';
+import { fetchEventSource } from '@vben/request';
+import { useAccessStore } from '@vben/stores';
+
+import { requestClient } from '#/api/request';
+
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const accessStore = useAccessStore();
+export namespace AiWriteApi {
+  export interface Write {
+    type: AiWriteTypeEnum.REPLY | AiWriteTypeEnum.WRITING; // 1:撰写 2:回复
+    prompt: string; // 写作内容提示 1。撰写 2回复
+    originalContent: string; // 原文
+    length: number; // 长度
+    format: number; // 格式
+    tone: number; // 语气
+    language: number; // 语言
+    userId?: number; // 用户编号
+    platform?: string; // 平台
+    model?: string; // 模型
+    generatedContent?: string; // 生成的内容
+    errorMessage?: string; // 错误信息
+    createTime?: Date; // 创建时间
+  }
+
+  export interface AiWritePageReq extends PageParam {
+    userId?: number; // 用户编号
+    type?: AiWriteTypeEnum; //  写作类型
+    platform?: string; // 平台
+    createTime?: [string, string]; // 创建时间
+  }
+
+  export interface AiWriteResp {
+    id: number;
+    userId: number;
+    type: number;
+    platform: string;
+    model: string;
+    prompt: string;
+    generatedContent: string;
+    originalContent: string;
+    length: number;
+    format: number;
+    tone: number;
+    language: number;
+    errorMessage: string;
+    createTime: string;
+  }
+}
+
+export function writeStream({
+  data,
+  onClose,
+  onMessage,
+  onError,
+  ctrl,
+}: {
+  ctrl: AbortController;
+  data: Partial<AiWriteApi.Write>;
+  onClose?: (...args: any[]) => void;
+  onError?: (...args: any[]) => void;
+  onMessage?: (res: any) => void;
+}) {
+  const token = accessStore.accessToken;
+  return fetchEventSource(`${apiURL}/ai/write/generate-stream`, {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    openWhenHidden: true,
+    body: JSON.stringify(data),
+    onmessage: onMessage,
+    onerror: onError,
+    onclose: onClose,
+    signal: ctrl.signal,
+  });
+}
+
+// 获取写作列表
+export function getWritePage(params: any) {
+  return requestClient.get<PageResult<AiWriteApi.AiWritePageReq>>(
+    `/ai/write/page`,
+    { params },
+  );
+}
+
+// 删除音乐
+export function deleteWrite(id: number) {
+  return requestClient.delete(`/ai/write/delete`, { params: { id } });
+}
diff --git a/apps/web-ele/src/api/basic/productunit/index.ts b/apps/web-ele/src/api/basic/productunit/index.ts
new file mode 100644
index 00000000..e319f72f
--- /dev/null
+++ b/apps/web-ele/src/api/basic/productunit/index.ts
@@ -0,0 +1,59 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+// TODO @xingyu：貌似模块不对
+
+export namespace ProductUnitApi {
+  /** 产品单位信息 */
+  export interface ProductUnit {
+    id: number; // 编号
+    groupId?: number; // 分组编号
+    name?: string; // 单位名称
+    basic?: number; // 基础单位
+    number?: number; // 单位数量/相对于基础单位
+    usageType: number; // 用途
+  }
+}
+
+/** 查询产品单位分页 */
+export function getProductUnitPage(params: PageParam) {
+  return requestClient.get<PageResult<ProductUnitApi.ProductUnit>>(
+    '/basic/product-unit/page',
+    { params },
+  );
+}
+
+/** 查询产品单位详情 */
+export function getProductUnit(id: number) {
+  return requestClient.get<ProductUnitApi.ProductUnit>(
+    `/basic/product-unit/get?id=${id}`,
+  );
+}
+
+/** 新增产品单位 */
+export function createProductUnit(data: ProductUnitApi.ProductUnit) {
+  return requestClient.post('/basic/product-unit/create', data);
+}
+
+/** 修改产品单位 */
+export function updateProductUnit(data: ProductUnitApi.ProductUnit) {
+  return requestClient.put('/basic/product-unit/update', data);
+}
+
+/** 删除产品单位 */
+export function deleteProductUnit(id: number) {
+  return requestClient.delete(`/basic/product-unit/delete?id=${id}`);
+}
+
+/** 批量删除产品单位 */
+export function deleteProductUnitListByIds(ids: number[]) {
+  return requestClient.delete(
+    `/basic/product-unit/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出产品单位 */
+export function exportProductUnit(params: any) {
+  return requestClient.download('/basic/product-unit/export-excel', params);
+}
diff --git a/apps/web-ele/src/api/basic/productunitgroup/index.ts b/apps/web-ele/src/api/basic/productunitgroup/index.ts
new file mode 100644
index 00000000..aa033410
--- /dev/null
+++ b/apps/web-ele/src/api/basic/productunitgroup/index.ts
@@ -0,0 +1,63 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+// TODO @xingyu：貌似模块不对
+
+export namespace ProductUnitGroupApi {
+  /** 产品单位组信息 */
+  export interface ProductUnitGroup {
+    id: number; // 编号
+    name?: string; // 产品单位组名称
+    status?: number; // 开启状态
+  }
+}
+
+/** 查询产品单位组分页 */
+export function getProductUnitGroupPage(params: PageParam) {
+  return requestClient.get<PageResult<ProductUnitGroupApi.ProductUnitGroup>>(
+    '/basic/product-unit-group/page',
+    { params },
+  );
+}
+
+/** 查询产品单位组详情 */
+export function getProductUnitGroup(id: number) {
+  return requestClient.get<ProductUnitGroupApi.ProductUnitGroup>(
+    `/basic/product-unit-group/get?id=${id}`,
+  );
+}
+
+/** 新增产品单位组 */
+export function createProductUnitGroup(
+  data: ProductUnitGroupApi.ProductUnitGroup,
+) {
+  return requestClient.post('/basic/product-unit-group/create', data);
+}
+
+/** 修改产品单位组 */
+export function updateProductUnitGroup(
+  data: ProductUnitGroupApi.ProductUnitGroup,
+) {
+  return requestClient.put('/basic/product-unit-group/update', data);
+}
+
+/** 删除产品单位组 */
+export function deleteProductUnitGroup(id: number) {
+  return requestClient.delete(`/basic/product-unit-group/delete?id=${id}`);
+}
+
+/** 批量删除产品单位组 */
+export function deleteProductUnitGroupListByIds(ids: number[]) {
+  return requestClient.delete(
+    `/basic/product-unit-group/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出产品单位组 */
+export function exportProductUnitGroup(params: any) {
+  return requestClient.download(
+    '/basic/product-unit-group/export-excel',
+    params,
+  );
+}
diff --git a/apps/web-ele/src/api/bpm/category/index.ts b/apps/web-ele/src/api/bpm/category/index.ts
new file mode 100644
index 00000000..d8b5a9b3
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/category/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmCategoryApi {
+  /** 流程分类 */
+  export interface Category {
+    id: number;
+    name: string;
+    code: string;
+    status: number;
+    description?: string;
+    sort: number; // 分类排序
+  }
+}
+
+/** 查询流程分类分页 */
+export async function getCategoryPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmCategoryApi.Category>>(
+    '/bpm/category/page',
+    { params },
+  );
+}
+
+/** 查询流程分类详情 */
+export async function getCategory(id: number) {
+  return requestClient.get<BpmCategoryApi.Category>(
+    `/bpm/category/get?id=${id}`,
+  );
+}
+
+/** 新增流程分类 */
+export async function createCategory(data: BpmCategoryApi.Category) {
+  return requestClient.post<number>('/bpm/category/create', data);
+}
+
+/** 修改流程分类 */
+export async function updateCategory(data: BpmCategoryApi.Category) {
+  return requestClient.put<boolean>('/bpm/category/update', data);
+}
+
+/** 删除流程分类 */
+export async function deleteCategory(id: number) {
+  return requestClient.delete<boolean>(`/bpm/category/delete?id=${id}`);
+}
+
+/** 查询流程分类列表 */
+export async function getCategorySimpleList() {
+  return requestClient.get<BpmCategoryApi.Category[]>(
+    `/bpm/category/simple-list`,
+  );
+}
+
+/** 批量修改流程分类的排序 */
+export async function updateCategorySortBatch(ids: number[]) {
+  const params = ids.join(',');
+  return requestClient.put<boolean>(
+    `/bpm/category/update-sort-batch?ids=${params}`,
+  );
+}
diff --git a/apps/web-ele/src/api/bpm/definition/index.ts b/apps/web-ele/src/api/bpm/definition/index.ts
new file mode 100644
index 00000000..befd6065
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/definition/index.ts
@@ -0,0 +1,53 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmProcessDefinitionApi {
+  /** 流程定义 */
+  export interface ProcessDefinition {
+    id: string;
+    version: number;
+    deploymentTime: number;
+    suspensionState: number;
+    modelType: number;
+    modelId: string;
+    formType?: number;
+    bpmnXml?: string;
+    simpleModel?: string;
+    formFields?: string[];
+  }
+}
+
+/** 查询流程定义 */
+export async function getProcessDefinition(id?: string, key?: string) {
+  return requestClient.get<BpmProcessDefinitionApi.ProcessDefinition>(
+    '/bpm/process-definition/get',
+    {
+      params: { id, key },
+    },
+  );
+}
+
+/** 分页查询流程定义 */
+export async function getProcessDefinitionPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<BpmProcessDefinitionApi.ProcessDefinition>
+  >('/bpm/process-definition/page', { params });
+}
+
+/** 查询流程定义列表 */
+export async function getProcessDefinitionList(params: any) {
+  return requestClient.get<BpmProcessDefinitionApi.ProcessDefinition[]>(
+    '/bpm/process-definition/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询流程定义列表（简单列表） */
+export async function getSimpleProcessDefinitionList() {
+  return requestClient.get<
+    PageResult<BpmProcessDefinitionApi.ProcessDefinition>
+  >('/bpm/process-definition/simple-list');
+}
diff --git a/apps/web-ele/src/api/bpm/form/index.ts b/apps/web-ele/src/api/bpm/form/index.ts
new file mode 100644
index 00000000..0789071b
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/form/index.ts
@@ -0,0 +1,48 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmFormApi {
+  /** 流程表单 */
+  export interface Form {
+    id?: number | undefined;
+    name: string;
+    conf: string;
+    fields: string[];
+    status: number;
+    remark: string;
+    createTime: number;
+  }
+}
+
+/** 获取表单分页列表 */
+export async function getFormPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmFormApi.Form>>('/bpm/form/page', {
+    params,
+  });
+}
+
+/** 获取表单详情 */
+export async function getFormDetail(id: number) {
+  return requestClient.get<BpmFormApi.Form>(`/bpm/form/get?id=${id}`);
+}
+
+/** 创建表单 */
+export async function createForm(data: BpmFormApi.Form) {
+  return requestClient.post('/bpm/form/create', data);
+}
+
+/** 更新表单 */
+export async function updateForm(data: BpmFormApi.Form) {
+  return requestClient.put('/bpm/form/update', data);
+}
+
+/** 删除表单 */
+export async function deleteForm(id: number) {
+  return requestClient.delete(`/bpm/form/delete?id=${id}`);
+}
+
+/** 获取表单简单列表 */
+export async function getFormSimpleList() {
+  return requestClient.get<BpmFormApi.Form[]>('/bpm/form/simple-list');
+}
diff --git a/apps/web-ele/src/api/bpm/model/index.ts b/apps/web-ele/src/api/bpm/model/index.ts
new file mode 100644
index 00000000..443b85c5
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/model/index.ts
@@ -0,0 +1,111 @@
+import { requestClient } from '#/api/request';
+
+export namespace BpmModelApi {
+  /** 用户信息 TODO 这个是不是可以抽取出来定义在公共模块 */
+  // TODO @芋艿：一起看看。
+  export interface UserInfo {
+    id: number;
+    nickname: string;
+    avatar?: string;
+    deptId?: number;
+    deptName?: string;
+  }
+
+  /** 流程定义 */
+  export interface ProcessDefinition {
+    id: string;
+    key?: string;
+    version: number;
+    deploymentTime: number;
+    suspensionState: number;
+    formType?: number;
+    formCustomViewPath?: string;
+  }
+
+  /** 流程模型 */
+  export interface Model {
+    id: number;
+    key: string;
+    name: string;
+    icon?: string;
+    description: string;
+    category: string;
+    formName: string;
+    formType: number;
+    formId: number;
+    formCustomCreatePath: string;
+    formCustomViewPath: string;
+    processDefinition: ProcessDefinition;
+    status: number;
+    remark: string;
+    createTime: string;
+    bpmnXml: string;
+    startUsers?: UserInfo[];
+  }
+}
+
+/** 模型分类信息 */
+export interface ModelCategoryInfo {
+  id: number;
+  name: string;
+  modelList: BpmModelApi.Model[];
+}
+
+/** 获取流程模型列表 */
+export async function getModelList(name: string | undefined) {
+  return requestClient.get<BpmModelApi.Model[]>('/bpm/model/list', {
+    params: { name },
+  });
+}
+
+/** 获取流程模型详情 */
+export async function getModel(id: string) {
+  return requestClient.get<BpmModelApi.Model>(`/bpm/model/get?id=${id}`);
+}
+
+/** 更新流程模型 */
+export async function updateModel(data: BpmModelApi.Model) {
+  return requestClient.put('/bpm/model/update', data);
+}
+
+/** 批量修改流程模型排序 */
+export async function updateModelSortBatch(ids: number[]) {
+  const params = ids.join(',');
+  return requestClient.put<boolean>(
+    `/bpm/model/update-sort-batch?ids=${params}`,
+  );
+}
+
+/** 更新流程模型的 BPMN XML */
+export async function updateModelBpmn(data: BpmModelApi.Model) {
+  return requestClient.put('/bpm/model/update-bpmn', data);
+}
+
+/** 更新流程模型状态 */
+export async function updateModelState(id: number, state: number) {
+  const data = {
+    id,
+    state,
+  };
+  return requestClient.put('/bpm/model/update-state', data);
+}
+
+/** 创建流程模型 */
+export async function createModel(data: BpmModelApi.Model) {
+  return requestClient.post('/bpm/model/create', data);
+}
+
+/** 删除流程模型 */
+export async function deleteModel(id: number) {
+  return requestClient.delete(`/bpm/model/delete?id=${id}`);
+}
+
+/** 部署流程模型 */
+export async function deployModel(id: number) {
+  return requestClient.post(`/bpm/model/deploy?id=${id}`);
+}
+
+/** 清理流程模型 */
+export async function cleanModel(id: number) {
+  return requestClient.delete(`/bpm/model/clean?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/bpm/oa/leave/index.ts b/apps/web-ele/src/api/bpm/oa/leave/index.ts
new file mode 100644
index 00000000..b1afbd25
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/oa/leave/index.ts
@@ -0,0 +1,40 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmOALeaveApi {
+  export interface Leave {
+    id: number;
+    status: number;
+    type: number;
+    reason: string;
+    processInstanceId: string;
+    startTime: number;
+    endTime: number;
+    createTime: Date;
+    startUserSelectAssignees?: Record<string, string[]>;
+  }
+}
+
+/** 创建请假申请 */
+export async function createLeave(data: BpmOALeaveApi.Leave) {
+  return requestClient.post('/bpm/oa/leave/create', data);
+}
+
+/** 更新请假申请 */
+export async function updateLeave(data: BpmOALeaveApi.Leave) {
+  return requestClient.post('/bpm/oa/leave/update', data);
+}
+
+/** 获得请假申请 */
+export async function getLeave(id: number) {
+  return requestClient.get<BpmOALeaveApi.Leave>(`/bpm/oa/leave/get?id=${id}`);
+}
+
+/** 获得请假申请分页 */
+export async function getLeavePage(params: PageParam) {
+  return requestClient.get<PageResult<BpmOALeaveApi.Leave>>(
+    '/bpm/oa/leave/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/bpm/processExpression/index.ts b/apps/web-ele/src/api/bpm/processExpression/index.ts
new file mode 100644
index 00000000..ee90d758
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/processExpression/index.ts
@@ -0,0 +1,53 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmProcessExpressionApi {
+  /** 流程表达式 */
+  export interface ProcessExpression {
+    id: number; // 编号
+    name: string; // 表达式名字
+    status: number; // 表达式状态
+    expression: string; // 表达式
+  }
+}
+
+/** 查询流程表达式分页 */
+export async function getProcessExpressionPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<BpmProcessExpressionApi.ProcessExpression>
+  >('/bpm/process-expression/page', { params });
+}
+
+/** 查询流程表达式详情 */
+export async function getProcessExpression(id: number) {
+  return requestClient.get<BpmProcessExpressionApi.ProcessExpression>(
+    `/bpm/process-expression/get?id=${id}`,
+  );
+}
+
+/** 新增流程表达式 */
+export async function createProcessExpression(
+  data: BpmProcessExpressionApi.ProcessExpression,
+) {
+  return requestClient.post<number>('/bpm/process-expression/create', data);
+}
+
+/** 修改流程表达式 */
+export async function updateProcessExpression(
+  data: BpmProcessExpressionApi.ProcessExpression,
+) {
+  return requestClient.put<boolean>('/bpm/process-expression/update', data);
+}
+
+/** 删除流程表达式 */
+export async function deleteProcessExpression(id: number) {
+  return requestClient.delete<boolean>(
+    `/bpm/process-expression/delete?id=${id}`,
+  );
+}
+
+/** 导出流程表达式 */
+export async function exportProcessExpression(params: any) {
+  return requestClient.download('/bpm/process-expression/export-excel', params);
+}
diff --git a/apps/web-ele/src/api/bpm/processInstance/index.ts b/apps/web-ele/src/api/bpm/processInstance/index.ts
new file mode 100644
index 00000000..0550b595
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/processInstance/index.ts
@@ -0,0 +1,197 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { BpmTaskApi } from '../task';
+
+import type { BpmModelApi } from '#/api/bpm/model';
+import type { BpmCandidateStrategyEnum, BpmNodeTypeEnum } from '#/utils';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmProcessInstanceApi {
+  // TODO @芋艿：一些注释缺少或者不对；
+  export interface Task {
+    id: number;
+    name: string;
+  }
+
+  export interface User {
+    avatar: string;
+    id: number;
+    nickname: string;
+  }
+
+  // 审批任务信息
+  export interface ApprovalTaskInfo {
+    assigneeUser: User;
+    id: number;
+    ownerUser: User;
+    reason: string;
+    signPicUrl: string;
+    status: number;
+  }
+
+  // 审批节点信息
+  export interface ApprovalNodeInfo {
+    candidateStrategy?: BpmCandidateStrategyEnum;
+    candidateUsers?: User[];
+    endTime?: Date;
+    id: number;
+    name: string;
+    nodeType: BpmNodeTypeEnum;
+    startTime?: Date;
+    status: number;
+    tasks: ApprovalTaskInfo[];
+  }
+
+  /** 流程实例 */
+  export interface ProcessInstance {
+    businessKey: string;
+    category: string;
+    createTime: string;
+    endTime: string;
+    fields: string[];
+    formVariables: Record<string, any>;
+    id: number;
+    name: string;
+    processDefinition?: BpmModelApi.ProcessDefinition;
+    processDefinitionId: string;
+    remark: string;
+    result: number;
+    startTime?: Date;
+    startUser?: User;
+    status: number;
+    tasks?: BpmProcessInstanceApi.Task[];
+  }
+
+  // 审批详情
+  export interface ApprovalDetail {
+    activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
+    formFieldsPermission: any;
+    processDefinition: BpmModelApi.ProcessDefinition;
+    processInstance: BpmProcessInstanceApi.ProcessInstance;
+    status: number;
+    todoTask: BpmTaskApi.Task;
+  }
+
+  // 抄送流程实例
+  export interface Copy {
+    activityId: string;
+    activityName: string;
+    createTime: number;
+    createUser: User;
+    id: number;
+    processInstanceId: string;
+    processInstanceName: string;
+    processInstanceStartTime: number;
+    reason: string;
+    startUser: User;
+    summary: {
+      key: string;
+      value: string;
+    }[];
+    taskId: string;
+  }
+}
+
+/** 查询我的流程实例分页 */
+export async function getProcessInstanceMyPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmProcessInstanceApi.ProcessInstance>>(
+    '/bpm/process-instance/my-page',
+    { params },
+  );
+}
+
+/** 查询管理员流程实例分页 */
+export async function getProcessInstanceManagerPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmProcessInstanceApi.ProcessInstance>>(
+    '/bpm/process-instance/manager-page',
+    { params },
+  );
+}
+
+/** 新增流程实例 */
+export async function createProcessInstance(data: any) {
+  return requestClient.post<BpmProcessInstanceApi.ProcessInstance>(
+    '/bpm/process-instance/create',
+    data,
+  );
+}
+
+/** 申请人主动取消流程实例 */
+export async function cancelProcessInstanceByStartUser(
+  id: number,
+  reason: string,
+) {
+  return requestClient.delete<boolean>(
+    '/bpm/process-instance/cancel-by-start-user',
+    {
+      data: { id, reason },
+    },
+  );
+}
+
+/** 管理员取消流程实例 */
+export async function cancelProcessInstanceByAdmin(id: number, reason: string) {
+  return requestClient.delete<boolean>(
+    '/bpm/process-instance/cancel-by-admin',
+    {
+      data: { id, reason },
+    },
+  );
+}
+
+/** 查询流程实例详情 */
+export async function getProcessInstance(id: number) {
+  return requestClient.get<BpmProcessInstanceApi.ProcessInstance>(
+    `/bpm/process-instance/get?id=${id}`,
+  );
+}
+
+/** 查询复制流程实例分页 */
+export async function getProcessInstanceCopyPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmProcessInstanceApi.ProcessInstance>>(
+    '/bpm/process-instance/copy/page',
+    { params },
+  );
+}
+
+/** 更新流程实例 */
+export async function updateProcessInstance(
+  data: BpmProcessInstanceApi.ProcessInstance,
+) {
+  return requestClient.put<BpmProcessInstanceApi.ProcessInstance>(
+    '/bpm/process-instance/update',
+    data,
+  );
+}
+
+/** 获取审批详情 */
+export async function getApprovalDetail(params: any) {
+  return requestClient.get<BpmProcessInstanceApi.ApprovalDetail>(
+    `/bpm/process-instance/get-approval-detail`,
+    { params },
+  );
+}
+
+/** 获取下一个执行的流程节点 */
+export async function getNextApprovalNodes(params: any) {
+  return requestClient.get<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
+    `/bpm/process-instance/get-next-approval-nodes`,
+    { params },
+  );
+}
+
+/** 获取表单字段权限 */
+export async function getFormFieldsPermission(params: any) {
+  return requestClient.get<BpmProcessInstanceApi.ProcessInstance>(
+    `/bpm/process-instance/get-form-fields-permission`,
+    { params },
+  );
+}
+
+/** 获取流程实例 BPMN 模型视图 */
+export async function getProcessInstanceBpmnModelView(id: string) {
+  return requestClient.get<BpmProcessInstanceApi.ProcessInstance>(
+    `/bpm/process-instance/get-bpmn-model-view?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/bpm/processListener/index.ts b/apps/web-ele/src/api/bpm/processListener/index.ts
new file mode 100644
index 00000000..df5ba378
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/processListener/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmProcessListenerApi {
+  /** BPM 流程监听器 */
+  export interface ProcessListener {
+    id: number; // 编号
+    name: string; // 监听器名字
+    type: string; // 监听器类型
+    status: number; // 监听器状态
+    event: string; // 监听事件
+    valueType: string; // 监听器值类型
+    value: string; // 监听器值
+  }
+}
+
+/** 查询流程监听器分页 */
+export async function getProcessListenerPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmProcessListenerApi.ProcessListener>>(
+    '/bpm/process-listener/page',
+    { params },
+  );
+}
+
+/** 查询流程监听器详情 */
+export async function getProcessListener(id: number) {
+  return requestClient.get<BpmProcessListenerApi.ProcessListener>(
+    `/bpm/process-listener/get?id=${id}`,
+  );
+}
+
+/** 新增流程监听器 */
+export async function createProcessListener(
+  data: BpmProcessListenerApi.ProcessListener,
+) {
+  return requestClient.post<number>('/bpm/process-listener/create', data);
+}
+
+/** 修改流程监听器 */
+export async function updateProcessListener(
+  data: BpmProcessListenerApi.ProcessListener,
+) {
+  return requestClient.put<boolean>('/bpm/process-listener/update', data);
+}
+
+/** 删除流程监听器 */
+export async function deleteProcessListener(id: number) {
+  return requestClient.delete<boolean>(`/bpm/process-listener/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/bpm/task/index.ts b/apps/web-ele/src/api/bpm/task/index.ts
new file mode 100644
index 00000000..510ea174
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/task/index.ts
@@ -0,0 +1,132 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { BpmProcessInstanceApi } from '../processInstance';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmTaskApi {
+  /** BPM 流程监听器 */
+  export interface Task {
+    id: number; // 编号
+    name: string; // 监听器名字
+    type: string; // 监听器类型
+    status: number; // 监听器状态
+    event: string; // 监听事件
+    valueType: string; // 监听器值类型
+  }
+
+  // 流程任务
+  export interface TaskManager {
+    id: string; // 编号
+    name: string; // 任务名称
+    createTime: number; // 创建时间
+    endTime: number; // 结束时间
+    durationInMillis: number; // 持续时间
+    status: number; // 状态
+    reason: string; // 原因
+    ownerUser: any; // 负责人
+    assigneeUser: any; // 处理人
+    taskDefinitionKey: string; // 任务定义key
+    processInstanceId: string; // 流程实例id
+    processInstance: BpmProcessInstanceApi.ProcessInstance; // 流程实例
+    parentTaskId: any; // 父任务id
+    children: any; // 子任务
+    formId: any; // 表单id
+    formName: any; // 表单名称
+    formConf: any; // 表单配置
+    formFields: any; // 表单字段
+    formVariables: any; // 表单变量
+    buttonsSetting: any; // 按钮设置
+    signEnable: any; // 签名设置
+    reasonRequire: any; // 原因设置
+    nodeType: any; // 节点类型
+  }
+}
+
+/** 查询待办任务分页 */
+export async function getTaskTodoPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmTaskApi.Task>>('/bpm/task/todo-page', {
+    params,
+  });
+}
+
+/** 查询已办任务分页 */
+export async function getTaskDonePage(params: PageParam) {
+  return requestClient.get<PageResult<BpmTaskApi.Task>>('/bpm/task/done-page', {
+    params,
+  });
+}
+
+/** 查询任务管理分页 */
+export async function getTaskManagerPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmTaskApi.Task>>(
+    '/bpm/task/manager-page',
+    { params },
+  );
+}
+
+/** 审批任务 */
+export const approveTask = async (data: any) => {
+  return await requestClient.put('/bpm/task/approve', data);
+};
+
+/** 驳回任务 */
+export const rejectTask = async (data: any) => {
+  return await requestClient.put('/bpm/task/reject', data);
+};
+
+/** 根据流程实例 ID 查询任务列表 */
+export const getTaskListByProcessInstanceId = async (id: string) => {
+  return await requestClient.get(
+    `/bpm/task/list-by-process-instance-id?processInstanceId=${id}`,
+  );
+};
+
+/** 获取所有可退回的节点 */
+export const getTaskListByReturn = async (id: string) => {
+  return await requestClient.get(`/bpm/task/list-by-return?id=${id}`);
+};
+
+/** 退回 */
+export const returnTask = async (data: any) => {
+  return await requestClient.put('/bpm/task/return', data);
+};
+
+// 委派
+export const delegateTask = async (data: any) => {
+  return await requestClient.put('/bpm/task/delegate', data);
+};
+
+// 转派
+export const transferTask = async (data: any) => {
+  return await requestClient.put('/bpm/task/transfer', data);
+};
+
+// 加签
+export const signCreateTask = async (data: any) => {
+  return await requestClient.put('/bpm/task/create-sign', data);
+};
+
+// 减签
+export const signDeleteTask = async (data: any) => {
+  return await requestClient.delete('/bpm/task/delete-sign', data);
+};
+
+// 抄送
+export const copyTask = async (data: any) => {
+  return await requestClient.put('/bpm/task/copy', data);
+};
+
+// 获取我的待办任务
+export const myTodoTask = async (processInstanceId: string) => {
+  return await requestClient.get(
+    `/bpm/task/my-todo?processInstanceId=${processInstanceId}`,
+  );
+};
+
+// 获取加签任务列表
+export const getChildrenTaskList = async (id: string) => {
+  return await requestClient.get(
+    `/bpm/task/list-by-parent-task-id?parentTaskId=${id}`,
+  );
+};
diff --git a/apps/web-ele/src/api/bpm/userGroup/index.ts b/apps/web-ele/src/api/bpm/userGroup/index.ts
new file mode 100644
index 00000000..9e8f9a1b
--- /dev/null
+++ b/apps/web-ele/src/api/bpm/userGroup/index.ts
@@ -0,0 +1,53 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace BpmUserGroupApi {
+  /** BPM 用户组 */
+  export interface UserGroup {
+    id: number;
+    name: string;
+    description: string;
+    userIds: number[];
+    status: number;
+    remark: string;
+    createTime: string;
+  }
+}
+
+/** 查询用户组分页 */
+export async function getUserGroupPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmUserGroupApi.UserGroup>>(
+    '/bpm/user-group/page',
+    { params },
+  );
+}
+
+/** 查询用户组详情 */
+export async function getUserGroup(id: number) {
+  return requestClient.get<BpmUserGroupApi.UserGroup>(
+    `/bpm/user-group/get?id=${id}`,
+  );
+}
+
+/** 新增用户组 */
+export async function createUserGroup(data: BpmUserGroupApi.UserGroup) {
+  return requestClient.post<number>('/bpm/user-group/create', data);
+}
+
+/** 修改用户组 */
+export async function updateUserGroup(data: BpmUserGroupApi.UserGroup) {
+  return requestClient.put<boolean>('/bpm/user-group/update', data);
+}
+
+/** 删除用户组 */
+export async function deleteUserGroup(id: number) {
+  return requestClient.delete<boolean>(`/bpm/user-group/delete?id=${id}`);
+}
+
+/** 查询用户组列表 */
+export async function getUserGroupSimpleList() {
+  return requestClient.get<BpmUserGroupApi.UserGroup[]>(
+    `/bpm/user-group/simple-list`,
+  );
+}
diff --git a/apps/web-ele/src/api/crm/business/index.ts b/apps/web-ele/src/api/crm/business/index.ts
new file mode 100644
index 00000000..a1ff09e6
--- /dev/null
+++ b/apps/web-ele/src/api/crm/business/index.ts
@@ -0,0 +1,125 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmBusinessApi {
+  /** 商机产品信息 */
+  export interface BusinessProduct {
+    id: number;
+    productId: number;
+    productName: string;
+    productNo: string;
+    productUnit: number;
+    productPrice: number;
+    businessPrice: number;
+    count: number;
+    totalPrice: number;
+  }
+
+  /** 商机信息 */
+  export interface Business {
+    id: number;
+    name: string;
+    customerId: number;
+    customerName?: string;
+    followUpStatus: boolean;
+    contactLastTime: Date;
+    contactNextTime: Date;
+    ownerUserId: number;
+    ownerUserName?: string; // 负责人的用户名称
+    ownerUserDept?: string; // 负责人的部门名称
+    statusTypeId: number;
+    statusTypeName?: string;
+    statusId: number;
+    statusName?: string;
+    endStatus: number;
+    endRemark: string;
+    dealTime: Date;
+    totalProductPrice: number;
+    totalPrice: number;
+    discountPercent: number;
+    status?: number;
+    remark: string;
+    creator: string; // 创建人
+    creatorName?: string; // 创建人名称
+    createTime: Date; // 创建时间
+    updateTime: Date; // 更新时间
+    products?: BusinessProduct[];
+  }
+
+  export interface BusinessStatus {
+    id: number;
+    statusId: number | undefined;
+    endStatus: number | undefined;
+  }
+}
+
+/** 查询商机列表 */
+export function getBusinessPage(params: PageParam) {
+  return requestClient.get<PageResult<CrmBusinessApi.Business>>(
+    '/crm/business/page',
+    { params },
+  );
+}
+
+/** 查询商机列表，基于指定客户 */
+export function getBusinessPageByCustomer(params: PageParam) {
+  return requestClient.get<PageResult<CrmBusinessApi.Business>>(
+    '/crm/business/page-by-customer',
+    { params },
+  );
+}
+
+/** 查询商机详情 */
+export function getBusiness(id: number) {
+  return requestClient.get<CrmBusinessApi.Business>(
+    `/crm/business/get?id=${id}`,
+  );
+}
+
+/** 获得商机列表（精简） */
+export function getSimpleBusinessList() {
+  return requestClient.get<CrmBusinessApi.Business[]>(
+    '/crm/business/simple-all-list',
+  );
+}
+
+/** 新增商机 */
+export function createBusiness(data: CrmBusinessApi.Business) {
+  return requestClient.post('/crm/business/create', data);
+}
+
+/** 修改商机 */
+export function updateBusiness(data: CrmBusinessApi.Business) {
+  return requestClient.put('/crm/business/update', data);
+}
+
+/** 修改商机状态 */
+export function updateBusinessStatus(data: CrmBusinessApi.BusinessStatus) {
+  return requestClient.put('/crm/business/update-status', data);
+}
+
+/** 删除商机 */
+export function deleteBusiness(id: number) {
+  return requestClient.delete(`/crm/business/delete?id=${id}`);
+}
+
+/** 导出商机 */
+export function exportBusiness(params: any) {
+  return requestClient.download('/crm/business/export-excel', params);
+}
+
+/** 联系人关联商机列表 */
+export function getBusinessPageByContact(params: PageParam) {
+  return requestClient.get<PageResult<CrmBusinessApi.Business>>(
+    '/crm/business/page-by-contact',
+    { params },
+  );
+}
+
+/** 商机转移 */
+export function transferBusiness(data: CrmPermissionApi.TransferReq) {
+  return requestClient.put('/crm/business/transfer', data);
+}
diff --git a/apps/web-ele/src/api/crm/business/status/index.ts b/apps/web-ele/src/api/crm/business/status/index.ts
new file mode 100644
index 00000000..00001feb
--- /dev/null
+++ b/apps/web-ele/src/api/crm/business/status/index.ts
@@ -0,0 +1,95 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmBusinessStatusApi {
+  /** 商机状态信息 */
+  export interface BusinessStatusType {
+    [x: string]: any;
+    id?: number;
+    name: string;
+    percent: number;
+  }
+
+  /** 商机状态组信息 */
+  export interface BusinessStatus {
+    id?: number;
+    name: string;
+    deptIds?: number[];
+    deptNames?: string[];
+    creator?: string;
+    createTime?: Date;
+    statuses?: BusinessStatusType[];
+  }
+}
+
+/** 默认商机状态 */
+export const DEFAULT_STATUSES = [
+  {
+    endStatus: 1,
+    key: '结束',
+    name: '赢单',
+    percent: 100,
+  },
+  {
+    endStatus: 2,
+    key: '结束',
+    name: '输单',
+    percent: 0,
+  },
+  {
+    endStatus: 3,
+    key: '结束',
+    name: '无效',
+    percent: 0,
+  },
+];
+
+/** 查询商机状态组列表 */
+export function getBusinessStatusPage(params: PageParam) {
+  return requestClient.get<PageResult<CrmBusinessStatusApi.BusinessStatus>>(
+    '/crm/business-status/page',
+    { params },
+  );
+}
+
+/** 新增商机状态组 */
+export function createBusinessStatus(
+  data: CrmBusinessStatusApi.BusinessStatus,
+) {
+  return requestClient.post('/crm/business-status/create', data);
+}
+
+/** 修改商机状态组 */
+export function updateBusinessStatus(
+  data: CrmBusinessStatusApi.BusinessStatus,
+) {
+  return requestClient.put('/crm/business-status/update', data);
+}
+
+/** 查询商机状态类型详情 */
+export function getBusinessStatus(id: number) {
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatus>(
+    `/crm/business-status/get?id=${id}`,
+  );
+}
+
+/** 删除商机状态 */
+export function deleteBusinessStatus(id: number) {
+  return requestClient.delete(`/crm/business-status/delete?id=${id}`);
+}
+
+/** 获得商机状态组列表 */
+export function getBusinessStatusTypeSimpleList() {
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatus[]>(
+    '/crm/business-status/type-simple-list',
+  );
+}
+
+/** 获得商机阶段列表 */
+export function getBusinessStatusSimpleList(typeId: number) {
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatusType[]>(
+    '/crm/business-status/status-simple-list',
+    { params: { typeId } },
+  );
+}
diff --git a/apps/web-ele/src/api/crm/clue/index.ts b/apps/web-ele/src/api/crm/clue/index.ts
new file mode 100644
index 00000000..a3a378b6
--- /dev/null
+++ b/apps/web-ele/src/api/crm/clue/index.ts
@@ -0,0 +1,86 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmClueApi {
+  /** 线索信息 */
+  export interface Clue {
+    id: number; // 编号
+    name: string; // 线索名称
+    followUpStatus: boolean; // 跟进状态
+    contactLastTime: Date; // 最后跟进时间
+    contactLastContent: string; // 最后跟进内容
+    contactNextTime: Date; // 下次联系时间
+    ownerUserId: number; // 负责人的用户编号
+    ownerUserName?: string; // 负责人的用户名称
+    ownerUserDept?: string; // 负责人的部门名称
+    transformStatus: boolean; // 转化状态
+    customerId: number; // 客户编号
+    customerName?: string; // 客户名称
+    mobile: string; // 手机号
+    telephone: string; // 电话
+    qq: string; // QQ
+    wechat: string; // wechat
+    email: string; // email
+    areaId: number; // 所在地
+    areaName?: string; // 所在地名称
+    detailAddress: string; // 详细地址
+    industryId: number; // 所属行业
+    level: number; // 客户等级
+    source: number; // 客户来源
+    remark: string; // 备注
+    creator: string; // 创建人
+    creatorName?: string; // 创建人名称
+    createTime: Date; // 创建时间
+    updateTime: Date; // 更新时间
+  }
+}
+
+/** 查询线索列表 */
+export function getCluePage(params: PageParam) {
+  return requestClient.get<PageResult<CrmClueApi.Clue>>('/crm/clue/page', {
+    params,
+  });
+}
+
+/** 查询线索详情 */
+export function getClue(id: number) {
+  return requestClient.get<CrmClueApi.Clue>(`/crm/clue/get?id=${id}`);
+}
+
+/** 新增线索 */
+export function createClue(data: CrmClueApi.Clue) {
+  return requestClient.post('/crm/clue/create', data);
+}
+
+/** 修改线索 */
+export function updateClue(data: CrmClueApi.Clue) {
+  return requestClient.put('/crm/clue/update', data);
+}
+
+/** 删除线索 */
+export function deleteClue(id: number) {
+  return requestClient.delete(`/crm/clue/delete?id=${id}`);
+}
+
+/** 导出线索 */
+export function exportClue(params: any) {
+  return requestClient.download('/crm/clue/export-excel', params);
+}
+
+/** 线索转移 */
+export function transferClue(data: CrmPermissionApi.TransferReq) {
+  return requestClient.put('/crm/clue/transfer', data);
+}
+
+/** 线索转化为客户 */
+export function transformClue(id: number) {
+  return requestClient.put(`/crm/clue/transform?id=${id}`);
+}
+
+/** 获得分配给我的、待跟进的线索数量 */
+export function getFollowClueCount() {
+  return requestClient.get<number>('/crm/clue/follow-count');
+}
diff --git a/apps/web-ele/src/api/crm/contact/index.ts b/apps/web-ele/src/api/crm/contact/index.ts
new file mode 100644
index 00000000..62b5235b
--- /dev/null
+++ b/apps/web-ele/src/api/crm/contact/index.ts
@@ -0,0 +1,140 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmContactApi {
+  /** 联系人信息 */
+  export interface Contact {
+    id: number; // 编号
+    name: string; // 联系人名称
+    customerId: number; // 客户编号
+    customerName?: string; // 客户名称
+    contactLastTime: Date; // 最后跟进时间
+    contactLastContent: string; // 最后跟进内容
+    contactNextTime: Date; // 下次联系时间
+    ownerUserId: number; // 负责人的用户编号
+    ownerUserName?: string; // 负责人的用户名称
+    ownerUserDept?: string; // 负责人的部门名称
+    mobile: string; // 手机号
+    telephone: string; // 电话
+    qq: string; // QQ
+    wechat: string; // wechat
+    email: string; // email
+    areaId: number; // 所在地
+    areaName?: string; // 所在地名称
+    detailAddress: string; // 详细地址
+    sex: number; // 性别
+    master: boolean; // 是否主联系人
+    post: string; // 职务
+    parentId: number; // 上级联系人编号
+    parentName?: string; // 上级联系人名称
+    remark: string; // 备注
+    creator: string; // 创建人
+    creatorName?: string; // 创建人名称
+    createTime: Date; // 创建时间
+    updateTime: Date; // 更新时间
+  }
+
+  /** 联系人商机关联请求 */
+  export interface ContactBusinessReq {
+    contactId: number;
+    businessIds: number[];
+  }
+
+  /** 商机联系人关联请求 */
+  export interface BusinessContactReq {
+    businessId: number;
+    contactIds: number[];
+  }
+}
+
+/** 查询联系人列表 */
+export function getContactPage(params: PageParam) {
+  return requestClient.get<PageResult<CrmContactApi.Contact>>(
+    '/crm/contact/page',
+    { params },
+  );
+}
+
+/** 查询联系人列表，基于指定客户 */
+export function getContactPageByCustomer(params: PageParam) {
+  return requestClient.get<PageResult<CrmContactApi.Contact>>(
+    '/crm/contact/page-by-customer',
+    { params },
+  );
+}
+
+/** 查询联系人列表，基于指定商机 */
+export function getContactPageByBusiness(params: PageParam) {
+  return requestClient.get<PageResult<CrmContactApi.Contact>>(
+    '/crm/contact/page-by-business',
+    { params },
+  );
+}
+
+/** 查询联系人详情 */
+export function getContact(id: number) {
+  return requestClient.get<CrmContactApi.Contact>(`/crm/contact/get?id=${id}`);
+}
+
+/** 新增联系人 */
+export function createContact(data: CrmContactApi.Contact) {
+  return requestClient.post('/crm/contact/create', data);
+}
+
+/** 修改联系人 */
+export function updateContact(data: CrmContactApi.Contact) {
+  return requestClient.put('/crm/contact/update', data);
+}
+
+/** 删除联系人 */
+export function deleteContact(id: number) {
+  return requestClient.delete(`/crm/contact/delete?id=${id}`);
+}
+
+/** 导出联系人 */
+export function exportContact(params: any) {
+  return requestClient.download('/crm/contact/export-excel', params);
+}
+
+/** 获得联系人列表（精简） */
+export function getSimpleContactList() {
+  return requestClient.get<CrmContactApi.Contact[]>(
+    '/crm/contact/simple-all-list',
+  );
+}
+
+/** 批量新增联系人商机关联 */
+export function createContactBusinessList(
+  data: CrmContactApi.ContactBusinessReq,
+) {
+  return requestClient.post('/crm/contact/create-business-list', data);
+}
+
+/** 批量新增商机联系人关联 */
+export function createBusinessContactList(
+  data: CrmContactApi.BusinessContactReq,
+) {
+  return requestClient.post('/crm/contact/create-business-list2', data);
+}
+
+/** 解除联系人商机关联 */
+export function deleteContactBusinessList(
+  data: CrmContactApi.ContactBusinessReq,
+) {
+  return requestClient.delete('/crm/contact/delete-business-list', { data });
+}
+
+/** 解除商机联系人关联 */
+export function deleteBusinessContactList(
+  data: CrmContactApi.BusinessContactReq,
+) {
+  return requestClient.delete('/crm/contact/delete-business-list2', { data });
+}
+
+/** 联系人转移 */
+export function transferContact(data: CrmPermissionApi.TransferReq) {
+  return requestClient.put('/crm/contact/transfer', data);
+}
diff --git a/apps/web-ele/src/api/crm/contract/config/index.ts b/apps/web-ele/src/api/crm/contract/config/index.ts
new file mode 100644
index 00000000..09dbdfe1
--- /dev/null
+++ b/apps/web-ele/src/api/crm/contract/config/index.ts
@@ -0,0 +1,21 @@
+import { requestClient } from '#/api/request';
+
+export namespace CrmContractConfigApi {
+  /** 合同配置信息 */
+  export interface Config {
+    notifyEnabled?: boolean;
+    notifyDays?: number;
+  }
+}
+
+/** 获取合同配置 */
+export function getContractConfig() {
+  return requestClient.get<CrmContractConfigApi.Config>(
+    '/crm/contract-config/get',
+  );
+}
+
+/** 更新合同配置 */
+export function saveContractConfig(data: CrmContractConfigApi.Config) {
+  return requestClient.put('/crm/contract-config/save', data);
+}
diff --git a/apps/web-ele/src/api/crm/contract/index.ts b/apps/web-ele/src/api/crm/contract/index.ts
new file mode 100644
index 00000000..1ae165dd
--- /dev/null
+++ b/apps/web-ele/src/api/crm/contract/index.ts
@@ -0,0 +1,132 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmContractApi {
+  /** 合同产品信息 */
+  export interface ContractProduct {
+    id: number;
+    productId: number;
+    productName: string;
+    productNo: string;
+    productUnit: number;
+    productPrice: number;
+    contractPrice: number;
+    count: number;
+    totalPrice: number;
+  }
+
+  /** 合同信息 */
+  export interface Contract {
+    id: number;
+    name: string;
+    no: string;
+    customerId: number;
+    customerName?: string;
+    businessId: number;
+    businessName: string;
+    contactLastTime: Date;
+    ownerUserId: number;
+    ownerUserName?: string;
+    ownerUserDeptName?: string;
+    processInstanceId: number;
+    auditStatus: number;
+    orderDate: Date;
+    startTime: Date;
+    endTime: Date;
+    totalProductPrice: number;
+    discountPercent: number;
+    totalPrice: number;
+    totalReceivablePrice: number;
+    signContactId: number;
+    signContactName?: string;
+    signUserId: number;
+    signUserName: string;
+    remark: string;
+    createTime?: Date;
+    creator: string;
+    creatorName: string;
+    updateTime?: Date;
+    products?: ContractProduct[];
+  }
+}
+
+/** 查询合同列表 */
+export function getContractPage(params: PageParam) {
+  return requestClient.get<PageResult<CrmContractApi.Contract>>(
+    '/crm/contract/page',
+    { params },
+  );
+}
+
+/** 查询合同列表，基于指定客户 */
+export function getContractPageByCustomer(params: PageParam) {
+  return requestClient.get<PageResult<CrmContractApi.Contract>>(
+    '/crm/contract/page-by-customer',
+    { params },
+  );
+}
+
+/** 查询合同列表，基于指定商机 */
+export function getContractPageByBusiness(params: PageParam) {
+  return requestClient.get<PageResult<CrmContractApi.Contract>>(
+    '/crm/contract/page-by-business',
+    { params },
+  );
+}
+
+/** 查询合同详情 */
+export function getContract(id: number) {
+  return requestClient.get<CrmContractApi.Contract>(
+    `/crm/contract/get?id=${id}`,
+  );
+}
+
+/** 查询合同下拉列表 */
+export function getContractSimpleList(customerId: number) {
+  return requestClient.get<CrmContractApi.Contract[]>(
+    `/crm/contract/simple-list?customerId=${customerId}`,
+  );
+}
+
+/** 新增合同 */
+export function createContract(data: CrmContractApi.Contract) {
+  return requestClient.post('/crm/contract/create', data);
+}
+
+/** 修改合同 */
+export function updateContract(data: CrmContractApi.Contract) {
+  return requestClient.put('/crm/contract/update', data);
+}
+
+/** 删除合同 */
+export function deleteContract(id: number) {
+  return requestClient.delete(`/crm/contract/delete?id=${id}`);
+}
+
+/** 导出合同 */
+export function exportContract(params: any) {
+  return requestClient.download('/crm/contract/export-excel', params);
+}
+
+/** 提交审核 */
+export function submitContract(id: number) {
+  return requestClient.put(`/crm/contract/submit?id=${id}`);
+}
+
+/** 合同转移 */
+export function transferContract(data: CrmPermissionApi.TransferReq) {
+  return requestClient.put('/crm/contract/transfer', data);
+}
+
+/** 获得待审核合同数量 */
+export function getAuditContractCount() {
+  return requestClient.get<number>('/crm/contract/audit-count');
+}
+
+/** 获得即将到期（提醒）的合同数量 */
+export function getRemindContractCount() {
+  return requestClient.get<number>('/crm/contract/remind-count');
+}
diff --git a/apps/web-ele/src/api/crm/customer/index.ts b/apps/web-ele/src/api/crm/customer/index.ts
new file mode 100644
index 00000000..73b786b8
--- /dev/null
+++ b/apps/web-ele/src/api/crm/customer/index.ts
@@ -0,0 +1,150 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmCustomerApi {
+  /** 客户信息 */
+  export interface Customer {
+    id: number; // 编号
+    name: string; // 客户名称
+    followUpStatus: boolean; // 跟进状态
+    contactLastTime: Date; // 最后跟进时间
+    contactLastContent: string; // 最后跟进内容
+    contactNextTime: Date; // 下次联系时间
+    ownerUserId: number; // 负责人的用户编号
+    ownerUserName?: string; // 负责人的用户名称
+    ownerUserDept?: string; // 负责人的部门名称
+    lockStatus?: boolean;
+    dealStatus?: boolean;
+    mobile: string; // 手机号
+    telephone: string; // 电话
+    qq: string; // QQ
+    wechat: string; // wechat
+    email: string; // email
+    areaId: number; // 所在地
+    areaName?: string; // 所在地名称
+    detailAddress: string; // 详细地址
+    industryId: number; // 所属行业
+    level: number; // 客户等级
+    source: number; // 客户来源
+    remark: string; // 备注
+    creator: string; // 创建人
+    creatorName?: string; // 创建人名称
+    createTime: Date; // 创建时间
+    updateTime: Date; // 更新时间
+  }
+  export interface CustomerImport {
+    ownerUserId: number;
+    file: File;
+    updateSupport: boolean;
+  }
+}
+
+/** 查询客户列表 */
+export function getCustomerPage(params: PageParam) {
+  return requestClient.get<PageResult<CrmCustomerApi.Customer>>(
+    '/crm/customer/page',
+    { params },
+  );
+}
+
+/** 查询客户详情 */
+export function getCustomer(id: number) {
+  return requestClient.get<CrmCustomerApi.Customer>(
+    `/crm/customer/get?id=${id}`,
+  );
+}
+
+/** 新增客户 */
+export function createCustomer(data: CrmCustomerApi.Customer) {
+  return requestClient.post('/crm/customer/create', data);
+}
+
+/** 修改客户 */
+export function updateCustomer(data: CrmCustomerApi.Customer) {
+  return requestClient.put('/crm/customer/update', data);
+}
+
+/** 删除客户 */
+export function deleteCustomer(id: number) {
+  return requestClient.delete(`/crm/customer/delete?id=${id}`);
+}
+
+/** 导出客户 */
+export function exportCustomer(params: any) {
+  return requestClient.download('/crm/customer/export-excel', params);
+}
+
+/** 下载客户导入模板 */
+export function importCustomerTemplate() {
+  return requestClient.download('/crm/customer/get-import-template');
+}
+
+/** 导入客户 */
+export function importCustomer(data: CrmCustomerApi.CustomerImport) {
+  return requestClient.upload('/crm/customer/import', data);
+}
+
+/** 获取客户精简信息列表 */
+export function getCustomerSimpleList() {
+  return requestClient.get<CrmCustomerApi.Customer[]>(
+    '/crm/customer/simple-list',
+  );
+}
+
+/** 客户转移 */
+export function transferCustomer(data: CrmPermissionApi.TransferReq) {
+  return requestClient.put('/crm/customer/transfer', data);
+}
+
+/** 锁定/解锁客户 */
+export function lockCustomer(id: number, lockStatus: boolean) {
+  return requestClient.put('/crm/customer/lock', { id, lockStatus });
+}
+
+/** 领取公海客户 */
+export function receiveCustomer(ids: number[]) {
+  return requestClient.put('/crm/customer/receive', { ids: ids.join(',') });
+}
+
+/** 分配公海给对应负责人 */
+export function distributeCustomer(ids: number[], ownerUserId: number) {
+  return requestClient.put('/crm/customer/distribute', { ids, ownerUserId });
+}
+
+/** 客户放入公海 */
+export function putCustomerPool(id: number) {
+  return requestClient.put(`/crm/customer/put-pool?id=${id}`);
+}
+
+/** 更新客户的成交状态 */
+export function updateCustomerDealStatus(id: number, dealStatus: boolean) {
+  return requestClient.put(
+    `/crm/customer/update-deal-status?id=${id}&dealStatus=${dealStatus}`,
+  );
+}
+
+/** 进入公海客户提醒的客户列表 */
+export function getPutPoolRemindCustomerPage(params: PageParam) {
+  return requestClient.get<PageResult<CrmCustomerApi.Customer>>(
+    '/crm/customer/put-pool-remind-page',
+    { params },
+  );
+}
+
+/** 获得待进入公海客户数量 */
+export function getPutPoolRemindCustomerCount() {
+  return requestClient.get<number>('/crm/customer/put-pool-remind-count');
+}
+
+/** 获得今日需联系客户数量 */
+export function getTodayContactCustomerCount() {
+  return requestClient.get<number>('/crm/customer/today-contact-count');
+}
+
+/** 获得分配给我、待跟进的线索数量的客户数量 */
+export function getFollowCustomerCount() {
+  return requestClient.get<number>('/crm/customer/follow-count');
+}
diff --git a/apps/web-ele/src/api/crm/customer/limitConfig/index.ts b/apps/web-ele/src/api/crm/customer/limitConfig/index.ts
new file mode 100644
index 00000000..f99a35f3
--- /dev/null
+++ b/apps/web-ele/src/api/crm/customer/limitConfig/index.ts
@@ -0,0 +1,56 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmCustomerLimitConfigApi {
+  /** 客户限制配置 */
+  export interface CustomerLimitConfig {
+    id?: number;
+    type?: number;
+    userIds?: string;
+    deptIds?: string;
+    maxCount?: number;
+    dealCountEnabled?: boolean;
+  }
+}
+
+/** 客户限制配置类型 */
+export enum LimitConfType {
+  /** 锁定客户数限制 */
+  CUSTOMER_LOCK_LIMIT = 2,
+  /** 拥有客户数限制 */
+  CUSTOMER_QUANTITY_LIMIT = 1,
+}
+
+/** 查询客户限制配置列表 */
+export function getCustomerLimitConfigPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<CrmCustomerLimitConfigApi.CustomerLimitConfig>
+  >('/crm/customer-limit-config/page', { params });
+}
+
+/** 查询客户限制配置详情 */
+export function getCustomerLimitConfig(id: number) {
+  return requestClient.get<CrmCustomerLimitConfigApi.CustomerLimitConfig>(
+    `/crm/customer-limit-config/get?id=${id}`,
+  );
+}
+
+/** 新增客户限制配置 */
+export function createCustomerLimitConfig(
+  data: CrmCustomerLimitConfigApi.CustomerLimitConfig,
+) {
+  return requestClient.post('/crm/customer-limit-config/create', data);
+}
+
+/** 修改客户限制配置 */
+export function updateCustomerLimitConfig(
+  data: CrmCustomerLimitConfigApi.CustomerLimitConfig,
+) {
+  return requestClient.put('/crm/customer-limit-config/update', data);
+}
+
+/** 删除客户限制配置 */
+export function deleteCustomerLimitConfig(id: number) {
+  return requestClient.delete(`/crm/customer-limit-config/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/crm/customer/poolConfig/index.ts b/apps/web-ele/src/api/crm/customer/poolConfig/index.ts
new file mode 100644
index 00000000..ecb29707
--- /dev/null
+++ b/apps/web-ele/src/api/crm/customer/poolConfig/index.ts
@@ -0,0 +1,26 @@
+import { requestClient } from '#/api/request';
+
+export namespace CrmCustomerPoolConfigApi {
+  /** 客户公海规则设置 */
+  export interface CustomerPoolConfig {
+    enabled?: boolean;
+    contactExpireDays?: number;
+    dealExpireDays?: number;
+    notifyEnabled?: boolean;
+    notifyDays?: number;
+  }
+}
+
+/** 获取客户公海规则设置 */
+export function getCustomerPoolConfig() {
+  return requestClient.get<CrmCustomerPoolConfigApi.CustomerPoolConfig>(
+    '/crm/customer-pool-config/get',
+  );
+}
+
+/** 更新客户公海规则设置 */
+export function saveCustomerPoolConfig(
+  data: CrmCustomerPoolConfigApi.CustomerPoolConfig,
+) {
+  return requestClient.put('/crm/customer-pool-config/save', data);
+}
diff --git a/apps/web-ele/src/api/crm/followup/index.ts b/apps/web-ele/src/api/crm/followup/index.ts
new file mode 100644
index 00000000..361acdca
--- /dev/null
+++ b/apps/web-ele/src/api/crm/followup/index.ts
@@ -0,0 +1,53 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmFollowUpApi {
+  /** 关联商机信息 */
+  export interface Business {
+    id: number;
+    name: string;
+  }
+
+  /** 关联联系人信息 */
+  export interface Contact {
+    id: number;
+    name: string;
+  }
+
+  /** 跟进记录信息 */
+  export interface FollowUpRecord {
+    id: number; // 编号
+    bizType: number; // 数据类型
+    bizId: number; // 数据编号
+    type: number; // 跟进类型
+    content: string; // 跟进内容
+    picUrls: string[]; // 图片
+    fileUrls: string[]; // 附件
+    nextTime: Date; // 下次联系时间
+    businessIds: number[]; // 关联的商机编号数组
+    businesses: Business[]; // 关联的商机数组
+    contactIds: number[]; // 关联的联系人编号数组
+    contacts: Contact[]; // 关联的联系人数组
+    creator: string;
+    creatorName?: string;
+  }
+}
+
+/** 查询跟进记录分页 */
+export function getFollowUpRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<CrmFollowUpApi.FollowUpRecord>>(
+    '/crm/follow-up-record/page',
+    { params },
+  );
+}
+
+/** 新增跟进记录 */
+export function createFollowUpRecord(data: CrmFollowUpApi.FollowUpRecord) {
+  return requestClient.post('/crm/follow-up-record/create', data);
+}
+
+/** 删除跟进记录 */
+export function deleteFollowUpRecord(id: number) {
+  return requestClient.delete(`/crm/follow-up-record/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/crm/operateLog/index.ts b/apps/web-ele/src/api/crm/operateLog/index.ts
new file mode 100644
index 00000000..842dd0b1
--- /dev/null
+++ b/apps/web-ele/src/api/crm/operateLog/index.ts
@@ -0,0 +1,33 @@
+import type { PageResult } from '@vben/request';
+
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmOperateLogApi {
+  /** 操作日志查询参数 */
+  export interface OperateLogQuery {
+    bizType: number;
+    bizId: number;
+  }
+
+  /** 操作日志信息 */
+  export interface OperateLog {
+    id: number;
+    bizType: number;
+    bizId: number;
+    type: number;
+    content: string;
+    creator: string;
+    creatorName?: string;
+    createTime: Date;
+  }
+}
+
+/** 获得操作日志 */
+export function getOperateLogPage(params: CrmOperateLogApi.OperateLogQuery) {
+  return requestClient.get<PageResult<SystemOperateLogApi.OperateLog>>(
+    '/crm/operate-log/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/crm/permission/index.ts b/apps/web-ele/src/api/crm/permission/index.ts
new file mode 100644
index 00000000..7322ee1e
--- /dev/null
+++ b/apps/web-ele/src/api/crm/permission/index.ts
@@ -0,0 +1,82 @@
+import { requestClient } from '#/api/request';
+
+export namespace CrmPermissionApi {
+  /** 数据权限信息 */
+  export interface Permission {
+    id?: number; // 数据权限编号
+    ids?: number[];
+    userId?: number; // 用户编号
+    bizType: number; // Crm 类型
+    bizId: number; // Crm 类型数据编号
+    level: number; // 权限级别
+    toBizTypes?: number[]; // 同时添加至
+    deptName?: string; // 部门名称
+    nickname?: string; // 用户昵称
+    postNames?: string[]; // 岗位名称数组
+    createTime?: Date;
+  }
+
+  /** 数据权限转移请求 */
+  export interface TransferReq {
+    id: number; // 模块编号
+    newOwnerUserId: number; // 新负责人的用户编号
+    oldOwnerPermissionLevel?: number; // 老负责人加入团队后的权限级别
+    toBizTypes?: number[]; // 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择
+  }
+
+  export interface PermissionListReq {
+    bizId: number; // 模块数据编号
+    bizType: number; // 模块类型
+  }
+}
+
+/**
+ * CRM 业务类型枚举
+ */
+export enum BizTypeEnum {
+  CRM_BUSINESS = 4, // 商机
+  CRM_CLUE = 1, // 线索
+  CRM_CONTACT = 3, // 联系人
+  CRM_CONTRACT = 5, // 合同
+  CRM_CUSTOMER = 2, // 客户
+  CRM_PRODUCT = 6, // 产品
+  CRM_RECEIVABLE = 7, // 回款
+  CRM_RECEIVABLE_PLAN = 8, // 回款计划
+}
+
+/**
+ * CRM 数据权限级别枚举
+ */
+export enum PermissionLevelEnum {
+  OWNER = 1, // 负责人
+  READ = 2, // 只读
+  WRITE = 3, // 读写
+}
+
+/** 获得数据权限列表（查询团队成员列表） */
+export function getPermissionList(params: CrmPermissionApi.PermissionListReq) {
+  return requestClient.get<CrmPermissionApi.Permission[]>(
+    '/crm/permission/list',
+    { params },
+  );
+}
+
+/** 创建数据权限（新增团队成员） */
+export function createPermission(data: CrmPermissionApi.Permission) {
+  return requestClient.post('/crm/permission/create', data);
+}
+
+/** 编辑数据权限（修改团队成员权限级别） */
+export function updatePermission(data: CrmPermissionApi.Permission) {
+  return requestClient.put('/crm/permission/update', data);
+}
+
+/** 删除数据权限（删除团队成员） */
+export function deletePermissionBatch(ids: number[]) {
+  return requestClient.delete(`/crm/permission/delete?ids=${ids.join(',')}`);
+}
+
+/** 删除自己的数据权限（退出团队） */
+export function deleteSelfPermission(id: number) {
+  return requestClient.delete(`/crm/permission/delete-self?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/crm/product/category/index.ts b/apps/web-ele/src/api/crm/product/category/index.ts
new file mode 100644
index 00000000..37ed24f5
--- /dev/null
+++ b/apps/web-ele/src/api/crm/product/category/index.ts
@@ -0,0 +1,44 @@
+import { requestClient } from '#/api/request';
+
+export namespace CrmProductCategoryApi {
+  /** 产品分类信息 */
+  export interface ProductCategory {
+    id: number;
+    name: string;
+    parentId: number;
+  }
+}
+
+/** 查询产品分类详情 */
+export function getProductCategory(id: number) {
+  return requestClient.get<CrmProductCategoryApi.ProductCategory>(
+    `/crm/product-category/get?id=${id}`,
+  );
+}
+
+/** 新增产品分类 */
+export function createProductCategory(
+  data: CrmProductCategoryApi.ProductCategory,
+) {
+  return requestClient.post('/crm/product-category/create', data);
+}
+
+/** 修改产品分类 */
+export function updateProductCategory(
+  data: CrmProductCategoryApi.ProductCategory,
+) {
+  return requestClient.put('/crm/product-category/update', data);
+}
+
+/** 删除产品分类 */
+export function deleteProductCategory(id: number) {
+  return requestClient.delete(`/crm/product-category/delete?id=${id}`);
+}
+
+/** 产品分类列表 */
+export function getProductCategoryList(params?: any) {
+  return requestClient.get<CrmProductCategoryApi.ProductCategory[]>(
+    '/crm/product-category/list',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/crm/product/index.ts b/apps/web-ele/src/api/crm/product/index.ts
new file mode 100644
index 00000000..828495f5
--- /dev/null
+++ b/apps/web-ele/src/api/crm/product/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmProductApi {
+  /** 产品信息 */
+  export interface Product {
+    id: number;
+    name: string;
+    no: string;
+    unit: number;
+    price: number;
+    status: number;
+    categoryId: number;
+    categoryName?: string;
+    description: string;
+    ownerUserId: number;
+  }
+}
+
+/** 查询产品列表 */
+export function getProductPage(params: PageParam) {
+  return requestClient.get<PageResult<CrmProductApi.Product>>(
+    '/crm/product/page',
+    { params },
+  );
+}
+
+/** 获得产品精简列表 */
+export function getProductSimpleList() {
+  return requestClient.get<CrmProductApi.Product[]>('/crm/product/simple-list');
+}
+
+/** 查询产品详情 */
+export function getProduct(id: number) {
+  return requestClient.get<CrmProductApi.Product>(`/crm/product/get?id=${id}`);
+}
+
+/** 新增产品 */
+export function createProduct(data: CrmProductApi.Product) {
+  return requestClient.post('/crm/product/create', data);
+}
+
+/** 修改产品 */
+export function updateProduct(data: CrmProductApi.Product) {
+  return requestClient.put('/crm/product/update', data);
+}
+
+/** 删除产品 */
+export function deleteProduct(id: number) {
+  return requestClient.delete(`/crm/product/delete?id=${id}`);
+}
+
+/** 导出产品 */
+export function exportProduct(params: any) {
+  return requestClient.download('/crm/product/export-excel', params);
+}
diff --git a/apps/web-ele/src/api/crm/receivable/index.ts b/apps/web-ele/src/api/crm/receivable/index.ts
new file mode 100644
index 00000000..8a10c739
--- /dev/null
+++ b/apps/web-ele/src/api/crm/receivable/index.ts
@@ -0,0 +1,103 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmReceivableApi {
+  /** 合同信息 */
+  export interface Contract {
+    id?: number;
+    name?: string;
+    no: string;
+    totalPrice: number;
+  }
+
+  /** 回款信息 */
+  export interface Receivable {
+    id: number;
+    no: string;
+    planId?: number;
+    period?: number;
+    customerId?: number;
+    customerName?: string;
+    contractId?: number;
+    contract?: Contract;
+    auditStatus: number;
+    processInstanceId: number;
+    returnTime: Date;
+    returnType: number;
+    price: number;
+    ownerUserId: number;
+    ownerUserName?: string;
+    remark: string;
+    creator: string; // 创建人
+    creatorName?: string; // 创建人名称
+    createTime: Date; // 创建时间
+    updateTime: Date; // 更新时间
+  }
+
+  export interface ReceivablePageParam extends PageParam {
+    no?: string;
+    planId?: number;
+    customerId?: number;
+    contractId?: number;
+    sceneType?: number;
+    auditStatus?: number;
+  }
+}
+
+/** 查询回款列表 */
+export function getReceivablePage(
+  params: CrmReceivableApi.ReceivablePageParam,
+) {
+  return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
+    '/crm/receivable/page',
+    { params },
+  );
+}
+
+/** 查询回款列表，基于指定客户 */
+export function getReceivablePageByCustomer(
+  params: CrmReceivableApi.ReceivablePageParam,
+) {
+  return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
+    '/crm/receivable/page-by-customer',
+    { params },
+  );
+}
+
+/** 查询回款详情 */
+export function getReceivable(id: number) {
+  return requestClient.get<CrmReceivableApi.Receivable>(
+    `/crm/receivable/get?id=${id}`,
+  );
+}
+
+/** 新增回款 */
+export function createReceivable(data: CrmReceivableApi.Receivable) {
+  return requestClient.post('/crm/receivable/create', data);
+}
+
+/** 修改回款 */
+export function updateReceivable(data: CrmReceivableApi.Receivable) {
+  return requestClient.put('/crm/receivable/update', data);
+}
+
+/** 删除回款 */
+export function deleteReceivable(id: number) {
+  return requestClient.delete(`/crm/receivable/delete?id=${id}`);
+}
+
+/** 导出回款 */
+export function exportReceivable(params: any) {
+  return requestClient.download('/crm/receivable/export-excel', params);
+}
+
+/** 提交审核 */
+export function submitReceivable(id: number) {
+  return requestClient.put(`/crm/receivable/submit?id=${id}`);
+}
+
+/** 获得待审核回款数量 */
+export function getAuditReceivableCount() {
+  return requestClient.get<number>('/crm/receivable/audit-count');
+}
diff --git a/apps/web-ele/src/api/crm/receivable/plan/index.ts b/apps/web-ele/src/api/crm/receivable/plan/index.ts
new file mode 100644
index 00000000..63e00f27
--- /dev/null
+++ b/apps/web-ele/src/api/crm/receivable/plan/index.ts
@@ -0,0 +1,110 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmReceivablePlanApi {
+  /** 回款计划信息 */
+  export interface Plan {
+    id: number;
+    period: number;
+    receivableId: number;
+    price: number;
+    returnTime: Date;
+    remindDays: number;
+    returnType: number;
+    remindTime: Date;
+    customerId: number;
+    customerName?: string;
+    contractId?: number;
+    contractNo?: string;
+    ownerUserId: number;
+    ownerUserName?: string;
+    remark: string;
+    creator: string;
+    creatorName?: string;
+    createTime: Date;
+    updateTime: Date;
+    receivable?: {
+      price: number;
+      returnTime: Date;
+    };
+  }
+
+  export interface PlanPageParam extends PageParam {
+    customerId?: number;
+    contractId?: number;
+    contractNo?: string;
+    sceneType?: number;
+    remindType?: number;
+  }
+}
+
+/** 查询回款计划列表 */
+export function getReceivablePlanPage(
+  params: CrmReceivablePlanApi.PlanPageParam,
+) {
+  return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
+    '/crm/receivable-plan/page',
+    { params },
+  );
+}
+
+/** 查询回款计划列表(按客户) */
+export function getReceivablePlanPageByCustomer(
+  params: CrmReceivablePlanApi.PlanPageParam,
+) {
+  return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
+    '/crm/receivable-plan/page-by-customer',
+    { params },
+  );
+}
+
+/** 查询回款计划详情 */
+export function getReceivablePlan(id: number) {
+  return requestClient.get<CrmReceivablePlanApi.Plan>(
+    '/crm/receivable-plan/get',
+    { params: { id } },
+  );
+}
+
+/** 查询回款计划下拉数据 */
+export function getReceivablePlanSimpleList(
+  customerId: number,
+  contractId: number,
+) {
+  return requestClient.get<CrmReceivablePlanApi.Plan[]>(
+    '/crm/receivable-plan/simple-list',
+    {
+      params: { customerId, contractId },
+    },
+  );
+}
+
+/** 新增回款计划 */
+export function createReceivablePlan(data: CrmReceivablePlanApi.Plan) {
+  return requestClient.post('/crm/receivable-plan/create', data);
+}
+
+/** 修改回款计划 */
+export function updateReceivablePlan(data: CrmReceivablePlanApi.Plan) {
+  return requestClient.put('/crm/receivable-plan/update', data);
+}
+
+/** 删除回款计划 */
+export function deleteReceivablePlan(id: number) {
+  return requestClient.delete('/crm/receivable-plan/delete', {
+    params: { id },
+  });
+}
+
+/** 导出回款计划 Excel */
+export function exportReceivablePlan(params: PageParam) {
+  return requestClient.download('/crm/receivable-plan/export-excel', {
+    params,
+  });
+}
+
+/** 获得待回款提醒数量 */
+export function getReceivablePlanRemindCount() {
+  return requestClient.get<number>('/crm/receivable-plan/remind-count');
+}
diff --git a/apps/web-ele/src/api/crm/statistics/customer.ts b/apps/web-ele/src/api/crm/statistics/customer.ts
new file mode 100644
index 00000000..cfc47e6b
--- /dev/null
+++ b/apps/web-ele/src/api/crm/statistics/customer.ts
@@ -0,0 +1,285 @@
+import { requestClient } from '#/api/request';
+
+export namespace CrmStatisticsCustomerApi {
+  /** 客户总量分析(按日期) */
+  export interface CustomerSummaryByDate {
+    time: string;
+    customerCreateCount: number;
+    customerDealCount: number;
+  }
+
+  /** 客户总量分析(按用户) */
+  export interface CustomerSummaryByUser {
+    ownerUserName: string;
+    customerCreateCount: number;
+    customerDealCount: number;
+    contractPrice: number;
+    receivablePrice: number;
+  }
+
+  /** 客户跟进次数分析(按日期) */
+  export interface FollowUpSummaryByDate {
+    time: string;
+    followUpRecordCount: number;
+    followUpCustomerCount: number;
+  }
+
+  /** 客户跟进次数分析(按用户) */
+  export interface FollowUpSummaryByUser {
+    ownerUserName: string;
+    followupRecordCount: number;
+    followupCustomerCount: number;
+  }
+
+  /** 客户跟进方式统计 */
+  export interface FollowUpSummaryByType {
+    followUpType: string;
+    followUpRecordCount: number;
+  }
+
+  /** 合同摘要信息 */
+  export interface CustomerContractSummary {
+    customerName: string;
+    contractName: string;
+    totalPrice: number;
+    receivablePrice: number;
+    customerType: string;
+    customerSource: string;
+    ownerUserName: string;
+    creatorUserName: string;
+    createTime: Date;
+    orderDate: Date;
+  }
+
+  /** 客户公海分析(按日期) */
+  export interface PoolSummaryByDate {
+    time: string;
+    customerPutCount: number;
+    customerTakeCount: number;
+  }
+
+  /** 客户公海分析(按用户) */
+  export interface PoolSummaryByUser {
+    ownerUserName: string;
+    customerPutCount: number;
+    customerTakeCount: number;
+  }
+
+  /** 客户成交周期(按日期) */
+  export interface CustomerDealCycleByDate {
+    time: string;
+    customerDealCycle: number;
+  }
+
+  /** 客户成交周期(按用户) */
+  export interface CustomerDealCycleByUser {
+    ownerUserName: string;
+    customerDealCycle: number;
+    customerDealCount: number;
+  }
+
+  /** 客户成交周期(按地区) */
+  export interface CustomerDealCycleByArea {
+    areaName: string;
+    customerDealCycle: number;
+    customerDealCount: number;
+  }
+
+  /** 客户成交周期(按产品) */
+  export interface CustomerDealCycleByProduct {
+    productName: string;
+    customerDealCycle: number;
+    customerDealCount: number;
+  }
+
+  export interface CustomerSummaryParams {
+    times: string[];
+    interval: number;
+    deptId: number;
+    userId: number;
+    userIds: number[];
+  }
+}
+
+export function getDatas(activeTabName: any, params: any) {
+  switch (activeTabName) {
+    case 'conversionStat': {
+      return getContractSummary(params);
+    }
+    case 'customerSummary': {
+      return getCustomerSummaryByUser(params);
+    }
+    case 'dealCycleByArea': {
+      return getCustomerDealCycleByArea(params);
+    }
+    case 'dealCycleByProduct': {
+      return getCustomerDealCycleByProduct(params);
+    }
+    case 'dealCycleByUser': {
+      return getCustomerDealCycleByUser(params);
+    }
+    case 'followUpSummary': {
+      return getFollowUpSummaryByUser(params);
+    }
+    case 'followUpType': {
+      return getFollowUpSummaryByType(params);
+    }
+    case 'poolSummary': {
+      return getPoolSummaryByUser(params);
+    }
+    default: {
+      return [];
+    }
+  }
+}
+
+export function getChartDatas(activeTabName: any, params: any) {
+  switch (activeTabName) {
+    case 'conversionStat': {
+      return getCustomerSummaryByDate(params);
+    }
+    case 'customerSummary': {
+      return getCustomerSummaryByDate(params);
+    }
+    case 'dealCycleByArea': {
+      return getCustomerDealCycleByArea(params);
+    }
+    case 'dealCycleByProduct': {
+      return getCustomerDealCycleByProduct(params);
+    }
+    case 'dealCycleByUser': {
+      return getCustomerDealCycleByUser(params);
+    }
+    case 'followUpSummary': {
+      return getFollowUpSummaryByDate(params);
+    }
+    case 'followUpType': {
+      return getFollowUpSummaryByType(params);
+    }
+    case 'poolSummary': {
+      return getPoolSummaryByDate(params);
+    }
+    default: {
+      return [];
+    }
+  }
+}
+
+/** 客户总量分析(按日期) */
+export function getCustomerSummaryByDate(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.CustomerSummaryByDate[]>(
+    '/crm/statistics-customer/get-customer-summary-by-date',
+    { params },
+  );
+}
+
+/** 客户总量分析(按用户) */
+export function getCustomerSummaryByUser(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.CustomerSummaryByUser[]>(
+    '/crm/statistics-customer/get-customer-summary-by-user',
+    { params },
+  );
+}
+
+/** 客户跟进次数分析(按日期) */
+export function getFollowUpSummaryByDate(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.FollowUpSummaryByDate[]>(
+    '/crm/statistics-customer/get-follow-up-summary-by-date',
+    { params },
+  );
+}
+
+/** 客户跟进次数分析(按用户) */
+export function getFollowUpSummaryByUser(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.FollowUpSummaryByUser[]>(
+    '/crm/statistics-customer/get-follow-up-summary-by-user',
+    { params },
+  );
+}
+
+/** 获取客户跟进方式统计数 */
+export function getFollowUpSummaryByType(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.FollowUpSummaryByType[]>(
+    '/crm/statistics-customer/get-follow-up-summary-by-type',
+    { params },
+  );
+}
+
+/** 合同摘要信息(客户转化率页面) */
+export function getContractSummary(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.CustomerContractSummary[]>(
+    '/crm/statistics-customer/get-contract-summary',
+    { params },
+  );
+}
+
+/** 获取客户公海分析(按日期) */
+export function getPoolSummaryByDate(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.PoolSummaryByDate[]>(
+    '/crm/statistics-customer/get-pool-summary-by-date',
+    { params },
+  );
+}
+
+/** 获取客户公海分析(按用户) */
+export function getPoolSummaryByUser(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.PoolSummaryByUser[]>(
+    '/crm/statistics-customer/get-pool-summary-by-user',
+    { params },
+  );
+}
+
+/** 获取客户成交周期(按日期) */
+export function getCustomerDealCycleByDate(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.CustomerDealCycleByDate[]>(
+    '/crm/statistics-customer/get-customer-deal-cycle-by-date',
+    { params },
+  );
+}
+
+/** 获取客户成交周期(按用户) */
+export function getCustomerDealCycleByUser(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.CustomerDealCycleByUser[]>(
+    '/crm/statistics-customer/get-customer-deal-cycle-by-user',
+    { params },
+  );
+}
+
+/** 获取客户成交周期(按地区) */
+export function getCustomerDealCycleByArea(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<CrmStatisticsCustomerApi.CustomerDealCycleByArea[]>(
+    '/crm/statistics-customer/get-customer-deal-cycle-by-area',
+    { params },
+  );
+}
+
+/** 获取客户成交周期(按产品) */
+export function getCustomerDealCycleByProduct(
+  params: CrmStatisticsCustomerApi.CustomerSummaryParams,
+) {
+  return requestClient.get<
+    CrmStatisticsCustomerApi.CustomerDealCycleByProduct[]
+  >('/crm/statistics-customer/get-customer-deal-cycle-by-product', { params });
+}
diff --git a/apps/web-ele/src/api/crm/statistics/funnel.ts b/apps/web-ele/src/api/crm/statistics/funnel.ts
new file mode 100644
index 00000000..8e023d1b
--- /dev/null
+++ b/apps/web-ele/src/api/crm/statistics/funnel.ts
@@ -0,0 +1,101 @@
+import type { PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmStatisticsFunnelApi {
+  /** 销售漏斗统计数据 */
+  export interface FunnelSummary {
+    customerCount: number; // 客户数
+    businessCount: number; // 商机数
+    businessWinCount: number; // 赢单数
+  }
+
+  /** 商机分析(按日期) */
+  export interface BusinessSummaryByDate {
+    time: string; // 时间
+    businessCreateCount: number; // 商机数
+    totalPrice: number | string; // 商机金额
+  }
+
+  /** 商机转化率分析(按日期) */
+  export interface BusinessInversionRateSummaryByDate {
+    time: string; // 时间
+    businessCount: number; // 商机数量
+    businessWinCount: number; // 赢单商机数
+  }
+}
+
+export function getDatas(activeTabName: any, params: any) {
+  switch (activeTabName) {
+    case 'businessInversionRateSummary': {
+      return getBusinessPageByDate(params);
+    }
+    case 'businessSummary': {
+      return getBusinessPageByDate(params);
+    }
+    case 'funnel': {
+      return getBusinessSummaryByEndStatus(params);
+    }
+    default: {
+      return [];
+    }
+  }
+}
+
+export function getChartDatas(activeTabName: any, params: any) {
+  switch (activeTabName) {
+    case 'businessInversionRateSummary': {
+      return getBusinessInversionRateSummaryByDate(params);
+    }
+    case 'businessSummary': {
+      return getBusinessSummaryByDate(params);
+    }
+    case 'funnel': {
+      return getFunnelSummary(params);
+    }
+    default: {
+      return [];
+    }
+  }
+}
+
+/** 获取销售漏斗统计数据 */
+export function getFunnelSummary(params: any) {
+  return requestClient.get<CrmStatisticsFunnelApi.FunnelSummary>(
+    '/crm/statistics-funnel/get-funnel-summary',
+    { params },
+  );
+}
+
+/** 获取商机结束状态统计 */
+export function getBusinessSummaryByEndStatus(params: any) {
+  return requestClient.get<Record<string, number>>(
+    '/crm/statistics-funnel/get-business-summary-by-end-status',
+    { params },
+  );
+}
+
+/** 获取新增商机分析(按日期) */
+export function getBusinessSummaryByDate(params: any) {
+  return requestClient.get<CrmStatisticsFunnelApi.BusinessSummaryByDate[]>(
+    '/crm/statistics-funnel/get-business-summary-by-date',
+    { params },
+  );
+}
+
+/** 获取商机转化率分析(按日期) */
+export function getBusinessInversionRateSummaryByDate(params: any) {
+  return requestClient.get<
+    CrmStatisticsFunnelApi.BusinessInversionRateSummaryByDate[]
+  >('/crm/statistics-funnel/get-business-inversion-rate-summary-by-date', {
+    params,
+  });
+}
+
+/** 获取商机列表(按日期) */
+export function getBusinessPageByDate(params: any) {
+  return requestClient.get<PageResult<any>>(
+    '/crm/statistics-funnel/get-business-page-by-date',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/crm/statistics/performance.ts b/apps/web-ele/src/api/crm/statistics/performance.ts
new file mode 100644
index 00000000..2bfcdd57
--- /dev/null
+++ b/apps/web-ele/src/api/crm/statistics/performance.ts
@@ -0,0 +1,46 @@
+import { requestClient } from '#/api/request';
+
+export namespace CrmStatisticsPerformanceApi {
+  /** 员工业绩统计 */
+  export interface Performance {
+    time: string;
+    currentMonthCount: number;
+    lastMonthCount: number;
+    lastYearCount: number;
+  }
+  export interface PerformanceParams {
+    times: string[];
+    deptId: number;
+    userId: number;
+  }
+}
+
+/** 员工获得合同金额统计 */
+export function getContractPricePerformance(
+  params: CrmStatisticsPerformanceApi.PerformanceParams,
+) {
+  return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
+    '/crm/statistics-performance/get-contract-price-performance',
+    { params },
+  );
+}
+
+/** 员工获得回款统计 */
+export function getReceivablePricePerformance(
+  params: CrmStatisticsPerformanceApi.PerformanceParams,
+) {
+  return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
+    '/crm/statistics-performance/get-receivable-price-performance',
+    { params },
+  );
+}
+
+/** 员工获得签约合同数量统计 */
+export function getContractCountPerformance(
+  params: CrmStatisticsPerformanceApi.PerformanceParams,
+) {
+  return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
+    '/crm/statistics-performance/get-contract-count-performance',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/crm/statistics/portrait.ts b/apps/web-ele/src/api/crm/statistics/portrait.ts
new file mode 100644
index 00000000..ecbe9c9d
--- /dev/null
+++ b/apps/web-ele/src/api/crm/statistics/portrait.ts
@@ -0,0 +1,89 @@
+import type { PageParam } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmStatisticsPortraitApi {
+  /** 客户基础统计信息 */
+  export interface CustomerBase {
+    customerCount: number;
+    dealCount: number;
+    dealPortion: number | string;
+  }
+
+  /** 客户行业统计信息 */
+  export interface CustomerIndustry extends CustomerBase {
+    industryId: number;
+    industryPortion: number | string;
+  }
+
+  /** 客户来源统计信息 */
+  export interface CustomerSource extends CustomerBase {
+    source: number;
+    sourcePortion: number | string;
+  }
+
+  /** 客户级别统计信息 */
+  export interface CustomerLevel extends CustomerBase {
+    level: number;
+    levelPortion: number | string;
+  }
+
+  /** 客户地区统计信息 */
+  export interface CustomerArea extends CustomerBase {
+    areaId: number;
+    areaName: string;
+    areaPortion: number | string;
+  }
+}
+
+export function getDatas(activeTabName: any, params: any) {
+  switch (activeTabName) {
+    case 'area': {
+      return getCustomerArea(params);
+    }
+    case 'industry': {
+      return getCustomerIndustry(params);
+    }
+    case 'level': {
+      return getCustomerLevel(params);
+    }
+    case 'source': {
+      return getCustomerSource(params);
+    }
+    default: {
+      return [];
+    }
+  }
+}
+
+/** 获取客户行业统计数据 */
+export function getCustomerIndustry(params: PageParam) {
+  return requestClient.get<CrmStatisticsPortraitApi.CustomerIndustry[]>(
+    '/crm/statistics-portrait/get-customer-industry-summary',
+    { params },
+  );
+}
+
+/** 获取客户来源统计数据 */
+export function getCustomerSource(params: PageParam) {
+  return requestClient.get<CrmStatisticsPortraitApi.CustomerSource[]>(
+    '/crm/statistics-portrait/get-customer-source-summary',
+    { params },
+  );
+}
+
+/** 获取客户级别统计数据 */
+export function getCustomerLevel(params: PageParam) {
+  return requestClient.get<CrmStatisticsPortraitApi.CustomerLevel[]>(
+    '/crm/statistics-portrait/get-customer-level-summary',
+    { params },
+  );
+}
+
+/** 获取客户地区统计数据 */
+export function getCustomerArea(params: PageParam) {
+  return requestClient.get<CrmStatisticsPortraitApi.CustomerArea[]>(
+    '/crm/statistics-portrait/get-customer-area-summary',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/crm/statistics/rank.ts b/apps/web-ele/src/api/crm/statistics/rank.ts
new file mode 100644
index 00000000..216696c8
--- /dev/null
+++ b/apps/web-ele/src/api/crm/statistics/rank.ts
@@ -0,0 +1,108 @@
+import type { PageParam } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace CrmStatisticsRankApi {
+  /** 排行统计数据 */
+  export interface Rank {
+    count: number;
+    nickname: string;
+    deptName: string;
+  }
+}
+
+export function getDatas(activeTabName: any, params: any) {
+  switch (activeTabName) {
+    case 'contactCountRank': {
+      return getContactsCountRank(params);
+    }
+    case 'contractCountRank': {
+      return getContractCountRank(params);
+    }
+    case 'contractPriceRank': {
+      return getContractPriceRank(params);
+    }
+    case 'customerCountRank': {
+      return getCustomerCountRank(params);
+    }
+    case 'followCountRank': {
+      return getFollowCountRank(params);
+    }
+    case 'followCustomerCountRank': {
+      return getFollowCustomerCountRank(params);
+    }
+    case 'productSalesRank': {
+      return getProductSalesRank(params);
+    }
+    case 'receivablePriceRank': {
+      return getReceivablePriceRank(params);
+    }
+    default: {
+      return [];
+    }
+  }
+}
+
+/** 获得合同排行榜 */
+export function getContractPriceRank(params: PageParam) {
+  return requestClient.get<CrmStatisticsRankApi.Rank[]>(
+    '/crm/statistics-rank/get-contract-price-rank',
+    { params },
+  );
+}
+
+/** 获得回款排行榜 */
+export function getReceivablePriceRank(params: PageParam) {
+  return requestClient.get<CrmStatisticsRankApi.Rank[]>(
+    '/crm/statistics-rank/get-receivable-price-rank',
+    { params },
+  );
+}
+
+/** 签约合同排行 */
+export function getContractCountRank(params: PageParam) {
+  return requestClient.get<CrmStatisticsRankApi.Rank[]>(
+    '/crm/statistics-rank/get-contract-count-rank',
+    { params },
+  );
+}
+
+/** 产品销量排行 */
+export function getProductSalesRank(params: PageParam) {
+  return requestClient.get<CrmStatisticsRankApi.Rank[]>(
+    '/crm/statistics-rank/get-product-sales-rank',
+    { params },
+  );
+}
+
+/** 新增客户数排行 */
+export function getCustomerCountRank(params: PageParam) {
+  return requestClient.get<CrmStatisticsRankApi.Rank[]>(
+    '/crm/statistics-rank/get-customer-count-rank',
+    { params },
+  );
+}
+
+/** 新增联系人数排行 */
+export function getContactsCountRank(params: PageParam) {
+  return requestClient.get<CrmStatisticsRankApi.Rank[]>(
+    '/crm/statistics-rank/get-contacts-count-rank',
+    { params },
+  );
+}
+
+/** 跟进次数排行 */
+export function getFollowCountRank(params: PageParam) {
+  return requestClient.get<CrmStatisticsRankApi.Rank[]>(
+    '/crm/statistics-rank/get-follow-count-rank',
+    { params },
+  );
+}
+
+/** 跟进客户数排行 */
+export function getFollowCustomerCountRank(params: PageParam) {
+  return requestClient.get<CrmStatisticsRankApi.Rank[]>(
+    '/crm/statistics-rank/get-follow-customer-count-rank',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/mall/market/banner/index.ts b/apps/web-ele/src/api/mall/market/banner/index.ts
new file mode 100644
index 00000000..9f9b4fab
--- /dev/null
+++ b/apps/web-ele/src/api/mall/market/banner/index.ts
@@ -0,0 +1,47 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallBannerApi {
+  /** Banner 信息 */
+  export interface Banner {
+    id: number;
+    title: string;
+    picUrl: string;
+    status: number;
+    url: string;
+    position: number;
+    sort: number;
+    memo: string;
+  }
+}
+
+/** 查询Banner管理列表 */
+export function getBannerPage(params: PageParam) {
+  return requestClient.get<PageResult<MallBannerApi.Banner>>(
+    '/promotion/banner/page',
+    { params },
+  );
+}
+
+/** 查询Banner管理详情 */
+export function getBanner(id: number) {
+  return requestClient.get<MallBannerApi.Banner>(
+    `/promotion/banner/get?id=${id}`,
+  );
+}
+
+/** 新增Banner管理 */
+export function createBanner(data: MallBannerApi.Banner) {
+  return requestClient.post('/promotion/banner/create', data);
+}
+
+/** 修改Banner管理 */
+export function updateBanner(data: MallBannerApi.Banner) {
+  return requestClient.put('/promotion/banner/update', data);
+}
+
+/** 删除Banner管理 */
+export function deleteBanner(id: number) {
+  return requestClient.delete(`/promotion/banner/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/product/brand.ts b/apps/web-ele/src/api/mall/product/brand.ts
new file mode 100644
index 00000000..7b82eb72
--- /dev/null
+++ b/apps/web-ele/src/api/mall/product/brand.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallBrandApi {
+  /** 商品品牌 */
+  export interface Brand {
+    /** 品牌编号 */
+    id?: number;
+    /** 品牌名称 */
+    name: string;
+    /** 品牌图片 */
+    picUrl: string;
+    /** 品牌排序 */
+    sort?: number;
+    /** 品牌描述 */
+    description?: string;
+    /** 开启状态 */
+    status: number;
+  }
+}
+
+/** 创建商品品牌 */
+export function createBrand(data: MallBrandApi.Brand) {
+  return requestClient.post('/product/brand/create', data);
+}
+
+/** 更新商品品牌 */
+export function updateBrand(data: MallBrandApi.Brand) {
+  return requestClient.put('/product/brand/update', data);
+}
+
+/** 删除商品品牌 */
+export function deleteBrand(id: number) {
+  return requestClient.delete(`/product/brand/delete?id=${id}`);
+}
+
+/** 获得商品品牌 */
+export function getBrand(id: number) {
+  return requestClient.get<MallBrandApi.Brand>(`/product/brand/get?id=${id}`);
+}
+
+/** 获得商品品牌列表 */
+export function getBrandPage(params: PageParam) {
+  return requestClient.get<PageResult<MallBrandApi.Brand>>(
+    '/product/brand/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 获得商品品牌精简信息列表 */
+export function getSimpleBrandList() {
+  return requestClient.get<MallBrandApi.Brand[]>(
+    '/product/brand/list-all-simple',
+  );
+}
diff --git a/apps/web-ele/src/api/mall/product/category.ts b/apps/web-ele/src/api/mall/product/category.ts
new file mode 100644
index 00000000..12d7202f
--- /dev/null
+++ b/apps/web-ele/src/api/mall/product/category.ts
@@ -0,0 +1,58 @@
+import { requestClient } from '#/api/request';
+
+export namespace MallCategoryApi {
+  /** 产品分类 */
+  export interface Category {
+    /** 分类编号 */
+    id?: number;
+    /** 父分类编号 */
+    parentId?: number;
+    /** 分类名称 */
+    name: string;
+    /** 移动端分类图 */
+    picUrl: string;
+    /** 分类排序 */
+    sort: number;
+    /** 开启状态 */
+    status: number;
+  }
+}
+
+/** 创建商品分类 */
+export function createCategory(data: MallCategoryApi.Category) {
+  return requestClient.post('/product/category/create', data);
+}
+
+/** 更新商品分类 */
+export function updateCategory(data: MallCategoryApi.Category) {
+  return requestClient.put('/product/category/update', data);
+}
+
+/** 删除商品分类 */
+export function deleteCategory(id: number) {
+  return requestClient.delete(`/product/category/delete?id=${id}`);
+}
+
+/** 获得商品分类 */
+export function getCategory(id: number) {
+  return requestClient.get<MallCategoryApi.Category>(
+    `/product/category/get?id=${id}`,
+  );
+}
+
+/** 获得商品分类列表 */
+export function getCategoryList(params: any) {
+  return requestClient.get<MallCategoryApi.Category[]>(
+    '/product/category/list',
+    {
+      params,
+    },
+  );
+}
+
+// 获得商品分类列表
+export function getCategorySimpleList() {
+  return requestClient.get<MallCategoryApi.Category[]>(
+    '/product/category/list',
+  );
+}
diff --git a/apps/web-ele/src/api/mall/product/comment.ts b/apps/web-ele/src/api/mall/product/comment.ts
new file mode 100644
index 00000000..8990c204
--- /dev/null
+++ b/apps/web-ele/src/api/mall/product/comment.ts
@@ -0,0 +1,81 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallCommentApi {
+  export interface Property {
+    propertyId: number;
+    propertyName: string;
+    valueId: number;
+    valueName: string;
+  }
+  /** 商品评论 */
+  export interface Comment {
+    id: number;
+    userId: number;
+    userNickname: string;
+    userAvatar: string;
+    anonymous: boolean;
+    orderId: number;
+    orderItemId: number;
+    spuId: number;
+    spuName: string;
+    skuId: number;
+    visible: boolean;
+    scores: number;
+    descriptionScores: number;
+    benefitScores: number;
+    content: string;
+    picUrls: string[];
+    replyStatus: boolean;
+    replyUserId: number;
+    replyContent: string;
+    replyTime: Date;
+    createTime: Date;
+    skuProperties: Property[];
+  }
+
+  /** 评论可见性更新 */
+  export interface CommentVisibleUpdate {
+    id: number;
+    visible: boolean;
+  }
+
+  /** 评论回复 */
+  export interface CommentReply {
+    id: number;
+    replyContent: string;
+  }
+}
+
+/** 查询商品评论列表 */
+export function getCommentPage(params: PageParam) {
+  return requestClient.get<PageResult<MallCommentApi.Comment>>(
+    '/product/comment/page',
+    { params },
+  );
+}
+
+/** 查询商品评论详情 */
+export function getComment(id: number) {
+  return requestClient.get<MallCommentApi.Comment>(
+    `/product/comment/get?id=${id}`,
+  );
+}
+
+/** 添加自评 */
+export function createComment(data: MallCommentApi.Comment) {
+  return requestClient.post('/product/comment/create', data);
+}
+
+/** 显示 / 隐藏评论 */
+export function updateCommentVisible(
+  data: MallCommentApi.CommentVisibleUpdate,
+) {
+  return requestClient.put('/product/comment/update-visible', data);
+}
+
+/** 商家回复 */
+export function replyComment(data: MallCommentApi.CommentReply) {
+  return requestClient.put('/product/comment/reply', data);
+}
diff --git a/apps/web-ele/src/api/mall/product/favorite.ts b/apps/web-ele/src/api/mall/product/favorite.ts
new file mode 100644
index 00000000..23f38d6b
--- /dev/null
+++ b/apps/web-ele/src/api/mall/product/favorite.ts
@@ -0,0 +1,23 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallFavoriteApi {
+  /** 商品收藏 */
+  export interface Favorite {
+    /** 收藏编号 */
+    id?: number;
+    /** 用户编号 */
+    userId?: string;
+    /** 商品 SPU 编号 */
+    spuId?: null | number;
+  }
+}
+
+/** 获得商品收藏列表 */
+export function getFavoritePage(params: PageParam) {
+  return requestClient.get<PageResult<MallFavoriteApi.Favorite>>(
+    '/product/favorite/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/mall/product/history.ts b/apps/web-ele/src/api/mall/product/history.ts
new file mode 100644
index 00000000..f8505a73
--- /dev/null
+++ b/apps/web-ele/src/api/mall/product/history.ts
@@ -0,0 +1,29 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallHistoryApi {
+  /** 商品浏览记录 */
+  export interface BrowseHistory {
+    /** 记录编号 */
+    id?: number;
+    /** 用户编号 */
+    userId?: number;
+    /** 商品 SPU 编号 */
+    spuId?: number;
+    /** 浏览时间 */
+    createTime?: Date;
+  }
+}
+
+/**
+ * 获得商品浏览记录分页
+ *
+ * @param params 请求参数
+ */
+export function getBrowseHistoryPage(params: PageParam) {
+  return requestClient.get<PageResult<MallHistoryApi.BrowseHistory>>(
+    '/product/browse-history/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/mall/product/property.ts b/apps/web-ele/src/api/mall/product/property.ts
new file mode 100644
index 00000000..e13a700f
--- /dev/null
+++ b/apps/web-ele/src/api/mall/product/property.ts
@@ -0,0 +1,111 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallPropertyApi {
+  /** 商品属性 */
+  export interface Property {
+    /** 属性编号 */
+    id?: number;
+    /** 名称 */
+    name: string;
+    /** 备注 */
+    remark?: string;
+  }
+
+  /** 属性值 */
+  export interface PropertyValue {
+    /** 属性值编号 */
+    id?: number;
+    /** 属性项的编号 */
+    propertyId?: number;
+    /** 名称 */
+    name: string;
+    /** 备注 */
+    remark?: string;
+  }
+
+  /** 属性值查询参数 */
+  export interface PropertyValueQuery extends PageParam {
+    propertyId?: number;
+  }
+}
+
+/** 创建属性项 */
+export function createProperty(data: MallPropertyApi.Property) {
+  return requestClient.post('/product/property/create', data);
+}
+
+/** 更新属性项 */
+export function updateProperty(data: MallPropertyApi.Property) {
+  return requestClient.put('/product/property/update', data);
+}
+
+/** 删除属性项 */
+export function deleteProperty(id: number) {
+  return requestClient.delete(`/product/property/delete?id=${id}`);
+}
+
+/** 获得属性项 */
+export function getProperty(id: number) {
+  return requestClient.get<MallPropertyApi.Property>(
+    `/product/property/get?id=${id}`,
+  );
+}
+
+/** 获得属性项分页 */
+export function getPropertyPage(params: PageParam) {
+  return requestClient.get<PageResult<MallPropertyApi.Property>>(
+    '/product/property/page',
+    { params },
+  );
+}
+
+/** 获得属性项精简列表 */
+export function getPropertySimpleList() {
+  return requestClient.get<MallPropertyApi.Property[]>(
+    '/product/property/simple-list',
+  );
+}
+
+/** 获得属性值分页 */
+export function getPropertyValuePage(
+  params: MallPropertyApi.PropertyValueQuery,
+) {
+  return requestClient.get<PageResult<MallPropertyApi.PropertyValue>>(
+    '/product/property/value/page',
+    { params },
+  );
+}
+
+/** 获得属性值 */
+export function getPropertyValue(id: number) {
+  return requestClient.get<MallPropertyApi.PropertyValue>(
+    `/product/property/value/get?id=${id}`,
+  );
+}
+
+/** 创建属性值 */
+export function createPropertyValue(data: MallPropertyApi.PropertyValue) {
+  return requestClient.post('/product/property/value/create', data);
+}
+
+/** 更新属性值 */
+export function updatePropertyValue(data: MallPropertyApi.PropertyValue) {
+  return requestClient.put('/product/property/value/update', data);
+}
+
+/** 删除属性值 */
+export function deletePropertyValue(id: number) {
+  return requestClient.delete(`/product/property/value/delete?id=${id}`);
+}
+
+/** 获得属性值精简列表 */
+export function getPropertyValueSimpleList(propertyId: number) {
+  return requestClient.get<MallPropertyApi.PropertyValue[]>(
+    '/product/property/value/simple-list',
+    {
+      params: { propertyId },
+    },
+  );
+}
diff --git a/apps/web-ele/src/api/mall/product/spu.ts b/apps/web-ele/src/api/mall/product/spu.ts
new file mode 100644
index 00000000..76ca7b55
--- /dev/null
+++ b/apps/web-ele/src/api/mall/product/spu.ts
@@ -0,0 +1,179 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallSpuApi {
+  /** 商品属性 */
+  export interface Property {
+    /** 属性编号 */
+    propertyId?: number;
+    /** 属性名称 */
+    propertyName?: string;
+    /** 属性值编号 */
+    valueId?: number;
+    /** 属性值名称 */
+    valueName?: string;
+  }
+
+  /** 商品 SKU */
+  export interface Sku {
+    /** 商品 SKU 编号 */
+    id?: number;
+    /** 商品 SKU 名称 */
+    name?: string;
+    /** SPU 编号 */
+    spuId?: number;
+    /** 属性数组 */
+    properties?: Property[];
+    /** 商品价格 */
+    price?: number | string;
+    /** 市场价 */
+    marketPrice?: number | string;
+    /** 成本价 */
+    costPrice?: number | string;
+    /** 商品条码 */
+    barCode?: string;
+    /** 图片地址 */
+    picUrl?: string;
+    /** 库存 */
+    stock?: number;
+    /** 商品重量，单位：kg 千克 */
+    weight?: number;
+    /** 商品体积，单位：m^3 平米 */
+    volume?: number;
+    /** 一级分销的佣金 */
+    firstBrokeragePrice?: number | string;
+    /** 二级分销的佣金 */
+    secondBrokeragePrice?: number | string;
+    /** 商品销量 */
+    salesCount?: number;
+  }
+
+  /** 优惠券模板 */
+  export interface GiveCouponTemplate {
+    /** 优惠券编号 */
+    id?: number;
+    /** 优惠券名称 */
+    name?: string;
+  }
+
+  /** 商品 SPU */
+  export interface Spu {
+    /** 商品编号 */
+    id?: number;
+    /** 商品名称 */
+    name?: string;
+    /** 商品分类 */
+    categoryId?: number;
+    /** 关键字 */
+    keyword?: string;
+    /** 单位 */
+    unit?: number | undefined;
+    /** 商品封面图 */
+    picUrl?: string;
+    /** 商品轮播图 */
+    sliderPicUrls?: string[];
+    /** 商品简介 */
+    introduction?: string;
+    /** 配送方式 */
+    deliveryTypes?: number[];
+    /** 运费模版 */
+    deliveryTemplateId?: number | undefined;
+    /** 商品品牌编号 */
+    brandId?: number;
+    /** 商品规格 */
+    specType?: boolean;
+    /** 分销类型 */
+    subCommissionType?: boolean;
+    /** sku数组 */
+    skus?: Sku[];
+    /** 商品详情 */
+    description?: string;
+    /** 商品排序 */
+    sort?: number;
+    /** 赠送积分 */
+    giveIntegral?: number;
+    /** 虚拟销量 */
+    virtualSalesCount?: number;
+    /** 商品价格 */
+    price?: number;
+    /** 商品拼团价格 */
+    combinationPrice?: number;
+    /** 商品秒杀价格 */
+    seckillPrice?: number;
+    /** 商品销量 */
+    salesCount?: number;
+    /** 市场价 */
+    marketPrice?: number;
+    /** 成本价 */
+    costPrice?: number;
+    /** 商品库存 */
+    stock?: number;
+    /** 商品创建时间 */
+    createTime?: Date;
+    /** 商品状态 */
+    status?: number;
+    /** 浏览量 */
+    browseCount?: number;
+  }
+
+  /** 商品状态更新 */
+  export interface StatusUpdate {
+    /** 商品编号 */
+    id: number;
+    /** 商品状态 */
+    status: number;
+  }
+}
+
+/** 获得商品 SPU 列表 */
+export function getSpuPage(params: PageParam) {
+  return requestClient.get<PageResult<MallSpuApi.Spu>>('/product/spu/page', {
+    params,
+  });
+}
+
+/** 获得商品 SPU 列表 tabsCount */
+export function getTabsCount() {
+  return requestClient.get<Record<string, number>>('/product/spu/get-count');
+}
+
+/** 创建商品 SPU */
+export function createSpu(data: MallSpuApi.Spu) {
+  return requestClient.post('/product/spu/create', data);
+}
+
+/** 更新商品 SPU */
+export function updateSpu(data: MallSpuApi.Spu) {
+  return requestClient.put('/product/spu/update', data);
+}
+
+/** 更新商品 SPU 状态 */
+export function updateStatus(data: MallSpuApi.StatusUpdate) {
+  return requestClient.put('/product/spu/update-status', data);
+}
+
+/** 获得商品 SPU */
+export function getSpu(id: number) {
+  return requestClient.get<MallSpuApi.Spu>(`/product/spu/get-detail?id=${id}`);
+}
+
+/** 获得商品 SPU 详情列表 */
+export function getSpuDetailList(ids: number[]) {
+  return requestClient.get<MallSpuApi.Spu[]>(`/product/spu/list?spuIds=${ids}`);
+}
+
+/** 删除商品 SPU */
+export function deleteSpu(id: number) {
+  return requestClient.delete(`/product/spu/delete?id=${id}`);
+}
+
+/** 导出商品 SPU Excel */
+export function exportSpu(params: PageParam) {
+  return requestClient.download('/product/spu/export-excel', { params });
+}
+
+/** 获得商品 SPU 精简列表 */
+export function getSpuSimpleList() {
+  return requestClient.get<MallSpuApi.Spu[]>('/product/spu/list-all-simple');
+}
diff --git a/apps/web-ele/src/api/mall/promotion/article/index.ts b/apps/web-ele/src/api/mall/promotion/article/index.ts
new file mode 100644
index 00000000..9a2ac97d
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/article/index.ts
@@ -0,0 +1,65 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallArticleApi {
+  /** 文章管理 */
+  export interface Article {
+    /** 文章编号 */
+    id: number;
+    /** 分类编号 */
+    categoryId: number;
+    /** 文章标题 */
+    title: string;
+    /** 作者 */
+    author: string;
+    /** 封面图 */
+    picUrl: string;
+    /** 文章简介 */
+    introduction: string;
+    /** 浏览数量 */
+    browseCount: string;
+    /** 排序 */
+    sort: number;
+    /** 状态 */
+    status: number;
+    /** 商品编号 */
+    spuId: number;
+    /** 是否热门 */
+    recommendHot: boolean;
+    /** 是否轮播图 */
+    recommendBanner: boolean;
+    /** 文章内容 */
+    content: string;
+  }
+}
+
+/** 查询文章管理列表 */
+export function getArticlePage(params: PageParam) {
+  return requestClient.get<PageResult<MallArticleApi.Article>>(
+    '/promotion/article/page',
+    { params },
+  );
+}
+
+/** 查询文章管理详情 */
+export function getArticle(id: number) {
+  return requestClient.get<MallArticleApi.Article>(
+    `/promotion/article/get?id=${id}`,
+  );
+}
+
+/** 新增文章管理 */
+export function createArticle(data: MallArticleApi.Article) {
+  return requestClient.post('/promotion/article/create', data);
+}
+
+/** 修改文章管理 */
+export function updateArticle(data: MallArticleApi.Article) {
+  return requestClient.put('/promotion/article/update', data);
+}
+
+/** 删除文章管理 */
+export function deleteArticle(id: number) {
+  return requestClient.delete(`/promotion/article/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/articleCategory/index.ts b/apps/web-ele/src/api/mall/promotion/articleCategory/index.ts
new file mode 100644
index 00000000..8bf1cff4
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/articleCategory/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallArticleCategoryApi {
+  /** 文章分类 */
+  export interface ArticleCategory {
+    /** 分类编号 */
+    id: number;
+    /** 分类名称 */
+    name: string;
+    /** 分类图片 */
+    picUrl: string;
+    /** 状态 */
+    status: number;
+    /** 排序 */
+    sort: number;
+  }
+}
+
+/** 查询文章分类列表 */
+export function getArticleCategoryPage(params: PageParam) {
+  return requestClient.get<PageResult<MallArticleCategoryApi.ArticleCategory>>(
+    '/promotion/article-category/page',
+    { params },
+  );
+}
+
+/** 查询文章分类精简信息列表 */
+export function getSimpleArticleCategoryList() {
+  return requestClient.get<MallArticleCategoryApi.ArticleCategory[]>(
+    '/promotion/article-category/list-all-simple',
+  );
+}
+
+/** 查询文章分类详情 */
+export function getArticleCategory(id: number) {
+  return requestClient.get<MallArticleCategoryApi.ArticleCategory>(
+    `/promotion/article-category/get?id=${id}`,
+  );
+}
+
+/** 新增文章分类 */
+export function createArticleCategory(
+  data: MallArticleCategoryApi.ArticleCategory,
+) {
+  return requestClient.post('/promotion/article-category/create', data);
+}
+
+/** 修改文章分类 */
+export function updateArticleCategory(
+  data: MallArticleCategoryApi.ArticleCategory,
+) {
+  return requestClient.put('/promotion/article-category/update', data);
+}
+
+/** 删除文章分类 */
+export function deleteArticleCategory(id: number) {
+  return requestClient.delete(`/promotion/article-category/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/bargain/bargainActivity.ts b/apps/web-ele/src/api/mall/promotion/bargain/bargainActivity.ts
new file mode 100644
index 00000000..c2a3dfdf
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/bargain/bargainActivity.ts
@@ -0,0 +1,106 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallBargainActivityApi {
+  /** 砍价活动 */
+  export interface BargainActivity {
+    /** 活动编号 */
+    id?: number;
+    /** 活动名称 */
+    name?: string;
+    /** 开始时间 */
+    startTime?: Date;
+    /** 结束时间 */
+    endTime?: Date;
+    /** 状态 */
+    status?: number;
+    /** 达到该人数，才能砍到低价 */
+    helpMaxCount?: number;
+    /** 最大帮砍次数 */
+    bargainCount?: number;
+    /** 最大购买次数 */
+    totalLimitCount?: number;
+    /** 商品 SPU 编号 */
+    spuId: number;
+    /** 商品 SKU 编号 */
+    skuId: number;
+    /** 砍价起始价格，单位分 */
+    bargainFirstPrice: number;
+    /** 砍价底价 */
+    bargainMinPrice: number;
+    /** 活动库存 */
+    stock: number;
+    /** 用户每次砍价的最小金额，单位：分 */
+    randomMinPrice?: number;
+    /** 用户每次砍价的最大金额，单位：分 */
+    randomMaxPrice?: number;
+  }
+
+  /** 砍价活动所需属性。选择的商品和属性的时候使用方便使用活动的通用封装 */
+  export interface BargainProduct {
+    /** 商品 SPU 编号 */
+    spuId: number;
+    /** 商品 SKU 编号 */
+    skuId: number;
+    /** 砍价起始价格，单位分 */
+    bargainFirstPrice: number;
+    /** 砍价底价 */
+    bargainMinPrice: number;
+    /** 活动库存 */
+    stock: number;
+  }
+
+  /** 扩展 SKU 配置 */
+  export type SkuExtension = {
+    /** 砍价活动配置 */
+    productConfig: BargainProduct;
+  } & MallSpuApi.Sku;
+
+  /** 扩展 SPU 配置 */
+  export interface SpuExtension extends MallSpuApi.Spu {
+    /** SKU 列表 */
+    skus: SkuExtension[];
+  }
+}
+
+/** 查询砍价活动列表 */
+export function getBargainActivityPage(params: PageParam) {
+  return requestClient.get<PageResult<MallBargainActivityApi.BargainActivity>>(
+    '/promotion/bargain-activity/page',
+    { params },
+  );
+}
+
+/** 查询砍价活动详情 */
+export function getBargainActivity(id: number) {
+  return requestClient.get<MallBargainActivityApi.BargainActivity>(
+    `/promotion/bargain-activity/get?id=${id}`,
+  );
+}
+
+/** 新增砍价活动 */
+export function createBargainActivity(
+  data: MallBargainActivityApi.BargainActivity,
+) {
+  return requestClient.post('/promotion/bargain-activity/create', data);
+}
+
+/** 修改砍价活动 */
+export function updateBargainActivity(
+  data: MallBargainActivityApi.BargainActivity,
+) {
+  return requestClient.put('/promotion/bargain-activity/update', data);
+}
+
+/** 关闭砍价活动 */
+export function closeBargainActivity(id: number) {
+  return requestClient.put(`/promotion/bargain-activity/close?id=${id}`);
+}
+
+/** 删除砍价活动 */
+export function deleteBargainActivity(id: number) {
+  return requestClient.delete(`/promotion/bargain-activity/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/bargain/bargainHelp.ts b/apps/web-ele/src/api/mall/promotion/bargain/bargainHelp.ts
new file mode 100644
index 00000000..c8916b17
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/bargain/bargainHelp.ts
@@ -0,0 +1,27 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallBargainHelpApi {
+  /** 砍价记录 */
+  export interface BargainHelp {
+    /** 记录编号 */
+    id: number;
+    /** 砍价记录编号 */
+    record: number;
+    /** 用户编号 */
+    userId: number;
+    /** 砍掉金额 */
+    reducePrice: number;
+    /** 结束时间 */
+    endTime: Date;
+  }
+}
+
+/** 查询砍价记录列表 */
+export function getBargainHelpPage(params: PageParam) {
+  return requestClient.get<PageResult<MallBargainHelpApi.BargainHelp>>(
+    '/promotion/bargain-help/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/mall/promotion/bargain/bargainRecord.ts b/apps/web-ele/src/api/mall/promotion/bargain/bargainRecord.ts
new file mode 100644
index 00000000..880b9def
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/bargain/bargainRecord.ts
@@ -0,0 +1,37 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallBargainRecordApi {
+  /** 砍价记录 */
+  export interface BargainRecord {
+    /** 记录编号 */
+    id: number;
+    /** 活动编号 */
+    activityId: number;
+    /** 用户编号 */
+    userId: number;
+    /** 商品 SPU 编号 */
+    spuId: number;
+    /** 商品 SKU 编号 */
+    skuId: number;
+    /** 砍价起始价格 */
+    bargainFirstPrice: number;
+    /** 砍价价格 */
+    bargainPrice: number;
+    /** 状态 */
+    status: number;
+    /** 订单编号 */
+    orderId: number;
+    /** 结束时间 */
+    endTime: Date;
+  }
+}
+
+/** 查询砍价记录列表 */
+export function getBargainRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MallBargainRecordApi.BargainRecord>>(
+    '/promotion/bargain-record/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts b/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
new file mode 100644
index 00000000..c0d53d6b
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
@@ -0,0 +1,111 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallCombinationActivityApi {
+  /** 拼团活动所需属性 */
+  export interface CombinationProduct {
+    /** 商品 SPU 编号 */
+    spuId: number;
+    /** 商品 SKU 编号 */
+    skuId: number;
+    /** 拼团价格 */
+    combinationPrice: number;
+  }
+  /** 拼团活动 */
+  export interface CombinationActivity {
+    /** 活动编号 */
+    id?: number;
+    /** 活动名称 */
+    name?: string;
+    /** 商品 SPU 编号 */
+    spuId?: number;
+    /** 总限购数量 */
+    totalLimitCount?: number;
+    /** 单次限购数量 */
+    singleLimitCount?: number;
+    /** 开始时间 */
+    startTime?: Date;
+    /** 结束时间 */
+    endTime?: Date;
+    /** 用户数量 */
+    userSize?: number;
+    /** 总数量 */
+    totalCount?: number;
+    /** 成功数量 */
+    successCount?: number;
+    /** 订单用户数量 */
+    orderUserCount?: number;
+    /** 虚拟成团 */
+    virtualGroup?: number;
+    /** 状态 */
+    status?: number;
+    /** 限制时长 */
+    limitDuration?: number;
+    /** 拼团价格 */
+    combinationPrice?: number;
+    /** 商品列表 */
+    products: CombinationProduct[];
+  }
+
+  /** 扩展 SKU 配置 */
+  export type SkuExtension = {
+    /** 拼团活动配置 */
+    productConfig: CombinationProduct;
+  } & MallSpuApi.Sku;
+
+  /** 扩展 SPU 配置 */
+  export interface SpuExtension extends MallSpuApi.Spu {
+    /** SKU 列表 */
+    skus: SkuExtension[];
+  }
+}
+
+/** 查询拼团活动列表 */
+export function getCombinationActivityPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MallCombinationActivityApi.CombinationActivity>
+  >('/promotion/combination-activity/page', { params });
+}
+
+/** 查询拼团活动详情 */
+export function getCombinationActivity(id: number) {
+  return requestClient.get<MallCombinationActivityApi.CombinationActivity>(
+    `/promotion/combination-activity/get?id=${id}`,
+  );
+}
+
+/** 获得拼团活动列表，基于活动编号数组 */
+export function getCombinationActivityListByIds(ids: number[]) {
+  return requestClient.get<MallCombinationActivityApi.CombinationActivity[]>(
+    `/promotion/combination-activity/list-by-ids?ids=${ids}`,
+  );
+}
+
+/** 新增拼团活动 */
+export function createCombinationActivity(
+  data: MallCombinationActivityApi.CombinationActivity,
+) {
+  return requestClient.post('/promotion/combination-activity/create', data);
+}
+
+/** 修改拼团活动 */
+export function updateCombinationActivity(
+  data: MallCombinationActivityApi.CombinationActivity,
+) {
+  return requestClient.put('/promotion/combination-activity/update', data);
+}
+
+/** 关闭拼团活动 */
+export function closeCombinationActivity(id: number) {
+  return requestClient.put(`/promotion/combination-activity/close?id=${id}`);
+}
+
+/** 删除拼团活动 */
+export function deleteCombinationActivity(id: number) {
+  return requestClient.delete(
+    `/promotion/combination-activity/delete?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mall/promotion/combination/combinationRecord.ts b/apps/web-ele/src/api/mall/promotion/combination/combinationRecord.ts
new file mode 100644
index 00000000..3d2943fe
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/combination/combinationRecord.ts
@@ -0,0 +1,61 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallCombinationRecordApi {
+  /** 拼团记录 */
+  export interface CombinationRecord {
+    /** 拼团记录编号 */
+    id: number;
+    /** 拼团活动编号 */
+    activityId: number;
+    /** 用户昵称 */
+    nickname: string;
+    /** 用户头像 */
+    avatar: string;
+    /** 团长编号 */
+    headId: number;
+    /** 过期时间 */
+    expireTime: string;
+    /** 可参团人数 */
+    userSize: number;
+    /** 已参团人数 */
+    userCount: number;
+    /** 拼团状态 */
+    status: number;
+    /** 商品名字 */
+    spuName: string;
+    /** 商品图片 */
+    picUrl: string;
+    /** 是否虚拟成团 */
+    virtualGroup: boolean;
+    /** 开始时间 (订单付款后开始的时间) */
+    startTime: string;
+    /** 结束时间（成团时间/失败时间） */
+    endTime: string;
+  }
+
+  /** 拼团记录概要信息 */
+  export interface RecordSummary {
+    /** 待成团数量 */
+    pendingCount: number;
+    /** 已成团数量 */
+    successCount: number;
+    /** 已失败数量 */
+    failCount: number;
+  }
+}
+
+/** 查询拼团记录列表 */
+export function getCombinationRecordPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MallCombinationRecordApi.CombinationRecord>
+  >('/promotion/combination-record/page', { params });
+}
+
+/** 获得拼团记录的概要信息 */
+export function getCombinationRecordSummary() {
+  return requestClient.get<MallCombinationRecordApi.RecordSummary>(
+    '/promotion/combination-record/get-summary',
+  );
+}
diff --git a/apps/web-ele/src/api/mall/promotion/coupon/coupon.ts b/apps/web-ele/src/api/mall/promotion/coupon/coupon.ts
new file mode 100644
index 00000000..6cba23c1
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/coupon/coupon.ts
@@ -0,0 +1,67 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallCouponApi {
+  /** 优惠券 */
+  export interface Coupon {
+    /** 优惠券编号 */
+    id: number;
+    /** 优惠券名称 */
+    name: string;
+    /** 优惠券状态 */
+    status: number;
+    /** 优惠券类型 */
+    type: number;
+    /** 优惠券金额 */
+    price: number;
+    /** 使用门槛 */
+    usePrice: number;
+    /** 商品范围 */
+    productScope: number;
+    /** 商品编号数组 */
+    productSpuIds: number[];
+    /** 有效期类型 */
+    validityType: number;
+    /** 固定日期-生效开始时间 */
+    validStartTime: Date;
+    /** 固定日期-生效结束时间 */
+    validEndTime: Date;
+    /** 领取日期-开始天数 */
+    fixedStartTerm: number;
+    /** 领取日期-结束天数 */
+    fixedEndTerm: number;
+    /** 每人限领个数 */
+    takeLimitCount: number;
+    /** 是否设置满多少金额可用 */
+    usePriceEnabled: boolean;
+    /** 商品分类编号数组 */
+    productCategoryIds: number[];
+  }
+
+  /** 发送优惠券 */
+  export interface SendCoupon {
+    /** 优惠券编号 */
+    couponId: number;
+    /** 用户编号数组 */
+    userIds: number[];
+  }
+}
+
+/** 删除优惠劵 */
+export function deleteCoupon(id: number) {
+  return requestClient.delete(`/promotion/coupon/delete?id=${id}`);
+}
+
+/** 获得优惠劵分页 */
+export function getCouponPage(params: PageParam) {
+  return requestClient.get<PageResult<MallCouponApi.Coupon>>(
+    '/promotion/coupon/page',
+    { params },
+  );
+}
+
+/** 发送优惠券 */
+export function sendCoupon(data: MallCouponApi.SendCoupon) {
+  return requestClient.post('/promotion/coupon/send', data);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/coupon/couponTemplate.ts b/apps/web-ele/src/api/mall/promotion/coupon/couponTemplate.ts
new file mode 100644
index 00000000..f09455a1
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/coupon/couponTemplate.ts
@@ -0,0 +1,112 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallCouponTemplateApi {
+  /** 优惠券模板 */
+  export interface CouponTemplate {
+    /** 模板编号 */
+    id: number;
+    /** 模板名称 */
+    name: string;
+    /** 状态 */
+    status: number;
+    /** 发放数量 */
+    totalCount: number;
+    /** 每人限领个数 */
+    takeLimitCount: number;
+    /** 领取方式 */
+    takeType: number;
+    /** 使用门槛 */
+    usePrice: number;
+    /** 商品范围 */
+    productScope: number;
+    /** 商品范围值 */
+    productScopeValues: number[];
+    /** 有效期类型 */
+    validityType: number;
+    /** 固定日期-生效开始时间 */
+    validStartTime: Date;
+    /** 固定日期-生效结束时间 */
+    validEndTime: Date;
+    /** 领取日期-开始天数 */
+    fixedStartTerm: number;
+    /** 领取日期-结束天数 */
+    fixedEndTerm: number;
+    /** 优惠类型 */
+    discountType: number;
+    /** 折扣百分比 */
+    discountPercent: number;
+    /** 优惠金额 */
+    discountPrice: number;
+    /** 折扣上限 */
+    discountLimitPrice: number;
+    /** 已领取数量 */
+    takeCount: number;
+    /** 已使用数量 */
+    useCount: number;
+  }
+
+  /** 优惠券模板状态更新 */
+  export interface StatusUpdate {
+    /** 模板编号 */
+    id: number;
+    /** 状态 */
+    status: 0 | 1;
+  }
+}
+
+/** 创建优惠劵模板 */
+export function createCouponTemplate(
+  data: MallCouponTemplateApi.CouponTemplate,
+) {
+  return requestClient.post('/promotion/coupon-template/create', data);
+}
+
+/** 更新优惠劵模板 */
+export function updateCouponTemplate(
+  data: MallCouponTemplateApi.CouponTemplate,
+) {
+  return requestClient.put('/promotion/coupon-template/update', data);
+}
+
+/** 更新优惠劵模板的状态 */
+export function updateCouponTemplateStatus(id: number, status: 0 | 1) {
+  const data: MallCouponTemplateApi.StatusUpdate = { id, status };
+  return requestClient.put('/promotion/coupon-template/update-status', data);
+}
+
+/** 删除优惠劵模板 */
+export function deleteCouponTemplate(id: number) {
+  return requestClient.delete(`/promotion/coupon-template/delete?id=${id}`);
+}
+
+/** 获得优惠劵模板 */
+export function getCouponTemplate(id: number) {
+  return requestClient.get<MallCouponTemplateApi.CouponTemplate>(
+    `/promotion/coupon-template/get?id=${id}`,
+  );
+}
+
+/** 获得优惠劵模板分页 */
+export function getCouponTemplatePage(params: PageParam) {
+  return requestClient.get<PageResult<MallCouponTemplateApi.CouponTemplate>>(
+    '/promotion/coupon-template/page',
+    { params },
+  );
+}
+
+/** 获得优惠劵模板列表 */
+export function getCouponTemplateList(ids: number[]) {
+  return requestClient.get<MallCouponTemplateApi.CouponTemplate[]>(
+    `/promotion/coupon-template/list?ids=${ids}`,
+  );
+}
+
+/** 导出优惠劵模板 Excel */
+export function exportCouponTemplateExcel(params: PageParam) {
+  return requestClient.get('/promotion/coupon-template/export-excel', {
+    params,
+    responseType: 'blob',
+  });
+}
diff --git a/apps/web-ele/src/api/mall/promotion/discount/discountActivity.ts b/apps/web-ele/src/api/mall/promotion/discount/discountActivity.ts
new file mode 100644
index 00000000..f1e34ef7
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/discount/discountActivity.ts
@@ -0,0 +1,91 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallDiscountActivityApi {
+  /** 限时折扣相关属性 */
+  export interface DiscountProduct {
+    /** 商品 SPU 编号 */
+    spuId: number;
+    /** 商品 SKU 编号 */
+    skuId: number;
+    /** 折扣类型 */
+    discountType: number;
+    /** 折扣百分比 */
+    discountPercent: number;
+    /** 折扣价格 */
+    discountPrice: number;
+  }
+
+  /** 限时折扣活动 */
+  export interface DiscountActivity {
+    /** 活动编号 */
+    id?: number;
+    /** 商品 SPU 编号 */
+    spuId?: number;
+    /** 活动名称 */
+    name?: string;
+    /** 状态 */
+    status?: number;
+    /** 备注 */
+    remark?: string;
+    /** 开始时间 */
+    startTime?: Date;
+    /** 结束时间 */
+    endTime?: Date;
+    /** 商品列表 */
+    products?: DiscountProduct[];
+  }
+
+  /** 扩展 SKU 配置 */
+  export type SkuExtension = {
+    /** 限时折扣配置 */
+    productConfig: DiscountProduct;
+  } & MallSpuApi.Sku;
+
+  /** 扩展 SPU 配置 */
+  export interface SpuExtension extends MallSpuApi.Spu {
+    /** SKU 列表 */
+    skus: SkuExtension[];
+  }
+}
+
+/** 查询限时折扣活动列表 */
+export function getDiscountActivityPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MallDiscountActivityApi.DiscountActivity>
+  >('/promotion/discount-activity/page', { params });
+}
+
+/** 查询限时折扣活动详情 */
+export function getDiscountActivity(id: number) {
+  return requestClient.get<MallDiscountActivityApi.DiscountActivity>(
+    `/promotion/discount-activity/get?id=${id}`,
+  );
+}
+
+/** 新增限时折扣活动 */
+export function createDiscountActivity(
+  data: MallDiscountActivityApi.DiscountActivity,
+) {
+  return requestClient.post('/promotion/discount-activity/create', data);
+}
+
+/** 修改限时折扣活动 */
+export function updateDiscountActivity(
+  data: MallDiscountActivityApi.DiscountActivity,
+) {
+  return requestClient.put('/promotion/discount-activity/update', data);
+}
+
+/** 关闭限时折扣活动 */
+export function closeDiscountActivity(id: number) {
+  return requestClient.put(`/promotion/discount-activity/close?id=${id}`);
+}
+
+/** 删除限时折扣活动 */
+export function deleteDiscountActivity(id: number) {
+  return requestClient.delete(`/promotion/discount-activity/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/diy/page.ts b/apps/web-ele/src/api/mall/promotion/diy/page.ts
new file mode 100644
index 00000000..daa5e4b0
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/diy/page.ts
@@ -0,0 +1,61 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallDiyPageApi {
+  /** 装修页面 */
+  export interface DiyPage {
+    /** 页面编号 */
+    id?: number;
+    /** 模板编号 */
+    templateId?: number;
+    /** 页面名称 */
+    name: string;
+    /** 备注 */
+    remark: string;
+    /** 预览图片地址数组 */
+    previewPicUrls: string[];
+    /** 页面属性 */
+    property: string;
+  }
+}
+
+/** 查询装修页面列表 */
+export function getDiyPagePage(params: PageParam) {
+  return requestClient.get<PageResult<MallDiyPageApi.DiyPage>>(
+    '/promotion/diy-page/page',
+    { params },
+  );
+}
+
+/** 查询装修页面详情 */
+export function getDiyPage(id: number) {
+  return requestClient.get<MallDiyPageApi.DiyPage>(
+    `/promotion/diy-page/get?id=${id}`,
+  );
+}
+
+/** 新增装修页面 */
+export function createDiyPage(data: MallDiyPageApi.DiyPage) {
+  return requestClient.post('/promotion/diy-page/create', data);
+}
+
+/** 修改装修页面 */
+export function updateDiyPage(data: MallDiyPageApi.DiyPage) {
+  return requestClient.put('/promotion/diy-page/update', data);
+}
+
+/** 删除装修页面 */
+export function deleteDiyPage(id: number) {
+  return requestClient.delete(`/promotion/diy-page/delete?id=${id}`);
+}
+
+/** 获得装修页面属性 */
+export function getDiyPageProperty(id: number) {
+  return requestClient.get<string>(`/promotion/diy-page/get-property?id=${id}`);
+}
+
+/** 更新装修页面属性 */
+export function updateDiyPageProperty(data: MallDiyPageApi.DiyPage) {
+  return requestClient.put('/promotion/diy-page/update-property', data);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/diy/template.ts b/apps/web-ele/src/api/mall/promotion/diy/template.ts
new file mode 100644
index 00000000..f7d82d35
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/diy/template.ts
@@ -0,0 +1,80 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { MallDiyPageApi } from './page';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallDiyTemplateApi {
+  /** 装修模板 */
+  export interface DiyTemplate {
+    /** 模板编号 */
+    id?: number;
+    /** 模板名称 */
+    name: string;
+    /** 是否使用 */
+    used: boolean;
+    /** 使用时间 */
+    usedTime?: Date;
+    /** 备注 */
+    remark: string;
+    /** 预览图片地址数组 */
+    previewPicUrls: string[];
+    /** 模板属性 */
+    property: string;
+  }
+
+  /** 装修模板属性（包含页面列表） */
+  export interface DiyTemplateProperty extends DiyTemplate {
+    /** 页面列表 */
+    pages: MallDiyPageApi.DiyPage[];
+  }
+}
+
+/** 查询装修模板列表 */
+export function getDiyTemplatePage(params: PageParam) {
+  return requestClient.get<PageResult<MallDiyTemplateApi.DiyTemplate>>(
+    '/promotion/diy-template/page',
+    { params },
+  );
+}
+
+/** 查询装修模板详情 */
+export function getDiyTemplate(id: number) {
+  return requestClient.get<MallDiyTemplateApi.DiyTemplate>(
+    `/promotion/diy-template/get?id=${id}`,
+  );
+}
+
+/** 新增装修模板 */
+export function createDiyTemplate(data: MallDiyTemplateApi.DiyTemplate) {
+  return requestClient.post('/promotion/diy-template/create', data);
+}
+
+/** 修改装修模板 */
+export function updateDiyTemplate(data: MallDiyTemplateApi.DiyTemplate) {
+  return requestClient.put('/promotion/diy-template/update', data);
+}
+
+/** 删除装修模板 */
+export function deleteDiyTemplate(id: number) {
+  return requestClient.delete(`/promotion/diy-template/delete?id=${id}`);
+}
+
+/** 使用装修模板 */
+export function useDiyTemplate(id: number) {
+  return requestClient.put(`/promotion/diy-template/use?id=${id}`);
+}
+
+/** 获得装修模板属性 */
+export function getDiyTemplateProperty(id: number) {
+  return requestClient.get<MallDiyTemplateApi.DiyTemplateProperty>(
+    `/promotion/diy-template/get-property?id=${id}`,
+  );
+}
+
+/** 更新装修模板属性 */
+export function updateDiyTemplateProperty(
+  data: MallDiyTemplateApi.DiyTemplate,
+) {
+  return requestClient.put('/promotion/diy-template/update-property', data);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts b/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts
new file mode 100644
index 00000000..c2cdaf25
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts
@@ -0,0 +1,70 @@
+import type { PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallKefuConversationApi {
+  /** 客服会话 */
+  export interface Conversation {
+    /** 编号 */
+    id: number;
+    /** 会话所属用户 */
+    userId: number;
+    /** 会话所属用户头像 */
+    userAvatar: string;
+    /** 会话所属用户昵称 */
+    userNickname: string;
+    /** 最后聊天时间 */
+    lastMessageTime: Date;
+    /** 最后聊天内容 */
+    lastMessageContent: string;
+    /** 最后发送的消息类型 */
+    lastMessageContentType: number;
+    /** 管理端置顶 */
+    adminPinned: boolean;
+    /** 用户是否可见 */
+    userDeleted: boolean;
+    /** 管理员是否可见 */
+    adminDeleted: boolean;
+    /** 管理员未读消息数 */
+    adminUnreadMessageCount: number;
+    /** 创建时间 */
+    createTime?: string;
+  }
+
+  /** 会话置顶请求 */
+  export interface ConversationPinnedUpdate {
+    /** 会话编号 */
+    id: number;
+    /** 是否置顶 */
+    pinned: boolean;
+  }
+}
+
+/** 获得客服会话列表 */
+export function getConversationList() {
+  return requestClient.get<PageResult<MallKefuConversationApi.Conversation>>(
+    '/promotion/kefu-conversation/list',
+  );
+}
+
+/** 获得客服会话 */
+export function getConversation(id: number) {
+  return requestClient.get<MallKefuConversationApi.Conversation>(
+    `/promotion/kefu-conversation/get?id=${id}`,
+  );
+}
+
+/** 客服会话置顶 */
+export function updateConversationPinned(
+  data: MallKefuConversationApi.ConversationPinnedUpdate,
+) {
+  return requestClient.put(
+    '/promotion/kefu-conversation/update-conversation-pinned',
+    data,
+  );
+}
+
+/** 删除客服会话 */
+export function deleteConversation(id: number) {
+  return requestClient.delete(`/promotion/kefu-conversation/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/kefu/message/index.ts b/apps/web-ele/src/api/mall/promotion/kefu/message/index.ts
new file mode 100644
index 00000000..4bf08306
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/kefu/message/index.ts
@@ -0,0 +1,67 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallKefuMessageApi {
+  /** 客服消息 */
+  export interface Message {
+    /** 编号 */
+    id: number;
+    /** 会话编号 */
+    conversationId: number;
+    /** 发送人编号 */
+    senderId: number;
+    /** 发送人头像 */
+    senderAvatar: string;
+    /** 发送人类型 */
+    senderType: number;
+    /** 接收人编号 */
+    receiverId: number;
+    /** 接收人类型 */
+    receiverType: number;
+    /** 消息类型 */
+    contentType: number;
+    /** 消息内容 */
+    content: string;
+    /** 是否已读 */
+    readStatus: boolean;
+    /** 创建时间 */
+    createTime: Date;
+  }
+
+  /** 发送消息请求 */
+  export interface MessageSend {
+    /** 会话编号 */
+    conversationId: number;
+    /** 消息类型 */
+    contentType: number;
+    /** 消息内容 */
+    content: string;
+  }
+
+  /** 消息列表查询参数 */
+  export interface MessageQuery extends PageParam {
+    /** 会话编号 */
+    conversationId: number;
+  }
+}
+
+/** 发送客服消息 */
+export function sendKeFuMessage(data: MallKefuMessageApi.MessageSend) {
+  return requestClient.post('/promotion/kefu-message/send', data);
+}
+
+/** 更新客服消息已读状态 */
+export function updateKeFuMessageReadStatus(conversationId: number) {
+  return requestClient.put(
+    `/promotion/kefu-message/update-read-status?conversationId=${conversationId}`,
+  );
+}
+
+/** 获得消息列表（流式加载） */
+export function getKeFuMessageList(params: MallKefuMessageApi.MessageQuery) {
+  return requestClient.get<PageResult<MallKefuMessageApi.Message>>(
+    '/promotion/kefu-message/list',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/mall/promotion/point/index.ts b/apps/web-ele/src/api/mall/promotion/point/index.ts
new file mode 100644
index 00000000..dcde0f21
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/point/index.ts
@@ -0,0 +1,127 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallPointActivityApi {
+  /** 积分商城商品 */
+  export interface PointProduct {
+    /** 积分商城商品编号 */
+    id?: number;
+    /** 积分商城活动 id */
+    activityId?: number;
+    /** 商品 SPU 编号 */
+    spuId?: number;
+    /** 商品 SKU 编号 */
+    skuId: number;
+    /** 可兑换数量 */
+    count: number;
+    /** 兑换积分 */
+    point: number;
+    /** 兑换金额，单位：分 */
+    price: number;
+    /** 积分商城商品库存 */
+    stock: number;
+    /** 积分商城商品状态 */
+    activityStatus?: number;
+  }
+
+  /** 积分商城活动 */
+  export interface PointActivity {
+    /** 积分商城活动编号 */
+    id: number;
+    /** 积分商城活动商品 */
+    spuId: number;
+    /** 活动状态 */
+    status: number;
+    /** 积分商城活动库存 */
+    stock: number;
+    /** 积分商城活动总库存 */
+    totalStock: number;
+    /** 备注 */
+    remark?: string;
+    /** 排序 */
+    sort: number;
+    /** 创建时间 */
+    createTime: string;
+    /** 积分商城商品 */
+    products: PointProduct[];
+    /** 商品名称 */
+    spuName: string;
+    /** 商品主图 */
+    picUrl: string;
+    /** 商品市场价，单位：分 */
+    marketPrice: number;
+    /** 兑换积分 */
+    point: number;
+    /** 兑换金额，单位：分 */
+    price: number;
+  }
+
+  /** 扩展 SKU 配置 */
+  export type SkuExtension = {
+    /** 积分商城商品配置 */
+    productConfig: PointProduct;
+  } & MallSpuApi.Sku;
+
+  /** 扩展 SPU 配置 */
+  export interface SpuExtension extends MallSpuApi.Spu {
+    /** SKU 列表 */
+    skus: SkuExtension[];
+  }
+
+  /** 扩展 SPU 配置（带积分信息） */
+  export interface SpuExtensionWithPoint extends MallSpuApi.Spu {
+    /** 积分商城活动库存 */
+    pointStock: number;
+    /** 积分商城活动总库存 */
+    pointTotalStock: number;
+    /** 兑换积分 */
+    point: number;
+    /** 兑换金额，单位：分 */
+    pointPrice: number;
+  }
+}
+
+/** 查询积分商城活动分页 */
+export function getPointActivityPage(params: PageParam) {
+  return requestClient.get<PageResult<MallPointActivityApi.PointActivity>>(
+    '/promotion/point-activity/page',
+    { params },
+  );
+}
+
+/** 查询积分商城活动详情 */
+export function getPointActivity(id: number) {
+  return requestClient.get<MallPointActivityApi.PointActivity>(
+    `/promotion/point-activity/get?id=${id}`,
+  );
+}
+
+/** 查询积分商城活动列表，基于活动编号数组 */
+export function getPointActivityListByIds(ids: number[]) {
+  return requestClient.get<MallPointActivityApi.PointActivity[]>(
+    `/promotion/point-activity/list-by-ids?ids=${ids}`,
+  );
+}
+
+/** 新增积分商城活动 */
+export function createPointActivity(data: MallPointActivityApi.PointActivity) {
+  return requestClient.post('/promotion/point-activity/create', data);
+}
+
+/** 修改积分商城活动 */
+export function updatePointActivity(data: MallPointActivityApi.PointActivity) {
+  return requestClient.put('/promotion/point-activity/update', data);
+}
+
+/** 删除积分商城活动 */
+export function deletePointActivity(id: number) {
+  return requestClient.delete(`/promotion/point-activity/delete?id=${id}`);
+}
+
+/** 关闭积分商城活动 */
+export function closePointActivity(id: number) {
+  return requestClient.put(`/promotion/point-activity/close?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/reward/rewardActivity.ts b/apps/web-ele/src/api/mall/promotion/reward/rewardActivity.ts
new file mode 100644
index 00000000..2f5cfb26
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/reward/rewardActivity.ts
@@ -0,0 +1,90 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallRewardActivityApi {
+  /** 优惠规则 */
+  export interface RewardRule {
+    /** 满足金额 */
+    limit?: number;
+    /** 优惠金额 */
+    discountPrice?: number;
+    /** 是否包邮 */
+    freeDelivery?: boolean;
+    /** 赠送积分 */
+    point: number;
+    /** 赠送优惠券数量 */
+    giveCouponTemplateCounts?: {
+      [key: number]: number;
+    };
+  }
+
+  /** 满减送活动 */
+  export interface RewardActivity {
+    /** 活动编号 */
+    id?: number;
+    /** 活动名称 */
+    name?: string;
+    /** 开始时间 */
+    startTime?: Date;
+    /** 结束时间 */
+    endTime?: Date;
+    /** 开始和结束时间（仅前端使用） */
+    startAndEndTime?: Date[];
+    /** 备注 */
+    remark?: string;
+    /** 条件类型 */
+    conditionType?: number;
+    /** 商品范围 */
+    productScope?: number;
+    /** 优惠规则列表 */
+    rules: RewardRule[];
+    /** 商品范围值（仅表单使用）：值为品类编号列表、商品编号列表 */
+    productScopeValues?: number[];
+    /** 商品分类编号列表（仅表单使用） */
+    productCategoryIds?: number[];
+    /** 商品 SPU 编号列表（仅表单使用） */
+    productSpuIds?: number[];
+    /** 状态 */
+    status?: number;
+  }
+}
+
+/** 新增满减送活动 */
+export function createRewardActivity(
+  data: MallRewardActivityApi.RewardActivity,
+) {
+  return requestClient.post('/promotion/reward-activity/create', data);
+}
+
+/** 更新满减送活动 */
+export function updateRewardActivity(
+  data: MallRewardActivityApi.RewardActivity,
+) {
+  return requestClient.put('/promotion/reward-activity/update', data);
+}
+
+/** 查询满减送活动列表 */
+export function getRewardActivityPage(params: PageParam) {
+  return requestClient.get<PageResult<MallRewardActivityApi.RewardActivity>>(
+    '/promotion/reward-activity/page',
+    { params },
+  );
+}
+
+/** 查询满减送活动详情 */
+export function getReward(id: number) {
+  return requestClient.get<MallRewardActivityApi.RewardActivity>(
+    `/promotion/reward-activity/get?id=${id}`,
+  );
+}
+
+/** 删除满减送活动 */
+export function deleteRewardActivity(id: number) {
+  return requestClient.delete(`/promotion/reward-activity/delete?id=${id}`);
+}
+
+/** 关闭满减送活动 */
+export function closeRewardActivity(id: number) {
+  return requestClient.put(`/promotion/reward-activity/close?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts b/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
new file mode 100644
index 00000000..e11e8828
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
@@ -0,0 +1,117 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallSeckillActivityApi {
+  /** 秒杀商品 */
+  export interface SeckillProduct {
+    /** 商品 SKU 编号 */
+    skuId: number;
+    /** 商品 SPU 编号 */
+    spuId: number;
+    /** 秒杀价格 */
+    seckillPrice: number;
+    /** 秒杀库存 */
+    stock: number;
+  }
+
+  /** 秒杀活动 */
+  export interface SeckillActivity {
+    /** 活动编号 */
+    id?: number;
+    /** 商品 SPU 编号 */
+    spuId?: number;
+    /** 活动名称 */
+    name?: string;
+    /** 活动状态 */
+    status?: number;
+    /** 备注 */
+    remark?: string;
+    /** 开始时间 */
+    startTime: Date;
+    /** 结束时间 */
+    endTime: Date;
+    /** 排序 */
+    sort?: number;
+    /** 配置编号 */
+    configIds?: number[];
+    /** 订单数量 */
+    orderCount?: number;
+    /** 用户数量 */
+    userCount?: number;
+    /** 总金额 */
+    totalPrice?: number;
+    /** 总限购数量 */
+    totalLimitCount?: number;
+    /** 单次限购数量 */
+    singleLimitCount?: number;
+    /** 秒杀库存 */
+    stock?: number;
+    /** 秒杀总库存 */
+    totalStock?: number;
+    /** 秒杀价格 */
+    seckillPrice?: number;
+    /** 秒杀商品列表 */
+    products?: SeckillProduct[];
+  }
+
+  /** 扩展 SKU 配置 */
+  export type SkuExtension = {
+    /** 秒杀商品配置 */
+    productConfig: SeckillProduct;
+  } & MallSpuApi.Sku;
+
+  /** 扩展 SPU 配置 */
+  export interface SpuExtension extends MallSpuApi.Spu {
+    /** SKU 列表 */
+    skus: SkuExtension[];
+  }
+}
+
+/** 查询秒杀活动列表 */
+export function getSeckillActivityPage(params: PageParam) {
+  return requestClient.get<PageResult<MallSeckillActivityApi.SeckillActivity>>(
+    '/promotion/seckill-activity/page',
+    { params },
+  );
+}
+
+/** 查询秒杀活动列表，基于活动编号数组 */
+export function getSeckillActivityListByIds(ids: number[]) {
+  return requestClient.get<MallSeckillActivityApi.SeckillActivity[]>(
+    `/promotion/seckill-activity/list-by-ids?ids=${ids}`,
+  );
+}
+
+/** 查询秒杀活动详情 */
+export function getSeckillActivity(id: number) {
+  return requestClient.get<MallSeckillActivityApi.SeckillActivity>(
+    `/promotion/seckill-activity/get?id=${id}`,
+  );
+}
+
+/** 新增秒杀活动 */
+export function createSeckillActivity(
+  data: MallSeckillActivityApi.SeckillActivity,
+) {
+  return requestClient.post('/promotion/seckill-activity/create', data);
+}
+
+/** 修改秒杀活动 */
+export function updateSeckillActivity(
+  data: MallSeckillActivityApi.SeckillActivity,
+) {
+  return requestClient.put('/promotion/seckill-activity/update', data);
+}
+
+/** 关闭秒杀活动 */
+export function closeSeckillActivity(id: number) {
+  return requestClient.put(`/promotion/seckill-activity/close?id=${id}`);
+}
+
+/** 删除秒杀活动 */
+export function deleteSeckillActivity(id: number) {
+  return requestClient.delete(`/promotion/seckill-activity/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/promotion/seckill/seckillConfig.ts b/apps/web-ele/src/api/mall/promotion/seckill/seckillConfig.ts
new file mode 100644
index 00000000..39be3012
--- /dev/null
+++ b/apps/web-ele/src/api/mall/promotion/seckill/seckillConfig.ts
@@ -0,0 +1,74 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallSeckillConfigApi {
+  /** 秒杀时段 */
+  export interface SeckillConfig {
+    /** 编号 */
+    id: number;
+    /** 秒杀时段名称 */
+    name: string;
+    /** 开始时间点 */
+    startTime: string;
+    /** 结束时间点 */
+    endTime: string;
+    /** 秒杀轮播图 */
+    sliderPicUrls: string[];
+    /** 活动状态 */
+    status: number;
+  }
+
+  /** 时段配置状态更新 */
+  export interface StatusUpdate {
+    /** 编号 */
+    id: number;
+    /** 状态 */
+    status: number;
+  }
+}
+
+/** 查询秒杀时段分页 */
+export function getSeckillConfigPage(params: PageParam) {
+  return requestClient.get<PageResult<MallSeckillConfigApi.SeckillConfig>>(
+    '/promotion/seckill-config/page',
+    { params },
+  );
+}
+
+/** 查询秒杀时段列表 */
+export function getSimpleSeckillConfigList() {
+  return requestClient.get<MallSeckillConfigApi.SeckillConfig[]>(
+    '/promotion/seckill-config/list',
+  );
+}
+
+/** 查询秒杀时段详情 */
+export function getSeckillConfig(id: number) {
+  return requestClient.get<MallSeckillConfigApi.SeckillConfig>(
+    `/promotion/seckill-config/get?id=${id}`,
+  );
+}
+
+/** 新增秒杀时段 */
+export function createSeckillConfig(data: MallSeckillConfigApi.SeckillConfig) {
+  return requestClient.post('/promotion/seckill-config/create', data);
+}
+
+/** 修改秒杀时段 */
+export function updateSeckillConfig(data: MallSeckillConfigApi.SeckillConfig) {
+  return requestClient.put('/promotion/seckill-config/update', data);
+}
+
+/** 删除秒杀时段 */
+export function deleteSeckillConfig(id: number) {
+  return requestClient.delete(`/promotion/seckill-config/delete?id=${id}`);
+}
+
+/** 修改时段配置状态 */
+export function updateSeckillConfigStatus(id: number, status: number) {
+  return requestClient.put('/promotion/seckill-config/update-status', {
+    id,
+    status,
+  });
+}
diff --git a/apps/web-ele/src/api/mall/statistics/common.ts b/apps/web-ele/src/api/mall/statistics/common.ts
new file mode 100644
index 00000000..bb474b5c
--- /dev/null
+++ b/apps/web-ele/src/api/mall/statistics/common.ts
@@ -0,0 +1,5 @@
+/** 数据对照 Response */
+export interface MallDataComparisonResp<T> {
+  value: T;
+  reference: T;
+}
diff --git a/apps/web-ele/src/api/mall/statistics/member.ts b/apps/web-ele/src/api/mall/statistics/member.ts
new file mode 100644
index 00000000..bcc99304
--- /dev/null
+++ b/apps/web-ele/src/api/mall/statistics/member.ts
@@ -0,0 +1,134 @@
+import type { MallDataComparisonResp } from './common';
+
+import { formatDate2 } from '@vben/utils';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallMemberStatisticsApi {
+  /** 会员分析 Request */
+  export interface AnalyseReq {
+    times: Date[];
+  }
+
+  /** 会员分析对照数据 Response */
+  export interface AnalyseComparison {
+    registerUserCount: number;
+    visitUserCount: number;
+    rechargeUserCount: number;
+  }
+
+  /** 会员分析 Response */
+  export interface Analyse {
+    visitUserCount: number;
+    orderUserCount: number;
+    payUserCount: number;
+    atv: number;
+    comparison: MallDataComparisonResp<AnalyseComparison>;
+  }
+
+  /** 会员地区统计 Response */
+  export interface AreaStatistics {
+    areaId: number;
+    areaName: string;
+    userCount: number;
+    orderCreateUserCount: number;
+    orderPayUserCount: number;
+    orderPayPrice: number;
+  }
+
+  /** 会员性别统计 Response */
+  export interface SexStatistics {
+    sex: number;
+    userCount: number;
+  }
+
+  /** 会员统计 Response */
+  export interface Summary {
+    userCount: number;
+    rechargeUserCount: number;
+    rechargePrice: number;
+    expensePrice: number;
+  }
+
+  /** 会员终端统计 Response */
+  export interface TerminalStatistics {
+    terminal: number;
+    userCount: number;
+  }
+
+  /** 会员数量统计 Response */
+  export interface Count {
+    /** 用户访问量 */
+    visitUserCount: string;
+    /** 注册用户数量 */
+    registerUserCount: number;
+  }
+
+  /** 会员注册数量 Response */
+  export interface RegisterCount {
+    date: string;
+    count: number;
+  }
+}
+
+/** 查询会员统计 */
+export function getMemberSummary() {
+  return requestClient.get<MallMemberStatisticsApi.Summary>(
+    '/statistics/member/summary',
+  );
+}
+
+/** 查询会员分析数据 */
+export function getMemberAnalyse(params: MallMemberStatisticsApi.AnalyseReq) {
+  return requestClient.get<MallMemberStatisticsApi.Analyse>(
+    '/statistics/member/analyse',
+    {
+      params: {
+        times: [
+          formatDate2(params.times[0] || new Date()),
+          formatDate2(params.times[1] || new Date()),
+        ],
+      },
+    },
+  );
+}
+
+/** 按照省份，查询会员统计列表 */
+export function getMemberAreaStatisticsList() {
+  return requestClient.get<MallMemberStatisticsApi.AreaStatistics[]>(
+    '/statistics/member/area-statistics-list',
+  );
+}
+
+/** 按照性别，查询会员统计列表 */
+export function getMemberSexStatisticsList() {
+  return requestClient.get<MallMemberStatisticsApi.SexStatistics[]>(
+    '/statistics/member/sex-statistics-list',
+  );
+}
+
+/** 按照终端，查询会员统计列表 */
+export function getMemberTerminalStatisticsList() {
+  return requestClient.get<MallMemberStatisticsApi.TerminalStatistics[]>(
+    '/statistics/member/terminal-statistics-list',
+  );
+}
+
+/** 获得用户数量量对照 */
+export function getUserCountComparison() {
+  return requestClient.get<
+    MallDataComparisonResp<MallMemberStatisticsApi.Count>
+  >('/statistics/member/user-count-comparison');
+}
+
+/** 获得会员注册数量列表 */
+export function getMemberRegisterCountList(beginTime: Date, endTime: Date) {
+  return requestClient.get<MallMemberStatisticsApi.RegisterCount[]>(
+    '/statistics/member/register-count-list',
+    {
+      params: {
+        times: [formatDate2(beginTime), formatDate2(endTime)],
+      },
+    },
+  );
+}
diff --git a/apps/web-ele/src/api/mall/statistics/pay.ts b/apps/web-ele/src/api/mall/statistics/pay.ts
new file mode 100644
index 00000000..d78ea034
--- /dev/null
+++ b/apps/web-ele/src/api/mall/statistics/pay.ts
@@ -0,0 +1,16 @@
+import { requestClient } from '#/api/request';
+
+export namespace MallPayStatisticsApi {
+  /** 支付统计 */
+  export interface PaySummaryResp {
+    /** 充值金额，单位分 */
+    rechargePrice: number;
+  }
+}
+
+/** 获取钱包充值金额 */
+export function getWalletRechargePrice() {
+  return requestClient.get<MallPayStatisticsApi.PaySummaryResp>(
+    '/statistics/pay/summary',
+  );
+}
diff --git a/apps/web-ele/src/api/mall/statistics/product.ts b/apps/web-ele/src/api/mall/statistics/product.ts
new file mode 100644
index 00000000..089da4af
--- /dev/null
+++ b/apps/web-ele/src/api/mall/statistics/product.ts
@@ -0,0 +1,102 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { MallDataComparisonResp } from './common';
+
+import { formatDate2 } from '@vben/utils';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallProductStatisticsApi {
+  /** 商品统计数据 */
+  export interface ProductStatistics {
+    /** 编号 */
+    id: number;
+    /** 统计日期 */
+    day: string;
+    /** 商品 SPU 编号 */
+    spuId: number;
+    /** 商品 SPU 名称 */
+    spuName: string;
+    /** 商品 SPU 图片 */
+    spuPicUrl: string;
+    /** 浏览次数 */
+    browseCount: number;
+    /** 浏览人数 */
+    browseUserCount: number;
+    /** 收藏次数 */
+    favoriteCount: number;
+    /** 加购次数 */
+    cartCount: number;
+    /** 下单次数 */
+    orderCount: number;
+    /** 支付次数 */
+    orderPayCount: number;
+    /** 支付金额 */
+    orderPayPrice: number;
+    /** 售后次数 */
+    afterSaleCount: number;
+    /** 退款金额 */
+    afterSaleRefundPrice: number;
+    /** 浏览转化率 */
+    browseConvertPercent: number;
+  }
+
+  /** 会员分析 Request */
+  export interface ProductStatisticsReq {
+    times: Date[];
+  }
+}
+
+/** 获得商品统计分析 */
+export function getProductStatisticsAnalyse(
+  params: MallProductStatisticsApi.ProductStatisticsReq,
+) {
+  return requestClient.get<
+    MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>
+  >('/statistics/product/analyse', {
+    params: {
+      times: [
+        formatDate2(params.times[0] || new Date()),
+        formatDate2(params.times[1] || new Date()),
+      ],
+    },
+  });
+}
+
+/** 获得商品状况明细 */
+export function getProductStatisticsList(
+  params: MallProductStatisticsApi.ProductStatisticsReq,
+) {
+  return requestClient.get<MallProductStatisticsApi.ProductStatistics[]>(
+    '/statistics/product/list',
+    {
+      params: {
+        times: [
+          formatDate2(params.times[0] || new Date()),
+          formatDate2(params.times[1] || new Date()),
+        ],
+      },
+    },
+  );
+}
+
+/** 导出获得商品状况明细 Excel */
+export function exportProductStatisticsExcel(
+  params: MallProductStatisticsApi.ProductStatisticsReq,
+) {
+  return requestClient.download('/statistics/product/export-excel', {
+    params: {
+      times: [
+        formatDate2(params.times[0] || new Date()),
+        formatDate2(params.times[1] || new Date()),
+      ],
+    },
+  });
+}
+
+/** 获得商品排行榜分页 */
+export function getProductStatisticsRankPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MallProductStatisticsApi.ProductStatistics>
+  >('/statistics/product/rank-page', { params });
+}
diff --git a/apps/web-ele/src/api/mall/statistics/trade.ts b/apps/web-ele/src/api/mall/statistics/trade.ts
new file mode 100644
index 00000000..0b52be51
--- /dev/null
+++ b/apps/web-ele/src/api/mall/statistics/trade.ts
@@ -0,0 +1,138 @@
+import type { MallDataComparisonResp } from './common';
+
+import { formatDate2 } from '@vben/utils';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallTradeStatisticsApi {
+  /** 交易统计 Response */
+  export interface TradeSummary {
+    yesterdayOrderCount: number;
+    monthOrderCount: number;
+    yesterdayPayPrice: number;
+    monthPayPrice: number;
+  }
+
+  /** 交易状况 Request */
+  export interface TradeTrendReq {
+    times: Date[];
+  }
+
+  /** 交易状况统计 Response */
+  export interface TradeTrendSummary {
+    time: string;
+    turnoverPrice: number;
+    orderPayPrice: number;
+    rechargePrice: number;
+    expensePrice: number;
+    walletPayPrice: number;
+    brokerageSettlementPrice: number;
+    afterSaleRefundPrice: number;
+  }
+
+  /** 交易订单数量 Response */
+  export interface TradeOrderCount {
+    /** 待发货 */
+    undelivered?: number;
+    /** 待核销 */
+    pickUp?: number;
+    /** 退款中 */
+    afterSaleApply?: number;
+    /** 提现待审核 */
+    auditingWithdraw?: number;
+  }
+
+  /** 交易订单统计 Response */
+  export interface TradeOrderSummary {
+    /** 支付订单商品数 */
+    orderPayCount?: number;
+    /** 总支付金额，单位：分 */
+    orderPayPrice?: number;
+  }
+
+  /** 订单量趋势统计 Response */
+  export interface TradeOrderTrend {
+    /** 日期 */
+    date: string;
+    /** 订单数量 */
+    orderPayCount: number;
+    /** 订单支付金额 */
+    orderPayPrice: number;
+  }
+}
+
+/** 时间参数需要格式化, 确保接口能识别 */
+const formatDateParam = (params: MallTradeStatisticsApi.TradeTrendReq) => {
+  return {
+    times: [
+      formatDate2(params.times[0] || new Date()),
+      formatDate2(params.times[1] || new Date()),
+    ],
+  };
+};
+
+/** 查询交易统计 */
+export function getTradeStatisticsSummary() {
+  return requestClient.get<
+    MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>
+  >('/statistics/trade/summary');
+}
+
+/** 获得交易状况统计 */
+export function getTradeStatisticsAnalyse(
+  params: MallTradeStatisticsApi.TradeTrendReq,
+) {
+  return requestClient.get<
+    MallDataComparisonResp<MallTradeStatisticsApi.TradeTrendSummary>
+  >('/statistics/trade/analyse', { params: formatDateParam(params) });
+}
+
+/** 获得交易状况明细 */
+export function getTradeStatisticsList(
+  params: MallTradeStatisticsApi.TradeTrendReq,
+) {
+  return requestClient.get<MallTradeStatisticsApi.TradeTrendSummary[]>(
+    '/statistics/trade/list',
+    { params: formatDateParam(params) },
+  );
+}
+
+/** 导出交易状况明细 */
+export function exportTradeStatisticsExcel(
+  params: MallTradeStatisticsApi.TradeTrendReq,
+) {
+  return requestClient.download('/statistics/trade/export-excel', {
+    params: formatDateParam(params),
+  });
+}
+
+/** 获得交易订单数量 */
+export function getOrderCount() {
+  return requestClient.get<MallTradeStatisticsApi.TradeOrderCount>(
+    '/statistics/trade/order-count',
+  );
+}
+
+/** 获得交易订单数量对照 */
+export function getOrderComparison() {
+  return requestClient.get<
+    MallDataComparisonResp<MallTradeStatisticsApi.TradeOrderSummary>
+  >('/statistics/trade/order-comparison');
+}
+
+/** 获得订单量趋势统计 */
+export function getOrderCountTrendComparison(
+  type: number,
+  beginTime: Date,
+  endTime: Date,
+) {
+  return requestClient.get<
+    MallDataComparisonResp<MallTradeStatisticsApi.TradeOrderTrend>[]
+  >('/statistics/trade/order-count-trend', {
+    params: {
+      type,
+      beginTime: formatDate2(beginTime),
+      endTime: formatDate2(endTime),
+    },
+  });
+}
diff --git a/apps/web-ele/src/api/mall/trade/afterSale/index.ts b/apps/web-ele/src/api/mall/trade/afterSale/index.ts
new file mode 100644
index 00000000..2aed74c2
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/afterSale/index.ts
@@ -0,0 +1,144 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallAfterSaleApi {
+  /** 商品属性 */
+  export interface ProductProperty {
+    /** 属性的编号 */
+    propertyId?: null | number;
+    /** 属性的名称 */
+    propertyName?: string;
+    /** 属性值的编号 */
+    valueId?: null | number;
+    /** 属性值的名称 */
+    valueName?: string;
+  }
+
+  /** 交易售后 */
+  export interface AfterSale {
+    /** 售后编号，主键自增 */
+    id?: null | number;
+    /** 售后单号 */
+    no?: string;
+    /** 退款状态 */
+    status?: null | number;
+    /** 售后方式 */
+    way?: null | number;
+    /** 售后类型 */
+    type?: null | number;
+    /** 用户编号 */
+    userId?: null | number;
+    /** 申请原因 */
+    applyReason?: string;
+    /** 补充描述 */
+    applyDescription?: string;
+    /** 补充凭证图片 */
+    applyPicUrls?: string[];
+    /** 交易订单编号 */
+    orderId?: null | number;
+    /** 订单流水号 */
+    orderNo?: string;
+    /** 交易订单项编号 */
+    orderItemId?: null | number;
+    /** 商品 SPU 编号 */
+    spuId?: null | number;
+    /** 商品 SPU 名称 */
+    spuName?: string;
+    /** 商品 SKU 编号 */
+    skuId?: null | number;
+    /** 属性数组 */
+    properties?: ProductProperty[];
+    /** 商品图片 */
+    picUrl?: string;
+    /** 退货商品数量 */
+    count?: null | number;
+    /** 审批时间 */
+    auditTime?: Date;
+    /** 审批人 */
+    auditUserId?: null | number;
+    /** 审批备注 */
+    auditReason?: string;
+    /** 退款金额，单位：分 */
+    refundPrice?: null | number;
+    /** 支付退款编号 */
+    payRefundId?: null | number;
+    /** 退款时间 */
+    refundTime?: Date;
+    /** 退货物流公司编号 */
+    logisticsId?: null | number;
+    /** 退货物流单号 */
+    logisticsNo?: string;
+    /** 退货时间 */
+    deliveryTime?: Date;
+    /** 收货时间 */
+    receiveTime?: Date;
+    /** 收货备注 */
+    receiveReason?: string;
+    /** 订单 */
+    order?: MallOrderApi.Order;
+    /** 订单操作日志 */
+    logs?: MallOrderApi.OrderLog[];
+    /** 订单项 */
+    orderItem?: MallOrderApi.OrderItem;
+    /** 用户信息 */
+    user?: {
+      /** 用户头像 */
+      avatar?: string;
+      /** 用户编号 */
+      id?: null | number;
+      /** 用户昵称 */
+      nickname?: string;
+    };
+  }
+
+  /** 拒绝售后请求 */
+  export interface DisagreeRequest {
+    /** 售后编号 */
+    id: number;
+    /** 拒绝原因 */
+    reason: string;
+  }
+}
+
+/** 获得交易售后分页 */
+export function getAfterSalePage(params: PageParam) {
+  return requestClient.get<PageResult<MallAfterSaleApi.AfterSale>>(
+    '/trade/after-sale/page',
+    { params },
+  );
+}
+
+/** 获得交易售后详情 */
+export function getAfterSale(id: number) {
+  return requestClient.get<MallAfterSaleApi.AfterSale>(
+    `/trade/after-sale/get-detail?id=${id}`,
+  );
+}
+
+/** 同意售后 */
+export function agree(id: number) {
+  return requestClient.put(`/trade/after-sale/agree?id=${id}`);
+}
+
+/** 拒绝售后 */
+export function disagree(data: MallAfterSaleApi.DisagreeRequest) {
+  return requestClient.put('/trade/after-sale/disagree', data);
+}
+
+/** 确认收货 */
+export function receive(id: number) {
+  return requestClient.put(`/trade/after-sale/receive?id=${id}`);
+}
+
+/** 拒绝收货 */
+export function refuse(id: number) {
+  return requestClient.put(`/trade/after-sale/refuse?id=${id}`);
+}
+
+/** 确认退款 */
+export function refund(id: number) {
+  return requestClient.put(`/trade/after-sale/refund?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mall/trade/brokerage/record/index.ts b/apps/web-ele/src/api/mall/trade/brokerage/record/index.ts
new file mode 100644
index 00000000..86ce41ba
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/brokerage/record/index.ts
@@ -0,0 +1,46 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallBrokerageRecordApi {
+  /** 佣金记录 */
+  export interface BrokerageRecord {
+    /** 编号 */
+    id: number;
+    /** 用户编号 */
+    userId: number;
+    /** 用户昵称 */
+    userNickname: string;
+    /** 用户头像 */
+    userAvatar: string;
+    /** 佣金金额，单位：分 */
+    price: number;
+    /** 佣金类型 */
+    type: number;
+    /** 关联订单编号 */
+    orderId: number;
+    /** 关联订单号 */
+    orderNo: string;
+    /** 创建时间 */
+    createTime: Date;
+    /** 状态 */
+    status: number;
+    /** 结算时间 */
+    settlementTime: Date;
+  }
+}
+
+/** 查询佣金记录列表 */
+export function getBrokerageRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MallBrokerageRecordApi.BrokerageRecord>>(
+    '/trade/brokerage-record/page',
+    { params },
+  );
+}
+
+/** 查询佣金记录详情 */
+export function getBrokerageRecord(id: number) {
+  return requestClient.get<MallBrokerageRecordApi.BrokerageRecord>(
+    `/trade/brokerage-record/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mall/trade/brokerage/user/index.ts b/apps/web-ele/src/api/mall/trade/brokerage/user/index.ts
new file mode 100644
index 00000000..51c24f25
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/brokerage/user/index.ts
@@ -0,0 +1,99 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallBrokerageUserApi {
+  /** 分销用户 */
+  export interface BrokerageUser {
+    /** 编号 */
+    id: number;
+    /** 推广员编号 */
+    bindUserId: number;
+    /** 推广员绑定时间 */
+    bindUserTime: Date;
+    /** 是否启用分销 */
+    brokerageEnabled: boolean;
+    /** 分销资格时间 */
+    brokerageTime: Date;
+    /** 可提现金额，单位：分 */
+    price: number;
+    /** 冻结金额，单位：分 */
+    frozenPrice: number;
+    /** 用户昵称 */
+    nickname: string;
+    /** 用户头像 */
+    avatar: string;
+  }
+
+  /** 创建分销用户请求 */
+  export interface CreateRequest {
+    /** 用户编号 */
+    userId: number;
+    /** 推广员编号 */
+    bindUserId: number;
+  }
+
+  /** 修改推广员请求 */
+  export interface UpdateBindUserRequest {
+    /** 用户编号 */
+    id: number;
+    /** 推广员编号 */
+    bindUserId: number;
+  }
+
+  /** 清除推广员请求 */
+  export interface ClearBindUserRequest {
+    /** 用户编号 */
+    id: number;
+  }
+
+  /** 修改推广资格请求 */
+  export interface UpdateBrokerageEnabledRequest {
+    /** 用户编号 */
+    id: number;
+    /** 是否启用分销 */
+    enabled: boolean;
+  }
+}
+
+/** 创建分销用户 */
+export function createBrokerageUser(data: MallBrokerageUserApi.CreateRequest) {
+  return requestClient.post('/trade/brokerage-user/create', data);
+}
+
+/** 查询分销用户列表 */
+export function getBrokerageUserPage(params: PageParam) {
+  return requestClient.get<PageResult<MallBrokerageUserApi.BrokerageUser>>(
+    '/trade/brokerage-user/page',
+    { params },
+  );
+}
+
+/** 查询分销用户详情 */
+export function getBrokerageUser(id: number) {
+  return requestClient.get<MallBrokerageUserApi.BrokerageUser>(
+    `/trade/brokerage-user/get?id=${id}`,
+  );
+}
+
+/** 修改推广员 */
+export function updateBindUser(
+  data: MallBrokerageUserApi.UpdateBindUserRequest,
+) {
+  return requestClient.put('/trade/brokerage-user/update-bind-user', data);
+}
+
+/** 清除推广员 */
+export function clearBindUser(data: MallBrokerageUserApi.ClearBindUserRequest) {
+  return requestClient.put('/trade/brokerage-user/clear-bind-user', data);
+}
+
+/** 修改推广资格 */
+export function updateBrokerageEnabled(
+  data: MallBrokerageUserApi.UpdateBrokerageEnabledRequest,
+) {
+  return requestClient.put(
+    '/trade/brokerage-user/update-brokerage-enable',
+    data,
+  );
+}
diff --git a/apps/web-ele/src/api/mall/trade/brokerage/withdraw/index.ts b/apps/web-ele/src/api/mall/trade/brokerage/withdraw/index.ts
new file mode 100644
index 00000000..08acdb4f
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/brokerage/withdraw/index.ts
@@ -0,0 +1,81 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallBrokerageWithdrawApi {
+  /** 佣金提现 */
+  export interface BrokerageWithdraw {
+    /** 编号 */
+    id: number;
+    /** 用户编号 */
+    userId: number;
+    /** 提现金额，单位：分 */
+    price: number;
+    /** 手续费，单位：分 */
+    feePrice: number;
+    /** 总金额，单位：分 */
+    totalPrice: number;
+    /** 提现类型 */
+    type: number;
+    /** 用户名称 */
+    userName: string;
+    /** 用户账号 */
+    userAccount: string;
+    /** 银行名称 */
+    bankName: string;
+    /** 银行地址 */
+    bankAddress: string;
+    /** 收款码地址 */
+    qrCodeUrl: string;
+    /** 状态 */
+    status: number;
+    /** 审核备注 */
+    auditReason: string;
+    /** 审核时间 */
+    auditTime: Date;
+    /** 备注 */
+    remark: string;
+    /** 支付转账编号 */
+    payTransferId?: number;
+    /** 转账渠道编码 */
+    transferChannelCode?: string;
+    /** 转账时间 */
+    transferTime?: Date;
+    /** 转账错误信息 */
+    transferErrorMsg?: string;
+  }
+
+  /** 驳回申请请求 */
+  export interface RejectRequest {
+    /** 编号 */
+    id: number;
+    /** 驳回原因 */
+    auditReason: string;
+  }
+}
+
+/** 查询佣金提现列表 */
+export function getBrokerageWithdrawPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MallBrokerageWithdrawApi.BrokerageWithdraw>
+  >('/trade/brokerage-withdraw/page', { params });
+}
+
+/** 查询佣金提现详情 */
+export function getBrokerageWithdraw(id: number) {
+  return requestClient.get<MallBrokerageWithdrawApi.BrokerageWithdraw>(
+    `/trade/brokerage-withdraw/get?id=${id}`,
+  );
+}
+
+/** 佣金提现 - 通过申请 */
+export function approveBrokerageWithdraw(id: number) {
+  return requestClient.put(`/trade/brokerage-withdraw/approve?id=${id}`);
+}
+
+/** 审核佣金提现 - 驳回申请 */
+export function rejectBrokerageWithdraw(
+  data: MallBrokerageWithdrawApi.RejectRequest,
+) {
+  return requestClient.put('/trade/brokerage-withdraw/reject', data);
+}
diff --git a/apps/web-ele/src/api/mall/trade/config/index.ts b/apps/web-ele/src/api/mall/trade/config/index.ts
new file mode 100644
index 00000000..de419d29
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/config/index.ts
@@ -0,0 +1,33 @@
+import { requestClient } from '#/api/request';
+
+export namespace MallTradeConfigApi {
+  /** 交易中心配置 */
+  export interface Config {
+    id?: number;
+    afterSaleRefundReasons?: string[];
+    afterSaleReturnReasons?: string[];
+    deliveryExpressFreeEnabled?: boolean;
+    deliveryExpressFreePrice?: number;
+    deliveryPickUpEnabled?: boolean;
+    brokerageEnabled?: boolean;
+    brokerageEnabledCondition?: number;
+    brokerageBindMode?: number;
+    brokeragePosterUrls?: string;
+    brokerageFirstPercent?: number;
+    brokerageSecondPercent?: number;
+    brokerageWithdrawMinPrice?: number;
+    brokerageFrozenDays?: number;
+    brokerageWithdrawTypes?: string;
+    tencentLbsKey?: string;
+  }
+}
+
+/** 查询交易中心配置详情 */
+export function getTradeConfig() {
+  return requestClient.get<MallTradeConfigApi.Config>('/trade/config/get');
+}
+
+/** 保存交易中心配置 */
+export function saveTradeConfig(data: MallTradeConfigApi.Config) {
+  return requestClient.put('/trade/config/save', data);
+}
diff --git a/apps/web-ele/src/api/mall/trade/delivery/express/index.ts b/apps/web-ele/src/api/mall/trade/delivery/express/index.ts
new file mode 100644
index 00000000..071dd2f1
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/delivery/express/index.ts
@@ -0,0 +1,79 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallDeliveryExpressApi {
+  /** 快递公司 */
+  export interface DeliveryExpress {
+    /** 编号 */
+    id: number;
+    /** 快递公司编码 */
+    code: string;
+    /** 快递公司名称 */
+    name: string;
+    /** 快递公司 logo */
+    logo: string;
+    /** 排序 */
+    sort: number;
+    /** 状态 */
+    status: number;
+  }
+
+  /** 快递公司精简信息 */
+  export interface SimpleDeliveryExpress {
+    /** 编号 */
+    id: number;
+    /** 快递公司编码 */
+    code: string;
+    /** 快递公司名称 */
+    name: string;
+  }
+}
+
+/** 查询快递公司列表 */
+export function getDeliveryExpressPage(params: PageParam) {
+  return requestClient.get<PageResult<MallDeliveryExpressApi.DeliveryExpress>>(
+    '/trade/delivery/express/page',
+    { params },
+  );
+}
+
+/** 查询快递公司详情 */
+export function getDeliveryExpress(id: number) {
+  return requestClient.get<MallDeliveryExpressApi.DeliveryExpress>(
+    `/trade/delivery/express/get?id=${id}`,
+  );
+}
+
+/** 获得快递公司精简信息列表 */
+export function getSimpleDeliveryExpressList() {
+  return requestClient.get<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
+    '/trade/delivery/express/list-all-simple',
+  );
+}
+
+/** 新增快递公司 */
+export function createDeliveryExpress(
+  data: MallDeliveryExpressApi.DeliveryExpress,
+) {
+  return requestClient.post('/trade/delivery/express/create', data);
+}
+
+/** 修改快递公司 */
+export function updateDeliveryExpress(
+  data: MallDeliveryExpressApi.DeliveryExpress,
+) {
+  return requestClient.put('/trade/delivery/express/update', data);
+}
+
+/** 删除快递公司 */
+export function deleteDeliveryExpress(id: number) {
+  return requestClient.delete(`/trade/delivery/express/delete?id=${id}`);
+}
+
+/** 导出快递公司 Excel */
+export function exportDeliveryExpress(params: PageParam) {
+  return requestClient.download('/trade/delivery/express/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/mall/trade/delivery/expressTemplate/index.ts b/apps/web-ele/src/api/mall/trade/delivery/expressTemplate/index.ts
new file mode 100644
index 00000000..fa81b169
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/delivery/expressTemplate/index.ts
@@ -0,0 +1,95 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallDeliveryExpressTemplateApi {
+  /** 运费模板计费 */
+  export interface TemplateCharge {
+    /** 区域编号列表 */
+    areaIds: number[];
+    /** 首件数量 */
+    startCount: number;
+    /** 首件价格，单位：分 */
+    startPrice: number;
+    /** 续件数量 */
+    extraCount: number;
+    /** 续件价格，单位：分 */
+    extraPrice: number;
+  }
+
+  /** 运费模板包邮 */
+  export interface TemplateFree {
+    /** 区域编号列表 */
+    areaIds: number[];
+    /** 包邮件数 */
+    freeCount: number;
+    /** 包邮金额，单位：分 */
+    freePrice: number;
+  }
+
+  /** 快递运费模板 */
+  export interface ExpressTemplate {
+    /** 编号 */
+    id: number;
+    /** 模板名称 */
+    name: string;
+    /** 计费方式 */
+    chargeMode: number;
+    /** 排序 */
+    sort: number;
+    /** 计费区域列表 */
+    templateCharge: TemplateCharge[];
+    /** 包邮区域列表 */
+    templateFree: TemplateFree[];
+  }
+
+  /** 运费模板精简信息 */
+  export interface SimpleTemplate {
+    /** 编号 */
+    id: number;
+    /** 模板名称 */
+    name: string;
+  }
+}
+
+/** 查询快递运费模板列表 */
+export function getDeliveryExpressTemplatePage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MallDeliveryExpressTemplateApi.ExpressTemplate>
+  >('/trade/delivery/express-template/page', { params });
+}
+
+/** 查询快递运费模板详情 */
+export function getDeliveryExpressTemplate(id: number) {
+  return requestClient.get<MallDeliveryExpressTemplateApi.ExpressTemplate>(
+    `/trade/delivery/express-template/get?id=${id}`,
+  );
+}
+
+/** 查询快递运费模板详情 */
+export function getSimpleTemplateList() {
+  return requestClient.get<MallDeliveryExpressTemplateApi.SimpleTemplate[]>(
+    '/trade/delivery/express-template/list-all-simple',
+  );
+}
+
+/** 新增快递运费模板 */
+export function createDeliveryExpressTemplate(
+  data: MallDeliveryExpressTemplateApi.ExpressTemplate,
+) {
+  return requestClient.post('/trade/delivery/express-template/create', data);
+}
+
+/** 修改快递运费模板 */
+export function updateDeliveryExpressTemplate(
+  data: MallDeliveryExpressTemplateApi.ExpressTemplate,
+) {
+  return requestClient.put('/trade/delivery/express-template/update', data);
+}
+
+/** 删除快递运费模板 */
+export function deleteDeliveryExpressTemplate(id: number) {
+  return requestClient.delete(
+    `/trade/delivery/express-template/delete?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mall/trade/delivery/pickUpStore/index.ts b/apps/web-ele/src/api/mall/trade/delivery/pickUpStore/index.ts
new file mode 100644
index 00000000..fe1d9d39
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/delivery/pickUpStore/index.ts
@@ -0,0 +1,94 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallDeliveryPickUpStoreApi {
+  /** 自提门店 */
+  export interface PickUpStore {
+    /** 编号 */
+    id: number;
+    /** 门店名称 */
+    name: string;
+    /** 门店简介 */
+    introduction: string;
+    /** 联系电话 */
+    phone: string;
+    /** 区域编号 */
+    areaId: number;
+    /** 详细地址 */
+    detailAddress: string;
+    /** 门店 logo */
+    logo: string;
+    /** 营业开始时间 */
+    openingTime: string;
+    /** 营业结束时间 */
+    closingTime: string;
+    /** 纬度 */
+    latitude: number;
+    /** 经度 */
+    longitude: number;
+    /** 状态 */
+    status: number;
+    /** 绑定用户编号组数 */
+    verifyUserIds: number[];
+  }
+
+  /** 绑定自提店员请求 */
+  export interface BindStaffRequest {
+    id?: number;
+    /** 门店名称 */
+    name: string;
+    /** 门店编号 */
+    storeId: number;
+    /** 用户编号列表 */
+    userIds: number[];
+  }
+}
+
+/** 查询自提门店列表 */
+export function getDeliveryPickUpStorePage(params: PageParam) {
+  return requestClient.get<PageResult<MallDeliveryPickUpStoreApi.PickUpStore>>(
+    '/trade/delivery/pick-up-store/page',
+    { params },
+  );
+}
+
+/** 查询自提门店详情 */
+export function getDeliveryPickUpStore(id: number) {
+  return requestClient.get<MallDeliveryPickUpStoreApi.PickUpStore>(
+    `/trade/delivery/pick-up-store/get?id=${id}`,
+  );
+}
+
+/** 查询自提门店精简列表 */
+export function getSimpleDeliveryPickUpStoreList() {
+  return requestClient.get<MallDeliveryPickUpStoreApi.PickUpStore[]>(
+    '/trade/delivery/pick-up-store/simple-list',
+  );
+}
+
+/** 新增自提门店 */
+export function createDeliveryPickUpStore(
+  data: MallDeliveryPickUpStoreApi.PickUpStore,
+) {
+  return requestClient.post('/trade/delivery/pick-up-store/create', data);
+}
+
+/** 修改自提门店 */
+export function updateDeliveryPickUpStore(
+  data: MallDeliveryPickUpStoreApi.PickUpStore,
+) {
+  return requestClient.put('/trade/delivery/pick-up-store/update', data);
+}
+
+/** 删除自提门店 */
+export function deleteDeliveryPickUpStore(id: number) {
+  return requestClient.delete(`/trade/delivery/pick-up-store/delete?id=${id}`);
+}
+
+/** 绑定自提店员 */
+export function bindStoreStaffId(
+  data: MallDeliveryPickUpStoreApi.BindStaffRequest,
+) {
+  return requestClient.post('/trade/delivery/pick-up-store/bind', data);
+}
diff --git a/apps/web-ele/src/api/mall/trade/order/index.ts b/apps/web-ele/src/api/mall/trade/order/index.ts
new file mode 100644
index 00000000..a9d7d188
--- /dev/null
+++ b/apps/web-ele/src/api/mall/trade/order/index.ts
@@ -0,0 +1,309 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MallOrderApi {
+  /** 商品属性 */
+  export interface ProductProperty {
+    /** 属性的编号 */
+    propertyId?: null | number;
+    /** 属性的名称 */
+    propertyName?: string;
+    /** 属性值的编号 */
+    valueId?: null | number;
+    /** 属性值的名称 */
+    valueName?: string;
+  }
+
+  /** 订单项 */
+  export interface OrderItem {
+    /** 编号 */
+    id?: null | number;
+    /** 用户编号 */
+    userId?: null | number;
+    /** 订单编号 */
+    orderId?: null | number;
+    /** 商品 SPU 编号 */
+    spuId?: null | number;
+    /** 商品 SPU 名称 */
+    spuName?: string;
+    /** 商品 SKU 编号 */
+    skuId?: null | number;
+    /** 商品图片 */
+    picUrl?: string;
+    /** 购买数量 */
+    count?: null | number;
+    /** 商品原价（总） */
+    originalPrice?: null | number;
+    /** 商品原价（单） */
+    originalUnitPrice?: null | number;
+    /** 商品优惠（总） */
+    discountPrice?: null | number;
+    /** 商品实付金额（总） */
+    payPrice?: null | number;
+    /** 子订单分摊金额（总） */
+    orderPartPrice?: null | number;
+    /** 分摊后子订单实付金额（总） */
+    orderDividePrice?: null | number;
+    /** 售后状态 */
+    afterSaleStatus?: null | number;
+    /** 属性数组 */
+    properties?: ProductProperty[];
+  }
+
+  /** 订单日志 */
+  export interface OrderLog {
+    /** 日志编号 */
+    id: number;
+    /** 日志内容 */
+    content?: string;
+    /** 创建时间 */
+    createTime?: Date;
+    /** 用户类型 */
+    userType?: number;
+  }
+
+  /** 订单 */
+  export interface Order {
+    /** 订单编号 */
+    id?: null | number;
+    /** 订单流水号 */
+    no?: string;
+    /** 下单时间 */
+    createTime?: Date | null;
+    /** 订单类型 */
+    type?: null | number;
+    /** 订单来源 */
+    terminal?: null | number;
+    /** 用户编号 */
+    userId?: null | number;
+    /** 用户 IP */
+    userIp?: string;
+    /** 用户备注 */
+    userRemark?: string;
+    /** 订单状态 */
+    status?: null | number;
+    /** 购买的商品数量 */
+    productCount?: null | number;
+    /** 订单完成时间 */
+    finishTime?: Date | null;
+    /** 订单取消时间 */
+    cancelTime?: Date | null;
+    /** 取消类型 */
+    cancelType?: null | number;
+    /** 商家备注 */
+    remark?: string;
+    /** 支付订单编号 */
+    payOrderId?: null | number;
+    /** 是否已支付 */
+    payStatus?: boolean;
+    /** 付款时间 */
+    payTime?: Date | null;
+    /** 支付渠道 */
+    payChannelCode?: string;
+    /** 商品原价（总） */
+    totalPrice?: null | number;
+    /** 订单优惠（总） */
+    discountPrice?: null | number;
+    /** 运费金额 */
+    deliveryPrice?: null | number;
+    /** 订单调价（总） */
+    adjustPrice?: null | number;
+    /** 应付金额（总） */
+    payPrice?: null | number | string;
+    /** 发货方式 */
+    deliveryType?: null | number;
+    /** 自提门店编号 */
+    pickUpStoreId?: number;
+    /** 自提核销码 */
+    pickUpVerifyCode?: string;
+    /** 配送模板编号 */
+    deliveryTemplateId?: null | number;
+    /** 发货物流公司编号 */
+    logisticsId?: null | number;
+    /** 发货物流单号 */
+    logisticsNo?: string;
+    /** 发货时间 */
+    deliveryTime?: Date | null;
+    /** 收货时间 */
+    receiveTime?: Date | null;
+    /** 收件人名称 */
+    receiverName?: string;
+    /** 收件人手机 */
+    receiverMobile?: string;
+    /** 收件人邮编 */
+    receiverPostCode?: null | number;
+    /** 收件人地区编号 */
+    receiverAreaId?: null | number;
+    /** 收件人地区名字 */
+    receiverAreaName?: string;
+    /** 收件人详细地址 */
+    receiverDetailAddress?: string;
+    /** 售后状态 */
+    afterSaleStatus?: null | number;
+    /** 退款金额 */
+    refundPrice?: null | number;
+    /** 优惠劵编号 */
+    couponId?: null | number;
+    /** 优惠劵减免金额 */
+    couponPrice?: null | number;
+    /** 积分抵扣的金额 */
+    pointPrice?: null | number;
+    /** VIP 减免金额 */
+    vipPrice?: null | number;
+    /** 订单项列表 */
+    items?: OrderItem[];
+    /** 下单用户信息 */
+    user?: {
+      /** 用户头像 */
+      avatar?: string;
+      /** 用户编号 */
+      id?: null | number;
+      /** 用户昵称 */
+      nickname?: string;
+    };
+    /** 推广用户信息 */
+    brokerageUser?: {
+      /** 用户头像 */
+      avatar?: string;
+      /** 用户编号 */
+      id?: null | number;
+      /** 用户昵称 */
+      nickname?: string;
+    };
+    /** 订单操作日志 */
+    logs?: OrderLog[];
+  }
+
+  /** 交易订单统计 */
+  export interface OrderSummary {
+    /** 订单数量 */
+    orderCount: number;
+    /** 订单金额 */
+    orderPayPrice: number;
+    /** 退款单数 */
+    afterSaleCount: number;
+    /** 退款金额 */
+    afterSalePrice: number;
+  }
+
+  /** 订单发货请求 */
+  export interface DeliveryRequest {
+    /** 订单编号 */
+    id?: number;
+    /** 发货方式 */
+    expressType: string;
+    /** 物流公司编号 */
+    logisticsId: null | number;
+    /** 物流编号 */
+    logisticsNo: string;
+  }
+
+  /** 订单备注请求 */
+  export interface RemarkRequest {
+    /** 订单编号 */
+    id: number;
+    /** 备注 */
+    remark: string;
+  }
+
+  /** 订单调价请求 */
+  export interface PriceRequest {
+    /** 订单编号 */
+    id: number;
+    /** 调整金额，单位：分 */
+    adjustPrice: number;
+  }
+
+  /** 订单地址请求 */
+  export interface AddressRequest {
+    /** 订单编号 */
+    id: number;
+    /** 收件人名称 */
+    receiverName: string;
+    /** 收件人手机 */
+    receiverMobile: string;
+    /** 收件人地区编号 */
+    receiverAreaId: number;
+    /** 收件人详细地址 */
+    receiverDetailAddress: string;
+  }
+
+  export interface OrderExpressTrackRespDTO {
+    /** 发生时间 */
+    time: Date;
+    /** 快递状态 */
+    content: string;
+  }
+}
+
+/** 查询交易订单列表 */
+export function getOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<MallOrderApi.Order>>(
+    '/trade/order/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询交易订单统计 */
+export function getOrderSummary(params: PageParam) {
+  return requestClient.get<MallOrderApi.OrderSummary>('/trade/order/summary', {
+    params,
+  });
+}
+
+/** 查询交易订单详情 */
+export function getOrder(id: number) {
+  return requestClient.get<MallOrderApi.Order>(
+    `/trade/order/get-detail?id=${id}`,
+  );
+}
+
+/** 查询交易订单物流详情 */
+export function getExpressTrackList(id: number) {
+  return requestClient.get<MallOrderApi.OrderExpressTrackRespDTO[]>(
+    `/trade/order/get-express-track-list?id=${id}`,
+  );
+}
+
+/** 订单发货 */
+export function deliveryOrder(data: MallOrderApi.DeliveryRequest) {
+  return requestClient.put('/trade/order/delivery', data);
+}
+
+/** 订单备注 */
+export function updateOrderRemark(data: MallOrderApi.RemarkRequest) {
+  return requestClient.put('/trade/order/update-remark', data);
+}
+
+/** 订单调价 */
+export function updateOrderPrice(data: MallOrderApi.PriceRequest) {
+  return requestClient.put('/trade/order/update-price', data);
+}
+
+/** 修改订单地址 */
+export function updateOrderAddress(data: MallOrderApi.AddressRequest) {
+  return requestClient.put('/trade/order/update-address', data);
+}
+
+/** 订单核销 */
+export function pickUpOrder(id: number) {
+  return requestClient.put(`/trade/order/pick-up-by-id?id=${id}`);
+}
+
+/** 订单核销 */
+export function pickUpOrderByVerifyCode(pickUpVerifyCode: string) {
+  return requestClient.put('/trade/order/pick-up-by-verify-code', {
+    params: { pickUpVerifyCode },
+  });
+}
+
+/** 查询核销码对应的订单 */
+export function getOrderByPickUpVerifyCode(pickUpVerifyCode: string) {
+  return requestClient.get<MallOrderApi.Order>(
+    '/trade/order/get-by-pick-up-verify-code',
+    { params: { pickUpVerifyCode } },
+  );
+}
diff --git a/apps/web-ele/src/api/member/address/index.ts b/apps/web-ele/src/api/member/address/index.ts
new file mode 100644
index 00000000..16b456ea
--- /dev/null
+++ b/apps/web-ele/src/api/member/address/index.ts
@@ -0,0 +1,20 @@
+import { requestClient } from '#/api/request';
+
+export namespace MemberAddressApi {
+  /** 收件地址信息 */
+  export interface Address {
+    id?: number;
+    name: string;
+    mobile: string;
+    areaId: number;
+    detailAddress: string;
+    defaultStatus: boolean;
+  }
+}
+
+/** 查询用户收件地址列表 */
+export function getAddressList(params: any) {
+  return requestClient.get<MemberAddressApi.Address[]>('/member/address/list', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/member/config/index.ts b/apps/web-ele/src/api/member/config/index.ts
new file mode 100644
index 00000000..073110d6
--- /dev/null
+++ b/apps/web-ele/src/api/member/config/index.ts
@@ -0,0 +1,22 @@
+import { requestClient } from '#/api/request';
+
+export namespace MemberConfigApi {
+  /** 积分设置信息 */
+  export interface Config {
+    id?: number;
+    pointTradeDeductEnable: number;
+    pointTradeDeductUnitPrice: number;
+    pointTradeDeductMaxPrice: number;
+    pointTradeGivePoint: number;
+  }
+}
+
+/** 查询积分设置详情 */
+export function getConfig() {
+  return requestClient.get<MemberConfigApi.Config>('/member/config/get');
+}
+
+/** 新增修改积分设置 */
+export function saveConfig(data: MemberConfigApi.Config) {
+  return requestClient.put('/member/config/save', data);
+}
diff --git a/apps/web-ele/src/api/member/experience-record/index.ts b/apps/web-ele/src/api/member/experience-record/index.ts
new file mode 100644
index 00000000..f36297f1
--- /dev/null
+++ b/apps/web-ele/src/api/member/experience-record/index.ts
@@ -0,0 +1,33 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberExperienceRecordApi {
+  /** 会员经验记录信息 */
+  export interface ExperienceRecord {
+    id?: number;
+    userId: number;
+    bizId: string;
+    bizType: number;
+    title: string;
+    description: string;
+    experience: number;
+    totalExperience: number;
+  }
+}
+
+/** 查询会员经验记录列表 */
+export function getExperienceRecordPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MemberExperienceRecordApi.ExperienceRecord>
+  >('/member/experience-record/page', {
+    params,
+  });
+}
+
+/** 查询会员经验记录详情 */
+export function getExperienceRecord(id: number) {
+  return requestClient.get<MemberExperienceRecordApi.ExperienceRecord>(
+    `/member/experience-record/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/member/group/index.ts b/apps/web-ele/src/api/member/group/index.ts
new file mode 100644
index 00000000..93c2ca3e
--- /dev/null
+++ b/apps/web-ele/src/api/member/group/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberGroupApi {
+  /** 用户分组信息 */
+  export interface Group {
+    id?: number;
+    name: string;
+    remark: string;
+    status: number;
+  }
+}
+
+/** 查询用户分组列表 */
+export function getGroupPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberGroupApi.Group>>(
+    '/member/group/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询用户分组详情 */
+export function getGroup(id: number) {
+  return requestClient.get<MemberGroupApi.Group>(`/member/group/get?id=${id}`);
+}
+
+/** 新增用户分组 */
+export function createGroup(data: MemberGroupApi.Group) {
+  return requestClient.post('/member/group/create', data);
+}
+
+/** 查询用户分组 - 精简信息列表 */
+export function getSimpleGroupList() {
+  return requestClient.get<MemberGroupApi.Group[]>(
+    '/member/group/list-all-simple',
+  );
+}
+
+/** 修改用户分组 */
+export function updateGroup(data: MemberGroupApi.Group) {
+  return requestClient.put('/member/group/update', data);
+}
+
+/** 删除用户分组 */
+export function deleteGroup(id: number) {
+  return requestClient.delete(`/member/group/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/member/level/index.ts b/apps/web-ele/src/api/member/level/index.ts
new file mode 100644
index 00000000..850d9b82
--- /dev/null
+++ b/apps/web-ele/src/api/member/level/index.ts
@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+export namespace MemberLevelApi {
+  /** 会员等级信息 */
+  export interface Level {
+    id?: number;
+    name: string;
+    experience: number;
+    value: number;
+    discountPercent: number;
+    icon: string;
+    bgUrl: string;
+    status: number;
+  }
+}
+
+/** 查询会员等级列表 */
+export function getLevelList(params: MemberLevelApi.Level) {
+  return requestClient.get<MemberLevelApi.Level[]>('/member/level/list', {
+    params,
+  });
+}
+
+/** 查询会员等级详情 */
+export function getLevel(id: number) {
+  return requestClient.get<MemberLevelApi.Level>(`/member/level/get?id=${id}`);
+}
+
+/** 查询会员等级 - 精简信息列表 */
+export function getSimpleLevelList() {
+  return requestClient.get<MemberLevelApi.Level[]>(
+    '/member/level/list-all-simple',
+  );
+}
+
+/** 新增会员等级 */
+export function createLevel(data: MemberLevelApi.Level) {
+  return requestClient.post('/member/level/create', data);
+}
+
+/** 修改会员等级 */
+export function updateLevel(data: MemberLevelApi.Level) {
+  return requestClient.put('/member/level/update', data);
+}
+
+/** 删除会员等级 */
+export function deleteLevel(id: number) {
+  return requestClient.delete(`/member/level/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/member/point/record/index.ts b/apps/web-ele/src/api/member/point/record/index.ts
new file mode 100644
index 00000000..7f6797e8
--- /dev/null
+++ b/apps/web-ele/src/api/member/point/record/index.ts
@@ -0,0 +1,28 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberPointRecordApi {
+  /** 用户积分记录信息 */
+  export interface Record {
+    id?: number;
+    bizId: string;
+    bizType: string;
+    title: string;
+    description: string;
+    point: number;
+    totalPoint: number;
+    userId: number;
+    createDate: Date;
+  }
+}
+
+/** 查询用户积分记录列表 */
+export function getRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberPointRecordApi.Record>>(
+    '/member/point/record/page',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-ele/src/api/member/signin/config/index.ts b/apps/web-ele/src/api/member/signin/config/index.ts
new file mode 100644
index 00000000..cf113b78
--- /dev/null
+++ b/apps/web-ele/src/api/member/signin/config/index.ts
@@ -0,0 +1,41 @@
+import { requestClient } from '#/api/request';
+
+export namespace MemberSignInConfigApi {
+  /** 积分签到规则信息 */
+  export interface SignInConfig {
+    id?: number;
+    day?: number;
+    point?: number;
+    experience?: number;
+    status?: number;
+  }
+}
+
+/** 查询积分签到规则列表 */
+export function getSignInConfigList() {
+  return requestClient.get<MemberSignInConfigApi.SignInConfig[]>(
+    '/member/sign-in/config/list',
+  );
+}
+
+/** 查询积分签到规则详情 */
+export function getSignInConfig(id: number) {
+  return requestClient.get<MemberSignInConfigApi.SignInConfig>(
+    `/member/sign-in/config/get?id=${id}`,
+  );
+}
+
+/** 新增积分签到规则 */
+export function createSignInConfig(data: MemberSignInConfigApi.SignInConfig) {
+  return requestClient.post('/member/sign-in/config/create', data);
+}
+
+/** 修改积分签到规则 */
+export function updateSignInConfig(data: MemberSignInConfigApi.SignInConfig) {
+  return requestClient.put('/member/sign-in/config/update', data);
+}
+
+/** 删除积分签到规则 */
+export function deleteSignInConfig(id: number) {
+  return requestClient.delete(`/member/sign-in/config/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/member/signin/record/index.ts b/apps/web-ele/src/api/member/signin/record/index.ts
new file mode 100644
index 00000000..7d5766d6
--- /dev/null
+++ b/apps/web-ele/src/api/member/signin/record/index.ts
@@ -0,0 +1,23 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberSignInRecordApi {
+  /** 用户签到积分信息 */
+  export interface SignInRecord {
+    id?: number;
+    userId: number;
+    day: number;
+    point: number;
+  }
+}
+
+/** 查询用户签到积分列表 */
+export function getSignInRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberSignInRecordApi.SignInRecord>>(
+    '/member/sign-in/record/page',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-ele/src/api/member/tag/index.ts b/apps/web-ele/src/api/member/tag/index.ts
new file mode 100644
index 00000000..d5c2ef44
--- /dev/null
+++ b/apps/web-ele/src/api/member/tag/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberTagApi {
+  /** 会员标签信息 */
+  export interface Tag {
+    id?: number;
+    name: string;
+  }
+}
+
+/** 查询会员标签列表 */
+export function getMemberTagPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberTagApi.Tag>>('/member/tag/page', {
+    params,
+  });
+}
+
+/** 查询会员标签详情 */
+export function getMemberTag(id: number) {
+  return requestClient.get<MemberTagApi.Tag>(`/member/tag/get?id=${id}`);
+}
+
+/** 查询会员标签 - 精简信息列表 */
+export function getSimpleTagList() {
+  return requestClient.get<MemberTagApi.Tag[]>('/member/tag/list-all-simple');
+}
+
+/** 新增会员标签 */
+export function createMemberTag(data: MemberTagApi.Tag) {
+  return requestClient.post('/member/tag/create', data);
+}
+
+/** 修改会员标签 */
+export function updateMemberTag(data: MemberTagApi.Tag) {
+  return requestClient.put('/member/tag/update', data);
+}
+
+/** 删除会员标签 */
+export function deleteMemberTag(id: number) {
+  return requestClient.delete(`/member/tag/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/member/user/index.ts b/apps/web-ele/src/api/member/user/index.ts
new file mode 100644
index 00000000..e8a5a35b
--- /dev/null
+++ b/apps/web-ele/src/api/member/user/index.ts
@@ -0,0 +1,70 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberUserApi {
+  /** 会员用户信息 */
+  export interface User {
+    id?: number;
+    avatar?: string;
+    birthday?: number;
+    createTime?: number;
+    loginDate?: number;
+    loginIp: string;
+    mark: string;
+    mobile: string;
+    name?: string;
+    nickname?: string;
+    registerIp: string;
+    sex: number;
+    status: number;
+    areaId?: number;
+    areaName?: string;
+    levelName: null | string;
+    point?: null | number;
+    totalPoint?: null | number;
+    experience?: null | number;
+  }
+
+  /** 会员用户等级更新信息 */
+  export interface UserLevelUpdate {
+    id: number;
+    levelId: number;
+  }
+
+  /** 会员用户积分更新信息 */
+  export interface UserPointUpdate {
+    id: number;
+    point: number;
+  }
+}
+
+/** 查询会员用户列表 */
+export function getUserPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberUserApi.User>>(
+    '/member/user/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询会员用户详情 */
+export function getUser(id: number) {
+  return requestClient.get<MemberUserApi.User>(`/member/user/get?id=${id}`);
+}
+
+/** 修改会员用户 */
+export function updateUser(data: MemberUserApi.User) {
+  return requestClient.put('/member/user/update', data);
+}
+
+/** 修改会员用户等级 */
+export function updateUserLevel(data: MemberUserApi.UserLevelUpdate) {
+  return requestClient.put('/member/user/update-level', data);
+}
+
+/** 修改会员用户积分 */
+export function updateUserPoint(data: MemberUserApi.UserPointUpdate) {
+  return requestClient.put('/member/user/update-point', data);
+}
diff --git a/apps/web-ele/src/api/mp/account/index.ts b/apps/web-ele/src/api/mp/account/index.ts
new file mode 100644
index 00000000..60833058
--- /dev/null
+++ b/apps/web-ele/src/api/mp/account/index.ts
@@ -0,0 +1,71 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpAccountApi {
+  /** 公众号账号信息 */
+  export interface Account {
+    id?: number;
+    name: string;
+    account: string;
+    appId: string;
+    appSecret: string;
+    token: string;
+    aesKey?: string;
+    qrCodeUrl?: string;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  export interface AccountSimple {
+    id: number;
+    name: string;
+  }
+}
+
+/** 查询公众号账号列表 */
+export function getAccountPage(params: PageParam) {
+  return requestClient.get<PageResult<MpAccountApi.Account>>(
+    '/mp/account/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询公众号账号详情 */
+export function getAccount(id: number) {
+  return requestClient.get<MpAccountApi.Account>(`/mp/account/get?id=${id}`);
+}
+
+/** 查询公众号账号列表 */
+export function getSimpleAccountList() {
+  return requestClient.get<MpAccountApi.AccountSimple[]>(
+    '/mp/account/list-all-simple',
+  );
+}
+
+/** 新增公众号账号 */
+export function createAccount(data: MpAccountApi.Account) {
+  return requestClient.post('/mp/account/create', data);
+}
+
+/** 修改公众号账号 */
+export function updateAccount(data: MpAccountApi.Account) {
+  return requestClient.put('/mp/account/update', data);
+}
+
+/** 删除公众号账号 */
+export function deleteAccount(id: number) {
+  return requestClient.delete(`/mp/account/delete?id=${id}`);
+}
+
+/** 生成公众号账号二维码 */
+export function generateAccountQrCode(id: number) {
+  return requestClient.post(`/mp/account/generate-qr-code?id=${id}`);
+}
+
+/** 清空公众号账号 API 配额 */
+export function clearAccountQuota(id: number) {
+  return requestClient.post(`/mp/account/clear-quota?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mp/autoReply/index.ts b/apps/web-ele/src/api/mp/autoReply/index.ts
new file mode 100644
index 00000000..d72e5a0c
--- /dev/null
+++ b/apps/web-ele/src/api/mp/autoReply/index.ts
@@ -0,0 +1,49 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpAutoReplyApi {
+  /** 自动回复信息 */
+  export interface AutoReply {
+    id?: number;
+    accountId: number;
+    type: number;
+    keyword: string;
+    content: string;
+    status: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询自动回复列表 */
+export function getAutoReplyPage(params: PageParam) {
+  return requestClient.get<PageResult<MpAutoReplyApi.AutoReply>>(
+    '/mp/auto-reply/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询自动回复详情 */
+export function getAutoReply(id: number) {
+  return requestClient.get<MpAutoReplyApi.AutoReply>(
+    `/mp/auto-reply/get?id=${id}`,
+  );
+}
+
+/** 新增自动回复 */
+export function createAutoReply(data: MpAutoReplyApi.AutoReply) {
+  return requestClient.post('/mp/auto-reply/create', data);
+}
+
+/** 修改自动回复 */
+export function updateAutoReply(data: MpAutoReplyApi.AutoReply) {
+  return requestClient.put('/mp/auto-reply/update', data);
+}
+
+/** 删除自动回复 */
+export function deleteAutoReply(id: number) {
+  return requestClient.delete(`/mp/auto-reply/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mp/draft/index.ts b/apps/web-ele/src/api/mp/draft/index.ts
new file mode 100644
index 00000000..435f13e0
--- /dev/null
+++ b/apps/web-ele/src/api/mp/draft/index.ts
@@ -0,0 +1,59 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpDraftApi {
+  /** 草稿文章信息 */
+  export interface Article {
+    title: string;
+    author: string;
+    digest: string;
+    content: string;
+    contentSourceUrl: string;
+    thumbMediaId: string;
+    showCoverPic: number;
+    needOpenComment: number;
+    onlyFansCanComment: number;
+  }
+
+  /** 草稿信息 */
+  export interface Draft {
+    id?: number;
+    accountId: number;
+    mediaId: string;
+    articles: Article[];
+    createTime?: Date;
+  }
+}
+
+/** 查询草稿列表 */
+export function getDraftPage(params: PageParam) {
+  return requestClient.get<PageResult<MpDraftApi.Draft>>('/mp/draft/page', {
+    params,
+  });
+}
+
+/** 创建草稿 */
+export function createDraft(accountId: number, articles: MpDraftApi.Article[]) {
+  return requestClient.post('/mp/draft/create', articles, {
+    params: { accountId },
+  });
+}
+
+/** 更新草稿 */
+export function updateDraft(
+  accountId: number,
+  mediaId: string,
+  articles: MpDraftApi.Article[],
+) {
+  return requestClient.put('/mp/draft/update', articles, {
+    params: { accountId, mediaId },
+  });
+}
+
+/** 删除草稿 */
+export function deleteDraft(accountId: number, mediaId: string) {
+  return requestClient.delete('/mp/draft/delete', {
+    params: { accountId, mediaId },
+  });
+}
diff --git a/apps/web-ele/src/api/mp/freePublish/index.ts b/apps/web-ele/src/api/mp/freePublish/index.ts
new file mode 100644
index 00000000..bc50efe9
--- /dev/null
+++ b/apps/web-ele/src/api/mp/freePublish/index.ts
@@ -0,0 +1,45 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpFreePublishApi {
+  /** 自由发布文章信息 */
+  export interface FreePublish {
+    id?: number;
+    accountId: number;
+    mediaId: string;
+    articleId: string;
+    title: string;
+    author: string;
+    digest: string;
+    content: string;
+    thumbUrl: string;
+    status: number;
+    publishTime?: Date;
+    createTime?: Date;
+  }
+}
+
+/** 查询自由发布文章列表 */
+export function getFreePublishPage(params: PageParam) {
+  return requestClient.get<PageResult<MpFreePublishApi.FreePublish>>(
+    '/mp/free-publish/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 删除自由发布文章 */
+export function deleteFreePublish(accountId: number, articleId: string) {
+  return requestClient.delete('/mp/free-publish/delete', {
+    params: { accountId, articleId },
+  });
+}
+
+/** 发布自由发布文章 */
+export function submitFreePublish(accountId: number, mediaId: string) {
+  return requestClient.post('/mp/free-publish/submit', null, {
+    params: { accountId, mediaId },
+  });
+}
diff --git a/apps/web-ele/src/api/mp/material/index.ts b/apps/web-ele/src/api/mp/material/index.ts
new file mode 100644
index 00000000..73ca899e
--- /dev/null
+++ b/apps/web-ele/src/api/mp/material/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** 素材类型枚举 */
+export enum MaterialType {
+  IMAGE = 1, // 图片
+  THUMB = 4, // 缩略图
+  VIDEO = 3, // 视频
+  VOICE = 2, // 语音
+}
+
+export namespace MpMaterialApi {
+  /** 素材信息 */
+  export interface Material {
+    id?: number;
+    accountId: number;
+    type: MaterialType;
+    mediaId: string;
+    url: string;
+    name: string;
+    size: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询素材列表 */
+export function getMaterialPage(params: PageParam) {
+  return requestClient.get<PageResult<MpMaterialApi.Material>>(
+    '/mp/material/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 删除永久素材 */
+export function deletePermanentMaterial(id: number) {
+  return requestClient.delete('/mp/material/delete-permanent', {
+    params: { id },
+  });
+}
diff --git a/apps/web-ele/src/api/mp/menu/index.ts b/apps/web-ele/src/api/mp/menu/index.ts
new file mode 100644
index 00000000..a8ae0833
--- /dev/null
+++ b/apps/web-ele/src/api/mp/menu/index.ts
@@ -0,0 +1,58 @@
+import { requestClient } from '#/api/request';
+
+/** 菜单类型枚举 */
+export enum MenuType {
+  CLICK = 'click', // 点击推事件
+  LOCATION_SELECT = 'location_select', // 发送位置
+  MEDIA_ID = 'media_id', // 下发消息
+  MINIPROGRAM = 'miniprogram', // 小程序
+  PIC_PHOTO_OR_ALBUM = 'pic_photo_or_album', // 拍照或者相册发图
+  PIC_SYSPHOTO = 'pic_sysphoto', // 系统拍照发图
+  PIC_WEIXIN = 'pic_weixin', // 微信相册发图
+  SCANCODE_PUSH = 'scancode_push', // 扫码推事件
+  SCANCODE_WAITMSG = 'scancode_waitmsg', // 扫码带提示
+  VIEW = 'view', // 跳转URL
+  VIEW_LIMITED = 'view_limited', // 跳转图文消息URL
+}
+
+export namespace MpMenuApi {
+  /** 菜单按钮信息 */
+  export interface MenuButton {
+    type: MenuType;
+    name: string;
+    key?: string;
+    url?: string;
+    mediaId?: string;
+    appId?: string;
+    pagePath?: string;
+    subButtons?: MenuButton[];
+  }
+
+  /** 菜单信息 */
+  export interface Menu {
+    accountId: number;
+    menus: MenuButton[];
+  }
+}
+
+/** 查询菜单列表 */
+export function getMenuList(accountId: number) {
+  return requestClient.get<MpMenuApi.MenuButton[]>('/mp/menu/list', {
+    params: { accountId },
+  });
+}
+
+/** 保存菜单 */
+export function saveMenu(accountId: number, menus: MpMenuApi.MenuButton[]) {
+  return requestClient.post('/mp/menu/save', {
+    accountId,
+    menus,
+  });
+}
+
+/** 删除菜单 */
+export function deleteMenu(accountId: number) {
+  return requestClient.delete('/mp/menu/delete', {
+    params: { accountId },
+  });
+}
diff --git a/apps/web-ele/src/api/mp/message/index.ts b/apps/web-ele/src/api/mp/message/index.ts
new file mode 100644
index 00000000..cfb2dbac
--- /dev/null
+++ b/apps/web-ele/src/api/mp/message/index.ts
@@ -0,0 +1,54 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** 消息类型枚举 */
+export enum MessageType {
+  IMAGE = 'image', // 图片消息
+  MPNEWS = 'mpnews', // 公众号图文消息
+  MUSIC = 'music', // 音乐消息
+  NEWS = 'news', // 图文消息
+  TEXT = 'text', // 文本消息
+  VIDEO = 'video', // 视频消息
+  VOICE = 'voice', // 语音消息
+  WXCARD = 'wxcard', // 卡券消息
+}
+
+export namespace MpMessageApi {
+  /** 消息信息 */
+  export interface Message {
+    id?: number;
+    accountId: number;
+    type: MessageType;
+    openid: string;
+    content: string;
+    mediaId?: string;
+    status: number;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  /** 发送消息请求 */
+  export interface SendMessageRequest {
+    accountId: number;
+    openid: string;
+    type: MessageType;
+    content: string;
+    mediaId?: string;
+  }
+}
+
+/** 查询消息列表 */
+export function getMessagePage(params: PageParam) {
+  return requestClient.get<PageResult<MpMessageApi.Message>>(
+    '/mp/message/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 发送消息 */
+export function sendMessage(data: MpMessageApi.SendMessageRequest) {
+  return requestClient.post('/mp/message/send', data);
+}
diff --git a/apps/web-ele/src/api/mp/statistics/index.ts b/apps/web-ele/src/api/mp/statistics/index.ts
new file mode 100644
index 00000000..e3607382
--- /dev/null
+++ b/apps/web-ele/src/api/mp/statistics/index.ts
@@ -0,0 +1,84 @@
+import type { PageParam } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpStatisticsApi {
+  /** 统计查询参数 */
+  export interface StatisticsQuery extends PageParam {
+    accountId: number;
+    beginDate: string;
+    endDate: string;
+  }
+
+  /** 消息发送概况数据 */
+  export interface UpstreamMessage {
+    refDate: string;
+    msgType: string;
+    msgUser: number;
+    msgCount: number;
+  }
+
+  /** 用户增减数据 */
+  export interface UserSummary {
+    refDate: string;
+    userSource: number;
+    newUser: number;
+    cancelUser: number;
+    cumulateUser: number;
+  }
+
+  /** 用户累计数据 */
+  export interface UserCumulate {
+    refDate: string;
+    cumulateUser: number;
+  }
+
+  /** 接口分析数据 */
+  export interface InterfaceSummary {
+    refDate: string;
+    callbackCount: number;
+    failCount: number;
+    totalTimeCost: number;
+    maxTimeCost: number;
+  }
+}
+
+/** 获取消息发送概况数据 */
+export function getUpstreamMessage(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UpstreamMessage[]>(
+    '/mp/statistics/upstream-message',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取用户增减数据 */
+export function getUserSummary(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UserSummary[]>(
+    '/mp/statistics/user-summary',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取用户累计数据 */
+export function getUserCumulate(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UserCumulate[]>(
+    '/mp/statistics/user-cumulate',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取接口分析数据 */
+export function getInterfaceSummary(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.InterfaceSummary[]>(
+    '/mp/statistics/interface-summary',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-ele/src/api/mp/tag/index.ts b/apps/web-ele/src/api/mp/tag/index.ts
new file mode 100644
index 00000000..b1acd013
--- /dev/null
+++ b/apps/web-ele/src/api/mp/tag/index.ts
@@ -0,0 +1,63 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpTagApi {
+  /** 标签信息 */
+  export interface Tag {
+    id?: number;
+    accountId: number;
+    name: string;
+    count?: number;
+    createTime?: Date;
+  }
+
+  /** 标签分页查询参数 */
+  export interface TagPageQuery extends PageParam {
+    accountId?: number;
+    name?: string;
+  }
+}
+
+/** 创建公众号标签 */
+export function createTag(data: MpTagApi.Tag) {
+  return requestClient.post('/mp/tag/create', data);
+}
+
+/** 更新公众号标签 */
+export function updateTag(data: MpTagApi.Tag) {
+  return requestClient.put('/mp/tag/update', data);
+}
+
+/** 删除公众号标签 */
+export function deleteTag(id: number) {
+  return requestClient.delete('/mp/tag/delete', {
+    params: { id },
+  });
+}
+
+/** 获取公众号标签 */
+export function getTag(id: number) {
+  return requestClient.get<MpTagApi.Tag>('/mp/tag/get', {
+    params: { id },
+  });
+}
+
+/** 获取公众号标签分页 */
+export function getTagPage(params: MpTagApi.TagPageQuery) {
+  return requestClient.get<PageResult<MpTagApi.Tag>>('/mp/tag/page', {
+    params,
+  });
+}
+
+/** 获取公众号标签精简信息列表 */
+export function getSimpleTagList() {
+  return requestClient.get<MpTagApi.Tag[]>('/mp/tag/list-all-simple');
+}
+
+/** 同步公众号标签 */
+export function syncTag(accountId: number) {
+  return requestClient.post('/mp/tag/sync', null, {
+    params: { accountId },
+  });
+}
diff --git a/apps/web-ele/src/api/mp/user/index.ts b/apps/web-ele/src/api/mp/user/index.ts
new file mode 100644
index 00000000..e34573a1
--- /dev/null
+++ b/apps/web-ele/src/api/mp/user/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpUserApi {
+  /** 用户信息 */
+  export interface User {
+    id?: number;
+    accountId: number;
+    openid: string;
+    nickname: string;
+    avatar: string;
+    sex: number;
+    country: string;
+    province: string;
+    city: string;
+    language: string;
+    subscribe: boolean;
+    subscribeTime?: Date;
+    remark?: string;
+    tagIds?: number[];
+    createTime?: Date;
+  }
+
+  /** 用户分页查询参数 */
+  export interface UserPageQuery extends PageParam {
+    accountId?: number;
+    nickname?: string;
+    tagId?: number;
+  }
+}
+
+/** 更新公众号粉丝 */
+export function updateUser(data: MpUserApi.User) {
+  return requestClient.put('/mp/user/update', data);
+}
+
+/** 获取公众号粉丝 */
+export function getUser(id: number) {
+  return requestClient.get<MpUserApi.User>('/mp/user/get', {
+    params: { id },
+  });
+}
+
+/** 获取公众号粉丝分页 */
+export function getUserPage(params: MpUserApi.UserPageQuery) {
+  return requestClient.get<PageResult<MpUserApi.User>>('/mp/user/page', {
+    params,
+  });
+}
+
+/** 同步公众号粉丝 */
+export function syncUser(accountId: number) {
+  return requestClient.post('/mp/user/sync', null, {
+    params: { accountId },
+  });
+}
diff --git a/apps/web-ele/src/api/pay/app/index.ts b/apps/web-ele/src/api/pay/app/index.ts
new file mode 100644
index 00000000..d44e5ae2
--- /dev/null
+++ b/apps/web-ele/src/api/pay/app/index.ts
@@ -0,0 +1,74 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace PayAppApi {
+  /** 支付应用信息 */
+  export interface App {
+    id?: number;
+    appKey: string;
+    name: string;
+    status: number;
+    remark: string;
+    payNotifyUrl: string;
+    refundNotifyUrl: string;
+    transferNotifyUrl: string;
+    merchantId: number;
+    merchantName: string;
+    createTime?: Date;
+  }
+
+  /** 更新状态请求 */
+  export interface UpdateStatusReq {
+    id: number;
+    status: number;
+  }
+
+  export interface AppPageReq extends PageParam {
+    name?: string;
+    status?: number;
+    remark?: string;
+    payNotifyUrl?: string;
+    refundNotifyUrl?: string;
+    transferNotifyUrl?: string;
+    merchantName?: string;
+    createTime?: Date[];
+  }
+}
+
+/** 查询支付应用列表 */
+export function getAppPage(params: PayAppApi.AppPageReq) {
+  return requestClient.get<PageResult<PayAppApi.App>>('/pay/app/page', {
+    params,
+  });
+}
+
+/** 查询支付应用详情 */
+export function getApp(id: number) {
+  return requestClient.get<PayAppApi.App>(`/pay/app/get?id=${id}`);
+}
+
+/** 新增支付应用 */
+export function createApp(data: PayAppApi.App) {
+  return requestClient.post('/pay/app/create', data);
+}
+
+/** 修改支付应用 */
+export function updateApp(data: PayAppApi.App) {
+  return requestClient.put('/pay/app/update', data);
+}
+
+/** 修改支付应用状态 */
+export function changeAppStatus(data: PayAppApi.UpdateStatusReq) {
+  return requestClient.put('/pay/app/update-status', data);
+}
+
+/** 删除支付应用 */
+export function deleteApp(id: number) {
+  return requestClient.delete(`/pay/app/delete?id=${id}`);
+}
+
+/** 获取支付应用列表 */
+export function getAppList() {
+  return requestClient.get<PayAppApi.App[]>('/pay/app/list');
+}
diff --git a/apps/web-ele/src/api/pay/channel/index.ts b/apps/web-ele/src/api/pay/channel/index.ts
new file mode 100644
index 00000000..eb4c1d99
--- /dev/null
+++ b/apps/web-ele/src/api/pay/channel/index.ts
@@ -0,0 +1,54 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace PayChannelApi {
+  /** 支付渠道信息 */
+  export interface Channel {
+    id: number;
+    code: string;
+    config: string;
+    status: number;
+    remark: string;
+    feeRate: number;
+    appId: number;
+    createTime: Date;
+  }
+}
+
+/** 查询支付渠道列表 */
+export function getChannelPage(params: PageParam) {
+  return requestClient.get<PageResult<PayChannelApi.Channel>>(
+    '/pay/channel/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询支付渠道详情 */
+export function getChannel(appId: number, code: string) {
+  return requestClient.get<PayChannelApi.Channel>('/pay/channel/get', {
+    params: { appId, code },
+  });
+}
+
+/** 新增支付渠道 */
+export function createChannel(data: PayChannelApi.Channel) {
+  return requestClient.post('/pay/channel/create', data);
+}
+
+/** 修改支付渠道 */
+export function updateChannel(data: PayChannelApi.Channel) {
+  return requestClient.put('/pay/channel/update', data);
+}
+
+/** 删除支付渠道 */
+export function deleteChannel(id: number) {
+  return requestClient.delete(`/pay/channel/delete?id=${id}`);
+}
+
+/** 导出支付渠道 */
+export function exportChannel(params: PageParam) {
+  return requestClient.download('/pay/channel/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/pay/demo/order/index.ts b/apps/web-ele/src/api/pay/demo/order/index.ts
new file mode 100644
index 00000000..63cb1396
--- /dev/null
+++ b/apps/web-ele/src/api/pay/demo/order/index.ts
@@ -0,0 +1,47 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace DemoOrderApi {
+  /** 示例订单信息 */
+  export interface Order {
+    id?: number;
+    userId?: number;
+    spuName?: string;
+    price?: number;
+    payStatus?: boolean;
+    payOrderId?: number;
+    payTime?: Date;
+    payChannelCode?: string;
+    payRefundId?: number;
+    refundPrice?: number;
+    refundTime?: Date;
+    spuId?: number;
+    createTime?: Date;
+  }
+
+  export interface OrderPageReq extends PageParam {
+    spuId?: number;
+    createTime?: Date[];
+  }
+}
+
+/** 创建示例订单 */
+export function createDemoOrder(data: DemoOrderApi.Order) {
+  return requestClient.post('/pay/demo-order/create', data);
+}
+
+/** 获得示例订单分页 */
+export function getDemoOrderPage(params: DemoOrderApi.OrderPageReq) {
+  return requestClient.get<PageResult<DemoOrderApi.Order>>(
+    '/pay/demo-order/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 退款示例订单 */
+export function refundDemoOrder(id: number) {
+  return requestClient.put(`/pay/demo-order/refund?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/pay/demo/withdraw/index.ts b/apps/web-ele/src/api/pay/demo/withdraw/index.ts
new file mode 100644
index 00000000..3711ff9e
--- /dev/null
+++ b/apps/web-ele/src/api/pay/demo/withdraw/index.ts
@@ -0,0 +1,40 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace DemoWithdrawApi {
+  /** 示例提现单信息 */
+  export interface Withdraw {
+    id?: number;
+    subject: string;
+    price: number;
+    userName: string;
+    userAccount: string;
+    type: number;
+    status?: number;
+    payTransferId?: number;
+    transferChannelCode?: string;
+    transferTime?: Date;
+    transferErrorMsg?: string;
+  }
+}
+
+/** 查询示例提现单列表 */
+export function getDemoWithdrawPage(params: PageParam) {
+  return requestClient.get<PageResult<DemoWithdrawApi.Withdraw>>(
+    '/pay/demo-withdraw/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 创建示例提现单 */
+export function createDemoWithdraw(data: DemoWithdrawApi.Withdraw) {
+  return requestClient.post('/pay/demo-withdraw/create', data);
+}
+
+/** 发起提现单转账 */
+export function transferDemoWithdraw(id: number) {
+  return requestClient.post(`/pay/demo-withdraw/transfer?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/pay/notify/index.ts b/apps/web-ele/src/api/pay/notify/index.ts
new file mode 100644
index 00000000..b0b916cc
--- /dev/null
+++ b/apps/web-ele/src/api/pay/notify/index.ts
@@ -0,0 +1,15 @@
+import type { PageParam } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** 获得支付通知明细 */
+export function getNotifyTaskDetail(id: number) {
+  return requestClient.get(`/pay/notify/get-detail?id=${id}`);
+}
+
+/** 获得支付通知分页 */
+export function getNotifyTaskPage(params: PageParam) {
+  return requestClient.get('/pay/notify/page', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/pay/order/index.ts b/apps/web-ele/src/api/pay/order/index.ts
new file mode 100644
index 00000000..aff890df
--- /dev/null
+++ b/apps/web-ele/src/api/pay/order/index.ts
@@ -0,0 +1,125 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace PayOrderApi {
+  /** 支付订单信息 */
+  export interface Order {
+    id: number;
+    no: string;
+    price: number;
+    channelFeePrice: number;
+    refundPrice: number;
+    merchantId: number;
+    appId: number;
+    appName: string;
+    channelId: number;
+    channelCode: string;
+    merchantOrderId: string;
+    subject: string;
+    body: string;
+    notifyUrl: string;
+    notifyStatus: number;
+    amount: number;
+    channelFeeRate: number;
+    channelFeeAmount: number;
+    status: number;
+    userIp: string;
+    expireTime: Date;
+    successTime: Date;
+    notifyTime: Date;
+    successExtensionId: number;
+    refundStatus: number;
+    refundTimes: number;
+    refundAmount: number;
+    channelUserId: string;
+    channelOrderNo: string;
+    channelNotifyData: string;
+    createTime: Date;
+    updateTime: Date;
+  }
+
+  /** 支付订单分页请求 */
+  export interface OrderPageReq extends PageParam {
+    merchantId?: number;
+    appId?: number;
+    channelId?: number;
+    channelCode?: string;
+    merchantOrderId?: string;
+    subject?: string;
+    body?: string;
+    notifyUrl?: string;
+    notifyStatus?: number;
+    amount?: number;
+    channelFeeRate?: number;
+    channelFeeAmount?: number;
+    status?: number;
+    expireTime?: Date[];
+    successTime?: Date[];
+    notifyTime?: Date[];
+    successExtensionId?: number;
+    refundStatus?: number;
+    refundTimes?: number;
+    channelUserId?: string;
+    channelOrderNo?: string;
+    createTime?: Date[];
+  }
+
+  /** 支付订单导出请求 */
+  export interface OrderExportReq {
+    merchantId?: number;
+    appId?: number;
+    channelId?: number;
+    channelCode?: string;
+    merchantOrderId?: string;
+    subject?: string;
+    body?: string;
+    notifyUrl?: string;
+    notifyStatus?: number;
+    amount?: number;
+    channelFeeRate?: number;
+    channelFeeAmount?: number;
+    status?: number;
+    expireTime?: Date[];
+    successTime?: Date[];
+    notifyTime?: Date[];
+    successExtensionId?: number;
+    refundStatus?: number;
+    refundTimes?: number;
+    channelUserId?: string;
+    channelOrderNo?: string;
+    createTime?: Date[];
+  }
+}
+
+/** 查询支付订单列表 */
+export function getOrderPage(params: PayOrderApi.OrderPageReq) {
+  return requestClient.get<PageResult<PayOrderApi.Order>>('/pay/order/page', {
+    params,
+  });
+}
+
+/** 查询支付订单详情 */
+export function getOrder(id: number, sync?: boolean) {
+  return requestClient.get<PayOrderApi.Order>('/pay/order/get', {
+    params: {
+      id,
+      sync,
+    },
+  });
+}
+
+/** 获得支付订单的明细 */
+export function getOrderDetail(id: number) {
+  return requestClient.get<PayOrderApi.Order>(`/pay/order/get-detail?id=${id}`);
+}
+
+/** 提交支付订单 */
+export function submitOrder(data: any) {
+  return requestClient.post('/pay/order/submit', data);
+}
+
+/** 导出支付订单 */
+export function exportOrder(params: PayOrderApi.OrderExportReq) {
+  return requestClient.download('/pay/order/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/pay/refund/index.ts b/apps/web-ele/src/api/pay/refund/index.ts
new file mode 100644
index 00000000..44c36b7c
--- /dev/null
+++ b/apps/web-ele/src/api/pay/refund/index.ts
@@ -0,0 +1,129 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace PayRefundApi {
+  /** 退款订单信息 */
+  export interface Refund {
+    id: number;
+    merchantId: number;
+    appId: number;
+    channelId: number;
+    channelCode: string;
+    orderId: string;
+    tradeNo: string;
+    merchantOrderId: string;
+    merchantRefundNo: string;
+    notifyUrl: string;
+    notifyStatus: number;
+    status: number;
+    type: number;
+    payAmount: number;
+    refundAmount: number;
+    reason: string;
+    userIp: string;
+    channelOrderNo: string;
+    channelRefundNo: string;
+    channelErrorCode: string;
+    channelErrorMsg: string;
+    channelExtras: string;
+    expireTime: Date;
+    successTime: Date;
+    notifyTime: Date;
+    createTime: Date;
+    updateTime: Date;
+  }
+
+  /** 退款订单分页请求 */
+  export interface RefundPageReq extends PageParam {
+    merchantId?: number;
+    appId?: number;
+    channelId?: number;
+    channelCode?: string;
+    orderId?: string;
+    tradeNo?: string;
+    merchantOrderId?: string;
+    merchantRefundNo?: string;
+    notifyUrl?: string;
+    notifyStatus?: number;
+    status?: number;
+    type?: number;
+    payAmount?: number;
+    refundAmount?: number;
+    reason?: string;
+    userIp?: string;
+    channelOrderNo?: string;
+    channelRefundNo?: string;
+    channelErrorCode?: string;
+    channelErrorMsg?: string;
+    channelExtras?: string;
+    expireTime?: Date[];
+    successTime?: Date[];
+    notifyTime?: Date[];
+    createTime?: Date[];
+  }
+
+  /** 退款订单导出请求 */
+  export interface RefundExportReq {
+    merchantId?: number;
+    appId?: number;
+    channelId?: number;
+    channelCode?: string;
+    orderId?: string;
+    tradeNo?: string;
+    merchantOrderId?: string;
+    merchantRefundNo?: string;
+    notifyUrl?: string;
+    notifyStatus?: number;
+    status?: number;
+    type?: number;
+    payAmount?: number;
+    refundAmount?: number;
+    reason?: string;
+    userIp?: string;
+    channelOrderNo?: string;
+    channelRefundNo?: string;
+    channelErrorCode?: string;
+    channelErrorMsg?: string;
+    channelExtras?: string;
+    expireTime?: Date[];
+    successTime?: Date[];
+    notifyTime?: Date[];
+    createTime?: Date[];
+  }
+}
+
+/** 查询退款订单列表 */
+export function getRefundPage(params: PayRefundApi.RefundPageReq) {
+  return requestClient.get<PageResult<PayRefundApi.Refund>>(
+    '/pay/refund/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询退款订单详情 */
+export function getRefund(id: number) {
+  return requestClient.get<PayRefundApi.Refund>(`/pay/refund/get?id=${id}`);
+}
+
+/** 创建退款订单 */
+export function createRefund(data: PayRefundApi.Refund) {
+  return requestClient.post('/pay/refund/create', data);
+}
+
+/** 更新退款订单 */
+export function updateRefund(data: PayRefundApi.Refund) {
+  return requestClient.put('/pay/refund/update', data);
+}
+
+/** 删除退款订单 */
+export function deleteRefund(id: number) {
+  return requestClient.delete(`/pay/refund/delete?id=${id}`);
+}
+
+/** 导出退款订单 */
+export function exportRefund(params: PayRefundApi.RefundExportReq) {
+  return requestClient.download('/pay/refund/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/pay/transfer/index.ts b/apps/web-ele/src/api/pay/transfer/index.ts
new file mode 100644
index 00000000..4c588cb6
--- /dev/null
+++ b/apps/web-ele/src/api/pay/transfer/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace PayTransferApi {
+  /** 转账单信息 */
+  export interface Transfer {
+    id: number;
+    appId: number;
+    channelId: number;
+    channelCode: string;
+    merchantTransferId: string;
+    type: number;
+    price: number;
+    subject: string;
+    userName: string;
+    alipayLogonId: string;
+    openid: string;
+    status: number;
+    createTime: Date;
+  }
+
+  /** 转账单分页请求 */
+  export interface TransferPageReq extends PageParam {
+    appId?: number;
+    channelId?: number;
+    channelCode?: string;
+    merchantTransferId?: string;
+    type?: number;
+    price?: number;
+    subject?: string;
+    userName?: string;
+    status?: number;
+    createTime?: Date[];
+  }
+}
+
+/** 查询转账单列表 */
+export function getTransferPage(params: PayTransferApi.TransferPageReq) {
+  return requestClient.get<PageResult<PayTransferApi.Transfer>>(
+    '/pay/transfer/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询转账单详情 */
+export function getTransfer(id: number) {
+  return requestClient.get<PayTransferApi.Transfer>(
+    `/pay/transfer/get?id=${id}`,
+  );
+}
+
+/** 导出转账单 */
+export function exportTransfer(params: any) {
+  return requestClient.download('/pay/transfer/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/pay/wallet/balance/index.ts b/apps/web-ele/src/api/pay/wallet/balance/index.ts
new file mode 100644
index 00000000..71e8e76d
--- /dev/null
+++ b/apps/web-ele/src/api/pay/wallet/balance/index.ts
@@ -0,0 +1,53 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace PayWalletApi {
+  /** 用户钱包查询参数 */
+  export interface PayWalletUserReq {
+    userId: number;
+  }
+
+  /** 钱包信息 */
+  export interface Wallet {
+    id: number;
+    userId: number;
+    userType: number;
+    balance: number;
+    totalExpense: number;
+    totalRecharge: number;
+    freezePrice: number;
+  }
+
+  /** 钱包分页请求 */
+  export interface WalletPageReq extends PageParam {
+    userId?: number;
+    userType?: number;
+    balance?: number;
+    totalExpense?: number;
+    totalRecharge?: number;
+    freezePrice?: number;
+  }
+}
+
+/** 查询用户钱包详情 */
+export function getWallet(params: PayWalletApi.PayWalletUserReq) {
+  return requestClient.get<PayWalletApi.Wallet>('/pay/wallet/get', {
+    params,
+  });
+}
+
+/** 查询会员钱包列表 */
+export function getWalletPage(params: PayWalletApi.WalletPageReq) {
+  return requestClient.get<PageResult<PayWalletApi.Wallet>>(
+    '/pay/wallet/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 修改会员钱包余额 */
+export function updateWalletBalance(data: PayWalletApi.Wallet) {
+  return requestClient.put('/pay/wallet/update-balance', data);
+}
diff --git a/apps/web-ele/src/api/pay/wallet/rechargePackage/index.ts b/apps/web-ele/src/api/pay/wallet/rechargePackage/index.ts
new file mode 100644
index 00000000..32c3bbfa
--- /dev/null
+++ b/apps/web-ele/src/api/pay/wallet/rechargePackage/index.ts
@@ -0,0 +1,46 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WalletRechargePackageApi {
+  /** 充值套餐信息 */
+  export interface Package {
+    id?: number;
+    name: string;
+    payPrice: number;
+    bonusPrice: number;
+    status: number;
+  }
+}
+
+/** 查询充值套餐列表 */
+export function getPackagePage(params: PageParam) {
+  return requestClient.get<PageResult<WalletRechargePackageApi.Package>>(
+    '/pay/wallet-recharge-package/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询充值套餐详情 */
+export function getPackage(id: number) {
+  return requestClient.get<WalletRechargePackageApi.Package>(
+    `/pay/wallet-recharge-package/get?id=${id}`,
+  );
+}
+
+/** 新增充值套餐 */
+export function createPackage(data: WalletRechargePackageApi.Package) {
+  return requestClient.post('/pay/wallet-recharge-package/create', data);
+}
+
+/** 修改充值套餐 */
+export function updatePackage(data: WalletRechargePackageApi.Package) {
+  return requestClient.put('/pay/wallet-recharge-package/update', data);
+}
+
+/** 删除充值套餐 */
+export function deletePackage(id: number) {
+  return requestClient.delete(`/pay/wallet-recharge-package/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/pay/wallet/transaction/index.ts b/apps/web-ele/src/api/pay/wallet/transaction/index.ts
new file mode 100644
index 00000000..bc7ffef1
--- /dev/null
+++ b/apps/web-ele/src/api/pay/wallet/transaction/index.ts
@@ -0,0 +1,24 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WalletTransactionApi {
+  /** 钱包交易流水信息 */
+  export interface Transaction {
+    id: number;
+    walletId: number;
+    title: string;
+    price: number;
+    balance: number;
+  }
+}
+
+/** 查询钱包交易流水列表 */
+export function getTransactionPage(params: PageParam) {
+  return requestClient.get<PageResult<WalletTransactionApi.Transaction>>(
+    '/pay/wallet-transaction/page',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-ele/src/api/system/mail/log/index.ts b/apps/web-ele/src/api/system/mail/log/index.ts
index 52c9947c..1ae06e35 100644
--- a/apps/web-ele/src/api/system/mail/log/index.ts
+++ b/apps/web-ele/src/api/system/mail/log/index.ts
@@ -8,7 +8,9 @@ export namespace SystemMailLogApi {
     id: number;
     userId: number;
     userType: number;
-    toMail: string;
+    toMails: string[];
+    ccMails?: string[];
+    bccMails?: string[];
     accountId: number;
     fromMail: string;
     templateId: number;
diff --git a/apps/web-ele/src/api/system/mail/template/index.ts b/apps/web-ele/src/api/system/mail/template/index.ts
index 1750cfd2..9e2a5a78 100644
--- a/apps/web-ele/src/api/system/mail/template/index.ts
+++ b/apps/web-ele/src/api/system/mail/template/index.ts
@@ -20,7 +20,9 @@ export namespace SystemMailTemplateApi {
 
   /** 邮件发送信息 */
   export interface MailSendReqVO {
-    mail: string;
+    toMails: string[];
+    ccMails?: string[];
+    bccMails?: string[];
     templateCode: string;
     templateParams: Record<string, any>;
   }
diff --git a/apps/web-ele/src/components/description/description.vue b/apps/web-ele/src/components/description/description.vue
new file mode 100644
index 00000000..424ecb62
--- /dev/null
+++ b/apps/web-ele/src/components/description/description.vue
@@ -0,0 +1,77 @@
+<script lang="tsx">
+import type { DescriptionProps } from 'element-plus';
+
+import type { PropType } from 'vue';
+
+import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+
+import { defineComponent } from 'vue';
+
+import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
+
+/** 对 Descriptions 进行二次封装 */
+const Description = defineComponent({
+  name: 'Descriptions',
+  props: {
+    data: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({}),
+    },
+    schema: {
+      type: Array as PropType<DescriptionItemSchema[]>,
+      default: () => [],
+    },
+    // Descriptions 原生 props
+    componentProps: {
+      type: Object as PropType<DescriptionProps>,
+      default: () => ({}),
+    },
+  },
+
+  setup(props: DescriptionsOptions) {
+    // TODO @puhui999：每个 field 的 slot 的考虑
+    // TODO @puhui999：from 5.0：extra: () => getSlot(slots, 'extra')
+    /** 过滤掉不需要展示的 */
+    const shouldShowItem = (item: DescriptionItemSchema) => {
+      if (item.hidden === undefined) return true;
+      return typeof item.hidden === 'function'
+        ? !item.hidden(props.data)
+        : !item.hidden;
+    };
+    /** 渲染内容 */
+    const renderContent = (item: DescriptionItemSchema) => {
+      if (item.content) {
+        return typeof item.content === 'function'
+          ? item.content(props.data)
+          : item.content;
+      }
+      return item.field ? props.data?.[item.field] : null;
+    };
+
+    return () => (
+      <ElDescriptions
+        {...props}
+        border={props.componentProps?.border}
+        column={props.componentProps?.column}
+        direction={props.componentProps?.direction}
+        extra={props.componentProps?.extra}
+        size={props.componentProps?.size}
+        title={props.componentProps?.title}
+      >
+        {props.schema?.filter(shouldShowItem).map((item) => (
+          <ElDescriptionsItem
+            key={item.field || String(item.label)}
+            label={item.label as string}
+            span={item.span}
+          >
+            {renderContent(item)}
+          </ElDescriptionsItem>
+        ))}
+      </ElDescriptions>
+    );
+  },
+});
+
+// TODO @puhui999：from 5.0：emits: ['register'] 事件
+export default Description;
+</script>
diff --git a/apps/web-ele/src/components/description/index.ts b/apps/web-ele/src/components/description/index.ts
new file mode 100644
index 00000000..a707c486
--- /dev/null
+++ b/apps/web-ele/src/components/description/index.ts
@@ -0,0 +1,3 @@
+export { default as Description } from './description.vue';
+export * from './typing';
+export { useDescription } from './use-description';
diff --git a/apps/web-ele/src/components/description/typing.ts b/apps/web-ele/src/components/description/typing.ts
new file mode 100644
index 00000000..5a6e6475
--- /dev/null
+++ b/apps/web-ele/src/components/description/typing.ts
@@ -0,0 +1,27 @@
+import type { DescriptionProps } from 'element-plus';
+
+import type { CSSProperties, VNode } from 'vue';
+
+// TODO @puhui999：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
+// TODO @puhui999：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
+// TODO @puhui999：【hidden】这个纠结下；1）vben2.0 是 show；
+export interface DescriptionItemSchema {
+  label: string | VNode; // 内容的描述
+  field?: string; // 对应 data 中的字段名
+  content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
+  span?: number; // 包含列的数量
+  labelStyle?: CSSProperties; // 自定义标签样式
+  contentStyle?: CSSProperties; // 自定义内容样式
+  hidden?: ((data: any) => boolean) | boolean; // 是否显示
+}
+
+// TODO @puhui999：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
+// TODO @puhui999：from 5.0：bordered 默认为 true
+// TODO @puhui999：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
+// TODO @puhui999：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
+// TODO @puhui999：from 5.0：useCollapse 默认为 true
+export interface DescriptionsOptions {
+  data?: Record<string, any>; // 数据
+  schema?: DescriptionItemSchema[]; // 描述项配置
+  componentProps?: DescriptionProps; // antd Descriptions 组件参数
+}
diff --git a/apps/web-ele/src/components/description/use-description.ts b/apps/web-ele/src/components/description/use-description.ts
new file mode 100644
index 00000000..5140a88c
--- /dev/null
+++ b/apps/web-ele/src/components/description/use-description.ts
@@ -0,0 +1,71 @@
+import type { DescriptionsOptions } from './typing';
+
+import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+
+import { Description } from './index';
+
+/** 描述列表 api 定义 */
+class DescriptionApi {
+  private state = reactive<Record<string, any>>({});
+
+  constructor(options: DescriptionsOptions) {
+    this.state = { ...options };
+  }
+
+  getState(): DescriptionsOptions {
+    return this.state as DescriptionsOptions;
+  }
+
+  // TODO @puhui999：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
+  setState(newState: Partial<DescriptionsOptions>) {
+    this.state = { ...this.state, ...newState };
+  }
+}
+
+export type ExtendedDescriptionApi = DescriptionApi;
+
+export function useDescription(options: DescriptionsOptions) {
+  const IS_REACTIVE = isReactive(options);
+  const api = new DescriptionApi(options);
+  // 扩展API
+  const extendedApi: ExtendedDescriptionApi = api as never;
+  const Desc = defineComponent({
+    name: 'UseDescription',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      // 合并props和attrs到state
+      api.setState({ ...attrs });
+
+      return () =>
+        h(
+          Description,
+          {
+            ...api.getState(),
+            ...attrs,
+          },
+          slots,
+        );
+    },
+  });
+
+  // 响应式支持
+  if (IS_REACTIVE) {
+    watch(
+      () => options.schema,
+      (newSchema) => {
+        api.setState({ schema: newSchema });
+      },
+      { immediate: true, deep: true },
+    );
+
+    watch(
+      () => options.data,
+      (newData) => {
+        api.setState({ data: newData });
+      },
+      { immediate: true, deep: true },
+    );
+  }
+
+  return [Desc, extendedApi] as const;
+}
diff --git a/apps/web-ele/src/components/dict-tag/dict-tag.vue b/apps/web-ele/src/components/dict-tag/dict-tag.vue
index ec1ac136..358daf92 100644
--- a/apps/web-ele/src/components/dict-tag/dict-tag.vue
+++ b/apps/web-ele/src/components/dict-tag/dict-tag.vue
@@ -78,7 +78,7 @@ const dictTag = computed(() => {
 </script>
 
 <template>
-  <ElTag v-if="dictTag" :type="dictTag.colorType">
+  <ElTag v-if="dictTag.label" :type="dictTag.colorType as any">
     {{ dictTag.label }}
   </ElTag>
 </template>
diff --git a/apps/web-ele/src/components/summary-card/index.ts b/apps/web-ele/src/components/summary-card/index.ts
new file mode 100644
index 00000000..598d73d6
--- /dev/null
+++ b/apps/web-ele/src/components/summary-card/index.ts
@@ -0,0 +1,2 @@
+export { default as SummaryCard } from './summary-card.vue';
+export type { SummaryCardProps } from './typing';
diff --git a/apps/web-ele/src/components/summary-card/summary-card.vue b/apps/web-ele/src/components/summary-card/summary-card.vue
new file mode 100644
index 00000000..55fe7d17
--- /dev/null
+++ b/apps/web-ele/src/components/summary-card/summary-card.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { SummaryCardProps } from './typing';
+
+import { CountTo } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElTooltip } from 'element-plus';
+
+/** 统计卡片 */
+defineOptions({ name: 'SummaryCard' });
+
+defineProps<SummaryCardProps>();
+</script>
+<template>
+  <div
+    class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
+  >
+    <div
+      class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
+      :class="`${iconColor} ${iconBgColor}`"
+    >
+      <IconifyIcon v-if="icon" :icon="icon" class="!text-6" />
+    </div>
+    <div class="flex flex-col gap-1">
+      <div class="flex items-center gap-1">
+        <span class="text-base">{{ title }}</span>
+        <ElTooltip :content="tooltip" placement="topLeft" v-if="tooltip">
+          <IconifyIcon
+            icon="lucide:circle-alert"
+            class="item-center !text-3 flex"
+          />
+        </ElTooltip>
+      </div>
+      <div class="flex flex-row items-baseline gap-2">
+        <div class="text-lg">
+          <CountTo
+            :prefix="prefix"
+            :end-val="value ?? 0"
+            :decimals="decimals ?? 0"
+          />
+        </div>
+        <span
+          v-if="percent !== undefined"
+          :class="Number(percent) > 0 ? 'text-red-500' : 'text-green-500'"
+        >
+          <span class="text-sm">{{ Math.abs(Number(percent)) }}%</span>
+          <IconifyIcon
+            :icon="
+              Number(percent) > 0 ? 'lucide:chevron-up' : 'lucide:chevron-down'
+            "
+            class="ml-0.5 !text-sm"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/components/summary-card/typing.ts b/apps/web-ele/src/components/summary-card/typing.ts
new file mode 100644
index 00000000..0ef1fdc6
--- /dev/null
+++ b/apps/web-ele/src/components/summary-card/typing.ts
@@ -0,0 +1,11 @@
+export interface SummaryCardProps {
+  title: string;
+  tooltip?: string;
+  icon?: string;
+  iconColor?: string;
+  iconBgColor?: string;
+  prefix?: string;
+  value?: number;
+  decimals?: number;
+  percent?: number | string;
+}
diff --git a/apps/web-ele/src/components/table-action/table-action.vue b/apps/web-ele/src/components/table-action/table-action.vue
index 895a66d4..7e127ef5 100644
--- a/apps/web-ele/src/components/table-action/table-action.vue
+++ b/apps/web-ele/src/components/table-action/table-action.vue
@@ -210,7 +210,7 @@ function handleMenuClick(command: any) {
 
     <ElDropdown v-if="getDropdownList.length > 0" @command="handleMenuClick">
       <slot name="more">
-        <ElButton :type="getDropdownList[0].type">
+        <ElButton :type="getDropdownList[0].type" link>
           {{ $t('page.action.more') }}
           <IconifyIcon icon="lucide:ellipsis-vertical" class="ml-1" />
         </ElButton>
diff --git a/apps/web-ele/src/components/upload/file-upload.vue b/apps/web-ele/src/components/upload/file-upload.vue
index f50e20bd..39b6d529 100644
--- a/apps/web-ele/src/components/upload/file-upload.vue
+++ b/apps/web-ele/src/components/upload/file-upload.vue
@@ -3,12 +3,11 @@ import type {
   UploadFile,
   UploadProgressEvent,
   UploadRequestOptions,
+  UploadUserFile,
 } from 'element-plus';
 
 import type { AxiosResponse } from '@vben/request';
 
-import type { CustomUploadFile } from './typing';
-
 import type { AxiosProgressEvent } from '#/api/infra/file';
 
 import { ref, toRefs, watch } from 'vue';
@@ -63,7 +62,7 @@ const props = withDefaults(
     showDescription: false,
   },
 );
-const emit = defineEmits(['change', 'update:value', 'delete']);
+const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
@@ -73,7 +72,7 @@ const { getStringAccept } = useUploadType({
   maxSizeRef: maxSize,
 });
 
-const fileList = ref<CustomUploadFile[]>([]);
+const fileList = ref<UploadUserFile[]>([]);
 const isLtMsg = ref<boolean>(true); // 文件大小错误提示
 const isActMsg = ref<boolean>(true); // 文件类型错误提示
 const isFirstRender = ref<boolean>(true); // 是否第一次渲染
@@ -100,7 +99,7 @@ watch(
               name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
               status: UploadResultStatus.DONE,
               url: item,
-            } as CustomUploadFile;
+            } as UploadUserFile;
           } else if (item && isObject(item)) {
             const file = item as Record<string, any>;
             return {
@@ -111,11 +110,11 @@ watch(
               response: file.response,
               percentage: file.percentage,
               size: file.size,
-            } as CustomUploadFile;
+            } as UploadUserFile;
           }
           return null;
         })
-        .filter(Boolean) as CustomUploadFile[];
+        .filter(Boolean) as UploadUserFile[];
     }
     if (!isFirstRender.value) {
       emit('change', value);
@@ -141,6 +140,8 @@ const handleRemove = async (file: UploadFile) => {
 };
 
 const beforeUpload = async (file: File) => {
+  const fileContent = await file.text();
+  emit('returnText', fileContent);
   const { maxSize, accept } = props;
   const isAct = checkFileType(file, accept);
   if (!isAct) {
@@ -175,17 +176,17 @@ async function customRequest(options: UploadRequestOptions) {
         total: e.total || 0,
         loaded: e.loaded || 0,
         lengthComputable: true,
-        target: e.target as EventTarget,
+        target: e.event.target as EventTarget,
         bubbles: false,
         cancelBubble: false,
         cancelable: false,
         composed: false,
-        currentTarget: e.target as EventTarget,
+        currentTarget: e.event.target as EventTarget,
         defaultPrevented: false,
         eventPhase: 0,
         isTrusted: true,
         returnValue: true,
-        srcElement: e.target as EventTarget,
+        srcElement: e.event.target as EventTarget,
         timeStamp: Date.now(),
         type: 'progress',
         composedPath: () => [],
@@ -193,6 +194,10 @@ async function customRequest(options: UploadRequestOptions) {
         preventDefault: () => {},
         stopImmediatePropagation: () => {},
         stopPropagation: () => {},
+        NONE: 0,
+        CAPTURING_PHASE: 1,
+        AT_TARGET: 2,
+        BUBBLING_PHASE: 3,
       };
       options.onProgress!(progressEvent);
     };
diff --git a/apps/web-ele/src/components/upload/image-upload.vue b/apps/web-ele/src/components/upload/image-upload.vue
index 174df55f..edb3fc9c 100644
--- a/apps/web-ele/src/components/upload/image-upload.vue
+++ b/apps/web-ele/src/components/upload/image-upload.vue
@@ -48,10 +48,14 @@ const props = withDefaults(
     resultField?: string;
     // 是否显示下面的描述
     showDescription?: boolean;
-    value?: string | string[];
+    modelValue?: string | string[];
+    // 上传框宽度
+    width?: string | number;
+    // 上传框高度
+    height?: string | number;
   }>(),
   {
-    value: () => [],
+    modelValue: () => [],
     directory: undefined,
     disabled: false,
     listType: 'picture-card',
@@ -63,11 +67,13 @@ const props = withDefaults(
     api: undefined,
     resultField: '',
     showDescription: true,
+    width: '',
+    height: '',
   },
 );
 
-const emit = defineEmits(['change', 'update:value', 'delete']);
-const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const emit = defineEmits(['change', 'update:modelValue', 'delete']);
+const { accept, helpText, maxNumber, maxSize, width, height } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
   acceptRef: accept,
@@ -82,7 +88,7 @@ const isActMsg = ref<boolean>(true); // 文件类型错误提示
 const isFirstRender = ref<boolean>(true); // 是否第一次渲染
 
 watch(
-  () => props.value,
+  () => props.modelValue,
   async (v) => {
     if (isInnerOperate.value) {
       isInnerOperate.value = false;
@@ -101,7 +107,7 @@ watch(
             return {
               uid: -i,
               name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-              status: UploadResultStatus.DONE,
+              status: UploadResultStatus.SUCCESS,
               url: item,
             } as UploadFile;
           } else if (item && isObject(item)) {
@@ -109,7 +115,7 @@ watch(
             return {
               uid: file.uid || -i,
               name: file.name || '',
-              status: UploadResultStatus.DONE,
+              status: UploadResultStatus.SUCCESS,
               url: file.url,
             } as UploadFile;
           }
@@ -154,7 +160,7 @@ const handleRemove = async (file: UploadFile) => {
     index !== -1 && fileList.value.splice(index, 1);
     const value = getValue();
     isInnerOperate.value = true;
-    emit('update:value', value);
+    emit('update:modelValue', value);
     emit('change', value);
     emit('delete', file);
   }
@@ -204,7 +210,7 @@ async function customRequest(options: UploadRequestOptions) {
     // 更新文件
     const value = getValue();
     isInnerOperate.value = true;
-    emit('update:value', value);
+    emit('update:modelValue', value);
     emit('change', value);
   } catch (error: any) {
     console.error(error);
@@ -213,13 +219,14 @@ async function customRequest(options: UploadRequestOptions) {
 }
 
 function getValue() {
+  console.log(fileList.value);
   const list = (fileList.value || [])
-    .filter((item) => item?.status === UploadResultStatus.DONE)
+    .filter((item) => item?.status === UploadResultStatus.SUCCESS)
     .map((item: any) => {
       if (item?.response && props?.resultField) {
         return item?.response;
       }
-      return item?.url || item?.response?.url || item?.response;
+      return item?.response?.url || item?.response;
     });
   // add by 芋艿：【特殊】单个文件的情况，获取首个元素，保证返回的是 String 类型
   if (props.maxNumber === 1) {
@@ -243,10 +250,11 @@ function getValue() {
       :multiple="multiple"
       :on-preview="handlePreview"
       :on-remove="handleRemove"
+      :class="width || height ? 'custom-upload' : ''"
     >
       <div
-        v-if="fileList && fileList.length < maxNumber"
-        class="flex flex-col items-center justify-center"
+        class="upload-content flex flex-col items-center justify-center"
+        :style="{ width: width || '', height: height || '' }"
       >
         <CloudUpload />
         <div class="mt-2">{{ $t('ui.upload.imgUpload') }}</div>
@@ -262,4 +270,22 @@ function getValue() {
 .ant-upload-select-picture-card {
   @apply flex items-center justify-center;
 }
+
+.custom-upload .el-upload {
+  width: auto !important;
+  height: auto !important;
+}
+
+.custom-upload .el-upload--picture-card {
+  width: auto !important;
+  height: auto !important;
+  line-height: normal !important;
+}
+
+.custom-upload .upload-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
 </style>
diff --git a/apps/web-ele/src/components/upload/index.ts b/apps/web-ele/src/components/upload/index.ts
index a66b2fca..14e57fed 100644
--- a/apps/web-ele/src/components/upload/index.ts
+++ b/apps/web-ele/src/components/upload/index.ts
@@ -1,2 +1,3 @@
 export { default as FileUpload } from './file-upload.vue';
 export { default as ImageUpload } from './image-upload.vue';
+export { default as InputUpload } from './input-upload.vue';
diff --git a/apps/web-ele/src/components/upload/input-upload.vue b/apps/web-ele/src/components/upload/input-upload.vue
new file mode 100644
index 00000000..c3a1ba96
--- /dev/null
+++ b/apps/web-ele/src/components/upload/input-upload.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// TODO @xingyu：这个组件，只有 pay 在用，和现有的 file-upload 和 image-upload 有点不一致。是不是可以考虑移除，只在 pay 那搞个复用的组件；
+import type { InputProps } from 'element-plus';
+
+import type { FileUploadProps } from './typing';
+
+import { computed } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { ElCol, ElInput, ElRow } from 'element-plus';
+
+import FileUpload from './file-upload.vue';
+
+const props = defineProps<{
+  defaultValue?: number | string;
+  fileUploadProps?: FileUploadProps;
+  inputProps?: InputProps;
+  inputType?: 'input' | 'textarea';
+  modelValue?: number | string;
+  textareaProps?: InputProps;
+}>();
+
+const emits = defineEmits<{
+  (e: 'change', payload: number | string): void;
+  (e: 'update:value', payload: number | string): void;
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
+
+function handleReturnText(text: string) {
+  modelValue.value = text;
+  emits('change', modelValue.value);
+  emits('update:value', modelValue.value);
+  emits('update:modelValue', modelValue.value);
+}
+
+const inputProps = computed(() => {
+  return {
+    ...props.inputProps,
+    value: modelValue.value,
+  };
+});
+
+const textareaProps = computed(() => {
+  return {
+    ...props.textareaProps,
+    value: modelValue.value,
+  };
+});
+
+const fileUploadProps = computed(() => {
+  return {
+    ...props.fileUploadProps,
+  };
+});
+</script>
+<template>
+  <ElRow>
+    <ElCol :span="18">
+      <ElInput v-if="inputType === 'input'" v-bind="inputProps" />
+      <ElInput v-else :row="4" type="textarea" v-bind="textareaProps" />
+    </ElCol>
+    <ElCol :span="6">
+      <FileUpload
+        class="ml-4"
+        v-bind="fileUploadProps"
+        @return-text="handleReturnText"
+      />
+    </ElCol>
+  </ElRow>
+</template>
diff --git a/apps/web-ele/src/components/upload/typing.ts b/apps/web-ele/src/components/upload/typing.ts
index 97ed4774..8f3d5f5c 100644
--- a/apps/web-ele/src/components/upload/typing.ts
+++ b/apps/web-ele/src/components/upload/typing.ts
@@ -1,11 +1,17 @@
-import type { UploadStatus } from 'element-plus';
+import type { AxiosResponse } from '@vben/request';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
 
 export type UploadListType = 'picture' | 'picture-card' | 'text';
 
-export type UploadStatus = 'error' | 'removed' | 'success' | 'uploading';
+export type UploadStatus =
+  | 'error'
+  | 'fail'
+  | 'removed'
+  | 'success'
+  | 'uploading';
 
 export enum UploadResultStatus {
-  DONE = 'success',
   ERROR = 'error',
   REMOVED = 'removed',
   SUCCESS = 'success',
@@ -27,11 +33,11 @@ export function convertToUploadStatus(
   status: UploadResultStatus,
 ): UploadStatus {
   switch (status) {
-    case UploadResultStatus.DONE: {
+    case UploadResultStatus.SUCCESS: {
       return 'success';
     }
     case UploadResultStatus.ERROR: {
-      return 'error';
+      return 'fail';
     }
     case UploadResultStatus.REMOVED: {
       return 'removed';
@@ -44,3 +50,28 @@ export function convertToUploadStatus(
     }
   }
 }
+
+export interface FileUploadProps {
+  // 根据后缀，或者其他
+  accept?: string[];
+  api?: (
+    file: File,
+    onUploadProgress?: AxiosProgressEvent,
+  ) => Promise<AxiosResponse<any>>;
+  // 上传的目录
+  directory?: string;
+  disabled?: boolean;
+  helpText?: string;
+  listType?: UploadListType;
+  // 最大数量的文件，Infinity不限制
+  maxNumber?: number;
+  // 文件最大多少MB
+  maxSize?: number;
+  // 是否支持多选
+  multiple?: boolean;
+  // support xxx.xxx.xx
+  resultField?: string;
+  // 是否显示下面的描述
+  showDescription?: boolean;
+  value?: string | string[];
+}
diff --git a/apps/web-ele/src/locales/langs/zh-CN/page.json b/apps/web-ele/src/locales/langs/zh-CN/page.json
index eefc4924..30180ddf 100644
--- a/apps/web-ele/src/locales/langs/zh-CN/page.json
+++ b/apps/web-ele/src/locales/langs/zh-CN/page.json
@@ -29,5 +29,62 @@
   "tenant": {
     "placeholder": "请选择租户",
     "success": "切换租户成功"
+  },
+  "common": {
+    "inputText": "请输入",
+    "selectText": "请选择",
+    "startTimeText": "开始时间",
+    "endTimeText": "结束时间",
+    "login": "登录",
+    "required": "该项为必填项",
+    "loginOut": "退出系统",
+    "document": "项目文档",
+    "profile": "个人中心",
+    "reminder": "温馨提示",
+    "loginOutMessage": "是否退出本系统？",
+    "back": "返回",
+    "ok": "确定",
+    "save": "保存",
+    "cancel": "取消",
+    "close": "关闭",
+    "reload": "重新加载",
+    "success": "成功",
+    "closeTab": "关闭标签页",
+    "closeTheLeftTab": "关闭左侧标签页",
+    "closeTheRightTab": "关闭右侧标签页",
+    "closeOther": "关闭其他标签页",
+    "closeAll": "关闭全部标签页",
+    "prevLabel": "上一步",
+    "nextLabel": "下一步",
+    "skipLabel": "跳过",
+    "doneLabel": "结束",
+    "menu": "菜单",
+    "menuDes": "以路由的结构渲染的菜单栏",
+    "collapse": "展开缩收",
+    "collapseDes": "展开和缩放菜单栏",
+    "tagsView": "标签页",
+    "tagsViewDes": "用于记录路由历史记录",
+    "tool": "工具",
+    "toolDes": "用于设置定制系统",
+    "query": "查询",
+    "reset": "重置",
+    "shrink": "收起",
+    "expand": "展开",
+    "confirmTitle": "系统提示",
+    "exportMessage": "是否确认导出数据项？",
+    "importMessage": "是否确认导入数据项？",
+    "createSuccess": "新增成功",
+    "updateSuccess": "修改成功",
+    "delMessage": "是否删除所选中数据？",
+    "delDataMessage": "是否删除数据？",
+    "delNoData": "请选择需要删除的数据",
+    "delSuccess": "删除成功",
+    "index": "序号",
+    "status": "状态",
+    "createTime": "创建时间",
+    "updateTime": "更新时间",
+    "copy": "复制",
+    "copySuccess": "复制成功",
+    "copyError": "复制失败"
   }
 }
diff --git a/apps/web-ele/src/router/routes/modules/mall.ts b/apps/web-ele/src/router/routes/modules/mall.ts
new file mode 100644
index 00000000..809dc2e7
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/mall.ts
@@ -0,0 +1,85 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/mall/product',
+    name: 'ProductCenter',
+    meta: {
+      title: '商品中心',
+      icon: 'lucide:shopping-bag',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: 'spu/add',
+        name: 'ProductSpuAdd',
+        meta: {
+          title: '商品添加',
+          activeMenu: '/mall/product/spu',
+        },
+        component: () => import('#/views/mall/product/spu/modules/form.vue'),
+      },
+      {
+        path: String.raw`spu/edit/:id(\d+)`,
+        name: 'ProductSpuEdit',
+        meta: {
+          title: '商品编辑',
+          activeMenu: '/mall/product/spu',
+        },
+        component: () => import('#/views/mall/product/spu/modules/form.vue'),
+      },
+      {
+        path: String.raw`spu/detail/:id(\d+)`,
+        name: 'ProductSpuDetail',
+        meta: {
+          title: '商品详情',
+          activeMenu: '/crm/business',
+        },
+        component: () => import('#/views/mall/product/spu/modules/detail.vue'),
+      },
+      {
+        path: '/product/spu',
+        name: 'ProductSpu',
+        meta: {
+          title: '商品列表',
+          activeMenu: '/mall/product/spu',
+        },
+        component: () => import('#/views/mall/product/spu/index.vue'),
+      },
+    ],
+  },
+  {
+    path: '/mall/trade',
+    name: 'TradeCenter',
+    meta: {
+      title: '交易中心',
+      icon: 'lucide:shopping-cart',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: String.raw`order/detail/:id(\d+)`,
+        name: 'TradeOrderDetail',
+        meta: {
+          title: '订单详情',
+          activeMenu: '/mall/trade/order',
+        },
+        component: () => import('#/views/mall/trade/order/modules/detail.vue'),
+      },
+      {
+        path: String.raw`after-sale/detail/:id(\d+)`,
+        name: 'TradeAfterSaleDetail',
+        meta: {
+          title: '退款详情',
+          activeMenu: '/mall/trade/after-sale',
+        },
+        component: () =>
+          import('#/views/mall/trade/afterSale/modules/detail.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/router/routes/modules/member.ts b/apps/web-ele/src/router/routes/modules/member.ts
new file mode 100644
index 00000000..4f4e8172
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/member.ts
@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/member/user/detail',
+    component: () => import('#/views/member/user/modules/detail.vue'),
+    name: 'MemberUserDetail',
+    meta: {
+      title: '会员详情',
+      icon: 'lucide:user',
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/router/routes/modules/pay.ts b/apps/web-ele/src/router/routes/modules/pay.ts
new file mode 100644
index 00000000..f7711fcd
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/pay.ts
@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/pay/cashier',
+    component: () => import('#/views/pay/cashier/index.vue'),
+    name: 'PayCashier',
+    meta: {
+      title: '收银台',
+      icon: 'lucide:badge-japanese-yen',
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/store/auth.ts b/apps/web-ele/src/store/auth.ts
index 1bffc588..74cd5a91 100644
--- a/apps/web-ele/src/store/auth.ts
+++ b/apps/web-ele/src/store/auth.ts
@@ -44,16 +44,26 @@ export const useAuthStore = defineStore('auth', () => {
     // 异步处理用户登录操作并获取 accessToken
     let userInfo: null | UserInfo = null;
     try {
+      let loginResult: AuthApi.LoginResult;
       loginLoading.value = true;
-      const { accessToken, refreshToken } =
-        type === 'mobile'
-          ? await smsLogin(params as AuthApi.SmsLoginParams)
-          : type === 'register'
-            ? await register(params as AuthApi.RegisterParams)
-            : // eslint-disable-next-line unicorn/no-nested-ternary
-              type === 'social'
-              ? await socialLogin(params as AuthApi.SocialLoginParams)
-              : await loginApi(params);
+      switch (type) {
+        case 'mobile': {
+          loginResult = await smsLogin(params as AuthApi.SmsLoginParams);
+          break;
+        }
+        case 'register': {
+          loginResult = await register(params as AuthApi.RegisterParams);
+          break;
+        }
+        case 'social': {
+          loginResult = await socialLogin(params as AuthApi.SocialLoginParams);
+          break;
+        }
+        default: {
+          loginResult = await loginApi(params);
+        }
+      }
+      const { accessToken, refreshToken } = loginResult;
 
       // 如果成功获取到 accessToken
       if (accessToken) {
@@ -122,8 +132,8 @@ export const useAuthStore = defineStore('auth', () => {
 
   async function fetchUserInfo() {
     // 加载
-    let authPermissionInfo: AuthPermissionInfo | null;
-    authPermissionInfo = await getAuthPermissionInfoApi();
+    const authPermissionInfo: AuthPermissionInfo | null =
+      await getAuthPermissionInfoApi();
     // userStore
     userStore.setUserInfo(authPermissionInfo.user);
     userStore.setUserRoles(authPermissionInfo.roles);
diff --git a/apps/web-ele/src/utils/bean.ts b/apps/web-ele/src/utils/bean.ts
new file mode 100644
index 00000000..fa4e3c02
--- /dev/null
+++ b/apps/web-ele/src/utils/bean.ts
@@ -0,0 +1,17 @@
+/**
+ * 将值复制到目标对象，且以目标对象属性为准，例：target: {a:1} source:{a:2,b:3} 结果为：{a:2}
+ * @param target 目标对象
+ * @param source 源对象
+ */
+export const copyValueToTarget = (target: any, source: any) => {
+  const newObj = Object.assign({}, target, source);
+  // 删除多余属性
+  Object.keys(newObj).forEach((key) => {
+    // 如果不是target中的属性则删除
+    if (Object.keys(target).indexOf(key) === -1) {
+      delete newObj[key];
+    }
+  });
+  // 更新目标对象值
+  Object.assign(target, newObj);
+};
diff --git a/apps/web-ele/src/utils/constants.ts b/apps/web-ele/src/utils/constants.ts
index 78da9f94..9b684696 100644
--- a/apps/web-ele/src/utils/constants.ts
+++ b/apps/web-ele/src/utils/constants.ts
@@ -201,6 +201,16 @@ export const PayOrderStatusEnum = {
 };
 
 // ========== MALL - 商品模块 ==========
+/**
+ * 商品 首页 日期类型
+ */
+export enum TimeRangeTypeEnum {
+  DAY30 = 1,
+  MONTH = 30,
+  WEEK = 7,
+  YEAR = 365,
+}
+
 /**
  * 商品 SPU 状态
  */
diff --git a/apps/web-ele/src/utils/index.ts b/apps/web-ele/src/utils/index.ts
index 022e6441..b2969087 100644
--- a/apps/web-ele/src/utils/index.ts
+++ b/apps/web-ele/src/utils/index.ts
@@ -5,3 +5,4 @@ export * from './formCreate';
 export * from './rangePickerProps';
 export * from './routerHelper';
 export * from './validator';
+export * from './bean';
diff --git a/apps/web-ele/src/views/infra/apiAccessLog/index.vue b/apps/web-ele/src/views/infra/apiAccessLog/index.vue
index 080200b1..d121273e 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/index.vue
+++ b/apps/web-ele/src/views/infra/apiAccessLog/index.vue
@@ -78,7 +78,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraApiAccessLogApi.ApiAccessLog>,
diff --git a/apps/web-ele/src/views/infra/apiErrorLog/index.vue b/apps/web-ele/src/views/infra/apiErrorLog/index.vue
index 863d4d26..064321d3 100644
--- a/apps/web-ele/src/views/infra/apiErrorLog/index.vue
+++ b/apps/web-ele/src/views/infra/apiErrorLog/index.vue
@@ -100,7 +100,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraApiErrorLogApi.ApiErrorLog>,
diff --git a/apps/web-ele/src/views/infra/codegen/index.vue b/apps/web-ele/src/views/infra/codegen/index.vue
index c8ab1b8c..fc94fce4 100644
--- a/apps/web-ele/src/views/infra/codegen/index.vue
+++ b/apps/web-ele/src/views/infra/codegen/index.vue
@@ -9,7 +9,7 @@ import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -88,32 +88,18 @@ async function onDelete(row: InfraCodegenApi.CodegenTable) {
 
 /** 批量删除代码生成配置 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteCodegenTableList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该代码生成配置吗？');
+  await deleteCodegenTableList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 /** 同步数据库 */
 async function onSync(row: InfraCodegenApi.CodegenTable) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.updating', [row.tableName]),
-    fullscreen: true,
-  });
-  try {
-    await syncCodegenFromDB(row.id);
-    ElMessage.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要同步该代码生成配置吗？');
+  await syncCodegenFromDB(row.id);
+  ElMessage.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
+  onRefresh();
 }
 
 /** 生成代码 */
@@ -198,7 +184,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraCodegenApi.CodegenTable>,
diff --git a/apps/web-ele/src/views/infra/config/index.vue b/apps/web-ele/src/views/infra/config/index.vue
index e765f2ba..5e1f63da 100644
--- a/apps/web-ele/src/views/infra/config/index.vue
+++ b/apps/web-ele/src/views/infra/config/index.vue
@@ -7,7 +7,7 @@ import type { InfraConfigApi } from '#/api/infra/config';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -58,7 +58,6 @@ async function onDelete(row: InfraConfigApi.Config) {
   });
   try {
     await deleteConfig(row.id as number);
-    loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
   } finally {
@@ -68,18 +67,10 @@ async function onDelete(row: InfraConfigApi.Config) {
 
 /** 批量删除参数 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteConfigList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该参数吗？');
+  await deleteConfigList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -131,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraConfigApi.Config>,
diff --git a/apps/web-ele/src/views/infra/dataSourceConfig/index.vue b/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
index 65eacafe..43188b05 100644
--- a/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
+++ b/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
@@ -7,7 +7,7 @@ import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 
 import { onMounted, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -46,9 +46,8 @@ async function onDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
   });
   try {
     await deleteDataSourceConfig(row.id as number);
-    loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    await handleLoadData();
+    onRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -56,18 +55,10 @@ async function onDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
 
 /** 批量删除数据源 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteDataSourceConfigList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    await handleLoadData();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该数据源吗？');
+  await deleteDataSourceConfigList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/infra/demo/demo01/index.vue b/apps/web-ele/src/views/infra/demo/demo01/index.vue
index 552fc73a..a0c2bb9a 100644
--- a/apps/web-ele/src/views/infra/demo/demo01/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo01/index.vue
@@ -112,7 +112,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,
diff --git a/apps/web-ele/src/views/infra/demo/demo02/index.vue b/apps/web-ele/src/views/infra/demo/demo02/index.vue
index e92e9aee..34ff5b36 100644
--- a/apps/web-ele/src/views/infra/demo/demo02/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo02/index.vue
@@ -102,7 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo02CategoryApi.Demo02Category>,
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
index a7dd4872..17ef8e12 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
@@ -119,7 +119,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isCurrent: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
index e5af52f2..78bd4d66 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
@@ -110,7 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       enabled: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     height: '600px',
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
index d230be70..9fb8fc23 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
@@ -110,7 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       enabled: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     height: '600px',
diff --git a/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue b/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
index 96144463..ce1938e8 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
diff --git a/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue b/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
index 1b2ff404..ff99c665 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
@@ -112,7 +112,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
diff --git a/apps/web-ele/src/views/infra/file/index.vue b/apps/web-ele/src/views/infra/file/index.vue
index 75385ef6..0d2e87f2 100644
--- a/apps/web-ele/src/views/infra/file/index.vue
+++ b/apps/web-ele/src/views/infra/file/index.vue
@@ -7,7 +7,7 @@ import type { InfraFileApi } from '#/api/infra/file';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty, openWindow } from '@vben/utils';
 
 import { useClipboard } from '@vueuse/core';
@@ -66,7 +66,6 @@ async function onDelete(row: InfraFileApi.File) {
   });
   try {
     await deleteFile(row.id as number);
-    loadingInstance.close();
     ElMessage.success(
       $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
     );
@@ -78,18 +77,10 @@ async function onDelete(row: InfraFileApi.File) {
 
 /** 批量删除文件 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteFileList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该文件吗？');
+  await deleteFileList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -138,7 +129,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraFileApi.File>,
diff --git a/apps/web-ele/src/views/infra/fileConfig/index.vue b/apps/web-ele/src/views/infra/fileConfig/index.vue
index 8d809c60..21095feb 100644
--- a/apps/web-ele/src/views/infra/fileConfig/index.vue
+++ b/apps/web-ele/src/views/infra/fileConfig/index.vue
@@ -92,7 +92,6 @@ async function onDelete(row: InfraFileConfigApi.FileConfig) {
   });
   try {
     await deleteFileConfig(row.id as number);
-    loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
   } finally {
@@ -102,18 +101,10 @@ async function onDelete(row: InfraFileConfigApi.FileConfig) {
 
 /** 批量删除文件配置 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteFileConfigList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该文件配置吗？');
+  await deleteFileConfigList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -173,7 +164,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraFileConfigApi.FileConfig>,
diff --git a/apps/web-ele/src/views/infra/job/index.vue b/apps/web-ele/src/views/infra/job/index.vue
index 034a53c6..5bdb2aac 100644
--- a/apps/web-ele/src/views/infra/job/index.vue
+++ b/apps/web-ele/src/views/infra/job/index.vue
@@ -120,17 +120,10 @@ async function onDelete(row: InfraJobApi.Job) {
 
 /** 批量删除任务 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteJobList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该任务吗？');
+  await deleteJobList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -191,7 +184,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraJobApi.Job>,
diff --git a/apps/web-ele/src/views/infra/job/logger/index.vue b/apps/web-ele/src/views/infra/job/logger/index.vue
index 6cb28a84..9e949caf 100644
--- a/apps/web-ele/src/views/infra/job/logger/index.vue
+++ b/apps/web-ele/src/views/infra/job/logger/index.vue
@@ -78,7 +78,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraJobLogApi.JobLog>,
diff --git a/apps/web-ele/src/views/mall/home/components/analysis-chart-card.vue b/apps/web-ele/src/views/mall/home/components/analysis-chart-card.vue
new file mode 100644
index 00000000..807b6bad
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/analysis-chart-card.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+  title: string;
+}
+
+defineOptions({
+  name: 'AnalysisChartCard',
+});
+
+withDefaults(defineProps<Props>(), {});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="my--1.5 flex flex-row items-center justify-between">
+        <div class="text-xl">{{ title }}</div>
+        <slot name="header-suffix"></slot>
+      </div>
+    </template>
+    <template #default>
+      <slot></slot>
+    </template>
+  </el-card>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/analysis-overview-icon.vue b/apps/web-ele/src/views/mall/home/components/analysis-overview-icon.vue
new file mode 100644
index 00000000..80ebbbd8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/analysis-overview-icon.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { AnalysisOverviewIconItem } from './data';
+
+import { computed } from 'vue';
+
+import { CountTo } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+interface Props {
+  items?: AnalysisOverviewIconItem[];
+  modelValue?: AnalysisOverviewIconItem[];
+  columnsNumber?: number;
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+  columnsNumber: 4,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => emit('update:modelValue', value),
+});
+
+// 计算动态的grid列数类名
+const gridColumnsClass = computed(() => {
+  const colNum = props.columnsNumber;
+  return {
+    'lg:grid-cols-1': colNum === 1,
+    'lg:grid-cols-2': colNum === 2,
+    'lg:grid-cols-3': colNum === 3,
+    'lg:grid-cols-4': colNum === 4,
+    'lg:grid-cols-5': colNum === 5,
+    'lg:grid-cols-6': colNum === 6,
+  };
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
+    <template v-for="item in itemsData" :key="item.title">
+      <div
+        class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
+      >
+        <div
+          class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
+          :class="`${item.iconColor} ${item.iconBgColor}`"
+        >
+          <IconifyIcon :icon="item.icon" class="text-2xl" />
+        </div>
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-1 text-gray-500">
+            <span class="text-sm">{{ item.title }}</span>
+            <el-tooltip
+              :content="item.tooltip"
+              placement="top-start"
+              v-if="item.tooltip"
+            >
+              <IconifyIcon
+                icon="ep:warning"
+                class="flex items-center text-sm"
+              />
+            </el-tooltip>
+          </div>
+          <div class="flex flex-row items-baseline gap-2">
+            <div class="text-3xl">
+              <CountTo
+                :prefix="item.prefix"
+                :end-val="item.value"
+                :decimals="item.decimals"
+              />
+            </div>
+            <span
+              v-if="item.percent !== undefined"
+              :class="
+                Number(item.percent) > 0 ? 'text-red-500' : 'text-green-500'
+              "
+              class="flex items-center whitespace-nowrap"
+            >
+              <span class="text-sm">{{ Math.abs(Number(item.percent)) }}%</span>
+              <IconifyIcon
+                :icon="
+                  Number(item.percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'
+                "
+                class="ml-0.5 text-sm"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/analysis-overview.vue b/apps/web-ele/src/views/mall/home/components/analysis-overview.vue
new file mode 100644
index 00000000..6e1aa439
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/analysis-overview.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { AnalysisOverviewItem } from './data';
+
+import { computed } from 'vue';
+
+import { VbenCountToAnimator } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+interface Props {
+  items?: AnalysisOverviewItem[];
+  modelValue?: AnalysisOverviewItem[];
+  columnsNumber?: number;
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+  columnsNumber: 4,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => emit('update:modelValue', value),
+});
+
+// 计算动态的grid列数类名
+const gridColumnsClass = computed(() => {
+  const colNum = props.columnsNumber;
+  return {
+    'lg:grid-cols-1': colNum === 1,
+    'lg:grid-cols-2': colNum === 2,
+    'lg:grid-cols-3': colNum === 3,
+    'lg:grid-cols-4': colNum === 4,
+    'lg:grid-cols-5': colNum === 5,
+    'lg:grid-cols-6': colNum === 6,
+  };
+});
+
+// 计算环比增长率
+const calculateGrowthRate = (
+  currentValue: number,
+  previousValue: number,
+): { isPositive: boolean; rate: number } => {
+  if (previousValue === 0) {
+    return { rate: currentValue > 0 ? 100 : 0, isPositive: currentValue >= 0 };
+  }
+
+  const rate = ((currentValue - previousValue) / previousValue) * 100;
+  return { rate: Math.abs(rate), isPositive: rate >= 0 };
+};
+
+// 格式化增长率显示
+const formatGrowthRate = (rate: number): string => {
+  return rate.toFixed(1);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
+    <template v-for="item in itemsData" :key="item.title">
+      <el-card :title="item.title" class="w-full">
+        <template #header>
+          <div class="text-lg font-semibold">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center">
+                <span>{{ item.title }}</span>
+                <span v-if="item.tooltip" class="ml-1 inline-block">
+                  <el-tooltip>
+                    <template #default>
+                      <div
+                        class="inline-flex h-4 w-4 translate-y-[-3px] items-center justify-center rounded-full bg-gray-200 text-xs font-bold text-gray-600"
+                      >
+                        !
+                      </div>
+                    </template>
+                    <template #content>
+                      {{ item.tooltip }}
+                    </template>
+                  </el-tooltip>
+                </span>
+              </div>
+              <el-tag>今日</el-tag>
+            </div>
+          </div>
+        </template>
+        <template #default>
+          <!-- 左右布局：左边数字，右边图标 -->
+          <div class="flex items-center justify-between">
+            <!-- 左侧：数字显示 -->
+            <div class="flex-1">
+              <div class="flex items-baseline">
+                <!-- prefix 前缀 -->
+                <span
+                  v-if="item.prefix"
+                  class="mr-1 text-3xl font-medium text-gray-600"
+                >
+                  {{ item.prefix }}
+                </span>
+                <!-- 数字动画 -->
+                <VbenCountToAnimator
+                  :end-val="item.value"
+                  :start-val="1"
+                  class="text-3xl font-bold text-gray-900"
+                  prefix=""
+                />
+              </div>
+            </div>
+
+            <!-- 右侧：环比增长率图标和数值 -->
+            <div
+              v-if="item.showGrowthRate && item.totalValue !== undefined"
+              class="flex items-center space-x-2 rounded-lg bg-gray-50 px-3 py-2"
+            >
+              <IconifyIcon
+                :icon="
+                  calculateGrowthRate(item.value, item.totalValue).isPositive
+                    ? 'lucide:trending-up'
+                    : 'lucide:trending-down'
+                "
+                class="size-5"
+                :class="[
+                  calculateGrowthRate(item.value, item.totalValue).isPositive
+                    ? 'text-green-500'
+                    : 'text-red-500',
+                ]"
+              />
+              <span
+                class="text-sm font-semibold"
+                :class="[
+                  calculateGrowthRate(item.value, item.totalValue).isPositive
+                    ? 'text-green-500'
+                    : 'text-red-500',
+                ]"
+              >
+                {{
+                  calculateGrowthRate(item.value, item.totalValue).isPositive
+                    ? '+'
+                    : '-'
+                }}{{
+                  formatGrowthRate(
+                    calculateGrowthRate(item.value, item.totalValue).rate,
+                  )
+                }}%
+              </span>
+            </div>
+          </div>
+        </template>
+        <template #footer v-if="item.totalTitle">
+          <div class="flex items-center justify-between">
+            <span>{{ item.totalTitle }}</span>
+            <VbenCountToAnimator
+              :end-val="item.totalValue"
+              :start-val="1"
+              prefix=""
+            />
+          </div>
+        </template>
+      </el-card>
+    </template>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 移除 el-card header 的下边框 */
+:deep(.el-card__header) {
+  padding-bottom: 16px;
+  border-bottom: none !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/home/components/analysis-trade-overview.vue b/apps/web-ele/src/views/mall/home/components/analysis-trade-overview.vue
new file mode 100644
index 00000000..b188a9d2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/analysis-trade-overview.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { AnalysisOverviewTradeItem } from './data';
+
+import { computed } from 'vue';
+
+import { CountTo } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+interface Props {
+  items?: AnalysisOverviewTradeItem[];
+  modelValue?: AnalysisOverviewTradeItem[];
+  columnsNumber?: number;
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+  columnsNumber: 4,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => emit('update:modelValue', value),
+});
+
+// 计算动态的grid列数类名
+const gridColumnsClass = computed(() => {
+  const colNum = props.columnsNumber;
+  return {
+    'lg:grid-cols-1': colNum === 1,
+    'lg:grid-cols-2': colNum === 2,
+    'lg:grid-cols-3': colNum === 3,
+    'lg:grid-cols-4': colNum === 4,
+    'lg:grid-cols-5': colNum === 5,
+    'lg:grid-cols-6': colNum === 6,
+  };
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
+    <template v-for="item in itemsData" :key="item.title">
+      <div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
+        <div class="flex items-center justify-between text-gray-500">
+          <span>{{ item.title }}</span>
+          <el-tooltip
+            :content="item.tooltip"
+            placement="top-start"
+            v-if="item.tooltip"
+          >
+            <IconifyIcon icon="ep:warning" />
+          </el-tooltip>
+        </div>
+        <div class="mb-4 text-3xl">
+          <CountTo
+            :prefix="item.prefix"
+            :end-val="item.value"
+            :decimals="item.decimals"
+          />
+        </div>
+        <div class="flex flex-row gap-1 text-sm">
+          <span class="text-gray-500">环比</span>
+          <span
+            class="flex items-center gap-0.5 whitespace-nowrap"
+            :class="
+              Number(item.percent) > 0 ? 'text-red-500' : 'text-green-500'
+            "
+          >
+            <span>{{ Math.abs(Number(item.percent)) }}%</span>
+            <IconifyIcon
+              :icon="
+                Number(item.percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'
+              "
+              class="flex-shrink-0 !text-sm"
+            />
+          </span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/data.ts b/apps/web-ele/src/views/mall/home/components/data.ts
new file mode 100644
index 00000000..021a20e5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/data.ts
@@ -0,0 +1,39 @@
+export interface WorkbenchQuickDataShowItem {
+  name: string;
+  value: number;
+  prefix: string;
+  decimals: number;
+  routerName: string;
+}
+
+export interface AnalysisOverviewItem {
+  title: string;
+  totalTitle?: string;
+  totalValue?: number;
+  value: number;
+  prefix?: string;
+  tooltip?: string;
+  // 环比增长相关字段
+  showGrowthRate?: boolean; // 是否显示环比增长率，默认为false
+}
+
+export interface AnalysisOverviewIconItem {
+  icon: string;
+  title: string;
+  value: number;
+  prefix?: string;
+  iconBgColor: string;
+  iconColor: string;
+  tooltip?: string;
+  decimals?: number;
+  percent?: number;
+}
+
+export interface AnalysisOverviewTradeItem {
+  title: string;
+  value: number;
+  prefix?: string;
+  decimals?: number;
+  percent?: number;
+  tooltip?: string;
+}
diff --git a/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue b/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue
new file mode 100644
index 00000000..089e507a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { ref } from 'vue';
+
+import { calculateRelativeRate, fenToYuan } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+import AnalysisChartCard from './analysis-chart-card.vue';
+import ShortcutDateRangePicker from './shortcut-date-range-picker.vue';
+
+/** 会员概览卡片 */
+defineOptions({ name: 'MemberFunnelCard' });
+
+const loading = ref(true); // 加载中
+const analyseData = ref<MallMemberStatisticsApi.Analyse>(); // 会员分析数据
+
+/** 查询会员概览数据列表 */
+const handleTimeRangeChange = async (
+  times: [dayjs.ConfigType, dayjs.ConfigType],
+) => {
+  loading.value = true;
+  // 查询数据
+  analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+    times: [dayjs(times[0]).toDate(), dayjs(times[1]).toDate()],
+  });
+  loading.value = false;
+};
+</script>
+<template>
+  <AnalysisChartCard title="会员概览">
+    <template #header-suffix>
+      <!-- 查询条件 -->
+      <ShortcutDateRangePicker @change="handleTimeRangeChange" />
+    </template>
+    <template #default>
+      <div class="min-w-225 py-1.75" v-loading="loading">
+        <div class="relative flex h-24">
+          <div class="<lg:w-35% <xl:w-55% h-full w-3/4 bg-blue-50">
+            <div class="ml-15 flex h-full flex-col justify-center">
+              <div class="font-bold">
+                注册用户数量：{{
+                  analyseData?.comparison?.value?.registerUserCount || 0
+                }}
+              </div>
+              <div class="text-3.5 mt-2">
+                环比增长率：{{
+                  calculateRelativeRate(
+                    analyseData?.comparison?.value?.registerUserCount,
+                    analyseData?.comparison?.reference?.registerUserCount,
+                  )
+                }}%
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid1 text-3.5 flex h-full flex-col items-center justify-center bg-blue-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.visitUserCount || 0
+            }}</span>
+            <span>访客</span>
+          </div>
+        </div>
+        <div class="relative flex h-24">
+          <div class="<lg:w-35% <xl:w-55% flex h-full w-3/4 bg-cyan-50">
+            <div class="ml-15 flex h-full flex-col justify-center">
+              <div class="font-bold">
+                活跃用户数量：{{
+                  analyseData?.comparison?.value?.visitUserCount || 0
+                }}
+              </div>
+              <div class="text-3.5 mt-2">
+                环比增长率：{{
+                  calculateRelativeRate(
+                    analyseData?.comparison?.value?.visitUserCount,
+                    analyseData?.comparison?.reference?.visitUserCount,
+                  )
+                }}%
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid2 flex flex-col items-center justify-center bg-cyan-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.orderUserCount || 0
+            }}</span>
+            <span>下单</span>
+          </div>
+        </div>
+        <div class="relative flex h-24">
+          <div class="<lg:w-35% <xl:w-55% flex w-3/4 bg-slate-50">
+            <div class="ml-15 flex h-full flex-row gap-x-16">
+              <div class="flex flex-col justify-center">
+                <div class="font-bold">
+                  充值用户数量：{{
+                    analyseData?.comparison?.value?.rechargeUserCount || 0
+                  }}
+                </div>
+                <div class="text-3.5 mt-2">
+                  环比增长率：{{
+                    calculateRelativeRate(
+                      analyseData?.comparison?.value?.rechargeUserCount,
+                      analyseData?.comparison?.reference?.rechargeUserCount,
+                    )
+                  }}%
+                </div>
+              </div>
+              <div class="flex flex-col justify-center">
+                <div class="font-bold">
+                  客单价：{{ fenToYuan(analyseData?.atv || 0) }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid3 flex flex-col items-center justify-center bg-slate-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.payUserCount || 0
+            }}</span>
+            <span>成交用户</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </AnalysisChartCard>
+</template>
+<style lang="scss" scoped>
+.trapezoid1 {
+  z-index: 1;
+  width: 19.25rem;
+  margin-top: 0.381rem;
+  margin-left: -9.625rem;
+  font-size: 0.875rem;
+  transform: perspective(5em) rotateX(-11deg);
+}
+
+.trapezoid2 {
+  z-index: 1;
+  width: 14rem;
+  height: 6.25rem;
+  margin-top: 0.425rem;
+  margin-left: -7rem;
+  font-size: 0.875rem;
+  transform: perspective(7em) rotateX(-20deg);
+}
+
+.trapezoid3 {
+  z-index: 1;
+  width: 9rem;
+  height: 5.75rem;
+  margin-top: 0.8125rem;
+  margin-left: -4.5rem;
+  font-size: 0.875rem;
+  transform: perspective(3em) rotateX(-13deg);
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/home/components/member-statistics-card.vue b/apps/web-ele/src/views/mall/home/components/member-statistics-card.vue
new file mode 100644
index 00000000..603e9bbc
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/member-statistics-card.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { formatDate } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+/** 会员用户统计卡片 */
+defineOptions({ name: 'MemberStatisticsCard' });
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+const loading = ref(true); // 加载中
+/** 折线图配置 */
+const lineChartOptions = reactive({
+  dataset: {
+    dimensions: ['date', 'count'],
+    source: [] as any[],
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [{ name: '注册量', type: 'line', smooth: true, areaStyle: {} }],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false, // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '会员统计' }, // 保存为图片
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      formatter: (date: string) => formatDate(date, 'MM-DD'),
+    },
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+});
+
+const getMemberRegisterCountList = async () => {
+  loading.value = true;
+  // 查询最近一月数据
+  const beginTime = dayjs().subtract(30, 'd').startOf('d');
+  const endTime = dayjs().endOf('d');
+  const list = await MemberStatisticsApi.getMemberRegisterCountList(
+    beginTime.toDate(),
+    endTime.toDate(),
+  );
+  // 更新 Echarts 数据
+  if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
+    lineChartOptions.dataset.source = list;
+  }
+  loading.value = false;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getMemberRegisterCountList();
+  renderEcharts(lineChartOptions as any);
+});
+</script>
+<template>
+  <AnalysisChartCard title="用户统计">
+    <!-- 折线图 -->
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/member-terminal-card.vue b/apps/web-ele/src/views/mall/home/components/member-terminal-card.vue
new file mode 100644
index 00000000..6631ef7b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/member-terminal-card.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+import type { DictDataType } from '#/utils/dict';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+/** 会员终端卡片 */
+defineOptions({ name: 'MemberTerminalCard' });
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const loading = ref(true); // 加载中
+
+/** 会员终端统计图配置 */
+const terminalChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    confine: true,
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
+  },
+  legend: {
+    orient: 'vertical' as const,
+    left: 'right' as const,
+  },
+  roseType: 'area',
+  series: [
+    {
+      name: '会员终端',
+      type: 'pie' as const,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [] as { name: string; value: number }[],
+    },
+  ],
+});
+
+/** 按照终端，查询会员统计列表 */
+const getMemberTerminalStatisticsList = async () => {
+  loading.value = true;
+  const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
+  const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL);
+  if (terminalChartOptions.series && terminalChartOptions.series.length > 0) {
+    (terminalChartOptions.series[0] as any).data = dictDataList.map(
+      (dictData: DictDataType) => {
+        const userCount = list.find(
+          (item: MallMemberStatisticsApi.TerminalStatistics) =>
+            item.terminal === dictData.value,
+        )?.userCount;
+        return {
+          name: dictData.label,
+          value: userCount || 0,
+        };
+      },
+    );
+  }
+  loading.value = false;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getMemberTerminalStatisticsList();
+  renderEcharts(terminalChartOptions);
+});
+</script>
+<template>
+  <AnalysisChartCard title="会员终端">
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/shortcut-date-range-picker.vue b/apps/web-ele/src/views/mall/home/components/shortcut-date-range-picker.vue
new file mode 100644
index 00000000..a8431d5c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/shortcut-date-range-picker.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import * as DateUtil from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+/** 快捷日期范围选择组件 */
+defineOptions({ name: 'ShortcutDateRangePicker' });
+
+/** 触发事件：时间范围选中 */
+const emits = defineEmits<{
+  (e: 'change', times: [dayjs.ConfigType, dayjs.ConfigType]): void;
+}>();
+const shortcutDays = ref(7); // 日期快捷天数（单选按钮组）, 默认7天
+const times = ref<[string, string]>(['', '']); // 时间范围参数
+defineExpose({ times }); // 暴露时间范围参数
+/** 日期快捷选择 */
+const shortcuts = [
+  {
+    text: '昨天',
+    value: () => DateUtil.getDayRange(new Date(), -1),
+  },
+  {
+    text: '最近7天',
+    value: () => DateUtil.getLast7Days(),
+  },
+  {
+    text: '本月',
+    value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')],
+  },
+  {
+    text: '最近30天',
+    value: () => DateUtil.getLast30Days(),
+  },
+  {
+    text: '最近1年',
+    value: () => DateUtil.getLast1Year(),
+  },
+];
+
+/** 设置时间范围 */
+function setTimes() {
+  const beginDate = dayjs().subtract(shortcutDays.value, 'd');
+  const yesterday = dayjs().subtract(1, 'd');
+  times.value = DateUtil.getDateRange(beginDate, yesterday);
+}
+
+/** 快捷日期单选按钮选中 */
+const handleShortcutDaysChange = async () => {
+  // 设置时间范围
+  setTimes();
+  // 发送时间范围选中事件
+  await emitDateRangePicker();
+};
+
+/** 触发时间范围选中事件 */
+const emitDateRangePicker = async () => {
+  emits('change', times.value);
+};
+
+/** 初始化 */
+onMounted(() => {
+  handleShortcutDaysChange();
+});
+</script>
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <el-radio-group v-model="shortcutDays" @change="handleShortcutDaysChange">
+      <el-radio-button :value="1">昨天</el-radio-button>
+      <el-radio-button :value="7">最近7天</el-radio-button>
+      <el-radio-button :value="30">最近30天</el-radio-button>
+    </el-radio-group>
+    <el-date-picker
+      v-model="times"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+      :shortcuts="shortcuts"
+      class="!w-240px"
+      @change="emitDateRangePicker"
+    />
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/trade-trend-card.vue b/apps/web-ele/src/views/mall/home/components/trade-trend-card.vue
new file mode 100644
index 00000000..8c2b2b69
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/trade-trend-card.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import dayjs, { Dayjs } from 'dayjs';
+
+import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { TimeRangeTypeEnum } from '#/utils/constants';
+
+/** 交易量趋势 */
+defineOptions({ name: 'TradeTrendCard' });
+
+const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认30天
+const loading = ref(true); // 加载中
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+// 时间范围 Map
+const timeRange = new Map()
+  .set(TimeRangeTypeEnum.DAY30, {
+    name: '30天',
+    series: [
+      { name: '订单金额', type: 'bar', smooth: true, data: [] },
+      { name: '订单数量', type: 'line', smooth: true, data: [] },
+    ],
+  })
+  .set(TimeRangeTypeEnum.WEEK, {
+    name: '周',
+    series: [
+      { name: '上周金额', type: 'bar', smooth: true, data: [] },
+      { name: '本周金额', type: 'bar', smooth: true, data: [] },
+      { name: '上周数量', type: 'line', smooth: true, data: [] },
+      { name: '本周数量', type: 'line', smooth: true, data: [] },
+    ],
+  })
+  .set(TimeRangeTypeEnum.MONTH, {
+    name: '月',
+    series: [
+      { name: '上月金额', type: 'bar', smooth: true, data: [] },
+      { name: '本月金额', type: 'bar', smooth: true, data: [] },
+      { name: '上月数量', type: 'line', smooth: true, data: [] },
+      { name: '本月数量', type: 'line', smooth: true, data: [] },
+    ],
+  })
+  .set(TimeRangeTypeEnum.YEAR, {
+    name: '年',
+    series: [
+      { name: '去年金额', type: 'bar', smooth: true, data: [] },
+      { name: '今年金额', type: 'bar', smooth: true, data: [] },
+      { name: '去年数量', type: 'line', smooth: true, data: [] },
+      { name: '今年数量', type: 'line', smooth: true, data: [] },
+    ],
+  });
+/** 图表配置 */
+const eChartOptions = reactive({
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+    data: [] as string[],
+  },
+  series: [] as any[],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false, // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '订单量趋势' }, // 保存为图片
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category' as const,
+    inverse: true,
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+    data: [] as string[],
+    axisLabel: {
+      formatter: (date: string) => {
+        switch (timeRangeType.value) {
+          case TimeRangeTypeEnum.DAY30: {
+            return formatDate(date, 'MM-DD');
+          }
+          case TimeRangeTypeEnum.MONTH: {
+            return formatDate(date, 'D');
+          }
+          case TimeRangeTypeEnum.WEEK: {
+            let weekDay = formatDate(date, 'ddd');
+            if (weekDay === '0') weekDay = '日';
+            return `周${weekDay}`;
+          }
+          case TimeRangeTypeEnum.YEAR: {
+            return `${formatDate(date, 'M')}月`;
+          }
+          default: {
+            return date;
+          }
+        }
+      },
+    },
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+});
+
+/** 时间范围类型单选按钮选中 */
+const handleTimeRangeTypeChange = async () => {
+  // 设置时间范围
+  let beginTime: Dayjs;
+  let endTime: Dayjs;
+  switch (timeRangeType.value) {
+    case TimeRangeTypeEnum.MONTH: {
+      beginTime = dayjs().startOf('month');
+      endTime = dayjs().endOf('month');
+      break;
+    }
+    case TimeRangeTypeEnum.WEEK: {
+      beginTime = dayjs().startOf('week');
+      endTime = dayjs().endOf('week');
+      break;
+    }
+    case TimeRangeTypeEnum.YEAR: {
+      beginTime = dayjs().startOf('year');
+      endTime = dayjs().endOf('year');
+      break;
+    }
+    default: {
+      beginTime = dayjs().subtract(30, 'day').startOf('d');
+      endTime = dayjs().endOf('d');
+      break;
+    }
+  }
+  // 发送时间范围选中事件
+  await getOrderCountTrendComparison(beginTime, endTime);
+};
+
+/** 查询订单数量趋势对照数据 */
+const getOrderCountTrendComparison = async (
+  beginTime: dayjs.ConfigType,
+  endTime: dayjs.ConfigType,
+) => {
+  loading.value = true;
+  // 查询数据
+  const list = await TradeStatisticsApi.getOrderCountTrendComparison(
+    timeRangeType.value,
+    dayjs(beginTime).toDate(),
+    dayjs(endTime).toDate(),
+  );
+  // 处理数据
+  const dates: string[] = [];
+  const series = [...timeRange.get(timeRangeType.value).series];
+  for (const item of list) {
+    dates.push(item.value.date);
+    if (series.length === 2) {
+      series[0].data.push(fenToYuan(item?.value?.orderPayPrice || 0)); // 当前金额
+      series[1].data.push(item?.value?.orderPayCount || 0); // 当前数量
+    } else {
+      series[0].data.push(fenToYuan(item?.reference?.orderPayPrice || 0)); // 对照金额
+      series[1].data.push(fenToYuan(item?.value?.orderPayPrice || 0)); // 当前金额
+      series[2].data.push(item?.reference?.orderPayCount || 0); // 对照数量
+      series[3].data.push(item?.value?.orderPayCount || 0); // 当前数量
+    }
+  }
+  eChartOptions.xAxis!.data = dates;
+  eChartOptions.series = series;
+  // legend在4个切换到2个的时候，还是显示成4个，需要手动配置一下
+  eChartOptions.legend.data = series.map((item) => item.name);
+  loading.value = false;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await handleTimeRangeTypeChange();
+  renderEcharts(eChartOptions as any);
+});
+</script>
+<template>
+  <AnalysisChartCard title="交易量趋势">
+    <template #header-suffix>
+      <div class="flex flex-row items-center justify-between">
+        <!-- 查询条件 -->
+        <div class="flex flex-row items-center gap-2">
+          <el-radio-group
+            v-model="timeRangeType"
+            @change="handleTimeRangeTypeChange"
+          >
+            <el-radio-button
+              v-for="[key, value] in timeRange.entries()"
+              :key="key"
+              :value="key"
+            >
+              {{ value.name }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+    </template>
+    <!-- 折线图 -->
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/workbench-quick-data-show.vue b/apps/web-ele/src/views/mall/home/components/workbench-quick-data-show.vue
new file mode 100644
index 00000000..3d55ccb8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/workbench-quick-data-show.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { WorkbenchQuickDataShowItem } from './data';
+
+import { computed } from 'vue';
+
+import { CountTo } from '@vben/common-ui';
+
+interface Props {
+  items?: WorkbenchQuickDataShowItem[];
+  modelValue?: WorkbenchQuickDataShowItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchQuickDataShow',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+// 使用计算属性实现双向绑定
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <!--      <CardTitle class="text-lg " >{{ title }}</CardTitle>-->
+      <div class="text-lg font-semibold">{{ title }}</div>
+    </template>
+    <template #default>
+      <div class="flex flex-wrap p-0">
+        <div
+          v-for="(item, index) in itemsData"
+          :key="item.name"
+          :class="{
+            'border-r-0': index % 4 === 3,
+            'border-b-0': index < 4,
+            'pb-4': index > 4,
+            'rounded-bl-xl': index === itemsData.length - 4,
+            'rounded-br-xl': index === itemsData.length - 1,
+          }"
+          class="flex-col-center group w-1/4 cursor-pointer py-9"
+        >
+          <div class="mb-2 flex justify-center">
+            <CountTo
+              :prefix="item.prefix || ''"
+              :end-val="Number(item.value)"
+              :decimals="item.decimals || 0"
+              class="text-4xl font-normal"
+            />
+          </div>
+          <span class="truncate text-base text-gray-500">{{ item.name }}</span>
+        </div>
+      </div>
+    </template>
+    <!--    <CardContent class="flex flex-wrap p-0">-->
+    <!--      <template>-->
+    <!--        -->
+    <!--      </template>-->
+    <!--    </CardContent>-->
+  </el-card>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/index.vue b/apps/web-ele/src/views/mall/home/index.vue
new file mode 100644
index 00000000..3ebbe281
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/index.vue
@@ -0,0 +1,318 @@
+<script lang="ts" setup>
+import type {
+  WorkbenchProjectItem,
+  WorkbenchQuickNavItem,
+} from '@vben/common-ui';
+
+import type { AnalysisOverviewItem } from './components/data';
+
+import type { WorkbenchQuickDataShowItem } from '#/views/mall/home/components/data';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, WorkbenchQuickNav } from '@vben/common-ui';
+import { isString, openWindow } from '@vben/utils';
+
+import { getTabsCount } from '#/api/mall/product/spu';
+import { getUserCountComparison } from '#/api/mall/statistics/member';
+import { getWalletRechargePrice } from '#/api/mall/statistics/pay';
+import { getOrderComparison, getOrderCount } from '#/api/mall/statistics/trade';
+
+import AnalysisOverview from './components/analysis-overview.vue';
+import MemberFunnelCard from './components/member-funnel-card.vue';
+import MemberStatisticsCard from './components/member-statistics-card.vue';
+import MemberTerminalCard from './components/member-terminal-card.vue';
+import TradeTrendCard from './components/trade-trend-card.vue';
+import WorkbenchQuickDataShow from './components/workbench-quick-data-show.vue';
+
+/** 商城首页 */
+defineOptions({ name: 'MallHome' });
+
+const loading = ref(true); // 加载中
+const orderComparison = ref(); // 交易对照数据
+const userComparison = ref(); // 用户对照数据
+const data = ref({
+  orderUndelivered: 0,
+  orderAfterSaleApply: 0,
+  orderWaitePickUp: 0,
+  withdrawAuditing: 0,
+  productForSale: 0,
+  productInWarehouse: 0,
+  productAlertStock: 0,
+  rechargePrice: 0,
+});
+
+const dataShow = ref(false);
+
+/** 查询交易对照卡片数据 */
+const getOrder = async () => {
+  orderComparison.value = await getOrderComparison();
+};
+
+/** 查询会员用户数量对照卡片数据 */
+const getUserCount = async () => {
+  userComparison.value = await getUserCountComparison();
+};
+
+/** 查询订单数据 */
+const getOrderData = async () => {
+  const orderCount = await getOrderCount();
+  if (orderCount.undelivered) {
+    data.value.orderUndelivered = orderCount.undelivered;
+  }
+  if (orderCount.afterSaleApply) {
+    data.value.orderAfterSaleApply = orderCount.afterSaleApply;
+  }
+  if (orderCount.pickUp) {
+    data.value.orderWaitePickUp = orderCount.pickUp;
+  }
+  if (orderCount.auditingWithdraw) {
+    data.value.withdrawAuditing = orderCount.auditingWithdraw;
+  }
+};
+
+/** 查询商品数据 */
+const getProductData = async () => {
+  // TODO: @芋艿：这个接口的返回值，是不是用命名字段更好些？
+  const productCount = await getTabsCount();
+  data.value.productForSale = productCount['0'] || 0;
+  data.value.productInWarehouse = productCount['1'] || 0;
+  data.value.productAlertStock = productCount['3'] || 0;
+};
+
+/** 查询钱包充值数据 */
+const getWalletRechargeData = async () => {
+  const paySummary = await getWalletRechargePrice();
+  data.value.rechargePrice = paySummary.rechargePrice;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  loading.value = true;
+  await Promise.all([
+    getOrder(),
+    getUserCount(),
+    getOrderData(),
+    getProductData(),
+    getWalletRechargeData(),
+  ]);
+  loading.value = false;
+  dataShow.value = true;
+  loadDataShow();
+  loadOverview();
+});
+
+const overviewItems = ref<AnalysisOverviewItem[]>([]);
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      title: '今日销售额',
+      totalTitle: '昨日数据',
+      totalValue: orderComparison.value?.reference?.orderPayPrice || 0,
+      value: orderComparison.value?.orderPayPrice || 0,
+      showGrowthRate: true,
+    },
+    {
+      title: '今日用户访问量',
+      totalTitle: '总访问量',
+      totalValue: userComparison.value?.reference?.visitUserCount || 0,
+      value: userComparison.value?.visitUserCount || 0,
+      showGrowthRate: true,
+    },
+    {
+      title: '今日订单量',
+      totalTitle: '总订单量',
+      totalValue: orderComparison.value?.orderPayCount || 0,
+      value: orderComparison.value?.reference?.orderPayCount || 0,
+      showGrowthRate: true,
+    },
+    {
+      title: '今日会员注册量',
+      totalTitle: '总会员注册量',
+      totalValue: userComparison.value?.registerUserCount || 0,
+      value: userComparison.value?.reference?.registerUserCount || 0,
+      showGrowthRate: true,
+    },
+  ];
+};
+
+// 同样，这里的 url 也可以使用以 http 开头的外部链接
+const quickNavItems: WorkbenchQuickNavItem[] = [
+  {
+    color: '#1fdaca',
+    icon: 'ep:user-filled',
+    title: '用户管理',
+    url: 'MemberUser',
+  },
+  {
+    color: '#ff6b6b',
+    icon: 'fluent-mdl2:product',
+    title: '商品管理',
+    url: 'ProductSpu',
+  },
+  {
+    color: '#7c3aed',
+    icon: 'ep:list',
+    title: '订单管理',
+    url: 'TradeOrder',
+  },
+  {
+    color: '#3fb27f',
+    icon: 'ri:refund-2-line',
+    title: '售后管理',
+    url: 'TradeAfterSale',
+  },
+  {
+    color: '#4daf1bc9',
+    icon: 'fa-solid:project-diagram',
+    title: '分销管理',
+    url: 'TradeBrokerageUser',
+  },
+  {
+    color: '#1a73e8',
+    icon: 'ep:ticket',
+    title: '优惠券',
+    url: 'PromotionCoupon',
+  },
+  {
+    color: '#4daf1bc9',
+    icon: 'fa:group',
+    title: '拼团活动',
+    url: 'PromotionBargainActivity',
+  },
+  {
+    color: '#1a73e8',
+    icon: 'vaadin:money-withdraw',
+    title: '佣金提现',
+    url: 'TradeBrokerageWithdraw',
+  },
+  {
+    color: '#1a73e8',
+    icon: 'vaadin:money-withdraw',
+    title: '数据统计',
+    url: 'TradeBrokerageWithdraw',
+  },
+];
+
+const quickDataShowItems = ref<WorkbenchQuickDataShowItem[]>();
+
+const loadDataShow = () => {
+  quickDataShowItems.value = [
+    {
+      name: '待发货订单',
+      value: data.value.orderUndelivered,
+      prefix: '',
+      decimals: 0,
+      routerName: 'TradeOrder',
+    },
+    {
+      name: '退款中订单',
+      value: data.value.orderAfterSaleApply,
+      prefix: '',
+      decimals: 0,
+      routerName: 'TradeAfterSale',
+    },
+    {
+      name: '待核销订单',
+      value: data.value.orderWaitePickUp,
+      routerName: 'TradeOrder',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '库存预警',
+      value: data.value.productAlertStock,
+      routerName: 'ProductSpu',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '上架商品',
+      value: data.value.productForSale,
+      routerName: 'ProductSpu',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '仓库商品',
+      value: data.value.productInWarehouse,
+      routerName: 'ProductSpu',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '提现待审核',
+      value: data.value.withdrawAuditing,
+      routerName: 'TradeBrokerageWithdraw',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '账户充值',
+      value: data.value.rechargePrice,
+      prefix: '￥',
+      decimals: 2,
+      routerName: 'PayWalletRecharge',
+    },
+  ];
+};
+
+const router = useRouter();
+function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+  if (nav.url?.startsWith('http')) {
+    openWindow(nav.url);
+    return;
+  }
+  if (nav.url?.startsWith('/')) {
+    router.push(nav.url).catch((error) => {
+      console.error('Navigation failed:', error);
+    });
+  } else if (isString(nav.url)) {
+    router.push({ name: nav.url });
+  } else {
+    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="商城手册（功能开启）"
+        url="https://doc.iocoder.cn/mall/build/"
+      />
+    </template>
+    <div class="mt-5 w-full md:flex">
+      <AnalysisOverview
+        v-model:model-value="overviewItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+      />
+    </div>
+    <div class="mt-5 w-full md:flex">
+      <WorkbenchQuickNav
+        :items="quickNavItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-1/2"
+        title="快捷导航"
+        @click="navTo"
+      />
+      <WorkbenchQuickDataShow
+        v-if="dataShow"
+        v-model:model-value="quickDataShowItems"
+        title="运营数据"
+        class="mt-5 md:mr-4 md:mt-0 md:w-1/2"
+      />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <TradeTrendCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberStatisticsCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/brand/data.ts b/apps/web-ele/src/views/mall/product/brand/data.ts
new file mode 100644
index 00000000..ac0271e6
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/brand/data.ts
@@ -0,0 +1,135 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '品牌名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '品牌图片',
+      component: 'ImageUpload',
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '品牌排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        controlsPosition: 'right',
+        placeholder: '请输入品牌排序',
+      },
+      rules: z.number().min(0).default(1),
+    },
+    {
+      fieldName: 'status',
+      label: '品牌状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'description',
+      label: '品牌描述',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '品牌名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '品牌状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      fixed: 'left',
+    },
+    {
+      field: 'picUrl',
+      title: '品牌图片',
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          class: 'w-10 h-10',
+        },
+      },
+    },
+    {
+      field: 'sort',
+      title: '品牌排序',
+    },
+    {
+      field: 'status',
+      title: '开启状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/product/brand/index.vue b/apps/web-ele/src/views/mall/product/brand/index.vue
new file mode 100644
index 00000000..709b2aeb
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/brand/index.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBrandApi } from '#/api/mall/product/brand';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteBrand, getBrandPage } from '#/api/mall/product/brand';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建品牌 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑品牌 */
+function handleEdit(row: MallBrandApi.Brand) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除品牌 */
+async function handleDelete(row: MallBrandApi.Brand) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteBrand(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrandPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrandApi.Brand>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="品牌列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['品牌']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['product:brand:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:brand:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['product:brand:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/brand/modules/form.vue b/apps/web-ele/src/views/mall/product/brand/modules/form.vue
new file mode 100644
index 00000000..dc46d419
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/brand/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { MallBrandApi } from '#/api/mall/product/brand';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createBrand, getBrand, updateBrand } from '#/api/mall/product/brand';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallBrandApi.Brand>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['品牌'])
+    : $t('ui.actionTitle.create', ['品牌']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallBrandApi.Brand;
+    try {
+      await (formData.value?.id ? updateBrand(data) : createBrand(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallBrandApi.Brand>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getBrand(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/category/data.ts b/apps/web-ele/src/views/mall/product/category/data.ts
new file mode 100644
index 00000000..5efa27c0
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/category/data.ts
@@ -0,0 +1,139 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getCategoryList } from '#/api/mall/product/category';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getCategoryList({ parentId: 0 });
+          data.unshift({
+            id: 0,
+            name: '顶级分类',
+            picUrl: '',
+            sort: 0,
+            status: 0,
+          });
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级分类',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '移动端分类图',
+      component: 'ImageUpload',
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '分类排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        controlsPosition: 'right',
+        placeholder: '请输入分类排序',
+      },
+      rules: z.number().min(0).default(1),
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      align: 'left',
+      fixed: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'picUrl',
+      title: '移动端分类图',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'sort',
+      title: '分类排序',
+    },
+    {
+      field: 'status',
+      title: '开启状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 300,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/product/category/index.vue b/apps/web-ele/src/views/mall/product/category/index.vue
new file mode 100644
index 00000000..2ea01f96
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/category/index.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteCategory, getCategoryList } from '#/api/mall/product/category';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData({}).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: MallCategoryApi.Category) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: MallCategoryApi.Category) {
+  formModalApi.setData(row).open();
+}
+
+/** 查看商品操作 */
+const router = useRouter(); // 路由
+const handleViewSpu = (id: number) => {
+  router.push({
+    name: 'ProductSpu',
+    query: { categoryId: id },
+  });
+};
+
+/** 删除分类 */
+async function handleDelete(row: MallCategoryApi.Category) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteCategory(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getCategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<MallCategoryApi.Category>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【产品】产品管理、产品分类"
+        url="https://doc.iocoder.cn/crm/product/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['product:category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: toggleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <div class="flex w-full items-center gap-1">
+          <span class="flex-auto">{{ row.name }}</span>
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              auth: ['product:category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '查看商品',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['product:category:update'],
+              ifShow: row.parentId !== undefined && row.parentId > 0,
+              onClick: handleViewSpu.bind(null, row.id || 0),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['product:category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/category/modules/form.vue b/apps/web-ele/src/views/mall/product/category/modules/form.vue
new file mode 100644
index 00000000..44bb6ba3
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/category/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { MallCategoryApi } from '#/api/mall/product/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCategory,
+  getCategory,
+  updateCategory,
+} from '#/api/mall/product/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallCategoryApi.Category>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品分类'])
+    : $t('ui.actionTitle.create', ['产品分类']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallCategoryApi.Category;
+    try {
+      await (formData.value?.id ? updateCategory(data) : createCategory(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<MallCategoryApi.Category>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      if (data.id) {
+        data = await getCategory(data.id as number);
+      }
+      // 设置到 values
+      formData.value = data;
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/comment/data.ts b/apps/web-ele/src/views/mall/product/comment/data.ts
new file mode 100644
index 00000000..54e1c58d
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/comment/data.ts
@@ -0,0 +1,202 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MallCommentApi } from '#/api/mall/product/comment';
+
+import { getSpuSimpleList } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'spuId',
+      label: '商品',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSpuSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'userAvatar',
+      label: '用户头像',
+      component: 'ImageUpload',
+      rules: 'required',
+    },
+    {
+      fieldName: 'userNickname',
+      label: '用户名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '评论内容',
+      component: 'Textarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'descriptionScores',
+      label: '描述星级',
+      component: 'Rate',
+      rules: 'required',
+    },
+    {
+      fieldName: 'benefitScores',
+      label: '服务星级',
+      component: 'Rate',
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrls',
+      label: '评论图片',
+      component: 'ImageUpload',
+      componentProps: {
+        maxNumber: 9,
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'replyStatus',
+      label: '回复状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '已回复', value: true },
+          { label: '未回复', value: false },
+        ],
+      },
+    },
+    {
+      fieldName: 'spuName',
+      label: '商品名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'userNickname',
+      label: '用户名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'orderId',
+      label: '订单编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '评论时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns<T = MallCommentApi.Comment>(
+  onStatusChange?: (
+    newStatus: boolean,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeGridPropTypes.Columns {
+  return [
+    {
+      field: 'id',
+      title: '评论编号',
+      fixed: 'left',
+    },
+    {
+      field: 'skuPicUrl',
+      title: '商品图片',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品名称',
+      minWidth: 200,
+    },
+    {
+      field: 'skuProperties',
+      title: '商品属性',
+      minWidth: 200,
+      formatter: ({ cellValue }) => {
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.propertyName} : ${item.valueName}`)
+              .join('\n')
+          : '-';
+      },
+    },
+    {
+      field: 'userNickname',
+      title: '用户名称',
+    },
+    {
+      field: 'descriptionScores',
+      title: '商品评分',
+    },
+    {
+      field: 'benefitScores',
+      title: '服务评分',
+    },
+    {
+      field: 'content',
+      title: '评论内容',
+    },
+    {
+      field: 'picUrls',
+      title: '评论图片',
+      cellRender: {
+        name: 'CellImages',
+      },
+    },
+    {
+      field: 'replyContent',
+      title: '回复内容',
+    },
+    {
+      field: 'createTime',
+      title: '评论时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'visible',
+      title: '是否展示',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: true,
+          inactiveValue: false,
+        },
+      },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/product/comment/index.vue b/apps/web-ele/src/views/mall/product/comment/index.vue
new file mode 100644
index 00000000..8552e015
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/comment/index.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCommentApi } from '#/api/mall/product/comment';
+
+import { h } from 'vue';
+
+import { confirm, DocAlert, Page, prompt, useVbenModal } from '@vben/common-ui';
+
+import { ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getCommentPage,
+  replyComment,
+  updateCommentVisible,
+} from '#/api/mall/product/comment';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建评价 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 回复评价 */
+function handleReply(row: MallCommentApi.Comment) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        type: 'textarea',
+      });
+    },
+    content: row.content
+      ? `用户评论：${row.content}\n请输入回复内容：`
+      : '请输入回复内容：',
+    title: '回复评论',
+    modelPropName: 'value',
+  }).then(async (val) => {
+    if (val) {
+      await replyComment({
+        id: row.id as number,
+        replyContent: val,
+      });
+      onRefresh();
+    }
+  });
+}
+
+/** 更新状态 */
+async function handleStatusChange(
+  newStatus: boolean,
+  row: MallCommentApi.Comment,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newStatus ? '展示' : '隐藏';
+    confirm({
+      content: `确认要${text + row.id}评论吗?`,
+    })
+      .then(async () => {
+        // 更新状态
+        const res = await updateCommentVisible({
+          id: row.id as number,
+          visible: newStatus,
+        });
+        if (res) {
+          // 提示并返回成功
+          ElMessage.success(`${text}成功`);
+          resolve(true);
+        } else {
+          reject(new Error('操作失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCommentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCommentApi.Comment>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【商品】商品评价"
+        url="https://doc.iocoder.cn/mall/product-comment/"
+      />
+    </template>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="评论列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['虚拟评论']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['product:comment:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '回复',
+              type: 'primary',
+              link: true,
+              auth: ['product:comment:update'],
+              onClick: handleReply.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/comment/modules/form.vue b/apps/web-ele/src/views/mall/product/comment/modules/form.vue
new file mode 100644
index 00000000..1e8ed0fa
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/comment/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { MallCommentApi } from '#/api/mall/product/comment';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createComment, getComment } from '#/api/mall/product/comment';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallCommentApi.Comment>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['品牌'])
+    : $t('ui.actionTitle.create', ['品牌']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallCommentApi.Comment;
+    try {
+      await createComment(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallCommentApi.Comment>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getComment(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/property/data.ts b/apps/web-ele/src/views/mall/product/property/data.ts
new file mode 100644
index 00000000..733c8fdc
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/property/data.ts
@@ -0,0 +1,176 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getPropertySimpleList } from '#/api/mall/product/property';
+
+// ============================== 属性 ==============================
+
+/** 类型新增/修改的表单 */
+export function usePropertyFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 类型列表的搜索表单 */
+export function usePropertyGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 类型列表的字段 */
+export function usePropertyGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '名称',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ============================== 值数据 ==============================
+
+/** 数据新增/修改的表单 */
+export function useValueFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'propertyId',
+      label: '属性编号',
+      component: 'ApiSelect',
+      componentProps: (values) => {
+        return {
+          api: getPropertySimpleList,
+          labelField: 'name',
+          valueField: 'id',
+          disabled: !!values.id,
+        };
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: [''],
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 字典数据列表搜索表单 */
+export function useValueGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/**
+ * 字典数据表格列
+ */
+export function useValueGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '属性值名称',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/product/property/index.vue b/apps/web-ele/src/views/mall/product/property/index.vue
new file mode 100644
index 00000000..97036c49
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/property/index.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import PropertyGrid from './modules/property-grid.vue';
+import ValueGrid from './modules/value-grid.vue';
+
+const searchPropertyId = ref<number>(); // 搜索的属性ID
+
+function handlePropertyIdSelect(propertyId: number) {
+  searchPropertyId.value = propertyId;
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【商品】商品属性"
+        url="https://doc.iocoder.cn/mall/product-property/"
+      />
+    </template>
+    <div class="flex h-full">
+      <!-- 左侧属性列表 -->
+      <div class="w-1/2 pr-3">
+        <PropertyGrid @select="handlePropertyIdSelect" />
+      </div>
+      <!-- 右侧属性数据列表 -->
+      <div class="w-1/2">
+        <ValueGrid :property-id="searchPropertyId" />
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/property/modules/property-form.vue b/apps/web-ele/src/views/mall/product/property/modules/property-form.vue
new file mode 100644
index 00000000..b37ac6de
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/property/modules/property-form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { MallPropertyApi } from '#/api/mall/product/property';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProperty,
+  getProperty,
+  updateProperty,
+} from '#/api/mall/product/property';
+import { $t } from '#/locales';
+
+import { usePropertyFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallPropertyApi.Property>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['属性'])
+    : $t('ui.actionTitle.create', ['属性']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: usePropertyFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallPropertyApi.Property;
+    try {
+      await (formData.value?.id ? updateProperty(data) : createProperty(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallPropertyApi.Property>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProperty(data.id as number);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue b/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
new file mode 100644
index 00000000..6aaea656
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import type {
+  VxeGridListeners,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { MallPropertyApi } from '#/api/mall/product/property';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteProperty, getPropertyPage } from '#/api/mall/product/property';
+import { $t } from '#/locales';
+
+import { usePropertyGridColumns, usePropertyGridFormSchema } from '../data';
+import PropertyForm from './property-form.vue';
+
+const emit = defineEmits(['select']);
+
+const [PropertyFormModal, propertyFormModalApi] = useVbenModal({
+  connectedComponent: PropertyForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建属性 */
+function handleCreate() {
+  propertyFormModalApi.setData(null).open();
+}
+
+/** 编辑属性 */
+function handleEdit(row: any) {
+  propertyFormModalApi.setData(row).open();
+}
+
+/** 删除属性 */
+async function handleDelete(row: MallPropertyApi.Property) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteProperty(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 表格事件 */
+const gridEvents: VxeGridListeners<MallPropertyApi.Property> = {
+  cellClick: ({ row }) => {
+    emit('select', row.id);
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: usePropertyGridFormSchema(),
+  },
+  gridOptions: {
+    columns: usePropertyGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPropertyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isCurrent: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallPropertyApi.Property>,
+  gridEvents,
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <PropertyFormModal @success="onRefresh" />
+
+    <Grid table-title="属性列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['属性']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['product:property:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:property:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['product:property:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/property/modules/value-form.vue b/apps/web-ele/src/views/mall/product/property/modules/value-form.vue
new file mode 100644
index 00000000..b6608566
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/property/modules/value-form.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import type { MallPropertyApi } from '#/api/mall/product/property';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPropertyValue,
+  getPropertyValue,
+  updatePropertyValue,
+} from '#/api/mall/product/property';
+import { $t } from '#/locales';
+
+import { useValueFormSchema } from '../data';
+
+defineOptions({ name: 'MallPropertyValueForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<MallPropertyApi.PropertyValue>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['属性值'])
+    : $t('ui.actionTitle.create', ['属性值']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useValueFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallPropertyApi.PropertyValue;
+    try {
+      await (formData.value?.id
+        ? updatePropertyValue(data)
+        : createPropertyValue(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<
+      MallPropertyApi.PropertyValue | { propertyId?: string }
+    >();
+
+    // 如果有ID，表示是编辑
+    if (data && 'id' in data && data.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getPropertyValue(data.id as number);
+        // 设置到 values
+        if (formData.value) {
+          await formApi.setValues(formData.value);
+        }
+      } finally {
+        modalApi.unlock();
+      }
+    } else if (data && 'propertyId' in data && data.propertyId) {
+      // 新增时，如果传入了propertyId，则需要设置
+      await formApi.setValues({
+        propertyId: data.propertyId,
+      });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue b/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
new file mode 100644
index 00000000..c17eb3a9
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallPropertyApi } from '#/api/mall/product/property';
+
+import { watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePropertyValue,
+  getPropertyValuePage,
+} from '#/api/mall/product/property';
+import { $t } from '#/locales';
+
+import { useValueGridColumns, useValueGridFormSchema } from '../data';
+import ValueForm from './value-form.vue';
+
+const props = defineProps({
+  propertyId: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+const [ValueFormModal, valueFormModalApi] = useVbenModal({
+  connectedComponent: ValueForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建字典数据 */
+function handleCreate() {
+  valueFormModalApi.setData({ propertyId: props.propertyId }).open();
+}
+
+/** 编辑字典数据 */
+function handleEdit(row: MallPropertyApi.PropertyValue) {
+  valueFormModalApi.setData(row).open();
+}
+
+/** 删除字典数据 */
+async function handleDelete(row: MallPropertyApi.PropertyValue) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deletePropertyValue(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useValueGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useValueGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPropertyValuePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            propertyId: props.propertyId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallPropertyApi.PropertyValue>,
+});
+
+/** 监听 dictType 变化，重新查询 */
+watch(
+  () => props.propertyId,
+  () => {
+    if (props.propertyId) {
+      onRefresh();
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <ValueFormModal @success="onRefresh" />
+
+    <Grid table-title="属性值列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['属性值']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['product:property:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:property:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['product:property:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/data.ts b/apps/web-ele/src/views/mall/product/spu/components/data.ts
new file mode 100644
index 00000000..50463a42
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/data.ts
@@ -0,0 +1,42 @@
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { PropertyAndValues } from './model';
+
+/**
+ * 获得商品的规格列表 - 商品相关的公共函数
+ *
+ * @param spu
+ * @return PropertyAndValues 规格列表
+ */
+const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
+  //  直接拿返回的 skus 属性逆向生成出 propertyList
+  const properties: PropertyAndValues[] = [];
+  // 只有是多规格才处理
+  if (spu.specType) {
+    spu.skus?.forEach((sku) => {
+      sku.properties?.forEach(
+        ({ propertyId, propertyName, valueId, valueName }) => {
+          // 添加属性
+          if (!properties?.some((item) => item.id === propertyId)) {
+            properties.push({
+              id: propertyId!,
+              name: propertyName!,
+              values: [],
+            });
+          }
+          // 添加属性值
+          const index = properties?.findIndex((item) => item.id === propertyId);
+          if (
+            index !== undefined &&
+            index >= 0 &&
+            !properties[index]!.values?.some((value) => value.id === valueId)
+          ) {
+            properties[index]!.values?.push({ id: valueId!, name: valueName! });
+          }
+        },
+      );
+    });
+  }
+  return properties;
+};
+
+export { getPropertyList };
diff --git a/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue b/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
new file mode 100644
index 00000000..a81a60b2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { watch } from 'vue';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ExpressTemplateApi from '#/api/mall/trade/delivery/expressTemplate';
+import { DeliveryTypeEnum, DICT_TYPE, getIntDictOptions } from '#/utils';
+
+const props = defineProps<{
+  propFormData: Object;
+}>();
+
+const emit = defineEmits(['update:activeName']);
+
+/** 将传进来的值赋值给 formData */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    formApi.setValues(data);
+  },
+);
+
+const validate = async () => {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  try {
+    // 校验通过更新数据
+    Object.assign(props.propFormData, formApi.getValues());
+  } catch (error) {
+    ElMessage.error('【物流设置】不完善，请填写相关信息');
+    emit('update:activeName', 'delivery');
+    throw error; // 目的截断之后的校验
+  }
+};
+defineExpose({ validate });
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: '!w-1/6',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'deliveryTypes',
+      label: '配送方式',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: getIntDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'deliveryTemplateId',
+      label: '运费模板',
+      component: 'ApiSelect',
+      componentProps: {
+        api: ExpressTemplateApi.getSimpleTemplateList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['deliveryTypes'],
+        show: (values) =>
+          values.deliveryTypes.includes(DeliveryTypeEnum.EXPRESS.type),
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+</script>
+<template>
+  <Form />
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/description-form.vue b/apps/web-ele/src/views/mall/product/spu/components/description-form.vue
new file mode 100644
index 00000000..53b1c074
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/description-form.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { useVbenForm } from '#/adapter/form';
+import * as ExpressTemplateApi from '#/api/mall/trade/delivery/expressTemplate';
+import { watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { DICT_TYPE, getIntDictOptions, DeliveryTypeEnum } from '#/utils';
+
+const props = defineProps<{
+  propFormData: Object;
+}>();
+
+/** 将传进来的值赋值给 formData */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    formApi.setValues(data);
+  },
+);
+
+const emit = defineEmits(['update:activeName']);
+const validate = async () => {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  try {
+    // 校验通过更新数据
+    Object.assign(props.propFormData, formApi.getValues());
+  } catch (e) {
+    ElMessage.error('【商品详情】不完善，请填写相关信息');
+    emit('update:activeName', 'description');
+    throw e; // 目的截断之后的校验
+  }
+};
+defineExpose({ validate });
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: '!w-1/6',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'description',
+      label: '商品详情',
+      component: 'RichTextarea',
+      componentProps: {
+        placeholder: '请输入商品详情',
+        height: 1000,
+      },
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+</script>
+<template>
+  <Form />
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/info-form.vue b/apps/web-ele/src/views/mall/product/spu/components/info-form.vue
new file mode 100644
index 00000000..95d9cd41
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/info-form.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import { watch } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ProductBrandApi from '#/api/mall/product/brand';
+import * as ProductCategoryApi from '#/api/mall/product/category';
+
+const props = defineProps<{
+  propFormData: Object;
+}>();
+
+const emit = defineEmits(['update:activeName']);
+
+const getCategoryList = async () => {
+  const data = await ProductCategoryApi.getCategorySimpleList();
+  return handleTree(data, 'id');
+};
+
+/** 将传进来的值赋值给 formData */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    formApi.setValues(data);
+  },
+);
+
+const validate = async () => {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  try {
+    // 校验通过更新数据
+    Object.assign(props.propFormData, formApi.getValues());
+  } catch (error) {
+    ElMessage.error('【基础设置】不完善，请填写相关信息');
+    emit('update:activeName', 'info');
+    throw error; // 目的截断之后的校验
+  }
+};
+defineExpose({ validate });
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: '!w-1/6',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'categoryId',
+      label: '商品分类',
+      component: 'ApiCascader',
+      componentProps: {
+        api: getCategoryList,
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'brandId',
+      label: '商品品牌',
+      component: 'ApiSelect',
+      componentProps: {
+        api: ProductBrandApi.getSimpleBrandList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'keyword',
+      label: '商品关键字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品关键字',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'introduction',
+      label: '商品简介',
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        placeholder: '请输入商品简介',
+        maxlength: 128,
+        showWordLimit: true,
+        autosize: {
+          minRows: 4,
+          maxRows: 4,
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '商品封面图',
+      component: 'ImageUpload',
+      componentProps: {
+        max: 1,
+        class: 'w-full',
+      },
+    },
+    {
+      fieldName: 'sliderPicUrls',
+      label: '商品轮播图',
+      component: 'ImageUpload',
+      componentProps: {
+        max: 10,
+        class: 'w-full',
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+</script>
+<template>
+  <Form />
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/model.d.ts b/apps/web-ele/src/views/mall/product/spu/components/model.d.ts
new file mode 100644
index 00000000..ad01b21f
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/model.d.ts
@@ -0,0 +1,25 @@
+import SkuList from './SkuList.vue';
+
+interface PropertyAndValues {
+  id: number;
+  name: string;
+  values?: PropertyAndValues[];
+}
+
+interface RuleConfig {
+  // 需要校验的字段
+  // 例：name: 'name' 则表示校验 sku.name 的值
+  // 例：name: 'productConfig.stock' 则表示校验 sku.productConfig.name 的值,此处 productConfig 表示我在 Sku 上扩展的属性
+  name: string;
+  // 校验规格为一个毁掉函数，其中 arg 为需要校验的字段的值。
+  // 例：需要校验价格必须大于0.01
+  // {
+  //  name:'price',
+  //  rule:(arg: number) => arg > 0.01
+  // }
+  rule: (arg: any) => boolean;
+  // 校验不通过时的消息提示
+  message: string;
+}
+
+export { SkuList, PropertyAndValues, RuleConfig, getPropertyList };
diff --git a/apps/web-ele/src/views/mall/product/spu/components/other-form.vue b/apps/web-ele/src/views/mall/product/spu/components/other-form.vue
new file mode 100644
index 00000000..dcb9e1bd
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/other-form.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { useVbenForm } from '#/adapter/form';
+import * as ExpressTemplateApi from '#/api/mall/trade/delivery/expressTemplate';
+import { watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { DICT_TYPE, getIntDictOptions, DeliveryTypeEnum } from '#/utils';
+
+const props = defineProps<{
+  propFormData: Object;
+}>();
+
+/** 将传进来的值赋值给 formData */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    formApi.setValues(data);
+  },
+);
+
+const emit = defineEmits(['update:activeName']);
+const validate = async () => {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  try {
+    // 校验通过更新数据
+    Object.assign(props.propFormData, formApi.getValues());
+  } catch (e) {
+    ElMessage.error('【其它设置】不完善，请填写相关信息');
+    emit('update:activeName', 'other');
+    throw e; // 目的截断之后的校验
+  }
+};
+defineExpose({ validate });
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: '!w-1/6',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'sort',
+      label: '商品排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        step: 1,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'giveIntegral',
+      label: '赠送积分',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        step: 1,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'virtualSalesCount',
+      label: '虚拟销量',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        step: 1,
+      },
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+</script>
+<template>
+  <Form />
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue b/apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue
new file mode 100644
index 00000000..f1c61d3e
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue
@@ -0,0 +1,196 @@
+<!-- 商品发布 - 库存价格 - 属性列表 -->
+<template>
+  <ElCol v-for="(item, index) in attributeList" :key="index">
+    <div>
+      <ElText class="mx-1">属性名：</ElText>
+      <ElTag class="mx-1" type="success" @close="handleCloseProperty(index)">
+        {{ item.name }}
+      </ElTag>
+    </div>
+    <div>
+      <ElSpace :size="1">
+        <ElText class="mx-1">属性值：</ElText>
+        <ElTag
+          v-for="(value, valueIndex) in item.values"
+          :key="value.id"
+          class="mx-1"
+          @close="handleCloseValue(index, valueIndex)"
+        >
+          {{ value.name }}
+        </ElTag>
+        <ElSelect
+          v-show="inputVisible(index)"
+          :id="`input${index}`"
+          :ref="setInputRef"
+          v-model="inputValue"
+          :reserve-keyword="false"
+          allow-create
+          class="!w-30"
+          default-first-option
+          filterable
+          size="small"
+          @blur="handleInputConfirm(index, item.id)"
+          @change="handleInputConfirm(index, item.id)"
+          @keyup.enter="handleInputConfirm(index, item.id)"
+        >
+          <el-option
+            v-for="item2 in attributeOptions"
+            :key="item2.id"
+            :label="item2.name"
+            :value="item2.name"
+          />
+        </ElSelect>
+        <ElButton
+          v-show="!inputVisible(index)"
+          class="button-new-tag ml-1"
+          size="small"
+          @click="showInput(index)"
+        >
+          + 添加
+        </ElButton>
+      </ElSpace>
+    </div>
+    <ElDivider class="my-10px" />
+  </ElCol>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue';
+import type { PropType } from 'vue';
+
+import * as PropertyApi from '#/api/mall/product/property';
+import type { MallPropertyApi } from '#/api/mall/product/property';
+import {
+  ElMessage,
+  ElCol,
+  ElTag,
+  ElText,
+  ElButton,
+  ElDivider,
+  ElSpace,
+} from 'element-plus';
+import { $t } from '#/locales';
+import type { PropertyAndValues } from './model';
+
+defineOptions({ name: 'ProductAttributes' });
+
+const inputValue = ref(''); // 输入框值
+const attributeIndex = ref<number | null>(null); // 获取焦点时记录当前属性项的index
+// 输入框显隐控制
+const inputVisible = computed(() => (index: number) => {
+  if (attributeIndex.value === null) return false;
+  if (attributeIndex.value === index) return true;
+});
+const inputRef = ref<any[]>([]); //标签输入框Ref
+/** 解决 ref 在 v-for 中的获取问题*/
+const setInputRef = (el: any) => {
+  if (el === null || typeof el === 'undefined') return;
+  // 如果不存在 id 相同的元素才添加
+  if (
+    !inputRef.value.some(
+      (item) => item.inputRef?.attributes.id === el.inputRef?.attributes.id,
+    )
+  ) {
+    inputRef.value.push(el);
+  }
+};
+const attributeList = ref<PropertyAndValues[]>([]); // 商品属性列表
+const attributeOptions = ref([] as MallPropertyApi.PropertyValue[]); // 商品属性名称下拉框
+const props = defineProps({
+  propertyList: {
+    type: Array as PropType<PropertyAndValues[]>,
+    default: () => [],
+  },
+});
+
+watch(
+  () => props.propertyList,
+  (data) => {
+    if (!data) return;
+    attributeList.value = data as any;
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+/** 删除属性值*/
+const handleCloseValue = (index: number, valueIndex: number) => {
+  if (index < attributeList.value.length) {
+    const values = attributeList.value[index]!.values as any[];
+    values.splice(valueIndex, 1);
+  }
+};
+
+/** 删除属性*/
+const handleCloseProperty = (index: number) => {
+  if (index < attributeList.value.length) {
+    attributeList.value.splice(index, 1);
+    emit('success', attributeList.value);
+  }
+};
+
+/** 显示输入框并获取焦点 */
+const showInput = async (index: number) => {
+  if (index < attributeList.value.length) {
+    attributeIndex.value = index;
+    inputRef.value[index].focus();
+    // 获取属性下拉选项
+    await getAttributeOptions(attributeList.value[index]!.id);
+  }
+};
+
+/** 输入框失去焦点或点击回车时触发 */
+const emit = defineEmits(['success']); // 定义 success 事件，用于操作成功后的回调
+const handleInputConfirm = async (index: number, propertyId: number) => {
+  if (inputValue.value && index < attributeList.value.length) {
+    // 1. 重复添加校验
+    const values = attributeList.value[index]!.values as any[];
+    if (values.find((item) => item.name === inputValue.value)) {
+      ElMessage.warning('已存在相同属性值，请重试');
+      attributeIndex.value = null;
+      inputValue.value = '';
+      return;
+    }
+
+    // 2.1 情况一：属性值已存在，则直接使用并结束
+    const existValue = attributeOptions.value.find(
+      (item) => item.name === inputValue.value,
+    );
+    if (existValue) {
+      attributeIndex.value = null;
+      inputValue.value = '';
+      const values = attributeList.value[index]!.values as any[];
+      values.push({
+        id: existValue.id!,
+        name: existValue.name,
+      });
+      emit('success', attributeList.value);
+      return;
+    }
+
+    // 2.2 情况二：新属性值，则进行保存
+    try {
+      const id = await PropertyApi.createPropertyValue({
+        propertyId,
+        name: inputValue.value,
+      });
+      const values = attributeList.value[index]!.values as any[];
+      values.push({ id, name: inputValue.value });
+      ElMessage.success($t('common.createSuccess'));
+      emit('success', attributeList.value);
+    } catch {
+      ElMessage.error('添加失败，请重试');
+    }
+  }
+  attributeIndex.value = null;
+  inputValue.value = '';
+};
+
+/** 获取商品属性下拉选项 */
+const getAttributeOptions = async (propertyId: number) => {
+  attributeOptions.value =
+    await PropertyApi.getPropertyValueSimpleList(propertyId);
+};
+</script>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/product-property-add-form.vue b/apps/web-ele/src/views/mall/product/spu/components/product-property-add-form.vue
new file mode 100644
index 00000000..e7482664
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/product-property-add-form.vue
@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { $t } from '#/locales';
+import { getPropertySimpleList } from '#/api/mall/product/property';
+import * as PropertyApi from '#/api/mall/product/property';
+import type { MallPropertyApi } from '#/api/mall/product/property';
+
+// 扩展Property接口，添加values属性
+interface ExtendedProperty extends MallPropertyApi.Property {
+  values?: any[];
+}
+
+const emit = defineEmits(['success']);
+
+const attributeList = ref<ExtendedProperty[]>([]); // 商品属性列表
+const attributeOptions = ref([] as MallPropertyApi.Property[]); // 商品属性名称下拉框
+
+const props = defineProps({
+  propertyList: {
+    type: Array as PropType<ExtendedProperty[]>,
+    default: () => [],
+  },
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'name',
+      label: '属性名称',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getPropertySimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        defaultFirstOption: true,
+        filterable: true,
+        allowCreate: true,
+        placeholder: '请选择属性名称。如果不存在，可手动输入选择',
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    modalApi.lock();
+    const { name } = await formApi.getValues();
+    // 1.1 重复添加校验
+    for (const attrItem of attributeList.value) {
+      if (attrItem.name === name) {
+        return ElMessage.error('该属性已存在，请勿重复添加');
+      }
+    }
+    // 1.2 校验表单
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+
+    // 2.1 情况一：属性名已存在，则直接使用并结束
+    const existProperty = attributeOptions.value.find(
+      (item) => item.name === name,
+    );
+    if (existProperty) {
+      // 添加到属性列表
+      attributeList.value.push({
+        id: existProperty.id,
+        ...(await formApi.getValues()),
+        values: [],
+      });
+      // 关闭弹窗
+      modalApi.close();
+      return;
+    }
+
+    // 2.2 情况二：如果是不存在的属性，则需要执行新增
+    // 提交请求
+    modalApi.lock();
+    try {
+      const data = (await formApi.getValues()) as MallPropertyApi.Property;
+      const propertyId = await PropertyApi.createProperty(data);
+      // 添加到属性列表
+      attributeList.value.push({
+        id: propertyId,
+        ...(await formApi.getValues()),
+        values: [],
+      });
+      // 关闭弹窗
+      ElMessage.success($t('common.createSuccess'));
+      modalApi.close();
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+watch(
+  () => props.propertyList, // 解决 props 无法直接修改父组件的问题
+  (data) => {
+    if (!data) return;
+    attributeList.value = data;
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <Modal class="w-2/5" title="添加商品属性">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-form.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-form.vue
new file mode 100644
index 00000000..54568225
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-form.vue
@@ -0,0 +1,243 @@
+<script lang="ts" setup>
+import { useVbenForm } from '#/adapter/form';
+import { watch, ref } from 'vue';
+import { ElMessage, ElSpace } from 'element-plus';
+import SkuList from './sku-list.vue';
+import { Page, useVbenModal } from '@vben/common-ui';
+import ProductPropertyAddForm from './product-property-add-form.vue';
+import { getPropertyList } from './data';
+import ProductAttributes from './product-attributes.vue';
+
+const props = defineProps<{
+  propFormData: Object;
+}>();
+
+interface PropertyAndValues {
+  id: number;
+  name: string;
+  values?: PropertyAndValues[];
+}
+
+interface RuleConfig {
+  // 需要校验的字段
+  // 例：name: 'name' 则表示校验 sku.name 的值
+  // 例：name: 'productConfig.stock' 则表示校验 sku.productConfig.name 的值,此处 productConfig 表示我在 Sku 上扩展的属性
+  name: string;
+  // 校验规格为一个毁掉函数，其中 arg 为需要校验的字段的值。
+  // 例：需要校验价格必须大于0.01
+  // {
+  //  name:'price',
+  //  rule:(arg: number) => arg > 0.01
+  // }
+  rule: (arg: any) => boolean;
+  // 校验不通过时的消息提示
+  message: string;
+}
+
+const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
+
+// sku 相关属性校验规则
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'stock',
+    rule: (arg) => arg >= 0,
+    message: '商品库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'price',
+    rule: (arg) => arg >= 0.01,
+    message: '商品销售价格必须大于等于 0.01 元！！！',
+  },
+  {
+    name: 'marketPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品市场价格必须大于等于 0.01 元！！！',
+  },
+  {
+    name: 'costPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品成本价格必须大于等于 0.00 元！！！',
+  },
+];
+
+/** 将传进来的值赋值给 formData */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    formApi.setValues(data);
+  },
+);
+
+const emit = defineEmits(['update:activeName']);
+const validate = async () => {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  try {
+    // 校验通过更新数据
+    Object.assign(props.propFormData, formApi.getValues());
+  } catch (e) {
+    ElMessage.error('【库存价格】不完善，请填写相关信息');
+    emit('update:activeName', 'sku');
+    throw e; // 目的截断之后的校验
+  }
+};
+defineExpose({ validate });
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: '!w-1/6',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'subCommissionType',
+      label: '分销类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '默认设置',
+            value: false,
+          },
+          {
+            label: '单独设置',
+            value: true,
+          },
+        ],
+      },
+      defaultValue: false,
+      rules: 'required',
+    },
+    {
+      fieldName: 'specType',
+      label: '商品规格',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '单规格',
+            value: false,
+          },
+          {
+            label: '多规格',
+            value: true,
+          },
+        ],
+      },
+      defaultValue: false,
+      rules: 'required',
+    },
+    {
+      fieldName: 'skuList',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        show: (values) => !values.specType,
+      },
+    },
+    {
+      fieldName: 'specTypeItem',
+      label: '商品属性',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        show: (values) => values.specType,
+      },
+    },
+    {
+      fieldName: 'batchSettings',
+      label: '批量设置',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        show: (values) => values.specType && propertyList.value.length > 0,
+      },
+    },
+    {
+      fieldName: 'specTypeItemList',
+      label: '规格列表',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        show: (values) => values.specType && propertyList.value.length > 0,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [ProductPropertyAddFormModal, productPropertyAddFormApi] = useVbenModal({
+  connectedComponent: ProductPropertyAddForm,
+  destroyOnClose: true,
+});
+
+/** 调用 SkuList generateTableData 方法*/
+const skuListRef = ref();
+const generateSkus = (propertyList: any[]) => {
+  skuListRef.value.generateTableData(propertyList);
+};
+
+/** 将传进来的值赋值给 formData */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    // 将 SKU 的属性，整理成 PropertyAndValues 数组
+    propertyList.value = getPropertyList(data);
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<template>
+  <Page :auto-content-height="true">
+    <Form>
+      <template #skuList>
+        <SkuList
+          ref="skuListRef"
+          :prop-form-data="props.propFormData"
+          :property-list="propertyList"
+          :rule-config="ruleConfig"
+        />
+      </template>
+      <template #specTypeItem>
+        <ElSpace direction="vertical" alignment="flex-start">
+          <ElButton type="primary" @click="productPropertyAddFormApi.open()"
+            >添加属性</ElButton
+          >
+          <ProductAttributes
+            :property-list="propertyList"
+            @success="generateSkus"
+          />
+        </ElSpace>
+      </template>
+      <template #batchSettings>
+        <SkuList
+          :is-batch="true"
+          :prop-form-data="props.propFormData"
+          :property-list="propertyList"
+        />
+      </template>
+      <template #specTypeItemList>
+        <SkuList
+          :prop-form-data="props.propFormData"
+          :property-list="propertyList"
+          :rule-config="ruleConfig"
+        />
+      </template>
+    </Form>
+    <ProductPropertyAddFormModal :propertyList="propertyList" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
new file mode 100644
index 00000000..bfb80c2b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
@@ -0,0 +1,527 @@
+<template>
+  <!-- 情况一：添加/修改 -->
+  <el-table
+    v-if="!isActivityComponent"
+    :data="isBatch ? skuList : formData!.skus!"
+    border
+    class="tabNumWidth"
+    max-height="500"
+    size="small"
+  >
+    <el-table-column align="center" label="图片" min-width="120">
+      <template #default="{ row }">
+        <UploadImg
+          v-model="row.picUrl"
+          height="50px"
+          width="50px"
+          :show-description="false"
+        />
+      </template>
+    </el-table-column>
+    <template v-if="formData!.specType && !isBatch">
+      <!--  根据商品属性动态添加 -->
+      <el-table-column
+        v-for="(item, index) in tableHeaders"
+        :key="index"
+        :label="item.label"
+        align="center"
+        min-width="120"
+      >
+        <template #default="{ row }">
+          <span style="font-weight: bold; color: #40aaff">
+            {{ row.properties?.[index]?.valueName }}
+          </span>
+        </template>
+      </el-table-column>
+    </template>
+    <el-table-column align="center" label="商品条码" min-width="168">
+      <template #default="{ row }">
+        <el-input v-model="row.barCode" class="w-100%" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="销售价" min-width="168">
+      <template #default="{ row }">
+        <el-input-number
+          v-model="row.price"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="w-100%"
+          controls-position="right"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="市场价" min-width="168">
+      <template #default="{ row }">
+        <el-input-number
+          v-model="row.marketPrice"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="w-100%"
+          controls-position="right"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="成本价" min-width="168">
+      <template #default="{ row }">
+        <el-input-number
+          v-model="row.costPrice"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="w-100%"
+          controls-position="right"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="库存" min-width="168">
+      <template #default="{ row }">
+        <el-input-number
+          v-model="row.stock"
+          :min="0"
+          class="w-100%"
+          controls-position="right"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="重量(kg)" min-width="168">
+      <template #default="{ row }">
+        <el-input-number
+          v-model="row.weight"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="w-100%"
+          controls-position="right"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="体积(m^3)" min-width="168">
+      <template #default="{ row }">
+        <el-input-number
+          v-model="row.volume"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="w-100%"
+          controls-position="right"
+        />
+      </template>
+    </el-table-column>
+    <template v-if="formData!.subCommissionType">
+      <el-table-column align="center" label="一级返佣(元)" min-width="168">
+        <template #default="{ row }">
+          <el-input-number
+            v-model="row.firstBrokeragePrice"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-100%"
+            controls-position="right"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="二级返佣(元)" min-width="168">
+        <template #default="{ row }">
+          <el-input-number
+            v-model="row.secondBrokeragePrice"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-100%"
+            controls-position="right"
+          />
+        </template>
+      </el-table-column>
+    </template>
+    <el-table-column
+      v-if="formData?.specType"
+      align="center"
+      fixed="right"
+      label="操作"
+      width="80"
+    >
+      <template #default="{ row }">
+        <el-button
+          v-if="isBatch"
+          link
+          size="small"
+          type="primary"
+          @click="batchAdd"
+        >
+          批量添加
+        </el-button>
+        <el-button
+          v-else
+          link
+          size="small"
+          type="primary"
+          @click="deleteSku(row)"
+          >删除</el-button
+        >
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <!-- 情况二：作为活动组件 -->
+  <el-table
+    v-if="isActivityComponent"
+    :data="formData!.skus!"
+    border
+    max-height="500"
+    size="small"
+    style="width: 99%"
+  >
+    <el-table-column v-if="isComponent" type="selection" width="45" />
+    <el-table-column align="center" label="图片" min-width="80">
+      <template #default="{ row }">
+        <el-image :src="row.picUrl" class="h-60px w-60px" />
+      </template>
+    </el-table-column>
+    <template v-if="formData!.specType">
+      <!--  根据商品属性动态添加 -->
+      <el-table-column
+        v-for="(item, index) in tableHeaders"
+        :key="index"
+        :label="item.label"
+        align="center"
+        min-width="80"
+      >
+        <template #default="{ row }">
+          <span style="font-weight: bold; color: #40aaff">
+            {{ row.properties?.[index]?.valueName }}
+          </span>
+        </template>
+      </el-table-column>
+    </template>
+    <el-table-column align="center" label="商品条码" min-width="100">
+      <template #default="{ row }">
+        {{ row.barCode }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="销售价(元)" min-width="80">
+      <template #default="{ row }">
+        {{ formatToFraction(row.price) }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="市场价(元)" min-width="80">
+      <template #default="{ row }">
+        {{ formatToFraction(row.marketPrice) }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="成本价(元)" min-width="80">
+      <template #default="{ row }">
+        {{ formatToFraction(row.costPrice) }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="库存" min-width="80">
+      <template #default="{ row }">
+        {{ row.stock }}
+      </template>
+    </el-table-column>
+    <!--  方便扩展每个活动配置的属性不一样  -->
+    <slot name="extension"></slot>
+  </el-table>
+</template>
+<script lang="ts" setup>
+import { copyValueToTarget } from '#/utils';
+import { formatToFraction, isEmpty } from '@vben/utils';
+import type { PropertyAndValues, RuleConfig } from './model';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ElTable, ElInput, ElMessage } from 'element-plus';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import { ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+defineOptions({ name: 'SkuList' });
+
+const props = defineProps({
+  propFormData: {
+    type: Object as PropType<MallSpuApi.Spu>,
+    default: () => ({}),
+  },
+  propertyList: {
+    type: Array as PropType<PropertyAndValues[]>,
+    default: () => [],
+  },
+  ruleConfig: {
+    type: Array as PropType<RuleConfig[]>,
+    default: () => [],
+  },
+  isBatch: {
+    type: Boolean,
+    default: false,
+  }, // 是否作为批量操作组件
+  isComponent: {
+    type: Boolean,
+    default: false,
+  }, // 是否作为组件
+  isActivityComponent: {
+    type: Boolean,
+    default: false,
+  }, // 是否作为活动组件
+});
+
+const formData = ref<MallSpuApi.Spu>(); // 表单数据
+const skuList = ref<MallSpuApi.Sku[]>([
+  {
+    price: 0, // 商品价格
+    marketPrice: 0, // 市场价
+    costPrice: 0, // 成本价
+    barCode: '', // 商品条码
+    picUrl: '', // 图片地址
+    stock: 0, // 库存
+    weight: 0, // 商品重量
+    volume: 0, // 商品体积
+    firstBrokeragePrice: 0, // 一级分销的佣金
+    secondBrokeragePrice: 0, // 二级分销的佣金
+  },
+]); // 批量添加时的临时数据
+
+/** 批量添加 */
+const batchAdd = () => {
+  validateProperty();
+  formData.value!.skus!.forEach((item: MallSpuApi.Sku) => {
+    copyValueToTarget(item, skuList.value[0]);
+  });
+};
+/** 校验商品属性属性值 */
+const validateProperty = () => {
+  // 校验商品属性属性值是否为空，有一个为空都不给过
+  const warningInfo = '存在属性属性值为空，请先检查完善属性值后重试！！！';
+  for (const item of props.propertyList) {
+    if (!item.values || isEmpty(item.values)) {
+      ElMessage.warning(warningInfo);
+      throw new Error(warningInfo);
+    }
+  }
+};
+/** 删除 sku */
+const deleteSku = (row: MallSpuApi.Sku) => {
+  const index = formData.value!.skus!.findIndex(
+    // 直接把列表转成字符串比较
+    (sku: MallSpuApi.Sku) =>
+      JSON.stringify(sku.properties) === JSON.stringify(row.properties),
+  );
+  formData.value!.skus!.splice(index, 1);
+};
+const tableHeaders = ref<{ prop: string; label: string }[]>([]); // 多属性表头
+/**
+ * 保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。
+ */
+const validateSku = () => {
+  validateProperty();
+  let warningInfo = '请检查商品各行相关属性配置，';
+  let validate = true; // 默认通过
+  for (const sku of formData.value!.skus!) {
+    // 作为活动组件的校验
+    for (const rule of props?.ruleConfig) {
+      const arg = getValue(sku, rule.name);
+      if (!rule.rule(arg)) {
+        validate = false; // 只要有一个不通过则直接不通过
+        warningInfo += rule.message;
+        break;
+      }
+    }
+    // 只要有一个不通过则结束后续的校验
+    if (!validate) {
+      ElMessage.warning(warningInfo);
+      throw new Error(warningInfo);
+    }
+  }
+};
+const getValue = (obj: any, arg: string) => {
+  const keys = arg.split('.');
+  let value = obj;
+  for (const key of keys) {
+    if (value && typeof value === 'object' && key in value) {
+      value = value[key];
+    } else {
+      value = undefined;
+      break;
+    }
+  }
+  return value;
+};
+
+const emit = defineEmits<{
+  (e: 'selectionChange', value: MallSpuApi.Sku[]): void;
+}>();
+/**
+ * 选择时触发
+ * @param Sku 传递过来的选中的 sku 是一个数组
+ */
+const handleSelectionChange = (val: MallSpuApi.Sku[]) => {
+  emit('selectionChange', val);
+};
+
+/**
+ * 将传进来的值赋值给 skuList
+ */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) return;
+    formData.value = data;
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+/** 生成表数据 */
+const generateTableData = (propertyList: any[]) => {
+  // 构建数据结构
+  const propertyValues = propertyList.map((item) =>
+    item.values.map((v: any) => ({
+      propertyId: item.id,
+      propertyName: item.name,
+      valueId: v.id,
+      valueName: v.name,
+    })),
+  );
+  const buildSkuList = build(propertyValues);
+  // 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
+  if (!validateData(propertyList)) {
+    // 如果不一致则重置表数据，默认添加新的属性重新生成 sku 列表
+    formData.value!.skus = [];
+  }
+  if (buildSkuList && buildSkuList.length > 0) {
+    for (const item of buildSkuList) {
+      const row = {
+        properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
+        price: 0,
+        marketPrice: 0,
+        costPrice: 0,
+        barCode: '',
+        picUrl: '',
+        stock: 0,
+        weight: 0,
+        volume: 0,
+        firstBrokeragePrice: 0,
+        secondBrokeragePrice: 0,
+      };
+      // 如果存在属性相同的 sku 则不做处理
+      const index = formData.value!.skus!.findIndex(
+        (sku: MallSpuApi.Sku) =>
+          JSON.stringify(sku.properties) === JSON.stringify(row.properties),
+      );
+      if (index !== -1) {
+        continue;
+      }
+      formData.value!.skus!.push(row);
+    }
+  }
+};
+
+/**
+ * 生成 skus 前置校验
+ */
+const validateData = (propertyList: any[]) => {
+  const skuPropertyIds: number[] = [];
+  formData.value!.skus!.forEach((sku: MallSpuApi.Sku) =>
+    sku.properties
+      ?.map((property: any) => property.propertyId)
+      ?.forEach((propertyId: number) => {
+        if (skuPropertyIds.indexOf(propertyId!) === -1) {
+          skuPropertyIds.push(propertyId!);
+        }
+      }),
+  );
+  const propertyIds = propertyList.map((item) => item.id);
+  return skuPropertyIds.length === propertyIds.length;
+};
+
+/** 构建所有排列组合 */
+const build = (
+  propertyValuesList: MallSpuApi.Property[][],
+): MallSpuApi.Property[] | MallSpuApi.Property[][] => {
+  if (!propertyValuesList || propertyValuesList.length === 0) {
+    return [];
+  } else if (propertyValuesList.length === 1) {
+    return propertyValuesList[0] || [];
+  } else {
+    const result: MallSpuApi.Property[][] = [];
+    const rest = build(propertyValuesList.slice(1));
+    if (propertyValuesList[0] && Array.isArray(rest)) {
+      for (let i = 0; i < propertyValuesList[0].length; i++) {
+        for (let j = 0; j < rest.length; j++) {
+          const currentItem = propertyValuesList[0][i];
+          const restItem = rest[j];
+          // 第一次不是数组结构，后面的都是数组结构
+          if (Array.isArray(restItem)) {
+            result.push([currentItem!, ...restItem]);
+          } else if (restItem) {
+            // 确保restItem不是undefined，并进行类型断言
+            result.push([currentItem!, restItem as MallSpuApi.Property]);
+          }
+        }
+      }
+    }
+    return result;
+  }
+};
+
+/** 监听属性列表，生成相关参数和表头 */
+watch(
+  () => props.propertyList,
+  (propertyList: PropertyAndValues[]) => {
+    // 如果不是多规格则结束
+    if (!formData.value!.specType) {
+      return;
+    }
+    // 如果当前组件作为批量添加数据使用，则重置表数据
+    if (props.isBatch) {
+      skuList.value = [
+        {
+          price: 0,
+          marketPrice: 0,
+          costPrice: 0,
+          barCode: '',
+          picUrl: '',
+          stock: 0,
+          weight: 0,
+          volume: 0,
+          firstBrokeragePrice: 0,
+          secondBrokeragePrice: 0,
+        },
+      ];
+    }
+
+    // 判断代理对象是否为空
+    if (JSON.stringify(propertyList) === '[]') {
+      return;
+    }
+    // 重置表头
+    tableHeaders.value = [];
+    // 生成表头
+    propertyList.forEach((item, index) => {
+      // name加属性项index区分属性值
+      tableHeaders.value.push({ prop: `name${index}`, label: item.name });
+    });
+    // 如果回显的 sku 属性和添加的属性一致则不处理
+    if (validateData(propertyList)) {
+      return;
+    }
+    // 添加新属性没有属性值也不做处理
+    if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
+      return;
+    }
+    // 生成 table 数据，即 sku 列表
+    generateTableData(propertyList);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+const activitySkuListRef = ref<InstanceType<typeof ElTable>>();
+
+const getSkuTableRef = () => {
+  return activitySkuListRef.value;
+};
+// 暴露出生成 sku 方法，给添加属性成功时调用
+defineExpose({ generateTableData, validateSku, getSkuTableRef });
+</script>
diff --git a/apps/web-ele/src/views/mall/product/spu/data.ts b/apps/web-ele/src/views/mall/product/spu/data.ts
new file mode 100644
index 00000000..4e23423e
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/data.ts
@@ -0,0 +1,119 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { handleTree } from '@vben/utils';
+
+import { getCategoryList } from '#/api/mall/product/category';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'categoryId',
+      label: '商品分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const res = await getCategoryList({});
+          return handleTree(res, 'id', 'parentId', 'children');
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = MallSpuApi.Spu>(
+  onStatusChange?: (
+    newStatus: number,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'expand',
+      width: 80,
+      slots: { content: 'expand_content' },
+      fixed: 'left',
+    },
+    {
+      field: 'id',
+      title: '商品编号',
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      fixed: 'left',
+      minWidth: 200,
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'price',
+      title: '价格',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'salesCount',
+      title: '销量',
+    },
+    {
+      field: 'stock',
+      title: '库存',
+    },
+    {
+      field: 'sort',
+      title: '排序',
+    },
+    {
+      field: 'status',
+      title: '销售状态',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: 1,
+          checkedChildren: '上架',
+          unCheckedValue: 0,
+          unCheckedChildren: '下架',
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 300,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/product/spu/index.vue b/apps/web-ele/src/views/mall/product/spu/index.vue
new file mode 100644
index 00000000..b3224b67
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/index.vue
@@ -0,0 +1,351 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+import {
+  downloadFileFromBlobPart,
+  fenToYuan,
+  handleTree,
+  treeToString,
+} from '@vben/utils';
+
+import { ElDescriptions, ElLoading, ElMessage, ElTabs } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import {
+  deleteSpu,
+  exportSpu,
+  getSpuPage,
+  getTabsCount,
+  updateStatus,
+} from '#/api/mall/product/spu';
+import { $t } from '#/locales';
+import { ProductSpuStatusEnum } from '#/utils';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const { push } = useRouter();
+const tabType = ref(0);
+const route = useRoute(); // 路由
+const categoryList = ref();
+
+// tabs 数据
+const tabsData = ref([
+  {
+    name: '出售中',
+    type: 0,
+    count: 0,
+  },
+  {
+    name: '仓库中',
+    type: 1,
+    count: 0,
+  },
+  {
+    name: '已售罄',
+    type: 2,
+    count: 0,
+  },
+  {
+    name: '警戒库存',
+    type: 3,
+    count: 0,
+  },
+  {
+    name: '回收站',
+    type: 4,
+    count: 0,
+  },
+]);
+
+/** 刷新表格 */
+async function onRefresh() {
+  gridApi.query();
+  await getTabCount();
+}
+
+/** 获得每个 Tab 的数量 */
+async function getTabCount() {
+  const res = await getTabsCount();
+  for (const objName in res) {
+    const index = Number(objName);
+    if (tabsData.value[index]) {
+      tabsData.value[index].count = res[objName] as number;
+    }
+  }
+}
+
+/** 创建商品 */
+function handleCreate() {
+  push({ name: 'ProductSpuAdd' });
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSpu(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '商品.xls', source: data });
+}
+
+/** 编辑商品 */
+function handleEdit(row: MallSpuApi.Spu) {
+  push({ name: 'ProductSpuEdit', params: { id: row.id } });
+}
+
+/** 删除商品 */
+async function handleDelete(row: MallSpuApi.Spu) {
+  const hideLoading = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteSpu(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    hideLoading.close();
+  }
+}
+
+/** 添加到仓库 / 回收站的状态 */
+async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
+  // 二次确认
+  const text =
+    newStatus === ProductSpuStatusEnum.RECYCLE.status
+      ? '加入到回收站'
+      : '恢复到仓库';
+  await confirm(`确认要"${row.name}"${text}吗？`);
+  await updateStatus({ id: row.id as number, status: newStatus });
+  ElMessage.success(`${text}成功`);
+  onRefresh();
+}
+
+/** 更新状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: MallSpuApi.Spu,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    // 二次确认
+    const text = row.status ? '上架' : '下架';
+    confirm({
+      content: `确认要${text + row.name}吗?`,
+    })
+      .then(async () => {
+        // 更新状态
+        const res = await updateStatus({
+          id: row.id as number,
+          status: newStatus,
+        });
+        if (res) {
+          // 提示并返回成功
+          ElMessage.success(`${text}成功`);
+          resolve(true);
+        } else {
+          reject(new Error('操作失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 查看商品详情 */
+function handleDetail(row: MallSpuApi.Spu) {
+  push({ name: 'ProductSpuDetail', params: { id: row.id } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    cellConfig: {
+      height: 80,
+    },
+    expandConfig: {
+      height: 100,
+    },
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSpuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: tabType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      resizable: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallSpuApi.Spu>,
+});
+
+function onChangeTab(key: any) {
+  tabType.value = Number(key);
+  gridApi.query();
+}
+
+onMounted(async () => {
+  // 解析路由的 categoryId
+  if (route.query.categoryId) {
+    gridApi.formApi.setValues({
+      categoryId: Number(route.query.categoryId),
+    });
+  }
+  await getTabCount();
+  const res = await getCategoryList({});
+  categoryList.value = handleTree(res, 'id', 'parentId', 'children');
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【商品】商品 SPU 与 SKU"
+        url="https://doc.iocoder.cn/mall/product-spu-sku/"
+      />
+    </template>
+
+    <Grid>
+      <template #top>
+        <ElTabs class="border-none" @tab-change="onChangeTab">
+          <ElTabs.TabPane
+            v-for="item in tabsData"
+            :key="item.type"
+            :label="`${item.name} (${item.count})`"
+            :name="item.type"
+          />
+        </ElTabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['商品']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['product:spu:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['product:spu:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #expand_content="{ row }">
+        <ElDescriptions
+          :column="4"
+          class="mt-4"
+          :label-style="{
+            width: '100px',
+            fontWeight: 'bold',
+            fontSize: '14px',
+          }"
+          :content-style="{ width: '100px', fontSize: '14px' }"
+        >
+          <ElDescriptions.Item label="商品分类">
+            {{ treeToString(categoryList, row.categoryId || 0) }}
+          </ElDescriptions.Item>
+          <ElDescriptions.Item label="商品名称">
+            {{ row.name }}
+          </ElDescriptions.Item>
+
+          <ElDescriptions.Item label="市场价">
+            {{ fenToYuan(row.marketPrice || 0) }} 元
+          </ElDescriptions.Item>
+          <ElDescriptions.Item label="成本价">
+            {{ fenToYuan(row.costPrice || 0) }} 元
+          </ElDescriptions.Item>
+          <ElDescriptions.Item label="浏览量">
+            {{ row.browseCount || 0 }}
+          </ElDescriptions.Item>
+          <ElDescriptions.Item label="虚拟销量">
+            {{ row.virtualSalesCount || 0 }}
+          </ElDescriptions.Item>
+        </ElDescriptions>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:spu:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['product:spu:delete'],
+              ifShow: () => tabType === 4,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '恢复',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:spu:update'],
+              ifShow: () => tabType === 4,
+              onClick: handleStatus02Change.bind(
+                null,
+                row,
+                ProductSpuStatusEnum.DISABLE.status,
+              ),
+            },
+            {
+              label: '回收',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:spu:update'],
+              ifShow: () => tabType !== 4,
+              onClick: handleStatus02Change.bind(
+                null,
+                row,
+                ProductSpuStatusEnum.RECYCLE.status,
+              ),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/detail.vue b/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
new file mode 100644
index 00000000..3a0818bb
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
@@ -0,0 +1,503 @@
+<script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { floatToFixed2 } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElEmpty,
+  ElImage,
+  ElTabPane,
+  ElTabs,
+  ElTag,
+} from 'element-plus';
+
+import * as ProductBrandApi from '#/api/mall/product/brand';
+import * as ProductCategoryApi from '#/api/mall/product/category';
+import * as ProductSpuApi from '#/api/mall/product/spu';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+interface Category {
+  id: number;
+  name: string;
+  children?: Category[];
+}
+
+interface Brand {
+  id: number;
+  name: string;
+}
+
+interface DictData {
+  value: number | string;
+  label: string;
+  colorType?: string;
+  cssClass?: string;
+}
+
+const { push } = useRouter(); // 路由
+const { params } = useRoute(); // 查询参数
+
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const activeTab = ref('basic'); // 当前激活的标签页
+const categoryList = ref<Category[]>([]); // 商品分类列表
+const brandList = ref<Brand[]>([]); // 商品品牌列表
+const deliveryTypeDict = ref<DictData[]>([]); // 配送方式字典
+
+// SPU 表单数据
+const formData = ref<MallSpuApi.Spu>({
+  name: '', // 商品名称
+  categoryId: undefined, // 商品分类
+  keyword: '', // 关键字
+  picUrl: '', // 商品封面图
+  sliderPicUrls: [], // 商品轮播图
+  introduction: '', // 商品简介
+  deliveryTypes: [], // 配送方式数组
+  deliveryTemplateId: undefined, // 运费模版
+  brandId: undefined, // 商品品牌
+  specType: false, // 商品规格
+  subCommissionType: false, // 分销类型
+  skus: [
+    {
+      price: 0, // 商品价格
+      marketPrice: 0, // 市场价
+      costPrice: 0, // 成本价
+      barCode: '', // 商品条码
+      picUrl: '', // 图片地址
+      stock: 0, // 库存
+      weight: 0, // 商品重量
+      volume: 0, // 商品体积
+      firstBrokeragePrice: 0, // 一级分销的佣金
+      secondBrokeragePrice: 0, // 二级分销的佣金
+    },
+  ],
+  description: '', // 商品详情
+  sort: 0, // 商品排序
+  giveIntegral: 0, // 赠送积分
+  virtualSalesCount: 0, // 虚拟销量
+});
+
+/** 获取配送方式字典 */
+const getDeliveryTypeDict = async () => {
+  try {
+    deliveryTypeDict.value = await getIntDictOptions(
+      DICT_TYPE.TRADE_DELIVERY_TYPE,
+    );
+  } catch (error) {
+    console.error('获取配送方式字典失败', error);
+  }
+};
+
+/** 获取商品分类列表 */
+const getCategoryList = async () => {
+  try {
+    const data = await ProductCategoryApi.getCategorySimpleList();
+    categoryList.value = data as Category[];
+  } catch (error) {
+    console.error('获取商品分类失败', error);
+  }
+};
+
+/** 获取商品品牌列表 */
+const getBrandList = async () => {
+  try {
+    const data = await ProductBrandApi.getSimpleBrandList();
+    brandList.value = data as Brand[];
+  } catch (error) {
+    console.error('获取商品品牌失败', error);
+  }
+};
+
+/** 根据ID获取分类名称 */
+const getCategoryNameById = (id: number | undefined) => {
+  if (!id || !categoryList.value || categoryList.value.length === 0)
+    return '未知分类';
+  const category = categoryList.value.find((item) => item.id === id);
+  return category ? category.name : '未知分类';
+};
+
+/** 根据ID获取品牌名称 */
+const getBrandNameById = (id: number | undefined) => {
+  if (!id || !brandList.value || brandList.value.length === 0)
+    return '未知品牌';
+  const brand = brandList.value.find((item) => item.id === id);
+  return brand ? brand.name : '未知品牌';
+};
+
+/** 根据值获取配送方式名称 */
+const getDeliveryTypeName = (value: number) => {
+  if (!deliveryTypeDict.value || deliveryTypeDict.value.length === 0)
+    return `${value}`;
+  const dict = deliveryTypeDict.value.find((item) => item.value === value);
+  return dict ? dict.label : `${value}`;
+};
+
+/** 获得详情 */
+const getDetail = async () => {
+  const id = params.id as unknown as number;
+  if (id) {
+    formLoading.value = true;
+    try {
+      const res = (await ProductSpuApi.getSpu(id)) as MallSpuApi.Spu;
+      res.skus?.forEach((item: MallSpuApi.Sku) => {
+        item.price = floatToFixed2(item.price);
+        item.marketPrice = floatToFixed2(item.marketPrice);
+        item.costPrice = floatToFixed2(item.costPrice);
+        item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice);
+        item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice);
+      });
+      formData.value = res;
+    } finally {
+      formLoading.value = false;
+    }
+  }
+};
+
+/** 返回列表 */
+const back = () => {
+  push({ name: 'ProductSpu' });
+};
+
+/** 编辑商品 */
+const editProduct = () => {
+  push({ name: 'ProductSpuForm', params: { id: params.id } });
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await Promise.all([getCategoryList(), getBrandList(), getDeliveryTypeDict()]);
+  await getDetail();
+});
+</script>
+
+<template>
+  <Page auto-content-height :loading="formLoading">
+    <template #title>
+      <span class="text-lg font-bold">商品详情</span>
+    </template>
+
+    <template #extra>
+      <div class="flex gap-2">
+        <ElButton type="primary" @click="editProduct">
+          <IconifyIcon icon="ep:edit" class="mr-1" />
+          编辑商品
+        </ElButton>
+        <ElButton @click="back">
+          <IconifyIcon icon="ep:back" class="mr-1" />
+          返回列表
+        </ElButton>
+      </div>
+    </template>
+
+    <ElCard shadow="hover" class="mb-4">
+      <div class="mb-4 flex flex-col gap-4 md:flex-row md:items-center">
+        <ElImage
+          :src="formData.picUrl"
+          fit="contain"
+          style="width: 120px; height: 120px"
+          class="rounded border"
+        />
+        <div class="flex-grow">
+          <h1 class="mb-2 text-xl font-bold">{{ formData.name }}</h1>
+          <div class="mb-2 text-gray-500">
+            {{ formData.introduction || '暂无简介' }}
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <ElTag v-if="formData.specType" type="success">多规格</ElTag>
+            <ElTag v-else type="info">单规格</ElTag>
+            <ElTag v-if="formData.subCommissionType" type="warning">分销</ElTag>
+            <ElTag type="danger">
+              库存:
+              {{
+                formData.skus?.reduce(
+                  (sum, sku) => sum + (sku.stock || 0),
+                  0,
+                ) || 0
+              }}
+            </ElTag>
+            <ElTag type="info">
+              分类: {{ getCategoryNameById(formData.categoryId) }}
+            </ElTag>
+          </div>
+        </div>
+      </div>
+
+      <ElTabs v-model="activeTab" type="border-card">
+        <ElTabPane name="basic" label="基本信息">
+          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <!-- 基本信息 -->
+            <ElCard shadow="never" header="商品信息" class="h-full">
+              <ElDescriptions :column="1" border>
+                <ElDescriptionsItem label="商品名称">
+                  {{ formData.name }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="商品分类">
+                  <ElTag type="success">
+                    {{ getCategoryNameById(formData.categoryId) }}
+                  </ElTag>
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="商品品牌">
+                  <ElTag type="primary">
+                    {{ getBrandNameById(formData.brandId) }}
+                  </ElTag>
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="关键字">
+                  <ElTag type="danger" />{{ formData.keyword || '无' }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="赠送积分">
+                  {{ formData.giveIntegral }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="虚拟销量">
+                  {{ formData.virtualSalesCount }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="排序">
+                  {{ formData.sort }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="规格类型">
+                  <ElTag :type="formData.specType ? 'success' : 'info'">
+                    {{ formData.specType ? '多规格' : '单规格' }}
+                  </ElTag>
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="分销类型">
+                  <ElTag
+                    :type="formData.subCommissionType ? 'warning' : 'info'"
+                  >
+                    {{ formData.subCommissionType ? '单独设置' : '默认设置' }}
+                  </ElTag>
+                </ElDescriptionsItem>
+              </ElDescriptions>
+            </ElCard>
+
+            <!-- 配送信息 -->
+            <ElCard shadow="never" header="配送信息" class="h-full">
+              <ElDescriptions :column="1" border>
+                <ElDescriptionsItem label="配送方式">
+                  <div class="flex flex-wrap gap-2">
+                    <ElTag
+                      v-for="(type, index) in formData.deliveryTypes"
+                      :key="index"
+                      :type="
+                        (deliveryTypeDict.find((dict) => dict.value === type)
+                          ?.colorType as
+                          | 'success'
+                          | 'warning'
+                          | 'info'
+                          | 'danger'
+                          | 'primary'
+                          | undefined) || undefined
+                      "
+                    >
+                      {{ getDeliveryTypeName(type) }}
+                    </ElTag>
+                    <span
+                      v-if="
+                        !formData.deliveryTypes ||
+                        formData.deliveryTypes.length === 0
+                      "
+                      class="text-gray-400"
+                    >
+                      暂无配送方式
+                    </span>
+                  </div>
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="运费模板">
+                  {{ formData.deliveryTemplateId || '未设置' }}
+                </ElDescriptionsItem>
+              </ElDescriptions>
+            </ElCard>
+          </div>
+        </ElTabPane>
+
+        <ElTabPane name="images" label="商品图片">
+          <ElCard shadow="never" header="商品轮播图">
+            <div
+              v-if="formData.sliderPicUrls && formData.sliderPicUrls.length > 0"
+            >
+              <ElCarousel
+                height="400px"
+                :interval="4000"
+                indicator-position="outside"
+                arrow="always"
+              >
+                <ElCarouselItem
+                  v-for="(item, index) in formData.sliderPicUrls"
+                  :key="index"
+                >
+                  <div class="flex h-full items-center justify-center">
+                    <ElImage
+                      :src="item"
+                      fit="contain"
+                      class="max-h-full"
+                      :preview-src-list="formData.sliderPicUrls"
+                      :initial-index="index"
+                    />
+                  </div>
+                </ElCarouselItem>
+              </ElCarousel>
+              <div class="mt-6 flex flex-wrap justify-center gap-3">
+                <div
+                  v-for="(item, index) in formData.sliderPicUrls"
+                  :key="index"
+                  class="cursor-pointer rounded border p-1"
+                >
+                  <ElImage
+                    :src="item"
+                    fit="cover"
+                    style="width: 80px; height: 80px"
+                  />
+                </div>
+              </div>
+            </div>
+            <ElEmpty v-else description="暂无轮播图" />
+          </ElCard>
+        </ElTabPane>
+
+        <ElTabPane name="sku" label="SKU信息">
+          <div v-if="formData.skus && formData.skus.length > 0">
+            <div
+              v-for="(sku, index) in formData.skus"
+              :key="index"
+              class="mb-6"
+            >
+              <ElCard
+                shadow="hover"
+                :header="`规格 ${index + 1}${sku.properties && sku.properties.length > 0 ? ` - ${sku.properties.map((p) => p.valueName).join('/')}` : ''}`"
+              >
+                <div class="flex flex-col gap-4 md:flex-row">
+                  <ElImage
+                    :src="sku.picUrl || formData.picUrl"
+                    fit="contain"
+                    style="width: 120px; height: 120px"
+                    class="flex-shrink-0 rounded border"
+                  />
+
+                  <div class="grid flex-grow grid-cols-1 gap-6 md:grid-cols-3">
+                    <!-- 价格信息 -->
+                    <div class="rounded bg-gray-50 p-4">
+                      <h3 class="mb-2 border-b pb-2 font-bold text-gray-700">
+                        价格信息
+                      </h3>
+                      <div class="grid grid-cols-2 gap-2">
+                        <div class="text-gray-500">销售价:</div>
+                        <div class="font-bold text-red-500">
+                          ¥{{ sku.price }}
+                        </div>
+                        <div class="text-gray-500">市场价:</div>
+                        <div>¥{{ sku.marketPrice }}</div>
+                        <div class="text-gray-500">成本价:</div>
+                        <div>¥{{ sku.costPrice }}</div>
+                      </div>
+                    </div>
+
+                    <!-- 库存信息 -->
+                    <div class="rounded bg-gray-50 p-4">
+                      <h3 class="mb-2 border-b pb-2 font-bold text-gray-700">
+                        库存信息
+                      </h3>
+                      <div class="grid grid-cols-2 gap-2">
+                        <div class="text-gray-500">库存:</div>
+                        <div class="font-bold">{{ sku.stock }} 件</div>
+                        <div class="text-gray-500">条码:</div>
+                        <div>{{ sku.barCode || '未设置' }}</div>
+                      </div>
+                    </div>
+
+                    <!-- 物流信息 -->
+                    <div class="rounded bg-gray-50 p-4">
+                      <h3 class="mb-2 border-b pb-2 font-bold text-gray-700">
+                        物流信息
+                      </h3>
+                      <div class="grid grid-cols-2 gap-2">
+                        <div class="text-gray-500">重量:</div>
+                        <div>{{ sku.weight }} kg</div>
+                        <div class="text-gray-500">体积:</div>
+                        <div>{{ sku.volume }} m³</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 分销佣金 -->
+                <div
+                  v-if="formData.subCommissionType"
+                  class="mt-4 rounded bg-yellow-50 p-4"
+                >
+                  <h3 class="mb-2 border-b pb-2 font-bold text-gray-700">
+                    分销佣金
+                  </h3>
+                  <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+                    <div class="text-gray-500">一级佣金:</div>
+                    <div class="font-bold">¥{{ sku.firstBrokeragePrice }}</div>
+                    <div class="text-gray-500">二级佣金:</div>
+                    <div class="font-bold">¥{{ sku.secondBrokeragePrice }}</div>
+                  </div>
+                </div>
+
+                <!-- 规格属性 -->
+                <div
+                  v-if="sku.properties && sku.properties.length > 0"
+                  class="mt-4"
+                >
+                  <h3 class="mb-2 font-bold text-gray-700">规格属性</h3>
+                  <div class="flex flex-wrap gap-2">
+                    <ElTag
+                      v-for="(prop, propIndex) in sku.properties"
+                      :key="propIndex"
+                      effect="dark"
+                      class="text-sm"
+                    >
+                      {{ prop.propertyName }}: {{ prop.valueName }}
+                    </ElTag>
+                  </div>
+                </div>
+              </ElCard>
+            </div>
+          </div>
+          <ElEmpty v-else description="暂无SKU信息" />
+        </ElTabPane>
+
+        <ElTabPane name="detail" label="商品详情">
+          <ElCard shadow="never" body-style="padding: 0;">
+            <div v-if="formData.description" class="product-description">
+              <div v-html="formData.description"></div>
+            </div>
+            <ElEmpty v-else description="暂无商品详情" />
+          </ElCard>
+        </ElTabPane>
+      </ElTabs>
+    </ElCard>
+  </Page>
+</template>
+
+<style scoped>
+.product-description {
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.product-description :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+.product-description :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.product-description :deep(table td) {
+  padding: 8px;
+  border: 1px solid #eee;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/form.vue b/apps/web-ele/src/views/mall/product/spu/modules/form.vue
new file mode 100644
index 00000000..a1619905
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/modules/form.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+import { onMounted, ref, unref } from 'vue';
+import { cloneDeep } from '@vben/utils';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import { useRouter, useRoute } from 'vue-router';
+import { formatToFraction, convertToInteger } from '@vben/utils';
+import * as ProductSpuApi from '#/api/mall/product/spu';
+import { ElMessage } from 'element-plus';
+
+import InfoForm from '../components/info-form.vue';
+import DeliveryForm from '../components/delivery-form.vue';
+import DescriptionForm from '../components/description-form.vue';
+import OtherForm from '../components/other-form.vue';
+import SkuForm from '../components/sku-form.vue';
+
+const activeTab = ref('info');
+const activeName = ref('info'); // Tag 激活的窗口
+
+// SPU 表单数据
+const formData = ref<MallSpuApi.Spu>({
+  name: '', // 商品名称
+  categoryId: undefined, // 商品分类
+  keyword: '', // 关键字
+  picUrl: '', // 商品封面图
+  sliderPicUrls: [], // 商品轮播图
+  introduction: '', // 商品简介
+  deliveryTypes: [], // 配送方式数组
+  deliveryTemplateId: undefined, // 运费模版
+  brandId: undefined, // 商品品牌
+  specType: false, // 商品规格
+  subCommissionType: false, // 分销类型
+  skus: [
+    {
+      price: 0, // 商品价格
+      marketPrice: 0, // 市场价
+      costPrice: 0, // 成本价
+      barCode: '', // 商品条码
+      picUrl: '', // 图片地址
+      stock: 0, // 库存
+      weight: 0, // 商品重量
+      volume: 0, // 商品体积
+      firstBrokeragePrice: 0, // 一级分销的佣金
+      secondBrokeragePrice: 0, // 二级分销的佣金
+    },
+  ],
+  description: '', // 商品详情
+  sort: 0, // 商品排序
+  giveIntegral: 0, // 赠送积分
+  virtualSalesCount: 0, // 虚拟销量
+});
+
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const { push } = useRouter(); // 路由
+const { params } = useRoute(); // 查询参数
+/** 获得详情 */
+const getDetail = async () => {
+  const id = params.id as unknown as number;
+  if (id) {
+    formLoading.value = true;
+    try {
+      const res = (await ProductSpuApi.getSpu(id)) as MallSpuApi.Spu;
+      res.skus?.forEach((item: MallSpuApi.Sku) => {
+        // 回显价格分转元
+        item.price = formatToFraction(item.price);
+        item.marketPrice = formatToFraction(item.marketPrice);
+        item.costPrice = formatToFraction(item.costPrice);
+        item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
+        item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
+      });
+      formData.value = res;
+    } finally {
+      formLoading.value = false;
+    }
+  }
+};
+
+/** 提交按钮 */
+const infoRef = ref<InstanceType<typeof InfoForm>>();
+const skuRef = ref<InstanceType<typeof SkuForm>>();
+const deliveryRef = ref<InstanceType<typeof DeliveryForm>>();
+const descriptionRef = ref<InstanceType<typeof DescriptionForm>>();
+const otherRef = ref<InstanceType<typeof OtherForm>>();
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true;
+  try {
+    // 校验各表单
+    await unref(infoRef)?.validate();
+    await unref(skuRef)?.validate();
+    await unref(deliveryRef)?.validate();
+    await unref(descriptionRef)?.validate();
+    await unref(otherRef)?.validate();
+    // 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
+    const deepCopyFormData = cloneDeep(unref(formData.value)) as MallSpuApi.Spu;
+    deepCopyFormData.skus!.forEach((item) => {
+      // 给sku name赋值
+      item.name = deepCopyFormData.name;
+      // sku相关价格元转分
+      item.price = convertToInteger(item.price);
+      item.marketPrice = convertToInteger(item.marketPrice);
+      item.costPrice = convertToInteger(item.costPrice);
+      item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice);
+      item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
+    });
+    // 处理轮播图列表
+    const newSliderPicUrls: any[] = [];
+    deepCopyFormData.sliderPicUrls!.forEach((item: any) => {
+      // 如果是前端选的图
+      typeof item === 'object'
+        ? newSliderPicUrls.push(item.url)
+        : newSliderPicUrls.push(item);
+    });
+    deepCopyFormData.sliderPicUrls = newSliderPicUrls;
+    // 校验都通过后提交表单
+    const data = deepCopyFormData as MallSpuApi.Spu;
+    const id = params.id as unknown as number;
+    if (!id) {
+      await ProductSpuApi.createSpu(data);
+      ElMessage.success('创建成功');
+    } else {
+      await ProductSpuApi.updateSpu(data);
+      ElMessage.success('更新成功');
+    }
+    close();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 关闭按钮 */
+const close = () => {
+  push({ name: 'ProductSpu' });
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getDetail();
+});
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <ElTabs v-model="activeTab">
+      <ElTabPane label="基础设置" name="info">
+        <InfoForm
+          :propFormData="formData"
+          v-model:activeName="activeName"
+          ref="infoRef"
+        />
+      </ElTabPane>
+      <ElTabPane label="价格库存" name="sku">
+        <SkuForm
+          :propFormData="formData"
+          v-model:activeName="activeName"
+          ref="skuRef"
+        />
+      </ElTabPane>
+      <ElTabPane label="物流设置" name="delivery">
+        <DeliveryForm
+          :propFormData="formData"
+          v-model:activeName="activeName"
+          ref="deliveryRef"
+        />
+      </ElTabPane>
+      <ElTabPane label="商品详情" name="description">
+        <DescriptionForm
+          :propFormData="formData"
+          v-model:activeName="activeName"
+          ref="descriptionRef"
+        />
+      </ElTabPane>
+      <ElTabPane label="其它设置" name="other">
+        <OtherForm
+          :propFormData="formData"
+          v-model:activeName="activeName"
+          ref="otherRef"
+        />
+      </ElTabPane>
+    </ElTabs>
+    <ElButton type="primary" :loading="formLoading" @click="submitForm"
+      >保存</ElButton
+    >
+    <ElButton @click="close">返回</ElButton>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/article/category/data.ts b/apps/web-ele/src/views/mall/promotion/article/category/data.ts
new file mode 100644
index 00000000..d03a5d87
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/article/category/data.ts
@@ -0,0 +1,135 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '图标地址',
+      component: 'ImageUpload',
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        controlsPosition: 'right',
+        placeholder: '请输入排序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      title: '编号',
+      field: 'id',
+      width: 100,
+    },
+    {
+      title: '分类名称',
+      field: 'name',
+      minWidth: 240,
+    },
+    {
+      title: '分类图片',
+      field: 'picUrl',
+      width: 80,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      title: '状态',
+      field: 'status',
+      width: 150,
+      cellRender: {
+        name: 'CellDictTag',
+        props: {
+          dictType: DICT_TYPE.COMMON_STATUS,
+        },
+      },
+    },
+    {
+      title: '排序',
+      field: 'sort',
+      width: 150,
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/article/category/index.vue b/apps/web-ele/src/views/mall/promotion/article/category/index.vue
new file mode 100644
index 00000000..6c40d929
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/article/category/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallArticleCategoryApi } from '#/api/mall/promotion/articleCategory';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteArticleCategory,
+  getArticleCategoryPage,
+} from '#/api/mall/promotion/articleCategory';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: MallArticleCategoryApi.ArticleCategory) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: MallArticleCategoryApi.ArticleCategory) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteArticleCategory(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getArticleCategoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallArticleCategoryApi.ArticleCategory>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="文章分类列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['文章分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:article-category:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:article-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:article-category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/article/category/modules/form.vue b/apps/web-ele/src/views/mall/promotion/article/category/modules/form.vue
new file mode 100644
index 00000000..45cc3e37
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/article/category/modules/form.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { MallArticleCategoryApi } from '#/api/mall/promotion/articleCategory';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createArticleCategory,
+  getArticleCategory,
+  updateArticleCategory,
+} from '#/api/mall/promotion/articleCategory';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallArticleCategoryApi.ArticleCategory>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['文章分类'])
+    : $t('ui.actionTitle.create', ['文章分类']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallArticleCategoryApi.ArticleCategory;
+    try {
+      await (formData.value?.id
+        ? updateArticleCategory(data)
+        : createArticleCategory(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallArticleCategoryApi.ArticleCategory>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getArticleCategory(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/article/data.ts b/apps/web-ele/src/views/mall/promotion/article/data.ts
new file mode 100644
index 00000000..5b03258f
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/article/data.ts
@@ -0,0 +1,210 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { getSimpleArticleCategoryList } from '#/api/mall/promotion/articleCategory';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '文章标题',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'categoryId',
+      label: '文章分类',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleArticleCategoryList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'author',
+      label: '文章作者',
+      component: 'Input',
+    },
+    {
+      fieldName: 'introduction',
+      label: '文章简介',
+      component: 'Input',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '文章封面',
+      component: 'ImageUpload',
+      rules: 'required',
+    },
+    {
+      fieldName: 'recommendHot',
+      label: '是否热门',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'recommendBanner',
+      label: '是否轮播图',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      // TODO: 商品关联
+      fieldName: 'spuId',
+      label: '商品关联',
+      component: 'Input',
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        controlsPosition: 'right',
+        placeholder: '请输入品牌排序',
+      },
+      rules: z.number().min(0).default(1),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'description',
+      label: '文章内容',
+      component: 'RichTextarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '文章分类',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleArticleCategoryList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '文章标题',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      fixed: 'left',
+    },
+    {
+      field: 'title',
+      title: '标题',
+    },
+    {
+      field: 'picUrl',
+      title: '封面',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'categoryId',
+      title: '分类',
+    },
+    {
+      field: 'browseCount',
+      title: '浏览量',
+    },
+    {
+      field: 'author',
+      title: '作者',
+    },
+    {
+      field: 'introduction',
+      title: '文章简介',
+    },
+    {
+      field: 'sort',
+      title: '排序',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/article/index.vue b/apps/web-ele/src/views/mall/promotion/article/index.vue
new file mode 100644
index 00000000..b3f4ca8a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/article/index.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallArticleApi } from '#/api/mall/promotion/article';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteArticle, getArticlePage } from '#/api/mall/promotion/article';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建品牌 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑品牌 */
+function handleEdit(row: MallArticleApi.Article) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除品牌 */
+async function handleDelete(row: MallArticleApi.Article) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.title]),
+    fullscreen: true,
+  });
+  try {
+    await deleteArticle(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getArticlePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallArticleApi.Article>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="文章列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['文章']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:article:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:article:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:article:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.title]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/article/modules/form.vue b/apps/web-ele/src/views/mall/promotion/article/modules/form.vue
new file mode 100644
index 00000000..fc1d3333
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/article/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { MallArticleApi } from '#/api/mall/promotion/article';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createArticle,
+  getArticle,
+  updateArticle,
+} from '#/api/mall/promotion/article';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallArticleApi.Article>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['文章'])
+    : $t('ui.actionTitle.create', ['文章']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallArticleApi.Article;
+    try {
+      await (formData.value?.id ? updateArticle(data) : createArticle(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallArticleApi.Article>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getArticle(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/banner/data.ts b/apps/web-ele/src/views/mall/promotion/banner/data.ts
new file mode 100644
index 00000000..cdc7acbe
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/banner/data.ts
@@ -0,0 +1,175 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: 'Banner标题',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '图片地址',
+      component: 'ImageUpload',
+      rules: 'required',
+    },
+    {
+      fieldName: 'position',
+      label: '定位',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_BANNER_POSITION, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'url',
+      label: '跳转地址',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        controlsPosition: 'right',
+        placeholder: '请输入排序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'memo',
+      label: '描述',
+      component: 'Textarea',
+      componentProps: {
+        rows: 4,
+        placeholder: '请输入描述',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'title',
+      label: 'Banner标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入Banner标题',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      title: 'Banner标题',
+      field: 'title',
+    },
+    {
+      title: '图片',
+      field: 'picUrl',
+      width: 80,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      title: '状态',
+      field: 'status',
+      width: 150,
+      cellRender: {
+        name: 'CellDictTag',
+        props: {
+          dictType: DICT_TYPE.COMMON_STATUS,
+        },
+      },
+    },
+    {
+      title: '定位',
+      field: 'position',
+      width: 150,
+      cellRender: {
+        name: 'CellDictTag',
+        props: {
+          dictType: DICT_TYPE.PROMOTION_BANNER_POSITION,
+        },
+      },
+    },
+    {
+      title: '跳转地址',
+      field: 'url',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '排序',
+      field: 'sort',
+      width: 100,
+    },
+    {
+      title: '描述',
+      field: 'memo',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/banner/index.vue b/apps/web-ele/src/views/mall/promotion/banner/index.vue
new file mode 100644
index 00000000..cc6025d7
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/banner/index.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBannerApi } from '#/api/mall/market/banner';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteBanner, getBannerPage } from '#/api/mall/market/banner';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建Banner */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑Banner */
+function handleEdit(row: MallBannerApi.Banner) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除Banner */
+async function handleDelete(row: MallBannerApi.Banner) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.title]),
+    fullscreen: true,
+  });
+  try {
+    await deleteBanner(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBannerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBannerApi.Banner>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="Banner列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['Banner']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:banner:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:banner:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:banner:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.title]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/banner/modules/form.vue b/apps/web-ele/src/views/mall/promotion/banner/modules/form.vue
new file mode 100644
index 00000000..cc04080c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/banner/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { MallBannerApi } from '#/api/mall/market/banner';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createBanner,
+  getBanner,
+  updateBanner,
+} from '#/api/mall/market/banner';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallBannerApi.Banner>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['Banner'])
+    : $t('ui.actionTitle.create', ['Banner']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallBannerApi.Banner;
+    try {
+      await (formData.value?.id ? updateBanner(data) : createBanner(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallBannerApi.Banner>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getBanner(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts b/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
new file mode 100644
index 00000000..b41cb3ab
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
@@ -0,0 +1,262 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { formatDate } from '@vben/utils';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'startTime',
+      label: '开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        placeholder: '请选择开始时间',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        placeholder: '请选择结束时间',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'bargainFirstPrice',
+      label: '砍价起始价格(元)',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+        placeholder: '请输入砍价起始价格',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'bargainMinPrice',
+      label: '砍价底价(元)',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+        placeholder: '请输入砍价底价',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'stock',
+      label: '活动库存',
+      component: 'InputNumber',
+      componentProps: {
+        min: 1,
+        placeholder: '请输入活动库存',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'helpMaxCount',
+      label: '助力人数',
+      component: 'InputNumber',
+      componentProps: {
+        min: 1,
+        placeholder: '请输入助力人数',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'bargainCount',
+      label: '砍价次数',
+      component: 'InputNumber',
+      componentProps: {
+        min: 1,
+        placeholder: '请输入砍价次数',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'totalLimitCount',
+      label: '购买限制',
+      component: 'InputNumber',
+      componentProps: {
+        min: 1,
+        placeholder: '请输入购买限制',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'randomMinPrice',
+      label: '最小砍价金额(元)',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+        placeholder: '请输入最小砍价金额',
+      },
+    },
+    {
+      fieldName: 'randomMaxPrice',
+      label: '最大砍价金额(元)',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+        placeholder: '请输入最大砍价金额',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择活动状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'activityTime',
+      title: '活动时间',
+      minWidth: 210,
+      formatter: ({ row }) => {
+        if (!row.startTime || !row.endTime) return '';
+        return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
+      },
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+        },
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'bargainFirstPrice',
+      title: '起始价格',
+      minWidth: 100,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'bargainMinPrice',
+      title: '砍价底价',
+      minWidth: 100,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'recordUserCount',
+      title: '总砍价人数',
+      minWidth: 100,
+    },
+    {
+      field: 'recordSuccessUserCount',
+      title: '成功砍价人数',
+      minWidth: 110,
+    },
+    {
+      field: 'helpUserCount',
+      title: '助力人数',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 80,
+    },
+    {
+      field: 'totalStock',
+      title: '总库存',
+      minWidth: 80,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue b/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
new file mode 100644
index 00000000..23def990
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  closeBargainActivity,
+  deleteBargainActivity,
+  getBargainActivityPage,
+} from '#/api/mall/promotion/bargain/bargainActivity';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'PromotionBargainActivity' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建砍价活动 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑砍价活动 */
+function handleEdit(row: MallBargainActivityApi.BargainActivity) {
+  formModalApi.setData(row).open();
+}
+
+/** 关闭砍价活动 */
+async function handleClose(row: MallBargainActivityApi.BargainActivity) {
+  await confirm('确定关闭该砍价活动吗？');
+  await closeBargainActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
+}
+
+/** 删除砍价活动 */
+async function handleDelete(row: MallBargainActivityApi.BargainActivity) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteBargainActivity(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBargainActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBargainActivityApi.BargainActivity>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】砍价活动"
+        url="https://doc.iocoder.cn/mall/promotion-bargain/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="砍价活动列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['砍价活动']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:bargain-activity:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:bargain-activity:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '关闭',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:bargain-activity:close'],
+              ifShow: row.status === 0,
+              onClick: handleClose.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:bargain-activity:delete'],
+              ifShow: row.status !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
new file mode 100644
index 00000000..aa82b513
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createBargainActivity,
+  getBargainActivity,
+  updateBargainActivity,
+} from '#/api/mall/promotion/bargain/bargainActivity';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'PromotionBargainActivityForm' });
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallBargainActivityApi.BargainActivity>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['砍价活动'])
+    : $t('ui.actionTitle.create', ['砍价活动']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallBargainActivityApi.BargainActivity;
+    try {
+      await (formData.value?.id
+        ? updateBargainActivity(data)
+        : createBargainActivity(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getBargainActivity(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts b/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
new file mode 100644
index 00000000..74d904fe
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
@@ -0,0 +1,161 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'status',
+      label: '砍价状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择砍价状态',
+        clearable: true,
+        options: getDictOptions(
+          DICT_TYPE.PROMOTION_BARGAIN_RECORD_STATUS,
+          'number',
+        ),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 50,
+    },
+    {
+      field: 'avatar',
+      title: '用户头像',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '用户昵称',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '发起时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'activity.name',
+      title: '砍价活动',
+      minWidth: 150,
+    },
+    {
+      field: 'activity.bargainMinPrice',
+      title: '最低价',
+      minWidth: 100,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'bargainPrice',
+      title: '当前价',
+      minWidth: 100,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'activity.helpMaxCount',
+      title: '总砍价次数',
+      minWidth: 100,
+    },
+    {
+      field: 'helpCount',
+      title: '剩余砍价次数',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '砍价状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_BARGAIN_RECORD_STATUS },
+      },
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'orderId',
+      title: '订单编号',
+      minWidth: 100,
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 助力列表表格列配置 */
+export function useHelpGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 80,
+    },
+    {
+      field: 'avatar',
+      title: '用户头像',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '用户昵称',
+      minWidth: 100,
+    },
+    {
+      field: 'reducePrice',
+      title: '砍价金额',
+      minWidth: 100,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'createTime',
+      title: '助力时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/record/index.vue b/apps/web-ele/src/views/mall/promotion/bargain/record/index.vue
new file mode 100644
index 00000000..fee556ae
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/bargain/record/index.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBargainRecordApi } from '#/api/mall/promotion/bargain/bargainRecord';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBargainRecordPage } from '#/api/mall/promotion/bargain/bargainRecord';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import HelpListModal from './modules/list.vue';
+
+defineOptions({ name: 'PromotionBargainRecord' });
+
+const [HelpListModalApi, helpListModalApi] = useVbenModal({
+  connectedComponent: HelpListModal,
+  destroyOnClose: true,
+});
+
+/** 查看助力详情 */
+function handleViewHelp(row: MallBargainRecordApi.BargainRecord) {
+  helpListModalApi.setData({ recordId: row.id }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBargainRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBargainRecordApi.BargainRecord>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】砍价活动"
+        url="https://doc.iocoder.cn/mall/promotion-bargain/"
+      />
+    </template>
+
+    <HelpListModalApi />
+
+    <Grid table-title="砍价记录列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '助力',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['promotion:bargain-help:query'],
+              onClick: handleViewHelp.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/record/modules/list.vue b/apps/web-ele/src/views/mall/promotion/bargain/record/modules/list.vue
new file mode 100644
index 00000000..49223d5d
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/bargain/record/modules/list.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBargainHelpApi } from '#/api/mall/promotion/bargain/bargainHelp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBargainHelpPage } from '#/api/mall/promotion/bargain/bargainHelp';
+
+import { useHelpGridColumns } from '../data';
+
+/** 助力列表 */
+defineOptions({ name: 'BargainRecordListDialog' });
+
+const recordId = ref<number>();
+const getTitle = computed(() => {
+  return `助力列表 - 记录${recordId.value || ''}`;
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      recordId.value = undefined;
+      return;
+    }
+    // 获取传入的记录ID
+    const data = modalApi.getData<{ recordId: number }>();
+    if (data?.recordId) {
+      recordId.value = data.recordId;
+    }
+  },
+});
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useHelpGridColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getBargainHelpPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            recordId: recordId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MallBargainHelpApi.BargainHelp>,
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Grid class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts b/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts
new file mode 100644
index 00000000..e08dfa66
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts
@@ -0,0 +1,238 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { formatDate } from '@vben/utils';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 表单配置 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择活动状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'startTime',
+      label: '开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择开始时间',
+        showTime: false,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择结束时间',
+        showTime: false,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'userSize',
+      label: '用户数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入用户数量',
+        min: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'limitDuration',
+      label: '限制时长',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入限制时长(小时)',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'totalLimitCount',
+      label: '总限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入总限购数量',
+        min: 0,
+      },
+    },
+    {
+      fieldName: 'singleLimitCount',
+      label: '单次限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入单次限购数量',
+        min: 0,
+      },
+    },
+    {
+      fieldName: 'virtualGroup',
+      label: '虚拟成团',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+    },
+    {
+      // TODO
+      fieldName: 'spuId',
+      label: '拼团商品',
+      component: 'Input',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择活动状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'activityTime',
+      title: '活动时间',
+      minWidth: 210,
+      formatter: ({ row }) => {
+        if (!row.startTime || !row.endTime) return '';
+        return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
+      },
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+        },
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return `¥${(cellValue / 100).toFixed(2)}`;
+      },
+    },
+    {
+      field: 'combinationPrice',
+      title: '拼团价',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        if (!row.products || row.products.length === 0) return '';
+        const combinationPrice = Math.min(
+          ...row.products.map((item: any) => item.combinationPrice),
+        );
+        return `¥${(combinationPrice / 100).toFixed(2)}`;
+      },
+    },
+    {
+      field: 'groupCount',
+      title: '开团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'groupSuccessCount',
+      title: '成团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'recordCount',
+      title: '购买次数',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue b/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
new file mode 100644
index 00000000..4159858c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  closeCombinationActivity,
+  deleteCombinationActivity,
+  getCombinationActivityPage,
+} from '#/api/mall/promotion/combination/combinationActivity';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import CombinationActivityForm from './modules/form.vue';
+
+defineOptions({ name: 'PromotionCombinationActivity' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: CombinationActivityForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建拼团活动 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑拼团活动 */
+function handleEdit(row: MallCombinationActivityApi.CombinationActivity) {
+  formModalApi.setData(row).open();
+}
+
+/** 关闭拼团活动 */
+async function handleClose(
+  row: MallCombinationActivityApi.CombinationActivity,
+) {
+  await confirm('确定关闭该拼团活动吗？');
+  await closeCombinationActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
+}
+
+/** 删除拼团活动 */
+async function handleDelete(
+  row: MallCombinationActivityApi.CombinationActivity,
+) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteCombinationActivity(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCombinationActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCombinationActivityApi.CombinationActivity>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】拼团活动"
+        url="https://doc.iocoder.cn/mall/promotion-combination/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="拼团活动列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['拼团活动']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:combination-activity:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:combination-activity:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '关闭',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:combination-activity:close'],
+              ifShow: row.status === 0,
+              onClick: handleClose.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:combination-activity:delete'],
+              ifShow: row.status !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
new file mode 100644
index 00000000..3d02d550
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createCombinationActivity,
+  getCombinationActivity,
+  updateCombinationActivity,
+} from '#/api/mall/promotion/combination/combinationActivity';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'CombinationActivityForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<MallCombinationActivityApi.CombinationActivity>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['拼团活动'])
+    : $t('ui.actionTitle.create', ['拼团活动']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallCombinationActivityApi.CombinationActivity;
+    try {
+      await (formData.value?.id
+        ? updateCombinationActivity(data)
+        : createCombinationActivity(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data =
+      modalApi.getData<MallCombinationActivityApi.CombinationActivity>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getCombinationActivity(data.id as number);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/5" :title="getTitle">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/record/data.ts b/apps/web-ele/src/views/mall/promotion/combination/record/data.ts
new file mode 100644
index 00000000..3a508217
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/record/data.ts
@@ -0,0 +1,177 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'status',
+      label: '拼团状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择拼团状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始时间', '结束时间'],
+        clearable: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '拼团编号',
+      minWidth: 80,
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+      minWidth: 100,
+    },
+    {
+      field: 'headId',
+      title: '开团团长',
+      minWidth: 100,
+    },
+    {
+      field: 'picUrl',
+      title: '拼团商品图',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '拼团商品',
+      minWidth: 120,
+    },
+    {
+      field: 'activityName',
+      title: '拼团活动',
+      minWidth: 140,
+    },
+    {
+      field: 'userSize',
+      title: '几人团',
+      minWidth: 80,
+    },
+    {
+      field: 'userCount',
+      title: '参与人数',
+      minWidth: 80,
+    },
+    {
+      field: 'createTime',
+      title: '参团时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'status',
+      title: '拼团状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 用户列表表格列配置 */
+export function useUserGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 80,
+    },
+    {
+      field: 'avatar',
+      title: '用户头像',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '用户昵称',
+      minWidth: 100,
+    },
+    {
+      field: 'headId',
+      title: '开团团长',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return cellValue === 0 ? '团长' : '团员';
+      },
+    },
+    {
+      field: 'createTime',
+      title: '参团时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'status',
+      title: '拼团状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/combination/record/index.vue b/apps/web-ele/src/views/mall/promotion/combination/record/index.vue
new file mode 100644
index 00000000..24b4a3ed
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/record/index.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCombinationRecordPage } from '#/api/mall/promotion/combination/combinationRecord';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import CombinationUserList from './modules/list.vue';
+
+defineOptions({ name: 'PromotionCombinationRecord' });
+
+const [UserListModal, userListModalApi] = useVbenModal({
+  connectedComponent: CombinationUserList,
+  destroyOnClose: true,
+});
+
+/** 查看拼团用户 */
+function handleViewUsers(row: any) {
+  userListModalApi.setData({ recordId: row.id }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCombinationRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】拼团活动"
+        url="https://doc.iocoder.cn/mall/promotion-combination/"
+      />
+    </template>
+
+    <UserListModal />
+
+    <Grid table-title="拼团记录列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看成员',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleViewUsers.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/record/modules/list.vue b/apps/web-ele/src/views/mall/promotion/combination/record/modules/list.vue
new file mode 100644
index 00000000..459cd34d
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/record/modules/list.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCombinationRecordPage } from '#/api/mall/promotion/combination/combinationRecord';
+
+import { useUserGridColumns } from '../data';
+
+defineOptions({ name: 'CombinationUserList' });
+
+const headId = ref<number>();
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      headId.value = undefined;
+      return;
+    }
+    const data = modalApi.getData<{ headId: number }>();
+    if (data?.headId) {
+      headId.value = data.headId;
+    }
+  },
+});
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useUserGridColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          // 暂时返回空数据，待API实现后替换
+          return await getCombinationRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            headId: headId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+const getTitle = computed(() => {
+  return `拼团成员列表 (拼团ID: ${headId.value || ''})`;
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Grid class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/data.ts b/apps/web-ele/src/views/mall/promotion/coupon/data.ts
new file mode 100644
index 00000000..36c9fe71
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/coupon/data.ts
@@ -0,0 +1,129 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+import { discountFormat } from './formatter';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'nickname',
+      label: '会员昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入会员昵称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '领取时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'nickname',
+      title: '会员昵称',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '优惠券名称',
+      minWidth: 140,
+    },
+    {
+      field: 'productScope',
+      title: '类型',
+      minWidth: 110,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
+      },
+    },
+    {
+      field: 'discountType',
+      title: '优惠',
+      minWidth: 110,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
+      },
+    },
+    {
+      field: 'discountPrice',
+      title: '优惠力度',
+      minWidth: 110,
+      formatter: ({ row }) => {
+        return discountFormat(row);
+      },
+    },
+    {
+      field: 'takeType',
+      title: '领取方式',
+      minWidth: 110,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 110,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_COUPON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '领取时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'useTime',
+      title: '使用时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 获取状态选项卡配置 */
+export function getStatusTabs() {
+  const tabs = [
+    {
+      label: '全部',
+      value: 'all',
+    },
+  ];
+
+  // 添加字典状态选项
+  const statusOptions = getDictOptions(DICT_TYPE.PROMOTION_COUPON_STATUS);
+  for (const option of statusOptions) {
+    tabs.push({
+      label: option.label,
+      value: String(option.value),
+    });
+  }
+
+  return tabs;
+}
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/formatter.ts b/apps/web-ele/src/views/mall/promotion/coupon/formatter.ts
new file mode 100644
index 00000000..41e6ec37
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/coupon/formatter.ts
@@ -0,0 +1,65 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { floatToFixed2, formatDate } from '@vben/utils';
+
+import {
+  CouponTemplateValidityTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '#/utils';
+
+// 格式化【优惠金额/折扣】
+export function discountFormat(row: MallCouponTemplateApi.CouponTemplate) {
+  if (row.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+    return `¥${floatToFixed2(row.discountPrice)}`;
+  }
+  if (row.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+    return `${row.discountPercent}%`;
+  }
+  return `未知【${row.discountType}】`;
+}
+
+// 格式化【领取上限】
+export function takeLimitCountFormat(
+  row: MallCouponTemplateApi.CouponTemplate,
+) {
+  if (row.takeLimitCount) {
+    if (row.takeLimitCount === -1) {
+      return '无领取限制';
+    }
+    return `${row.takeLimitCount} 张/人`;
+  } else {
+    return ' ';
+  }
+}
+
+// 格式化【有效期限】
+export function validityTypeFormat(row: MallCouponTemplateApi.CouponTemplate) {
+  if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
+    return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`;
+  }
+  if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
+    return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`;
+  }
+  return `未知【${row.validityType}】`;
+}
+
+// 格式化【totalCount】
+export function totalCountFormat(row: MallCouponTemplateApi.CouponTemplate) {
+  if (row.totalCount === -1) {
+    return '不限制';
+  }
+  return row.totalCount;
+}
+
+// 格式化【剩余数量】
+export function remainedCountFormat(row: MallCouponTemplateApi.CouponTemplate) {
+  if (row.totalCount === -1) {
+    return '不限制';
+  }
+  return row.totalCount - row.takeCount;
+}
+
+// 格式化【最低消费】
+export function usePriceFormat(row: MallCouponTemplateApi.CouponTemplate) {
+  return `¥${floatToFixed2(row.usePrice)}`;
+}
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/index.vue b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
new file mode 100644
index 00000000..9ee68569
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCoupon,
+  getCouponPage,
+} from '#/api/mall/promotion/coupon/coupon';
+import { $t } from '#/locales';
+
+import { getStatusTabs, useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'PromotionCoupon' });
+
+const activeTab = ref('all');
+const statusTabs = ref(getStatusTabs());
+
+/** 删除优惠券 */
+async function handleDelete(row: MallCouponApi.Coupon) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteCoupon(row.id as number);
+    ElMessage.success('回收成功');
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** Tab切换 */
+function onTabChange(tabName: string) {
+  activeTab.value = tabName;
+  // 设置状态查询参数
+  const formValues = gridApi.formApi.getValues();
+  const status = tabName === 'all' ? undefined : Number(tabName);
+  gridApi.formApi.setValues({ ...formValues, status });
+  gridApi.query();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const params = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            // Tab状态过滤
+            status:
+              activeTab.value === 'all' ? undefined : Number(activeTab.value),
+          };
+          return await getCouponPage(params);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCouponApi.Coupon>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】优惠劵"
+        url="https://doc.iocoder.cn/mall/promotion-coupon/"
+      />
+    </template>
+
+    <Grid table-title="优惠券列表">
+      <template #top>
+        <Tabs v-model:active-key="activeTab" type="card" @change="onTabChange">
+          <TabPane
+            v-for="tab in statusTabs"
+            :key="tab.value"
+            :tab="tab.label"
+          />
+        </Tabs>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '回收',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:coupon:delete'],
+              popConfirm: {
+                title:
+                  '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts b/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
new file mode 100644
index 00000000..e2359f2d
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
@@ -0,0 +1,252 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+// 格式化函数移到组件内部实现
+import { z } from '#/adapter/form';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+import {
+  discountFormat,
+  remainedCountFormat,
+  takeLimitCountFormat,
+  totalCountFormat,
+  validityTypeFormat,
+} from '../formatter';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '优惠券名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入优惠券名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '优惠券描述',
+      component: 'Textarea',
+    },
+    // TODO
+    {
+      fieldName: 'productScope',
+      label: '优惠类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'takeType',
+      label: '领取方式',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择领取方式',
+        options: getDictOptions(DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'validityType',
+      label: '有效期类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择有效期类型',
+        options: getDictOptions(
+          DICT_TYPE.PROMOTION_COUPON_TEMPLATE_VALIDITY_TYPE,
+          'number',
+        ),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'totalCount',
+      label: '发放数量',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入发放数量',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'takeLimitCount',
+      label: '领取上限',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入领取上限',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '优惠券状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '优惠券名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入优惠券名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'discountType',
+      label: '优惠类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择优惠类型',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '优惠券状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择优惠券状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'name',
+      title: '优惠券名称',
+      minWidth: 140,
+    },
+    {
+      field: 'productScope',
+      title: '类型',
+      minWidth: 130,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
+      },
+    },
+    {
+      field: 'discountType',
+      title: '优惠',
+      minWidth: 110,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
+      },
+    },
+    {
+      field: 'discountPrice',
+      title: '优惠力度',
+      minWidth: 110,
+      formatter: ({ row }) => {
+        return discountFormat(row);
+      },
+    },
+    {
+      field: 'takeType',
+      title: '领取方式',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
+      },
+    },
+    {
+      field: 'validityType',
+      title: '使用时间',
+      minWidth: 180,
+      formatter: ({ row }) => {
+        return validityTypeFormat(row);
+      },
+    },
+    {
+      field: 'totalCount',
+      title: '发放数量',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        return totalCountFormat(row);
+      },
+    },
+    {
+      field: 'remainedCount',
+      title: '剩余数量',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        return remainedCountFormat(row);
+      },
+    },
+    {
+      field: 'takeLimitCount',
+      title: '领取上限',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        return takeLimitCountFormat(row);
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      slots: { default: 'status' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue b/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue
new file mode 100644
index 00000000..43464203
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElLoading, ElMessage, ElSwitch } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCouponTemplate,
+  getCouponTemplatePage,
+  updateCouponTemplateStatus,
+} from '#/api/mall/promotion/coupon/couponTemplate';
+import { CommonStatusEnum } from '#/utils';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'PromotionCouponTemplate' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 编辑优惠券模板 */
+function handleEdit(row: MallCouponTemplateApi.CouponTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 创建优惠券模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 删除优惠券模板 */
+async function handleDelete(row: MallCouponTemplateApi.CouponTemplate) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteCouponTemplate(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: MallCouponTemplateApi.CouponTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 优惠券模板状态修改 */
+async function handleStatusChange(row: MallCouponTemplateApi.CouponTemplate) {
+  const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用';
+  const loadingInstance = ElLoading.service({
+    text: `正在${text}优惠券模板...`,
+    fullscreen: true,
+  });
+  try {
+    await updateCouponTemplateStatus(row.id as number, row.status as 0 | 1);
+    ElMessage.success(`${text}成功`);
+  } catch {
+    // 异常时，需要将 row.status 状态重置回之前的
+    row.status =
+      row.status === CommonStatusEnum.ENABLE
+        ? CommonStatusEnum.DISABLE
+        : CommonStatusEnum.ENABLE;
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCouponTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】优惠劵"
+        url="https://doc.iocoder.cn/mall/promotion-coupon/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="优惠券列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['优惠券模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:coupon-template:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #status="{ row }">
+        <ElSwitch
+          v-model:checked="row.status"
+          :checked-value="CommonStatusEnum.ENABLE"
+          :un-checked-value="CommonStatusEnum.DISABLE"
+          @change="handleStatusChange(row)"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:coupon-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:coupon-template:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue b/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
new file mode 100644
index 00000000..12caa3be
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCouponTemplate,
+  getCouponTemplate,
+  updateCouponTemplate,
+} from '#/api/mall/promotion/coupon/couponTemplate';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallCouponTemplateApi.CouponTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['优惠券模板'])
+    : $t('ui.actionTitle.create', ['优惠券模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallCouponTemplateApi.CouponTemplate;
+    try {
+      await (formData.value?.id
+        ? updateCouponTemplate(data)
+        : createCouponTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallCouponTemplateApi.CouponTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getCouponTemplate(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts b/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
new file mode 100644
index 00000000..dffafe32
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
@@ -0,0 +1,159 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { formatDate } from '@vben/utils';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 表单配置 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择活动状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'startTime',
+      label: '开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择开始时间',
+        showTime: false,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择结束时间',
+        showTime: false,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+    // TODO
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择活动状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'activeTime',
+      label: '活动时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始时间', '结束时间'],
+        clearable: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'activityTime',
+      title: '活动时间',
+      minWidth: 210,
+      formatter: ({ row }) => {
+        if (!row.startTime || !row.endTime) return '';
+        return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
+      },
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue b/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
new file mode 100644
index 00000000..7b8e09fc
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallDiscountActivityApi } from '#/api/mall/promotion/discount/discountActivity';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  closeDiscountActivity,
+  deleteDiscountActivity,
+  getDiscountActivityPage,
+} from '#/api/mall/promotion/discount/discountActivity';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DiscountActivityForm from './modules/form.vue';
+
+defineOptions({ name: 'PromotionDiscountActivity' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: DiscountActivityForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建满减活动 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑满减活动 */
+function handleEdit(row: MallDiscountActivityApi.DiscountActivity) {
+  formModalApi.setData(row).open();
+}
+
+/** 关闭满减活动 */
+async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
+  await confirm('确定关闭该限时折扣活动吗？');
+  await closeDiscountActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
+}
+
+/** 删除满减活动 */
+async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteDiscountActivity(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDiscountActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallDiscountActivityApi.DiscountActivity>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】限时折扣"
+        url="https://doc.iocoder.cn/mall/promotion-discount/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="限时折扣活动列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['限时折扣活动']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:discount-activity:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:discount-activity:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '关闭',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:discount-activity:close'],
+              ifShow: row.status === 0,
+              onClick: handleClose.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:discount-activity:delete'],
+              ifShow: row.status !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
new file mode 100644
index 00000000..cc9c46bb
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { MallDiscountActivityApi } from '#/api/mall/promotion/discount/discountActivity';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createDiscountActivity,
+  getDiscountActivity,
+  updateDiscountActivity,
+} from '#/api/mall/promotion/discount/discountActivity';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'DiscountActivityForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<MallDiscountActivityApi.DiscountActivity>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['限时折扣活动'])
+    : $t('ui.actionTitle.create', ['限时折扣活动']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallDiscountActivityApi.DiscountActivity;
+
+    // 确保必要的默认值
+    if (!data.products) {
+      data.products = [];
+    }
+
+    try {
+      await (formData.value?.id
+        ? updateDiscountActivity(data)
+        : createDiscountActivity(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallDiscountActivityApi.DiscountActivity>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDiscountActivity(data.id as number);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/5" :title="getTitle">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/data.ts b/apps/web-ele/src/views/mall/promotion/diy/page/data.ts
new file mode 100644
index 00000000..554f6829
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/data.ts
@@ -0,0 +1,109 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 表单配置 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '页面名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入页面名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+    {
+      fieldName: 'previewPicUrls',
+      component: 'ImageUpload',
+      label: '预览图',
+      componentProps: {
+        maxNumber: 10,
+        multiple: true,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '页面名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入页面名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始时间', '结束时间'],
+        clearable: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 80,
+    },
+    {
+      field: 'previewPicUrls',
+      title: '预览图',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellImages',
+      },
+    },
+    {
+      field: 'name',
+      title: '页面名称',
+      minWidth: 150,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/index.vue b/apps/web-ele/src/views/mall/promotion/diy/page/index.vue
new file mode 100644
index 00000000..9dc80e5d
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/index.vue
@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
+
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDiyPage, getDiyPagePage } from '#/api/mall/promotion/diy/page';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DiyPageForm from './modules/form.vue';
+
+defineOptions({ name: 'PromotionDiyPage' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: DiyPageForm,
+  destroyOnClose: true,
+});
+
+const { push } = useRouter();
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建DIY页面 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑DIY页面 */
+function handleEdit(row: MallDiyPageApi.DiyPage) {
+  formModalApi.setData(row).open();
+}
+
+/** 装修页面 */
+function handleDecorate(row: MallDiyPageApi.DiyPage) {
+  // 跳转到装修页面
+  push({ name: 'DiyPageDecorate', params: { id: row.id } });
+}
+
+/** 删除DIY页面 */
+async function handleDelete(row: MallDiyPageApi.DiyPage) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteDiyPage(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDiyPagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallDiyPageApi.DiyPage>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】商城装修"
+        url="https://doc.iocoder.cn/mall/diy/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="装修页面列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['装修页面']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:diy-page:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '装修',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:diy-page:update'],
+              onClick: handleDecorate.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:diy-page:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:diy-page:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/modules/form.vue b/apps/web-ele/src/views/mall/promotion/diy/page/modules/form.vue
new file mode 100644
index 00000000..f2b9fd24
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/modules/form.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createDiyPage,
+  getDiyPage,
+  updateDiyPage,
+} from '#/api/mall/promotion/diy/page';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallDiyPageApi.DiyPage>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['装修页面'])
+    : $t('ui.actionTitle.create', ['装修页面']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallDiyPageApi.DiyPage;
+
+    // 确保必要的默认值
+    if (!data.previewPicUrls) {
+      data.previewPicUrls = [];
+    }
+
+    try {
+      await (formData.value?.id ? updateDiyPage(data) : createDiyPage(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallDiyPageApi.DiyPage>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDiyPage(data.id as number);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/data.ts b/apps/web-ele/src/views/mall/promotion/diy/template/data.ts
new file mode 100644
index 00000000..0c46faf7
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/data.ts
@@ -0,0 +1,120 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '#/utils/dict';
+
+/** 表单配置 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+    {
+      fieldName: 'previewPicUrls',
+      component: 'ImageUpload',
+      label: '预览图',
+      componentProps: {
+        maxNumber: 10,
+        multiple: true,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始时间', '结束时间'],
+        clearable: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 80,
+    },
+    {
+      field: 'previewPicUrls',
+      title: '预览图',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellImages',
+      },
+    },
+    {
+      field: 'name',
+      title: '模板名称',
+      minWidth: 150,
+    },
+    {
+      field: 'used',
+      title: '是否使用',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 250,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
new file mode 100644
index 00000000..2d43b97f
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
+
+import { useRouter } from 'vue-router';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDiyTemplate,
+  getDiyTemplatePage,
+  useDiyTemplate,
+} from '#/api/mall/promotion/diy/template';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DiyTemplateForm from './modules/form.vue';
+
+defineOptions({ name: 'PromotionDiyTemplate' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: DiyTemplateForm,
+  destroyOnClose: true,
+});
+
+const router = useRouter();
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建DIY模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑DIY模板 */
+function handleEdit(row: MallDiyTemplateApi.DiyTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 装修模板 */
+function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
+  // 跳转到装修页面
+  router.push({ name: 'DiyTemplateDecorate', params: { id: row.id } });
+}
+
+/** 使用模板 */
+async function handleUse(row: MallDiyTemplateApi.DiyTemplate) {
+  await confirm(`是否使用模板"${row.name}"?`);
+  // 发起删除
+  await useDiyTemplate(row.id as number);
+  ElMessage.success('使用成功');
+  onRefresh();
+}
+
+/** 删除DIY模板 */
+async function handleDelete(row: MallDiyTemplateApi.DiyTemplate) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteDiyTemplate(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDiyTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallDiyTemplateApi.DiyTemplate>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】商城装修"
+        url="https://doc.iocoder.cn/mall/diy/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="装修模板列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['装修模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:diy-template:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '装修',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:diy-template:update'],
+              onClick: handleDecorate.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:diy-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '使用',
+              type: 'primary',
+              link: true,
+              auth: ['promotion:diy-template:use'],
+              ifShow: !row.used,
+              onClick: handleUse.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:diy-template:delete'],
+              ifShow: !row.used,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue b/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue
new file mode 100644
index 00000000..8562c6c5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createDiyTemplate,
+  getDiyTemplate,
+  updateDiyTemplate,
+} from '#/api/mall/promotion/diy/template';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+/** 提交表单 */
+const emit = defineEmits(['success']);
+
+const formData = ref<MallDiyTemplateApi.DiyTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['装修模板'])
+    : $t('ui.actionTitle.create', ['装修模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallDiyTemplateApi.DiyTemplate;
+
+    // 确保必要的默认值
+    if (!data.previewPicUrls) {
+      data.previewPicUrls = [];
+    }
+    if (data.used === undefined) {
+      data.used = false;
+    }
+
+    try {
+      await (formData.value?.id
+        ? updateDiyTemplate(data)
+        : createDiyTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallDiyTemplateApi.DiyTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDiyTemplate(data.id as number);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/index.vue b/apps/web-ele/src/views/mall/promotion/kefu/index.vue
new file mode 100644
index 00000000..bfa96fdf
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/index.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+</script>
+
+<template>
+  <Page>
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
+      该功能支持 Vue3 + element-plus 版本！
+    </Button>
+    <br />
+    <Button
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/promotion/kefu/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/promotion/kefu/index
+      代码，pull request 贡献给我们！
+    </Button>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/point/activity/data.ts b/apps/web-ele/src/views/mall/promotion/point/activity/data.ts
new file mode 100644
index 00000000..c8768d7a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/point/activity/data.ts
@@ -0,0 +1,140 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+/** 表单配置 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'spuId',
+      label: '积分商城活动商品',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请选择商品',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择活动状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'point',
+      title: '兑换积分',
+      minWidth: 100,
+    },
+    {
+      field: 'price',
+      title: '兑换金额',
+      minWidth: 100,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 80,
+    },
+    {
+      field: 'totalStock',
+      title: '总库存',
+      minWidth: 80,
+    },
+    {
+      field: 'redeemedQuantity',
+      title: '已兑换数量',
+      minWidth: 100,
+      slots: { default: 'redeemedQuantity' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/point/activity/index.vue b/apps/web-ele/src/views/mall/promotion/point/activity/index.vue
new file mode 100644
index 00000000..dd39fe34
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/point/activity/index.vue
@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  closePointActivity,
+  deletePointActivity,
+  getPointActivityPage,
+} from '#/api/mall/promotion/point';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import PointActivityForm from './modules/form.vue';
+
+defineOptions({ name: 'PromotionPointActivity' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: PointActivityForm,
+  destroyOnClose: true,
+});
+
+/** 获得商品已兑换数量 */
+const getRedeemedQuantity = computed(
+  () => (row: MallPointActivityApi.PointActivity) =>
+    (row.totalStock || 0) - (row.stock || 0),
+);
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建积分活动 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑积分活动 */
+function handleEdit(row: MallPointActivityApi.PointActivity) {
+  formModalApi.setData(row).open();
+}
+
+/** 关闭积分活动 */
+async function handleClose(row: MallPointActivityApi.PointActivity) {
+  await confirm('确认关闭该积分商城活动吗？');
+  await closePointActivity(row.id);
+  ElMessage.success('关闭成功');
+  onRefresh();
+}
+
+/** 删除积分活动 */
+async function handleDelete(row: MallPointActivityApi.PointActivity) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.spuName]),
+    fullscreen: true,
+  });
+  try {
+    await deletePointActivity(row.id);
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPointActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallPointActivityApi.PointActivity>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】积分商城活动"
+        url="https://doc.iocoder.cn/mall/promotion-point/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="积分商城活动列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['积分活动']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:point-activity:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #redeemedQuantity="{ row }">
+        {{ getRedeemedQuantity(row) }}
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:point-activity:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '关闭',
+              type: 'danger',
+              link: true,
+              auth: ['promotion:point-activity:close'],
+              ifShow: row.status === 0,
+              onClick: handleClose.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:point-activity:delete'],
+              ifShow: row.status !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
new file mode 100644
index 00000000..3df1c2b5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createPointActivity,
+  getPointActivity,
+  updatePointActivity,
+} from '#/api/mall/promotion/point';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallPointActivityApi.PointActivity>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['积分活动'])
+    : $t('ui.actionTitle.create', ['积分活动']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallPointActivityApi.PointActivity;
+
+    // 确保必要的默认值
+    if (!data.products) {
+      data.products = [];
+    }
+    if (!data.sort) {
+      data.sort = 0;
+    }
+
+    try {
+      await (formData.value?.id
+        ? updatePointActivity(data)
+        : createPointActivity(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallPointActivityApi.PointActivity>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPointActivity(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/5" :title="getTitle">
+    <div class="p-4">
+      <div class="mb-4 rounded border border-yellow-200 bg-yellow-50 p-4">
+        <p class="text-yellow-800">
+          <strong>注意：</strong>
+          积分活动涉及复杂的商品选择和SKU配置，当前为简化版本。
+          完整的商品选择和积分配置功能需要在后续版本中完善。
+        </p>
+      </div>
+      <Form />
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts b/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts
new file mode 100644
index 00000000..c145669b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts
@@ -0,0 +1,166 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 表单配置 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'startTime',
+      label: '开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择开始时间',
+        showTime: true,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD HH:mm:ss',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择结束时间',
+        showTime: true,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD HH:mm:ss',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'conditionType',
+      label: '条件类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'productScope',
+      label: '商品范围',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择活动状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '活动时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['活动开始日期', '活动结束日期'],
+        clearable: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'productScope',
+      title: '活动范围',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
+      },
+    },
+    {
+      field: 'startTime',
+      title: '活动开始时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '活动结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
new file mode 100644
index 00000000..a6a3d817
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  closeRewardActivity,
+  deleteRewardActivity,
+  getRewardActivityPage,
+} from '#/api/mall/promotion/reward/rewardActivity';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import RewardActivityForm from './modules/form.vue';
+
+defineOptions({ name: 'PromotionRewardActivity' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: RewardActivityForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建满减送活动 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑满减送活动 */
+function handleEdit(row: MallRewardActivityApi.RewardActivity) {
+  formModalApi.setData(row).open();
+}
+
+/** 关闭活动 */
+async function handleClose(row: MallRewardActivityApi.RewardActivity) {
+  await confirm('确认关闭该满减送活动吗？');
+  await closeRewardActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
+}
+
+/** 删除活动 */
+async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteRewardActivity(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRewardActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallRewardActivityApi.RewardActivity>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】满减送"
+        url="https://doc.iocoder.cn/mall/promotion-record/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="满减送活动列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['满减送活动']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:reward-activity:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:reward-activity:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '关闭',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:reward-activity:close'],
+              ifShow: row.status === 0,
+              onClick: handleClose.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:reward-activity:delete'],
+              ifShow: row.status !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
new file mode 100644
index 00000000..f96d2940
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createRewardActivity,
+  getReward,
+  updateRewardActivity,
+} from '#/api/mall/promotion/reward/rewardActivity';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallRewardActivityApi.RewardActivity>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['满减送活动'])
+    : $t('ui.actionTitle.create', ['满减送活动']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallRewardActivityApi.RewardActivity;
+
+    // 确保必要的默认值
+    if (!data.rules) {
+      data.rules = [];
+    }
+
+    try {
+      await (formData.value?.id
+        ? updateRewardActivity(data)
+        : createRewardActivity(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getReward(data.id as number);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-4/5" :title="getTitle">
+    <Form />
+
+    <!-- 简化说明 -->
+    <div class="mt-4 rounded bg-blue-50 p-4">
+      <p class="text-sm text-blue-600">
+        <strong>说明：</strong> 当前为简化版本的满减送活动表单。
+        复杂的商品选择、优惠规则配置等功能已简化，仅保留基础字段配置。
+        如需完整功能，请参考原始 Element UI 版本的实现。
+      </p>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts b/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts
new file mode 100644
index 00000000..2d294e8e
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts
@@ -0,0 +1,126 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择活动状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'configIds',
+      title: '秒杀时段',
+      minWidth: 220,
+      slots: { default: 'configIds' },
+    },
+    {
+      field: 'startTime',
+      title: '活动时间',
+      minWidth: 210,
+      slots: { default: 'timeRange' },
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: ({ row }) => `￥${(row.marketPrice / 100).toFixed(2)}`,
+    },
+    {
+      field: 'seckillPrice',
+      title: '秒杀价',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        if (!(row.products || row.products.length === 0)) {
+          return '￥0.00';
+        }
+        const seckillPrice = Math.min(
+          ...row.products.map((item: any) => item.seckillPrice),
+        );
+        return `￥${(seckillPrice / 100).toFixed(2)}`;
+      },
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      align: 'center',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      align: 'center',
+      minWidth: 80,
+    },
+    {
+      field: 'totalStock',
+      title: '总库存',
+      align: 'center',
+      minWidth: 80,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      align: 'center',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      align: 'center',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/formatter.ts b/apps/web-ele/src/views/mall/promotion/seckill/activity/formatter.ts
new file mode 100644
index 00000000..db1bce54
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/formatter.ts
@@ -0,0 +1,34 @@
+import { formatDate } from '@vben/utils';
+
+// 全局变量，用于存储配置列表
+let configList: any[] = [];
+
+/** 设置配置列表 */
+export function setConfigList(list: any[]) {
+  configList = list;
+}
+
+/** 格式化配置名称 */
+export function formatConfigNames(configId: number): string {
+  const config = configList.find((item) => item.id === configId);
+  return config === null || config === undefined
+    ? ''
+    : `${config.name}[${config.startTime} ~ ${config.endTime}]`;
+}
+
+/** 格式化秒杀价格 */
+export function formatSeckillPrice(products: any[]): string {
+  if (!products || products.length === 0) {
+    return '￥0.00';
+  }
+  const seckillPrice = Math.min(...products.map((item) => item.seckillPrice));
+  return `￥${(seckillPrice / 100).toFixed(2)}`;
+}
+
+/** 格式化活动时间范围 */
+export function formatTimeRange(
+  startTime: Date | string,
+  endTime: Date | string,
+): string {
+  return `${formatDate(startTime, 'YYYY-MM-DD')} ~ ${formatDate(endTime, 'YYYY-MM-DD')}`;
+}
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue b/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
new file mode 100644
index 00000000..7ad53573
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { onMounted } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElLoading, ElMessage, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  closeSeckillActivity,
+  deleteSeckillActivity,
+  getSeckillActivityPage,
+} from '#/api/mall/promotion/seckill/seckillActivity';
+import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import { formatConfigNames, formatTimeRange, setConfigList } from './formatter';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'SeckillActivity' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 编辑活动 */
+function handleEdit(row: MallSeckillActivityApi.SeckillActivity) {
+  formModalApi.setData(row).open();
+}
+
+/** 创建活动 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 关闭活动 */
+async function handleClose(row: MallSeckillActivityApi.SeckillActivity) {
+  await confirm('确认关闭该秒杀活动吗？');
+  await closeSeckillActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
+}
+
+/** 删除活动 */
+async function handleDelete(row: MallSeckillActivityApi.SeckillActivity) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteSeckillActivity(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSeckillActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    cellConfig: {
+      height: 250,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallSeckillActivityApi.SeckillActivity>,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  // 获得秒杀时间段配置
+  const configList = await getSimpleSeckillConfigList();
+  setConfigList(configList);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】秒杀活动"
+        url="https://doc.iocoder.cn/mall/promotion-seckill/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="秒杀活动列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['秒杀活动']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:seckill-activity:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+
+      <template #configIds="{ row }">
+        <div class="flex flex-wrap gap-1">
+          <ElTag
+            v-for="(configId, index) in row.configIds"
+            :key="index"
+            class="mr-1"
+          >
+            {{ formatConfigNames(configId) }}
+          </ElTag>
+        </div>
+      </template>
+
+      <template #timeRange="{ row }">
+        {{ formatTimeRange(row.startTime, row.endTime) }}
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:seckill-activity:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '关闭',
+              type: 'danger',
+              link: true,
+              auth: ['promotion:seckill-activity:close'],
+              ifShow: row.status === 0,
+              onClick: handleClose.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              auth: ['promotion:seckill-activity:delete'],
+              ifShow: row.status !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue
new file mode 100644
index 00000000..fcdaefe2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createSeckillActivity,
+  getSeckillActivity,
+  updateSeckillActivity,
+} from '#/api/mall/promotion/seckill/seckillActivity';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallSeckillActivityApi.SeckillActivity>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['秒杀活动'])
+    : $t('ui.actionTitle.create', ['秒杀活动']);
+});
+
+// 简化的表单配置，实际项目中应该有完整的字段配置
+const formSchema = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      triggerFields: [''],
+      show: () => false,
+    },
+  },
+  {
+    fieldName: 'name',
+    label: '活动名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入活动名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'status',
+    label: '活动状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择活动状态',
+      options: [
+        { label: '开启', value: 0 },
+        { label: '关闭', value: 1 },
+      ],
+    },
+    rules: 'required',
+  },
+];
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: formSchema,
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallSeckillActivityApi.SeckillActivity;
+    try {
+      await (formData.value?.id
+        ? updateSeckillActivity(data)
+        : createSeckillActivity(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallSeckillActivityApi.SeckillActivity>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSeckillActivity(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/config/data.ts b/apps/web-ele/src/views/mall/promotion/seckill/config/data.ts
new file mode 100644
index 00000000..845169b6
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/config/data.ts
@@ -0,0 +1,151 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSeckillConfigApi } from '#/api/mall/promotion/seckill/seckillConfig';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '秒杀时段名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'startTime',
+      label: '开始时间点',
+      component: 'TimePicker',
+      componentProps: {
+        format: 'HH:mm',
+        valueFormat: 'HH:mm',
+        placeholder: '请选择开始时间点',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间点',
+      component: 'TimePicker',
+      componentProps: {
+        format: 'HH:mm',
+        valueFormat: 'HH:mm',
+        placeholder: '请选择结束时间点',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sliderPicUrls',
+      label: '秒杀轮播图',
+      component: 'ImageUpload',
+      componentProps: {
+        multiple: true,
+        maxNumber: 5,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '秒杀时段名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入秒杀时段名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns<T = MallSeckillConfigApi.SeckillConfig>(
+  onStatusChange?: (
+    newStatus: number,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '秒杀时段名称',
+      field: 'name',
+      minWidth: 200,
+    },
+    {
+      title: '开始时间点',
+      field: 'startTime',
+      minWidth: 120,
+    },
+    {
+      title: '结束时间点',
+      field: 'endTime',
+      minWidth: 120,
+    },
+    {
+      title: '秒杀轮播图',
+      field: 'sliderPicUrls',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellImages',
+      },
+    },
+    {
+      title: '活动状态',
+      field: 'status',
+      minWidth: 100,
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: 1,
+          checkedChildren: '启用',
+          unCheckedValue: 0,
+          unCheckedChildren: '禁用',
+        },
+      },
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue b/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
new file mode 100644
index 00000000..934c1802
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSeckillConfigApi } from '#/api/mall/promotion/seckill/seckillConfig';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSeckillConfig,
+  getSeckillConfigPage,
+  updateSeckillConfigStatus,
+} from '#/api/mall/promotion/seckill/seckillConfig';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建秒杀时段 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑秒杀时段 */
+function handleEdit(row: MallSeckillConfigApi.SeckillConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除秒杀时段 */
+async function handleDelete(row: MallSeckillConfigApi.SeckillConfig) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteSeckillConfig(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 修改状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: MallSeckillConfigApi.SeckillConfig,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    // 二次确认
+    const text = row.status === 0 ? '启用' : '停用';
+    confirm({
+      content: `确认要${text + row.name}吗?`,
+    })
+      .then(async () => {
+        // 更新状态
+        const res = await updateSeckillConfigStatus(row.id, newStatus);
+        if (res) {
+          // 提示并返回成功
+          ElMessage.success(`${text}成功`);
+          resolve(true);
+        } else {
+          reject(new Error('操作失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSeckillConfigPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallSeckillConfigApi.SeckillConfig>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="秒杀时段列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['秒杀时段']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['promotion:seckill-config:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:seckill-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:seckill-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/config/modules/form.vue b/apps/web-ele/src/views/mall/promotion/seckill/config/modules/form.vue
new file mode 100644
index 00000000..ce57d7c8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/config/modules/form.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { MallSeckillConfigApi } from '#/api/mall/promotion/seckill/seckillConfig';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createSeckillConfig,
+  getSeckillConfig,
+  updateSeckillConfig,
+} from '#/api/mall/promotion/seckill/seckillConfig';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallSeckillConfigApi.SeckillConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['秒杀时段'])
+    : $t('ui.actionTitle.create', ['秒杀时段']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallSeckillConfigApi.SeckillConfig;
+    try {
+      await (formData.value?.id
+        ? updateSeckillConfig(data)
+        : createSeckillConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallSeckillConfigApi.SeckillConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSeckillConfig(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue b/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
new file mode 100644
index 00000000..4a29d1e5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { fenToYuan } from '@vben/utils';
+
+import { ElRow } from 'element-plus';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const areaStatisticsList = ref<MallMemberStatisticsApi.AreaStatistics[]>([]); // 省份会员统计
+const areaChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    formatter: (params: any) => {
+      return `${params?.data?.areaName || params?.name}<br/>
+会员数量：${params?.data?.userCount || 0}<br/>
+订单创建数量：${params?.data?.orderCreateUserCount || 0}<br/>
+订单支付数量：${params?.data?.orderPayUserCount || 0}<br/>
+订单支付金额：${fenToYuan(params?.data?.orderPayPrice || 0)}`;
+    },
+  },
+  visualMap: {
+    text: ['高', '低'],
+    realtime: false,
+    calculable: true,
+    top: 'middle',
+    inRange: {
+      color: ['#fff', '#3b82f6'],
+    },
+    min: 0,
+    max: 0,
+  },
+  series: [
+    {
+      name: '会员地域分布',
+      type: 'map' as const,
+      map: 'china',
+      roam: false,
+      selectedMode: false,
+      data: [] as any[],
+    },
+  ],
+});
+
+/** 按照省份，查询会员统计列表 */
+const getMemberAreaStatisticsList = async () => {
+  areaStatisticsList.value =
+    await MemberStatisticsApi.getMemberAreaStatisticsList();
+  let min = 0;
+  let max = 0;
+
+  const mapData = areaStatisticsList.value.map((item) => {
+    const payUserCount = item?.orderPayUserCount || 0;
+    min = Math.min(min, payUserCount);
+    max = Math.max(max, payUserCount);
+    return { ...item, name: item.areaName, value: payUserCount };
+  });
+
+  // 使用类型断言处理赋值
+  (areaChartOptions.series[0] as any).data = mapData;
+  areaChartOptions.visualMap.min = min;
+  areaChartOptions.visualMap.max = max;
+};
+
+// 格式化为元
+const fenToYuanFormat = (row: any, column: any, cellValue: any) => {
+  return fenToYuan(cellValue);
+};
+
+onMounted(async () => {
+  await getMemberAreaStatisticsList();
+  renderEcharts(areaChartOptions);
+});
+</script>
+
+<template>
+  <AnalysisChartCard title="会员地域分布">
+    <ElRow>
+      <ElCol :span="12">
+        <EchartsUI ref="chartRef" />
+      </ElCol>
+      <ElCol :span="12">
+        <el-table :data="areaStatisticsList" :height="300">
+          <el-table-column
+            :sort-method="
+              (obj1: any, obj2: any) =>
+                obj1.areaName.localeCompare(obj2.areaName, 'zh-CN')
+            "
+            align="center"
+            label="省份"
+            min-width="80"
+            prop="areaName"
+            show-overflow-tooltip
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="会员数量"
+            min-width="105"
+            prop="userCount"
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="订单创建数量"
+            min-width="135"
+            prop="orderCreateUserCount"
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="订单支付数量"
+            min-width="135"
+            prop="orderPayUserCount"
+            sortable
+          />
+          <el-table-column
+            :formatter="fenToYuanFormat"
+            align="center"
+            label="订单支付金额"
+            min-width="135"
+            prop="orderPayPrice"
+            sortable
+          />
+        </el-table>
+      </ElCol>
+    </ElRow>
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue b/apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue
new file mode 100644
index 00000000..84b8c7e6
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+import type { DictDataType } from '#/utils/dict';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const sexChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    confine: true,
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
+  },
+  legend: {
+    orient: 'vertical' as const,
+    left: 'right',
+  },
+  roseType: 'area',
+  series: [
+    {
+      name: '会员性别',
+      type: 'pie' as const,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [] as any[],
+    },
+  ],
+});
+
+/** 按照性别，查询会员统计列表 */
+const getMemberSexStatisticsList = async () => {
+  const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+  const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
+  dictDataList.push({ label: '未知', value: null } as any);
+  (sexChartOptions.series[0] as any).data = dictDataList.map(
+    (dictData: DictDataType) => {
+      const userCount = list.find(
+        (item: MallMemberStatisticsApi.SexStatistics) =>
+          item.sex === dictData.value,
+      )?.userCount;
+      return {
+        name: dictData.label,
+        value: userCount || 0,
+      };
+    },
+  );
+};
+
+onMounted(async () => {
+  await getMemberSexStatisticsList();
+  renderEcharts(sexChartOptions);
+});
+</script>
+
+<template>
+  <AnalysisChartCard title="会员性别分布">
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/member/index.vue b/apps/web-ele/src/views/mall/statistics/member/index.vue
new file mode 100644
index 00000000..c98ec1b2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/member/index.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member'; // 会员统计数据
+import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
+
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member'; // 会员统计数据
+import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
+import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
+import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
+
+import MemberRegionCard from './components/member-region-card.vue';
+import MemberSexCard from './components/member-sex-card.vue';
+
+const summary = ref<MallMemberStatisticsApi.Summary>();
+
+const overviewItems = ref<AnalysisOverviewIconItem[]>([]);
+const loadOverview = async () => {
+  summary.value = await MemberStatisticsApi.getMemberSummary();
+  overviewItems.value = [
+    {
+      icon: 'fa-solid:users', // 自定义立体用户群组图标 - 累计会员数
+      title: '累计会员数',
+      value: summary.value?.userCount || 0,
+      iconBgColor: 'text-blue-500',
+      iconColor: 'bg-blue-100',
+    },
+    {
+      icon: 'fa-solid:user', // 自定义立体信用卡图标 - 累计充值人数
+      title: '累计充值人数',
+      value: summary.value?.rechargeUserCount || 0,
+      iconBgColor: 'text-purple-500',
+      iconColor: 'bg-purple-100',
+    },
+    {
+      icon: 'fa-solid:money-check-alt', // 自定义立体钞票图标 - 累计充值金额
+      title: '累计充值金额',
+      value: Number(fenToYuan(summary.value?.rechargePrice || 0)),
+      iconBgColor: 'text-yellow-500',
+      iconColor: 'bg-yellow-100',
+      prefix: '￥',
+      decimals: 2,
+    },
+    {
+      icon: 'fa-solid:yen-sign', // 自定义立体用户添加图标 - 今日会员注册量
+      title: '累计消费金额',
+      value: Number(fenToYuan(summary.value?.expensePrice || 0)),
+      iconBgColor: 'text-green-500',
+      iconColor: 'bg-green-100',
+      prefix: '￥',
+      decimals: 2,
+    },
+  ];
+};
+
+onMounted(async () => {
+  loadOverview();
+});
+</script>
+
+<template>
+  <Page>
+    <DocAlert
+      title="【统计】会员、商品、交易统计"
+      url="https://doc.iocoder.cn/mall/statistics/"
+    />
+    <div class="mt-5 w-full md:flex">
+      <AnalysisOverviewIcon
+        v-model:model-value="overviewItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+      />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberRegionCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberSexCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue b/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue
new file mode 100644
index 00000000..09ba064c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { buildSortingField, floatToFixed2 } from '@vben/utils';
+
+import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
+
+/** 商品排行 */
+defineOptions({ name: 'ProductRank' });
+
+// 格式化：访客-支付转化率
+const formatConvertRate = (row: MallProductStatisticsApi.ProductStatistics) => {
+  return `${row.browseConvertPercent}%`;
+};
+
+const handleSortChange = (params: any) => {
+  queryParams.sortingFields = [buildSortingField(params)];
+  getSpuList();
+};
+
+const handleDateRangeChange = (times: any[]) => {
+  queryParams.times = times as [];
+  getSpuList();
+};
+
+const shortcutDateRangePicker = ref();
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  times: [],
+  sortingFields: {},
+});
+const loading = ref(false); // 列表的加载中
+const total = ref(0); // 列表的总页数
+const list = ref<MallProductStatisticsApi.ProductStatistics[]>([]); // 列表的数据
+
+/** 查询商品列表 */
+const getSpuList = async () => {
+  loading.value = true;
+  try {
+    const data =
+      await ProductStatisticsApi.getProductStatisticsRankPage(queryParams);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 格式化金额【分转元】
+// @ts-ignore
+const fenToYuanFormat = (_, __, cellValue: any, ___) => {
+  return `￥${floatToFixed2(cellValue)}`;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getSpuList();
+});
+</script>
+<template>
+  <AnalysisChartCard title="商品排行">
+    <template #header-suffix>
+      <ShortcutDateRangePicker
+        ref="shortcutDateRangePicker"
+        @change="handleDateRangeChange"
+      />
+    </template>
+    <!-- 排行列表 -->
+    <el-table v-loading="loading" :data="list" @sort-change="handleSortChange">
+      <el-table-column label="商品 ID" prop="spuId" min-width="70" />
+      <el-table-column label="商品图片" align="center" prop="picUrl" width="80">
+        <template #default="{ row }">
+          <el-image
+            :src="row.picUrl"
+            :preview-src-list="[row.picUrl]"
+            class="h-30px w-30px"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="商品名称"
+        prop="name"
+        min-width="200"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="浏览量"
+        prop="browseCount"
+        min-width="90"
+        sortable="custom"
+      />
+      <el-table-column
+        label="访客数"
+        prop="browseUserCount"
+        min-width="90"
+        sortable="custom"
+      />
+      <el-table-column
+        label="加购件数"
+        prop="cartCount"
+        min-width="105"
+        sortable="custom"
+      />
+      <el-table-column
+        label="下单件数"
+        prop="orderCount"
+        min-width="105"
+        sortable="custom"
+      />
+      <el-table-column
+        label="支付件数"
+        prop="orderPayCount"
+        min-width="105"
+        sortable="custom"
+      />
+      <el-table-column
+        label="支付金额"
+        prop="orderPayPrice"
+        min-width="105"
+        sortable="custom"
+        :formatter="fenToYuanFormat"
+      />
+      <el-table-column
+        label="收藏数"
+        prop="favoriteCount"
+        min-width="90"
+        sortable="custom"
+      />
+      <el-table-column
+        label="访客-支付转化率(%)"
+        prop="browseConvertPercent"
+        min-width="180"
+        sortable="custom"
+        :formatter="formatConvertRate"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getSpuList"
+    />
+  </AnalysisChartCard>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue b/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue
new file mode 100644
index 00000000..41e7a94a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue
@@ -0,0 +1,331 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
+import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
+import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
+
+import { reactive, ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import {
+  calculateRelativeRate,
+  downloadFileFromBlobPart,
+  fenToYuan,
+  formatDate,
+  isSameDay,
+} from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import AnalysisChartCard from '#/views/mall/home/components/analysis-chart-card.vue';
+import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
+import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
+
+/** 商品概况 */
+defineOptions({ name: 'ProductSummary' });
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+const trendLoading = ref(true); // 商品状态加载中
+const exportLoading = ref(false); // 导出的加载中
+const trendSummary =
+  ref<MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>>(); // 商品状况统计数据
+const shortcutDateRangePicker = ref();
+
+/** 折线图配置 */
+const lineChartOptions = reactive({
+  dataset: {
+    dimensions: [
+      'time',
+      'browseCount',
+      'browseUserCount',
+      'orderPayPrice',
+      'afterSaleRefundPrice',
+    ],
+    source: [] as MallProductStatisticsApi.ProductStatistics[],
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [
+    {
+      name: '商品浏览量',
+      type: 'line',
+      smooth: true,
+      itemStyle: { color: '#B37FEB' },
+    },
+    {
+      name: '商品访客数',
+      type: 'line',
+      smooth: true,
+      itemStyle: { color: '#FFAB2B' },
+    },
+    {
+      name: '支付金额',
+      type: 'bar',
+      smooth: true,
+      yAxisIndex: 1,
+      itemStyle: { color: '#1890FF' },
+    },
+    {
+      name: '退款金额',
+      type: 'bar',
+      smooth: true,
+      yAxisIndex: 1,
+      itemStyle: { color: '#00C050' },
+    },
+  ],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false, // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] as const, // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '商品状况' }, // 保存为图片
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category' as const,
+    boundaryGap: true,
+    axisTick: {
+      show: false,
+    },
+  },
+  yAxis: [
+    {
+      type: 'value' as const,
+      name: '金额',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: '#7F8B9C',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#F5F7F9',
+        },
+      },
+    },
+    {
+      type: 'value' as const,
+      name: '数量',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: '#7F8B9C',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#F5F7F9',
+        },
+      },
+    },
+  ],
+});
+
+/** 处理商品状况查询 */
+const getProductTrendData = async () => {
+  trendLoading.value = true;
+  // 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
+  const times = shortcutDateRangePicker.value.times;
+  if (isSameDay(times[0], times[1])) {
+    // 前天
+    times[0] = formatDate(dayjs(times[0]).subtract(1, 'd').toDate());
+  }
+  // 查询数据
+  await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
+  renderEcharts(lineChartOptions as unknown as echarts.EChartsOption);
+  loadOverview();
+  trendLoading.value = false;
+};
+
+/** 查询商品状况数据统计 */
+const getProductTrendSummary = async () => {
+  const times = shortcutDateRangePicker.value.times;
+  trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({
+    times,
+  });
+};
+
+/** 查询商品状况数据列表 */
+const getProductStatisticsList = async () => {
+  // 查询数据
+  const times = shortcutDateRangePicker.value.times;
+  const list: MallProductStatisticsApi.ProductStatistics[] =
+    await ProductStatisticsApi.getProductStatisticsList({ times });
+  // 处理数据
+  for (const item of list) {
+    item.orderPayPrice = Number(fenToYuan(item.orderPayPrice));
+    item.afterSaleRefundPrice = Number(fenToYuan(item.afterSaleRefundPrice));
+  }
+  // 更新 Echarts 数据
+  if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
+    lineChartOptions.dataset.source = list;
+  }
+};
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await confirm('确定要导出商品状况吗？');
+    // 发起导出
+    exportLoading.value = true;
+    const times = shortcutDateRangePicker.value.times;
+    const data = await ProductStatisticsApi.exportProductStatisticsExcel({
+      times,
+    });
+    downloadFileFromBlobPart({ fileName: '商品状况.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
+const overviewItems = ref<AnalysisOverviewIconItem[]>();
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      icon: 'ep:view',
+      title: '商品浏览量',
+      value: trendSummary.value?.value?.browseCount || 0,
+      iconColor: 'bg-blue-100',
+      iconBgColor: 'text-blue-500',
+      tooltip:
+        '在选定条件下，所有商品详情页被访问的次数，一个人在统计时间内访问多次记为多次',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.browseCount,
+        trendSummary.value?.reference?.browseCount,
+      ),
+    },
+    {
+      icon: 'ep:user-filled',
+      title: '商品访客数',
+      value: trendSummary.value?.value?.browseUserCount || 0,
+      iconColor: 'bg-purple-100',
+      iconBgColor: 'text-purple-500',
+      tooltip:
+        '在选定条件下，访问任何商品详情页的人数，一个人在统计时间范围内访问多次只记为一个',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.browseUserCount,
+        trendSummary.value?.reference?.browseUserCount,
+      ),
+    },
+    {
+      icon: 'fa-solid:money-check-alt',
+      title: '支付件数',
+      iconColor: 'bg-yellow-100',
+      iconBgColor: 'text-yellow-500',
+      value: trendSummary.value?.value?.orderPayCount || 0,
+      tooltip: '在选定条件下，成功付款订单的商品件数之和',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.orderPayCount,
+        trendSummary.value?.reference?.orderPayCount,
+      ),
+    },
+    {
+      icon: 'ep:warning-filled',
+      title: '支付金额',
+      iconColor: 'bg-green-100',
+      iconBgColor: 'text-green-500',
+      prefix: '￥',
+      value: Number(fenToYuan(trendSummary.value?.value?.orderPayPrice || 0)),
+      tooltip: '在选定条件下，成功付款订单的商品金额之和',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.orderPayPrice,
+        trendSummary.value?.reference?.orderPayPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:wallet',
+      title: '退款件数',
+      iconColor: 'bg-cyan-100',
+      iconBgColor: 'text-cyan-500',
+      value: trendSummary.value?.value?.afterSaleCount || 0,
+      tooltip: '在选定条件下，成功退款的商品件数之和',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.afterSaleCount,
+        trendSummary.value?.reference?.afterSaleCount,
+      ),
+    },
+    {
+      icon: 'fa-solid:award',
+      title: '退款金额',
+      iconColor: 'bg-yellow-100',
+      iconBgColor: 'text-yellow-500',
+      prefix: '￥',
+      decimals: 2,
+      value: Number(
+        fenToYuan(trendSummary.value?.value?.afterSaleRefundPrice || 0),
+      ),
+      tooltip: '在选定条件下，成功退款的商品金额之和',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.afterSaleRefundPrice,
+        trendSummary.value?.reference?.afterSaleRefundPrice,
+      ),
+    },
+  ];
+};
+</script>
+<template>
+  <AnalysisChartCard title="商品概况">
+    <template #header-suffix>
+      <!-- 查询条件 -->
+      <ShortcutDateRangePicker
+        ref="shortcutDateRangePicker"
+        @change="getProductTrendData"
+      >
+        <el-button
+          class="ml-4"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['statistics:product:export']"
+        >
+          <Icon icon="ep:download" class="mr-1" />导出
+        </el-button>
+      </ShortcutDateRangePicker>
+    </template>
+    <!-- 统计值 -->
+    <AnalysisOverviewIcon
+      v-model:model-value="overviewItems"
+      :columns-number="6"
+      class="mt-5 md:mr-4 md:mt-0 md:w-full"
+    />
+    <!-- 折线图 -->
+    <el-skeleton :loading="trendLoading" animated>
+      <EchartsUI ref="chartRef" height="500px" />
+    </el-skeleton>
+  </AnalysisChartCard>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mall/statistics/product/index.vue b/apps/web-ele/src/views/mall/statistics/product/index.vue
new file mode 100644
index 00000000..26d1b86c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/product/index.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { DocAlert, Page } from '@vben/common-ui';
+
+import ProductRank from './components/product-rank.vue';
+import ProductSummary from './components/product-summary.vue';
+</script>
+
+<template>
+  <Page>
+    <DocAlert
+      title="【统计】会员、商品、交易统计"
+      url="https://doc.iocoder.cn/mall/statistics/"
+    />
+    <div class="mt-5 w-full">
+      <ProductSummary class="mt-5 md:mr-4 md:mt-0" />
+    </div>
+    <div class="mt-5 w-full">
+      <ProductRank class="mt-5 md:mr-4 md:mt-0" />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue b/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue
new file mode 100644
index 00000000..2676dc58
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue
@@ -0,0 +1,280 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
+
+import { reactive, ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import {
+  calculateRelativeRate,
+  downloadFileFromBlobPart,
+  fenToYuan,
+  formatDate,
+  isSameDay,
+} from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import AnalysisChartCard from '#/views/mall/home/components/analysis-chart-card.vue';
+import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
+import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const overviewItems = ref<AnalysisOverviewIconItem[]>();
+const summary =
+  ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeTrendSummary>>();
+const shortcutDateRangePicker = ref();
+const exportLoading = ref(false); // 导出的加载中
+const trendLoading = ref(true); // 交易状态加载中
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      icon: 'fa-solid:yen-sign',
+      title: '营业额',
+      value: Number(fenToYuan(summary?.value?.value.turnoverPrice || 0)),
+      tooltip: '商品支付金额、充值金额',
+      iconColor: 'bg-blue-100',
+      iconBgColor: 'text-blue-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.turnoverPrice,
+        summary?.value?.reference?.turnoverPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:shopping-cart',
+      title: '商品支付金额',
+      value: Number(fenToYuan(summary.value?.value?.orderPayPrice || 0)),
+      tooltip:
+        '用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）',
+      iconColor: 'bg-purple-100',
+      iconBgColor: 'text-purple-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.orderPayPrice,
+        summary?.value?.reference?.orderPayPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:money-check-alt',
+      title: '充值金额',
+      value: Number(fenToYuan(summary.value?.value?.rechargePrice || 0)),
+      tooltip: '用户成功充值的金额',
+      iconColor: 'bg-yellow-100',
+      iconBgColor: 'text-yellow-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.rechargePrice,
+        summary?.value?.reference?.rechargePrice,
+      ),
+    },
+    {
+      icon: 'ep:warning-filled',
+      title: '支出金额',
+      value: Number(fenToYuan(summary.value?.value?.expensePrice || 0)),
+      tooltip: '余额支付金额、支付佣金金额、商品退款金额',
+      iconColor: 'bg-green-100',
+      iconBgColor: 'text-green-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.expensePrice,
+        summary?.value?.reference?.expensePrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:wallet',
+      title: '余额支付金额',
+      value: Number(fenToYuan(summary.value?.value?.walletPayPrice || 0)),
+      tooltip: '余额支付金额、支付佣金金额、商品退款金额',
+      iconColor: 'bg-cyan-100',
+      iconBgColor: 'text-cyan-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.walletPayPrice,
+        summary?.value?.reference?.walletPayPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:award',
+      title: '支付佣金金额',
+      value: Number(
+        fenToYuan(summary.value?.value?.brokerageSettlementPrice || 0),
+      ),
+      tooltip: '后台给推广员支付的推广佣金，以实际支付为准',
+      iconColor: 'bg-yellow-100',
+      iconBgColor: 'text-yellow-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.brokerageSettlementPrice,
+        summary?.value?.reference?.brokerageSettlementPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:times-circle',
+      title: '商品退款金额',
+      value: Number(fenToYuan(summary.value?.value?.afterSaleRefundPrice || 0)),
+      tooltip: '用户成功退款的商品金额',
+      iconColor: 'bg-blue-100',
+      iconBgColor: 'text-blue-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.afterSaleRefundPrice,
+        summary?.value?.reference?.afterSaleRefundPrice,
+      ),
+    },
+  ];
+};
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await confirm('确定要导出交易状况吗？');
+    // 发起导出
+    exportLoading.value = true;
+    const times = shortcutDateRangePicker.value.times;
+    const data = await TradeStatisticsApi.exportTradeStatisticsExcel({ times });
+    downloadFileFromBlobPart({ fileName: '交易状况.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
+const getTradeTrendData = async () => {
+  trendLoading.value = true;
+  // 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
+  const times = shortcutDateRangePicker.value.times;
+  if (isSameDay(times[0], times[1])) {
+    // 前天
+    times[0] = formatDate(dayjs(times[0]).subtract(1, 'd').toDate());
+  }
+  // 查询数据
+  await Promise.all([getTradeStatisticsAnalyse(), getTradeStatisticsList()]);
+  trendLoading.value = false;
+
+  loadOverview();
+  renderEcharts(lineChartOptions as any);
+};
+
+/** 查询交易状况数据统计 */
+const getTradeStatisticsAnalyse = async () => {
+  const times = shortcutDateRangePicker.value.times;
+  summary.value = await TradeStatisticsApi.getTradeStatisticsAnalyse({
+    times,
+  });
+};
+
+/** 查询交易状况数据列表 */
+const getTradeStatisticsList = async () => {
+  // 查询数据
+  const times = shortcutDateRangePicker.value.times;
+  const list = await TradeStatisticsApi.getTradeStatisticsList({ times });
+  // 处理数据
+  for (const item of list) {
+    item.turnoverPrice = Number(fenToYuan(item.turnoverPrice));
+    item.orderPayPrice = Number(fenToYuan(item.orderPayPrice));
+    item.rechargePrice = Number(fenToYuan(item.rechargePrice));
+    item.expensePrice = Number(fenToYuan(item.expensePrice));
+  }
+  // 更新 Echarts 数据
+  if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
+    lineChartOptions.dataset.source = list;
+  }
+};
+
+/** 折线图配置 */
+const lineChartOptions = reactive({
+  dataset: {
+    dimensions: [
+      'date',
+      'turnoverPrice',
+      'orderPayPrice',
+      'rechargePrice',
+      'expensePrice',
+    ],
+    source: [] as MallTradeStatisticsApi.TradeTrendSummary[],
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [
+    { name: '营业额', type: 'line', smooth: true },
+    { name: '商品支付金额', type: 'line', smooth: true },
+    { name: '充值金额', type: 'line', smooth: true },
+    { name: '支出金额', type: 'line', smooth: true },
+  ],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false, // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] as const, // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '交易状况' }, // 保存为图片
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category' as const,
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+});
+</script>
+<template>
+  <AnalysisChartCard title="交易状况">
+    <template #header-suffix>
+      <!-- 查询条件 -->
+      <ShortcutDateRangePicker
+        ref="shortcutDateRangePicker"
+        @change="getTradeTrendData"
+      >
+        <el-button
+          class="ml-4"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['statistics:trade:export']"
+        >
+          <Icon icon="ep:download" class="mr-1" />导出
+        </el-button>
+      </ShortcutDateRangePicker>
+    </template>
+    <AnalysisOverviewIcon v-model:model-value="overviewItems" />
+    <EchartsUI height="500px" ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/trade/index.vue b/apps/web-ele/src/views/mall/statistics/trade/index.vue
new file mode 100644
index 00000000..4aae9367
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/trade/index.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+import type { AnalysisOverviewTradeItem } from '#/views/mall/home/components/data';
+
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { calculateRelativeRate, fenToYuan } from '@vben/utils';
+
+import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import analysisTradeOverview from '#/views/mall/home/components/analysis-trade-overview.vue';
+
+import TradeTransactionCard from './components/trade-transaction-card.vue';
+
+const overviewItems = ref<AnalysisOverviewTradeItem[]>();
+const summary =
+  ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>>();
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      title: '昨日订单数量',
+      value: summary.value?.value?.yesterdayOrderCount || 0,
+      tooltip: '昨日订单数量',
+      percent: calculateRelativeRate(
+        summary?.value?.value?.yesterdayOrderCount,
+        summary.value?.reference?.yesterdayOrderCount,
+      ),
+    },
+    {
+      title: '本月订单数量',
+      value: summary.value?.value?.monthOrderCount || 0,
+      tooltip: '本月订单数量',
+      percent: calculateRelativeRate(
+        summary?.value?.value?.monthOrderCount,
+        summary.value?.reference?.monthOrderCount,
+      ),
+    },
+    {
+      title: '昨日支付金额',
+      value: Number(fenToYuan(summary.value?.value?.yesterdayPayPrice || 0)),
+      tooltip: '昨日支付金额',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.yesterdayPayPrice,
+        summary.value?.reference?.yesterdayPayPrice,
+      ),
+    },
+    {
+      title: '本月支付金额',
+      value: summary.value?.value?.monthPayPrice || 0,
+      tooltip: '本月支付金额',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.monthPayPrice,
+        summary.value?.reference?.monthPayPrice,
+      ),
+    },
+  ];
+};
+
+/** 查询交易统计 */
+const getTradeStatisticsSummary = async () => {
+  summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getTradeStatisticsSummary();
+  loadOverview();
+});
+</script>
+
+<template>
+  <Page>
+    <DocAlert
+      title="【统计】会员、商品、交易统计"
+      url="https://doc.iocoder.cn/mall/statistics/"
+    />
+    <!-- 统计值 -->
+    <div class="mb-4 mt-5 w-full md:flex">
+      <analysisTradeOverview
+        v-model:model-value="overviewItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+      />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <TradeTransactionCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/data.ts b/apps/web-ele/src/views/mall/trade/afterSale/data.ts
new file mode 100644
index 00000000..652757a7
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/afterSale/data.ts
@@ -0,0 +1,140 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'spuName',
+      label: '商品名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'no',
+      label: '退款编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'orderNo',
+      label: '订单编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '售后状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '售后方式',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY, 'number'),
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '售后类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      field: 'no',
+      title: '退款编号',
+      fixed: 'left',
+    },
+    {
+      field: 'orderNo',
+      title: '订单编号',
+      fixed: 'left',
+      slots: { default: 'orderNo' },
+    },
+    {
+      field: 'spuName',
+      title: '商品名称',
+      align: 'left',
+      minWidth: 200,
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'properties',
+      title: '商品属性',
+      minWidth: 200,
+      formatter: ({ cellValue }) => {
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.propertyName} : ${item.valueName}`)
+              .join('\n')
+          : '-';
+      },
+    },
+    {
+      field: 'refundPrice',
+      title: '订单金额',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'user.nickname',
+      title: '买家',
+    },
+    {
+      field: 'createTime',
+      title: '申请时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'content',
+      title: '售后状态',
+      cellRender: {
+        name: 'CellDictTag',
+        props: {
+          dictType: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
+        },
+      },
+    },
+    {
+      field: 'way',
+      title: '售后方式',
+      cellRender: {
+        name: 'CellDictTag',
+        props: {
+          dictType: DICT_TYPE.TRADE_AFTER_SALE_WAY,
+        },
+      },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/index.vue b/apps/web-ele/src/views/mall/trade/afterSale/index.vue
new file mode 100644
index 00000000..dc834b83
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/afterSale/index.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElButton, ElTabs } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAfterSalePage } from '#/api/mall/trade/afterSale';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const { push } = useRouter();
+
+const status = ref('0');
+const statusTabs = ref([
+  {
+    label: '全部',
+    value: '0',
+  },
+]);
+
+/** 处理退款 */
+function openAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeAfterSaleDetail', params: { id: row.id } });
+}
+
+// TODO @xingyu：缺详情页
+/** 查看订单详情 */
+function openOrderDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAfterSalePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            status: status.value === '0' ? undefined : status.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
+});
+
+function onChangeStatus(key: number | string) {
+  status.value = key.toString();
+  gridApi.query();
+}
+onMounted(() => {
+  for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
+    statusTabs.value.push({
+      label: dict.label,
+      value: dict.value.toString(),
+    });
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【交易】交易订单"
+        url="https://doc.iocoder.cn/mall/trade-order/"
+      />
+    </template>
+    <Grid table-title="退款列表">
+      <template #top>
+        <ElTabs class="border-none" @change="onChangeStatus">
+          <ElTabs.TabPane
+            v-for="tab in statusTabs"
+            :key="tab.value"
+            :tab="tab.label"
+          />
+        </ElTabs>
+      </template>
+      <template #orderNo="{ row }">
+        <ElButton type="primary" link @click="openOrderDetail(row)">
+          {{ row.orderNo }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '处理退款',
+              type: 'primary',
+              link: true,
+              onClick: openAfterSaleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue b/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
new file mode 100644
index 00000000..e721d761
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
@@ -0,0 +1,433 @@
+<script lang="ts" setup>
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElImage,
+  ElMessage,
+  ElTimeline,
+  ElTimelineItem,
+} from 'element-plus';
+
+import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
+
+import UpdateAuditReasonForm from './disagree-form.vue';
+
+defineOptions({ name: 'TradeAfterSaleDetail' });
+
+const { params } = useRoute(); // 查询参数
+const { push } = useRouter(); // 路由
+const formData = ref<MallAfterSaleApi.AfterSale>({
+  order: {} as MallOrderApi.Order,
+  logs: [] as MallOrderApi.OrderLog[],
+  orderItem: {} as MallOrderApi.OrderItem,
+});
+const updateAuditReasonFormRef = ref(); // 拒绝售后表单 Ref
+
+/** 获得 userType 颜色 */
+const getUserTypeColor = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
+  }
+  return '#409EFF';
+};
+
+/** 获得详情 */
+const getDetail = async () => {
+  const id = params.id as unknown as number;
+  if (id) {
+    const res = await AfterSaleApi.getAfterSale(id);
+    // 没有表单信息则关闭页面返回
+    if (res === null) {
+      ElMessage.error('售后订单不存在');
+      close();
+    }
+    formData.value = res;
+  }
+};
+
+/** 同意售后 */
+const agree = async () => {
+  // 二次确认
+  await confirm('是否同意售后？');
+  await AfterSaleApi.agree(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 拒绝售后 */
+const disagree = async () => {
+  updateAuditReasonFormRef.value?.open(formData.value);
+};
+
+/** 确认收货 */
+const receive = async () => {
+  // 二次确认
+  await confirm('是否确认收货？');
+  await AfterSaleApi.receive(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 拒绝收货 */
+const refuse = async () => {
+  // 二次确认
+  await confirm('是否拒绝收货？');
+  await AfterSaleApi.refuse(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 确认退款 */
+const refund = async () => {
+  // 二次确认
+  await confirm('是否确认退款？');
+  await AfterSaleApi.refund(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 关闭 tag */
+const close = () => {
+  push({ name: 'TradeAfterSale' });
+};
+onMounted(async () => {
+  await getDetail();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ContentWrap>
+      <!-- 订单信息 -->
+      <ElDescriptions title="订单信息">
+        <ElDescriptionsItem label="订单号: ">
+          {{ formData.orderNo }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="配送方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_DELIVERY_TYPE"
+            :value="formData.order?.deliveryType"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单类型: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_ORDER_TYPE"
+            :value="formData.order?.type"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="收货人: ">
+          {{ formData.order?.receiverName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家留言: ">
+          {{ formData.order?.userRemark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单来源: ">
+          <DictTag
+            :type="DICT_TYPE.TERMINAL"
+            :value="formData.order?.terminal"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="联系电话: ">
+          {{ formData.order?.receiverMobile }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="商家备注: ">
+          {{ formData.order?.remark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="支付单号: ">
+          {{ formData.order?.payOrderId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="付款方式: ">
+          <DictTag
+            :type="DICT_TYPE.PAY_CHANNEL_CODE"
+            :value="formData.order?.payChannelCode"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家: ">
+          {{ formData?.user?.nickname }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 售后信息 -->
+      <ElDescriptions title="售后信息">
+        <ElDescriptionsItem label="退款编号: ">
+          {{ formData.no }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="申请时间: ">
+          {{ formatDate(formData.auditTime) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="售后类型: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE"
+            :value="formData.type"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="售后方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_WAY"
+            :value="formData.way"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="退款金额: ">
+          {{ fenToYuan(formData.refundPrice ?? 0) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="退款原因: ">
+          {{ formData.applyReason }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="补充描述: ">
+          {{ formData.applyDescription }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="凭证图片: ">
+          <ElImage
+            v-for="(item, index) in formData.applyPicUrls"
+            :key="index"
+            :src="item"
+            style="width: 60px; height: 60px; margin-right: 10px"
+            :preview-src-list="formData.applyPicUrls ?? []"
+          />
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 退款状态 -->
+      <ElDescriptions :column="1" title="退款状态">
+        <ElDescriptionsItem label="退款状态: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
+            :value="formData.status"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-button
+            v-if="formData.status === 10"
+            type="primary"
+            @click="agree"
+          >
+            同意售后
+          </el-button>
+          <el-button
+            v-if="formData.status === 10"
+            type="primary"
+            @click="disagree"
+          >
+            拒绝售后
+          </el-button>
+          <el-button
+            v-if="formData.status === 30"
+            type="primary"
+            @click="receive"
+          >
+            确认收货
+          </el-button>
+          <el-button
+            v-if="formData.status === 30"
+            type="primary"
+            @click="refuse"
+          >
+            拒绝收货
+          </el-button>
+          <el-button
+            v-if="formData.status === 40"
+            type="primary"
+            @click="refund"
+          >
+            确认退款
+          </el-button>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">提醒: </span></template>
+          如果未发货，请点击同意退款给买家。<br />
+          如果实际已发货，请主动与买家联系。<br />
+          如果订单整体退款后，优惠券和余额会退还给买家.
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 商品信息 -->
+      <ElDescriptions title="商品信息">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-row :gutter="20">
+            <el-col :span="15">
+              <el-table
+                v-if="formData.orderItem"
+                :data="[formData.orderItem]"
+                border
+              >
+                <el-table-column label="商品" prop="spuName" width="auto">
+                  <template #default="{ row }">
+                    {{ row.spuName }}
+                    <el-tag
+                      v-for="property in row.properties"
+                      :key="property.propertyId"
+                      class="mr-10px"
+                    >
+                      {{ property.propertyName }}: {{ property.valueName }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品原价" prop="price" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.price) }} 元
+                  </template>
+                </el-table-column>
+                <el-table-column label="数量" prop="count" width="100" />
+                <el-table-column label="合计" prop="payPrice" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.payPrice) }} 元
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="10" />
+          </el-row>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 操作日志 -->
+      <ElDescriptions title="售后日志">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <ElTimeline>
+            <ElTimelineItem
+              v-for="saleLog in formData.logs"
+              :key="saleLog.id"
+              :timestamp="formatDate(saleLog.createTime)?.toString()"
+              placement="top"
+            >
+              <div class="el-timeline-right-content">
+                <span>{{ saleLog.content }}</span>
+              </div>
+              <template #dot>
+                <span
+                  :style="{
+                    backgroundColor: getUserTypeColor(saleLog.userType ?? 0),
+                  }"
+                  class="dot-node-style"
+                >
+                  {{
+                    getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] ||
+                    '系'
+                  }}
+                </span>
+              </template>
+            </ElTimelineItem>
+          </ElTimeline>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ContentWrap>
+
+    <!-- 各种操作的弹窗 -->
+    <UpdateAuditReasonForm
+      ref="updateAuditReasonFormRef"
+      @success="getDetail"
+    />
+  </Page>
+</template>
+<style lang="scss" scoped>
+:deep(.el-descriptions) {
+  &:not(:nth-child(1)) {
+    margin-top: 20px;
+  }
+
+  .el-descriptions__title {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      width: 3px;
+      height: 20px;
+      margin-right: 10px;
+      content: '';
+      background-color: #409eff;
+    }
+  }
+
+  .el-descriptions-item__container {
+    margin: 0 10px;
+
+    .no-colon {
+      margin: 0;
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+}
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0 0 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+}
+
+/* 单独定义气泡样式，不使用嵌套 */
+:deep(.el-timeline-right-content) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 10px;
+  margin-left: 10px;
+  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
+  border-radius: 4px;
+}
+
+:deep(.el-timeline-right-content)::before {
+  position: absolute;
+  top: 10px;
+  left: -16px;
+  content: '';
+  border-color: transparent #f5f7fa transparent transparent;
+  border-style: solid;
+  border-width: 8px;
+}
+
+.dot-node-style {
+  position: absolute;
+  left: -5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  color: #fff;
+  border-radius: 50%;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue b/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue
new file mode 100644
index 00000000..54081616
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { deliveryOrder } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'expressType',
+      label: '发货方式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '快递', value: 'express' },
+          { label: '无需发货', value: 'none' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'logisticsId',
+      label: '物流公司',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeliveryExpressList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+    },
+    {
+      fieldName: 'logisticsNo',
+      label: '物流单号',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
+    if (data.expressType === 'none') {
+      // 无需发货的情况
+      data.logisticsId = 0;
+      data.logisticsNo = '';
+    }
+    try {
+      await deliveryOrder(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      if (data.logisticsId === 0) {
+        await formApi.setValues({ expressType: 'none' });
+      }
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/record/data.ts b/apps/web-ele/src/views/mall/trade/brokerage/record/data.ts
new file mode 100644
index 00000000..c5e6ae68
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/record/data.ts
@@ -0,0 +1,135 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { fenToYuan } from '@vben/utils';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'bizType',
+      label: '业务类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择业务类型',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.BROKERAGE_RECORD_BIZ_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.BROKERAGE_RECORD_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 60,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 80,
+    },
+    {
+      field: 'userAvatar',
+      title: '头像',
+      minWidth: 70,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'userNickname',
+      title: '昵称',
+      minWidth: 80,
+    },
+    {
+      field: 'bizType',
+      title: '业务类型',
+      minWidth: 85,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BROKERAGE_RECORD_BIZ_TYPE },
+      },
+    },
+    {
+      field: 'bizId',
+      title: '业务编号',
+      minWidth: 80,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      minWidth: 110,
+    },
+    {
+      field: 'price',
+      title: '金额',
+      minWidth: 60,
+      formatter: ({ row }) => `￥${fenToYuan(row.price)}`,
+    },
+    {
+      field: 'description',
+      title: '说明',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 85,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BROKERAGE_RECORD_STATUS },
+      },
+    },
+    {
+      field: 'unfreezeTime',
+      title: '解冻时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/record/index.vue b/apps/web-ele/src/views/mall/trade/brokerage/record/index.vue
new file mode 100644
index 00000000..17a2ad39
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/record/index.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBrokerageRecordApi } from '#/api/mall/trade/brokerage/record';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBrokerageRecordPage } from '#/api/mall/trade/brokerage/record';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'TradeBrokerageRecord' });
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    showOverflow: 'tooltip',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrokerageRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageRecordApi.BrokerageRecord>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【交易】分销返佣"
+        url="https://doc.iocoder.cn/mall/trade-brokerage/"
+      />
+    </template>
+
+    <Grid table-title="分销返佣记录" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/data.ts b/apps/web-ele/src/views/mall/trade/brokerage/user/data.ts
new file mode 100644
index 00000000..8de25b5b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/user/data.ts
@@ -0,0 +1,140 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { fenToYuan } from '@vben/utils';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'bindUserId',
+      label: '推广员编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入推广员编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'brokerageEnabled',
+      label: '推广资格',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择推广资格',
+        clearable: true,
+        options: [
+          { label: '有', value: true },
+          { label: '无', value: false },
+        ],
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '用户编号',
+      minWidth: 80,
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      minWidth: 70,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 24,
+          height: 24,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+      minWidth: 80,
+    },
+    {
+      field: 'brokerageUserCount',
+      title: '推广人数',
+      minWidth: 80,
+    },
+    {
+      field: 'brokerageOrderCount',
+      title: '推广订单数量',
+      minWidth: 110,
+    },
+    {
+      field: 'brokerageOrderPrice',
+      title: '推广订单金额',
+      minWidth: 110,
+      formatter: ({ row }) => `￥${fenToYuan(row.brokerageOrderPrice)}`,
+    },
+    {
+      field: 'withdrawPrice',
+      title: '已提现金额',
+      minWidth: 100,
+      formatter: ({ row }) => `￥${fenToYuan(row.withdrawPrice)}`,
+    },
+    {
+      field: 'withdrawCount',
+      title: '已提现次数',
+      minWidth: 100,
+    },
+    {
+      field: 'price',
+      title: '未提现金额',
+      minWidth: 100,
+      formatter: ({ row }) => `￥${fenToYuan(row.price)}`,
+    },
+    {
+      field: 'frozenPrice',
+      title: '冻结中佣金',
+      minWidth: 100,
+      formatter: ({ row }) => `￥${fenToYuan(row.frozenPrice)}`,
+    },
+    {
+      field: 'brokerageEnabled',
+      title: '推广资格',
+      minWidth: 80,
+      slots: { default: 'brokerageEnabled' },
+    },
+    {
+      field: 'brokerageTime',
+      title: '成为推广员时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'bindUserId',
+      title: '上级推广员编号',
+      minWidth: 150,
+    },
+    {
+      field: 'bindUserTime',
+      title: '推广员绑定时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue b/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
new file mode 100644
index 00000000..003895c0
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
@@ -0,0 +1,214 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { useAccess } from '@vben/access';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElLoading, ElMessage, ElSwitch } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  clearBindUser,
+  getBrokerageUserPage,
+  updateBrokerageEnabled,
+} from '#/api/mall/trade/brokerage/user';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import BrokerageOrderListModal from './modules/order-list-modal.vue';
+import BrokerageUserCreateForm from './modules/user-create-form.vue';
+import BrokerageUserListModal from './modules/user-list-modal.vue';
+import BrokerageUserUpdateForm from './modules/user-update-form.vue';
+
+defineOptions({ name: 'TradeBrokerageUser' });
+
+const { hasAccessByCodes } = useAccess();
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const [OrderListModal, OrderListModalApi] = useVbenModal({
+  connectedComponent: BrokerageOrderListModal,
+});
+
+const [UserCreateModal, UserCreateModalApi] = useVbenModal({
+  connectedComponent: BrokerageUserCreateForm,
+});
+
+const [UserListModal, UserListModalApi] = useVbenModal({
+  connectedComponent: BrokerageUserListModal,
+});
+
+const [UserUpdateModal, UserUpdateModalApi] = useVbenModal({
+  connectedComponent: BrokerageUserUpdateForm,
+});
+
+/** 打开推广人列表 */
+function openBrokerageUserTable(row: MallBrokerageUserApi.BrokerageUser) {
+  UserListModalApi.setData(row).open();
+}
+
+/** 打开推广订单列表 */
+function openBrokerageOrderTable(row: MallBrokerageUserApi.BrokerageUser) {
+  OrderListModalApi.setData(row).open();
+}
+
+/** 打开表单：修改上级推广人 */
+function openUpdateBindUserForm(row: MallBrokerageUserApi.BrokerageUser) {
+  UserUpdateModalApi.setData(row).open();
+}
+
+/** 创建分销员 */
+function openCreateUserForm() {
+  UserCreateModalApi.open();
+}
+
+/** 清除上级推广人 */
+async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
+  await confirm(`确定清除"${row.nickname}"的上级推广人吗？`);
+  await clearBindUser({ id: row.id as number });
+  ElMessage.success('清除成功');
+  onRefresh();
+}
+
+/** 推广资格：开通/关闭 */
+async function handleBrokerageEnabledChange(
+  row: MallBrokerageUserApi.BrokerageUser,
+) {
+  const text = row.brokerageEnabled ? '开通' : '关闭';
+  const loadingInstance = ElLoading.service({
+    text: `正在${text}"${row.nickname}"的推广资格...`,
+    fullscreen: true,
+  });
+  try {
+    await updateBrokerageEnabled({
+      id: row.id as number,
+      enabled: row.brokerageEnabled as boolean,
+    });
+    ElMessage.success(`${text}成功`);
+    onRefresh();
+  } catch {
+    // 异常时，需要重置回之前的值
+    row.brokerageEnabled = !row.brokerageEnabled;
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    showOverflow: 'tooltip',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrokerageUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【交易】分销返佣"
+        url="https://doc.iocoder.cn/mall/trade-brokerage/"
+      />
+    </template>
+
+    <Grid table-title="分销用户列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['分销员']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['trade:brokerage-user:create'],
+              onClick: openCreateUserForm,
+            },
+          ]"
+        />
+      </template>
+
+      <template #brokerageEnabled="{ row }">
+        <ElSwitch
+          v-model:checked="row.brokerageEnabled"
+          :disabled="
+            !hasAccessByCodes(['trade:brokerage-user:update-bind-user'])
+          "
+          checked-children="有"
+          un-checked-children="无"
+          @change="handleBrokerageEnabledChange(row)"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :drop-down-actions="[
+            {
+              label: '推广人',
+              type: 'primary',
+              link: true,
+              auth: ['trade:brokerage-user:user-query'],
+              onClick: openBrokerageUserTable.bind(null, row),
+            },
+            {
+              label: '推广订单',
+              type: 'primary',
+              link: true,
+              auth: ['trade:brokerage-user:order-query'],
+              onClick: openBrokerageOrderTable.bind(null, row),
+            },
+            {
+              label: '修改上级推广人',
+              type: 'primary',
+              link: true,
+              auth: ['trade:brokerage-user:update-bind-user'],
+              onClick: openUpdateBindUserForm.bind(null, row),
+            },
+            {
+              label: '清除上级推广人',
+              type: 'primary',
+              link: true,
+              auth: ['trade:brokerage-user:clear-bind-user'],
+              onClick: handleClearBindUser.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 修改上级推广人表单 -->
+    <UserUpdateModal @success="onRefresh" />
+    <!-- 推广人列表 -->
+    <UserListModal />
+    <!-- 推广订单列表 -->
+    <OrderListModal />
+    <!-- 创建分销员 -->
+    <UserCreateModal @success="onRefresh" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/modules/order-list-modal.vue b/apps/web-ele/src/views/mall/trade/brokerage/user/modules/order-list-modal.vue
new file mode 100644
index 00000000..95e94a81
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/user/modules/order-list-modal.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBrokerageRecordApi } from '#/api/mall/trade/brokerage/record';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBrokerageRecordPage } from '#/api/mall/trade/brokerage/record';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+import { BrokerageRecordBizTypeEnum } from '#/utils/constants';
+
+/** 推广订单列表 */
+defineOptions({ name: 'BrokerageOrderListModal' });
+
+const userId = ref<number>();
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      userId.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallBrokerageUserApi.BrokerageUser>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      userId.value = data.id;
+      // 等待弹窗打开后再查询
+      setTimeout(() => {
+        gridApi.query();
+      }, 100);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 搜索表单配置 */
+function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'sourceUserLevel',
+      label: '用户类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '全部', value: 0 },
+          { label: '一级推广人', value: 1 },
+          { label: '二级推广人', value: 2 },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.BROKERAGE_RECORD_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+function useColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'bizId',
+      title: '订单编号',
+      minWidth: 80,
+    },
+    {
+      field: 'sourceUserId',
+      title: '用户编号',
+      minWidth: 80,
+    },
+    {
+      field: 'sourceUserAvatar',
+      title: '头像',
+      minWidth: 70,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 24,
+          height: 24,
+        },
+      },
+    },
+    {
+      field: 'sourceUserNickname',
+      title: '昵称',
+      minWidth: 80,
+    },
+    {
+      field: 'price',
+      title: '佣金',
+      minWidth: 100,
+      formatter: ({ row }) => `￥${fenToYuan(row.price)}`,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 85,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BROKERAGE_RECORD_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useFormSchema(),
+  },
+  gridOptions: {
+    columns: useColumns(),
+    height: '600',
+    keepSource: true,
+    showOverflow: 'tooltip',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 处理全部的情况
+          const params = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: userId.value,
+            bizType: BrokerageRecordBizTypeEnum.ORDER.type,
+            sourceUserLevel:
+              formValues.sourceUserLevel === 0
+                ? undefined
+                : formValues.sourceUserLevel,
+            status: formValues.status,
+            createTime: formValues.createTime,
+          };
+          return await getBrokerageRecordPage(params);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageRecordApi.BrokerageRecord>,
+});
+</script>
+
+<template>
+  <Modal title="推广订单列表" class="w-3/5">
+    <Grid table-title="推广订单列表" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-create-form.vue b/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-create-form.vue
new file mode 100644
index 00000000..2df46722
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-create-form.vue
@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { reactive, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { formatDate, isEmpty } from '@vben/utils';
+
+import {
+  ElAvatar,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElInput,
+  ElMessage,
+  ElTag,
+} from 'element-plus';
+
+import {
+  createBrokerageUser,
+  getBrokerageUser,
+} from '#/api/mall/trade/brokerage/user';
+import { getUser } from '#/api/member/user';
+
+defineOptions({ name: 'BrokerageUserCreateForm' });
+
+const emit = defineEmits(['success']);
+
+const formData = ref<any>({
+  userId: undefined,
+  bindUserId: undefined,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!formData.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    try {
+      await createBrokerageUser(formData.value);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      return;
+    }
+    formData.value = {
+      userId: undefined,
+      bindUserId: undefined,
+    };
+  },
+});
+
+/** 用户信息 */
+const userInfo = reactive<{
+  bindUser: MallBrokerageUserApi.BrokerageUser | undefined;
+  user: MallBrokerageUserApi.BrokerageUser | undefined;
+}>({
+  bindUser: undefined,
+  user: undefined,
+});
+
+/** 查询推广员和分销员 */
+async function handleGetUser(id: any, userType: string) {
+  if (isEmpty(id)) {
+    ElMessage.warning(`请先输入${userType}编号后重试！！！`);
+    return;
+  }
+  if (
+    userType === '推广员' &&
+    formData.value?.bindUserId === formData.value?.userId
+  ) {
+    ElMessage.error('不能绑定自己为推广人');
+    return;
+  }
+
+  try {
+    const user =
+      userType === '推广员' ? await getBrokerageUser(id) : await getUser(id);
+    if (userType === '推广员') {
+      userInfo.bindUser = user as MallBrokerageUserApi.BrokerageUser;
+    } else {
+      userInfo.user = user as MallBrokerageUserApi.BrokerageUser;
+    }
+
+    if (!user) {
+      ElMessage.warning(`${userType}不存在`);
+    }
+  } catch {
+    ElMessage.warning(`${userType}不存在`);
+  }
+}
+</script>
+
+<template>
+  <Modal title="创建分销员" class="w-2/5">
+    <div class="mr-2 flex items-center">
+      分销员编号：
+      <ElInput
+        v-model="formData.userId"
+        placeholder="请输入推广员编号"
+        class="mx-2 !w-52"
+      >
+        <template #append>
+          <ElButton
+            type="primary"
+            @click="handleGetUser(formData?.userId, '分销员')"
+          >
+            <IconifyIcon icon="lucide:search" :size="15" />
+          </ElButton>
+        </template>
+      </ElInput>
+      上级推广人编号：
+      <ElInput
+        v-model="formData.bindUserId"
+        placeholder="请输入推广员编号"
+        class="mx-2 !w-52"
+      >
+        <template #append>
+          <ElButton
+            type="primary"
+            @click="handleGetUser(formData?.bindUserId, '推广员')"
+          >
+            <IconifyIcon icon="lucide:search" :size="15" />
+          </ElButton>
+        </template>
+      </ElInput>
+    </div>
+
+    <div class="mt-4">
+      <!-- 展示分销员的信息 -->
+      <ElDescriptions
+        title="分销员信息"
+        class="mt-4"
+        v-if="userInfo.user"
+        :column="1"
+        bordered
+      >
+        <ElDescriptionsItem label="头像">
+          <ElAvatar :src="userInfo.user?.avatar" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="昵称">
+          {{ userInfo.user?.nickname }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+      <!-- 展示上级推广人的信息 -->
+      <ElDescriptions
+        title="上级推广人信息"
+        class="mt-4"
+        v-if="userInfo.bindUser"
+        :column="1"
+        bordered
+      >
+        <ElDescriptionsItem label="头像">
+          <ElAvatar :src="userInfo.bindUser?.avatar" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="昵称">
+          {{ userInfo.bindUser?.nickname }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="推广资格">
+          <ElTag v-if="userInfo.bindUser?.brokerageEnabled" color="success">
+            有
+          </ElTag>
+          <ElTag v-else>无</ElTag>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="成为推广员的时间">
+          {{ formatDate(userInfo.bindUser?.brokerageTime) }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-list-modal.vue b/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-list-modal.vue
new file mode 100644
index 00000000..23bc9793
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-list-modal.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElTag } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBrokerageUserPage } from '#/api/mall/trade/brokerage/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+defineOptions({ name: 'BrokerageUserListModal' });
+
+const bindUserId = ref<number>();
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      bindUserId.value = undefined;
+      return;
+    }
+    const data = modalApi.getData<MallBrokerageUserApi.BrokerageUser>();
+    if (!data || !data.id) {
+      return;
+    }
+    bindUserId.value = data.id;
+    // 等待弹窗打开后再查询
+    setTimeout(() => {
+      gridApi.query();
+    }, 100);
+  },
+});
+
+/** 搜索表单配置 */
+function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'level',
+      label: '用户类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '全部', value: undefined },
+          { label: '一级推广人', value: '1' },
+          { label: '二级推广人', value: '2' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'bindUserTime',
+      label: '绑定时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+function useColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '用户编号',
+      minWidth: 80,
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      minWidth: 70,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 24,
+          height: 24,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+      minWidth: 80,
+    },
+    {
+      field: 'brokerageUserCount',
+      title: '推广人数',
+      minWidth: 80,
+    },
+    {
+      field: 'brokerageOrderCount',
+      title: '推广订单数量',
+      minWidth: 110,
+    },
+    {
+      field: 'brokerageEnabled',
+      title: '推广资格',
+      minWidth: 80,
+      slots: { default: 'brokerageEnabled' },
+    },
+    {
+      field: 'bindUserTime',
+      title: '绑定时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useFormSchema(),
+  },
+  gridOptions: {
+    columns: useColumns(),
+    height: '600',
+    keepSource: true,
+    showOverflow: 'tooltip',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrokerageUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bindUserId: bindUserId.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
+});
+</script>
+
+<template>
+  <Modal title="推广人列表" class="w-3/5">
+    <Grid table-title="推广人列表">
+      <template #brokerageEnabled="{ row }">
+        <ElTag v-if="row.brokerageEnabled" color="success">有</ElTag>
+        <ElTag v-else>无</ElTag>
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-update-form.vue b/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-update-form.vue
new file mode 100644
index 00000000..8e850c62
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/user/modules/user-update-form.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { formatDate } from '@vben/utils';
+
+import {
+  ElAvatar,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElInput,
+  ElMessage,
+  ElTag,
+} from 'element-plus';
+
+import {
+  getBrokerageUser,
+  updateBindUser,
+} from '#/api/mall/trade/brokerage/user';
+
+/** 修改分销用户 */
+defineOptions({ name: 'BrokerageUserUpdateForm' });
+
+const emit = defineEmits(['success']);
+
+const formData = ref<any>();
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!formData.value) {
+      return;
+    }
+    // 未查找到合适的上级
+    if (!bindUser.value) {
+      ElMessage.error('请先查询并确认推广人');
+      return;
+    }
+    modalApi.lock();
+    try {
+      await updateBindUser(formData.value);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      formData.value = {
+        id: 0,
+        bindUserId: 0,
+      };
+      return;
+    }
+    const data = modalApi.getData<MallBrokerageUserApi.BrokerageUser>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = {
+        id: data.id,
+        bindUserId: data.bindUserId,
+      };
+      if (data.bindUserId) {
+        await handleGetUser();
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+const bindUser = ref<MallBrokerageUserApi.BrokerageUser>();
+
+/** 查询推广员 */
+async function handleGetUser() {
+  if (!formData.value) {
+    return;
+  }
+  if (formData.value.bindUserId === formData.value.id) {
+    ElMessage.error('不能绑定自己为推广人');
+    return;
+  }
+  try {
+    bindUser.value = await getBrokerageUser(formData.value.bindUserId);
+    if (!bindUser.value) {
+      ElMessage.warning('推广员不存在');
+    }
+  } catch {
+    ElMessage.warning('推广员不存在');
+  }
+}
+</script>
+
+<template>
+  <Modal title="修改上级推广人" class="w-2/5">
+    <div class="mr-2 flex items-center">
+      推广员编号：
+      <ElInput
+        v-model="formData.bindUserId"
+        placeholder="请输入推广员编号"
+        class="mx-2 !w-52"
+      >
+        <template #append>
+          <ElButton type="primary" @click="handleGetUser">
+            <IconifyIcon icon="lucide:search" :size="15" />
+          </ElButton>
+        </template>
+      </ElInput>
+    </div>
+
+    <!-- 展示上级推广人的信息 -->
+    <ElDescriptions class="mt-4" v-if="bindUser" :column="1" bordered>
+      <ElDescriptionsItem label="头像">
+        <ElAvatar :src="bindUser.avatar" />
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="昵称">
+        {{ bindUser.nickname }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="推广资格">
+        <ElTag v-if="bindUser.brokerageEnabled" color="success">有</ElTag>
+        <ElTag v-else>无</ElTag>
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="成为推广员的时间">
+        {{ formatDate(bindUser.brokerageTime) }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/withdraw/data.ts b/apps/web-ele/src/views/mall/trade/brokerage/withdraw/data.ts
new file mode 100644
index 00000000..34bce206
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/withdraw/data.ts
@@ -0,0 +1,145 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '提现类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择提现类型',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'userAccount',
+      label: '账号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入账号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'userName',
+      label: '真实名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入真实名字',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'bankName',
+      label: '提现银行',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择提现银行',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.BROKERAGE_BANK_NAME, 'string'),
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '申请时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 80,
+    },
+    {
+      field: 'userId',
+      title: '用户编号：',
+      minWidth: 80,
+    },
+    {
+      field: 'userNickname',
+      title: '用户昵称：',
+      minWidth: 80,
+    },
+    {
+      field: 'price',
+      title: '提现金额',
+      minWidth: 80,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'feePrice',
+      title: '提现手续费',
+      minWidth: 80,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'type',
+      title: '提现方式',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BROKERAGE_WITHDRAW_TYPE },
+      },
+    },
+    {
+      title: '提现信息',
+      minWidth: 200,
+      slots: { default: 'withdraw-info' },
+    },
+    {
+      field: 'createTime',
+      title: '申请时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      title: '状态',
+      minWidth: 200,
+      slots: { default: 'status-info' },
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue b/apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue
new file mode 100644
index 00000000..98d3d6d4
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBrokerageWithdrawApi } from '#/api/mall/trade/brokerage/withdraw';
+
+import { h } from 'vue';
+
+import { confirm, Page, prompt } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  approveBrokerageWithdraw,
+  getBrokerageWithdrawPage,
+  rejectBrokerageWithdraw,
+} from '#/api/mall/trade/brokerage/withdraw';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import {
+  BrokerageWithdrawStatusEnum,
+  BrokerageWithdrawTypeEnum,
+  DICT_TYPE,
+} from '#/utils';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 分销佣金提现 */
+defineOptions({ name: 'BrokerageWithdraw' });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 审核通过 */
+async function handleApprove(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
+  await confirm('确定要审核通过吗？');
+  await approveBrokerageWithdraw(row.id);
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  onRefresh();
+}
+
+/** 审核驳回 */
+function handleReject(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        placeholder: '请输入驳回原因',
+        allowClear: true,
+        rules: [{ required: true, message: '请输入驳回原因' }],
+      });
+    },
+    content: '请输入驳回原因',
+    title: '驳回',
+    modelPropName: 'value',
+  }).then(async (val) => {
+    if (val) {
+      await rejectBrokerageWithdraw({
+        id: row.id as number,
+        auditReason: val,
+      });
+      onRefresh();
+    }
+  });
+}
+
+/** 重新转账 */
+async function handleRetryTransfer(
+  row: MallBrokerageWithdrawApi.BrokerageWithdraw,
+) {
+  await confirm('确定要重新转账吗？');
+  await approveBrokerageWithdraw(row.id);
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  onRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    cellConfig: {
+      height: 80,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrokerageWithdrawPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageWithdrawApi.BrokerageWithdraw>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="佣金提现列表">
+      <template #withdraw-info="{ row }">
+        <div v-if="row.type === BrokerageWithdrawTypeEnum.WALLET.type">-</div>
+        <div v-else>
+          <div v-if="row.userAccount">账号：{{ row.userAccount }}</div>
+          <div v-if="row.userName">真实姓名：{{ row.userName }}</div>
+          <template v-if="row.type === BrokerageWithdrawTypeEnum.BANK.type">
+            <div v-if="row.bankName">银行名称：{{ row.bankName }}</div>
+            <div v-if="row.bankAddress">开户地址：{{ row.bankAddress }}</div>
+          </template>
+          <div v-if="row.qrCodeUrl" class="mt-2">
+            <div>收款码：</div>
+            <img :src="row.qrCodeUrl" class="mt-1 h-10 w-10" />
+          </div>
+        </div>
+      </template>
+
+      <template #status-info="{ row }">
+        <div>
+          <DictTag
+            :value="row.status"
+            :type="DICT_TYPE.BROKERAGE_WITHDRAW_STATUS"
+          />
+          <div v-if="row.auditTime" class="mt-1 text-xs text-gray-500">
+            时间：{{ formatDateTime(row.auditTime) }}
+          </div>
+          <div v-if="row.auditReason" class="mt-1 text-xs text-gray-500">
+            审核原因：{{ row.auditReason }}
+          </div>
+          <div v-if="row.transferErrorMsg" class="mt-1 text-xs text-red-500">
+            转账失败原因：{{ row.transferErrorMsg }}
+          </div>
+        </div>
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            // 审核中状态且没有支付转账编号，显示通过和驳回按钮
+            {
+              label: '通过',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['trade:brokerage-withdraw:audit'],
+              ifShow:
+                row.status === BrokerageWithdrawStatusEnum.AUDITING.status &&
+                !row.payTransferId,
+              onClick: () => handleApprove(row),
+            },
+            {
+              label: '驳回',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['trade:brokerage-withdraw:audit'],
+              ifShow:
+                row.status === BrokerageWithdrawStatusEnum.AUDITING.status &&
+                !row.payTransferId,
+              onClick: () => handleReject(row),
+            },
+            {
+              label: '重新转账',
+              link: true,
+              icon: ACTION_ICON.REFRESH,
+              auth: ['trade:brokerage-withdraw:audit'],
+              ifShow:
+                row.status === BrokerageWithdrawStatusEnum.WITHDRAW_FAIL.status,
+              onClick: () => handleRetryTransfer(row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/config/data.ts b/apps/web-ele/src/views/mall/trade/config/data.ts
new file mode 100644
index 00000000..a7bceff8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/config/data.ts
@@ -0,0 +1,251 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 售后表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'type',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'afterSaleRefundReasons',
+      label: '退款理由',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请直接输入退款理由',
+        multiple: true,
+        options: [],
+        class: 'w-full',
+        allowCreate: true,
+        filterable: true,
+        reserveKeyword: false,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'afterSale',
+      },
+    },
+    {
+      fieldName: 'afterSaleReturnReasons',
+      label: '退货理由',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请直接输入退货理由',
+        multiple: true,
+        options: [],
+        class: 'w-full',
+        allowCreate: true,
+        filterable: true,
+        reserveKeyword: false,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'afterSale',
+      },
+    },
+    {
+      fieldName: 'deliveryExpressFreeEnabled',
+      label: '启用包邮',
+      component: 'Switch',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'delivery',
+      },
+      description: '商城是否启用全场包邮',
+    },
+    {
+      fieldName: 'deliveryExpressFreePrice',
+      label: '满额包邮',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'delivery',
+      },
+      description: '商城商品满多少金额即可包邮，单位：元',
+    },
+    {
+      fieldName: 'deliveryPickUpEnabled',
+      label: '启用门店自提',
+      component: 'Switch',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'delivery',
+      },
+    },
+    {
+      fieldName: 'brokerageEnabled',
+      label: '启用分佣',
+      component: 'Switch',
+      description: '商城是否开启分销模式',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+    },
+    {
+      fieldName: 'brokerageEnabledCondition',
+      label: '分佣模式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BROKERAGE_ENABLED_CONDITION,
+          'number',
+        ),
+        buttonStyle: 'solid',
+        optionType: 'button',
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description:
+        '人人分销：每个用户都可以成为推广员 \n 单级分销：每个用户只能有一个上级推广员',
+    },
+    {
+      fieldName: 'brokerageBindMode',
+      label: '分销关系绑定',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.BROKERAGE_BIND_MODE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description:
+        '首次绑定：只要用户没有推广人，随时都可以绑定推广关系 \n 注册绑定：只有新用户注册时或首次进入系统时才可以绑定推广关系',
+    },
+    {
+      fieldName: 'brokeragePosterUrls',
+      label: '分销海报图',
+      component: 'ImageUpload',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '个人中心分销海报图片，建议尺寸 600x1000',
+    },
+    {
+      fieldName: 'brokerageFirstPercent',
+      label: '一级返佣比例',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 100,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '订单交易成功后给推广人返佣的百分比',
+    },
+    {
+      fieldName: 'brokerageSecondPercent',
+      label: '二级返佣比例',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 100,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '订单交易成功后给推广人的推荐人返佣的百分比',
+    },
+    {
+      fieldName: 'brokerageFrozenDays',
+      label: '佣金冻结天数',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description:
+        '防止用户退款，佣金被提现了，所以需要设置佣金冻结时间，单位：天',
+    },
+    {
+      fieldName: 'brokerageWithdrawMinPrice',
+      label: '提现最低金额',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '用户提现最低金额限制，单位：元',
+    },
+    {
+      fieldName: 'brokerageWithdrawFeePercent',
+      label: '提现手续费',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 100,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description:
+        '提现手续费百分比，范围 0-100，0 为无提现手续费。例：设置 10，即收取 10% 手续费，提现10 元，到账 9 元，1 元手续费',
+    },
+    {
+      fieldName: 'brokerageWithdrawTypes',
+      label: '提现方式',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE, 'number'),
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '商城开通提现的付款方式',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/config/index.vue b/apps/web-ele/src/views/mall/trade/config/index.vue
new file mode 100644
index 00000000..daf97f81
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/config/index.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { MallTradeConfigApi } from '#/api/mall/trade/config';
+
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElCard, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getTradeConfig, saveTradeConfig } from '#/api/mall/trade/config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from './data';
+
+const activeKey = ref('afterSale');
+const formData = ref<MallTradeConfigApi.Config & { type?: string }>();
+
+function handleTabChange(key: any) {
+  activeKey.value = key;
+  formData.value!.type = activeKey.value;
+  formApi.setValues(formData.value!);
+  formApi.updateSchema(useFormSchema());
+}
+
+async function loadConfig() {
+  const res = await getTradeConfig();
+  if (res) {
+    formData.value = res;
+    // 金额缩小
+    formData.value.deliveryExpressFreePrice =
+      formData.value.deliveryExpressFreePrice! / 100 || 0;
+    formData.value.brokerageWithdrawMinPrice =
+      formData.value.brokerageWithdrawMinPrice! / 100 || 0;
+    formData.value!.type = activeKey.value;
+    formApi.updateSchema(useFormSchema());
+    await formApi.setValues(formData.value);
+  }
+}
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  // 提交表单
+  const data = (await formApi.getValues()) as MallTradeConfigApi.Config;
+  formApi.setState({ commonConfig: { disabled: true } });
+  try {
+    await saveTradeConfig(data);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    formApi.setState({ commonConfig: { disabled: false } });
+  }
+}
+
+onMounted(() => {
+  loadConfig();
+});
+
+const [Form, formApi] = useVbenForm({
+  wrapperClass: 'grid-cols-1',
+  actionWrapperClass: 'text-center',
+  handleSubmit: onSubmit,
+  layout: 'horizontal',
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: useFormSchema(),
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【交易】交易订单"
+        url="https://doc.iocoder.cn/mall/trade-order/"
+      />
+      <DocAlert
+        title="【交易】购物车"
+        url="https://doc.iocoder.cn/mall/trade-cart/"
+      />
+    </template>
+    <ElCard class="h-full">
+      <ElTabs v-model="activeKey" @tab-change="handleTabChange">
+        <ElTabPane label="售后" name="afterSale" :force-render="true" />
+        <ElTabPane label="配送" name="delivery" :force-render="true" />
+        <ElTabPane label="分销" name="brokerage" :force-render="true" />
+      </ElTabs>
+      <Form class="w-3/5" />
+    </ElCard>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/delivery/express/data.ts b/apps/web-ele/src/views/mall/trade/delivery/express/data.ts
new file mode 100644
index 00000000..908cf3e1
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/express/data.ts
@@ -0,0 +1,130 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: '公司编码',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '公司名称',
+      rules: 'required',
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'logo',
+      label: '公司 logo',
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '快递公司名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'code',
+      label: '快递公司编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'code',
+      title: '公司编码',
+    },
+    {
+      field: 'name',
+      title: '公司名称',
+    },
+    {
+      field: 'logo',
+      title: '公司 logo',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/delivery/express/index.vue b/apps/web-ele/src/views/mall/trade/delivery/express/index.vue
new file mode 100644
index 00000000..550f5ede
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/express/index.vue
@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDeliveryExpress,
+  exportDeliveryExpress,
+  getDeliveryExpressPage,
+} from '#/api/mall/trade/delivery/express';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDeliveryExpress(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '快递公司.xls', source: data });
+}
+
+/** 创建快递公司 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑快递公司 */
+function handleEdit(row: MallDeliveryExpressApi.DeliveryExpress) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除快递公司 */
+async function handleDelete(row: MallDeliveryExpressApi.DeliveryExpress) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteDeliveryExpress(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDeliveryExpressPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallDeliveryExpressApi.DeliveryExpress>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="快递公司列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['快递公司']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['trade:delivery:express:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['trade:delivery:express:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['trade:delivery:express:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              link: true,
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['trade:delivery:express:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/delivery/express/modules/form.vue b/apps/web-ele/src/views/mall/trade/delivery/express/modules/form.vue
new file mode 100644
index 00000000..5cf29b3b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/express/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createDeliveryExpress,
+  getDeliveryExpress,
+  updateDeliveryExpress,
+} from '#/api/mall/trade/delivery/express';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallDeliveryExpressApi.DeliveryExpress>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['快递公司'])
+    : $t('ui.actionTitle.create', ['快递公司']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallDeliveryExpressApi.DeliveryExpress;
+    try {
+      await (formData.value?.id
+        ? updateDeliveryExpress(data)
+        : createDeliveryExpress(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallDeliveryExpressApi.DeliveryExpress>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDeliveryExpress(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/data.ts b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/data.ts
new file mode 100644
index 00000000..b243fd88
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/data.ts
@@ -0,0 +1,102 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '模板名称',
+      rules: 'required',
+    },
+    {
+      fieldName: 'chargeMode',
+      label: '计费方式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.EXPRESS_CHARGE_MODE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'chargeMode',
+      label: '计费方式',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.EXPRESS_CHARGE_MODE, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '模板名称',
+    },
+    {
+      field: 'chargeMode',
+      title: '计费方式',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.EXPRESS_CHARGE_MODE },
+      },
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue
new file mode 100644
index 00000000..c429b6c6
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallDeliveryExpressTemplateApi } from '#/api/mall/trade/delivery/expressTemplate';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDeliveryExpressTemplate,
+  getDeliveryExpressTemplatePage,
+} from '#/api/mall/trade/delivery/expressTemplate';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建快递模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑快递模板 */
+function handleEdit(row: MallDeliveryExpressTemplateApi.ExpressTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除快递模板 */
+async function handleDelete(
+  row: MallDeliveryExpressTemplateApi.ExpressTemplate,
+) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteDeliveryExpressTemplate(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDeliveryExpressTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallDeliveryExpressTemplateApi.ExpressTemplate>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="快递模板列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['快递模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['trade:delivery:express-template:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['trade:delivery:express-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              link: true,
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['trade:delivery:express-template:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/modules/form.vue b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/modules/form.vue
new file mode 100644
index 00000000..715bfedf
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/modules/form.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { MallDeliveryExpressTemplateApi } from '#/api/mall/trade/delivery/expressTemplate';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createDeliveryExpressTemplate,
+  getDeliveryExpressTemplate,
+  updateDeliveryExpressTemplate,
+} from '#/api/mall/trade/delivery/expressTemplate';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallDeliveryExpressTemplateApi.ExpressTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['快递模板'])
+    : $t('ui.actionTitle.create', ['快递模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+// TODO @xingyu：城市处理；
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallDeliveryExpressTemplateApi.ExpressTemplate;
+    try {
+      await (formData.value?.id
+        ? updateDeliveryExpressTemplate(data)
+        : createDeliveryExpressTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data =
+      modalApi.getData<MallDeliveryExpressTemplateApi.ExpressTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDeliveryExpressTemplate(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
new file mode 100644
index 00000000..8b03d72c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
@@ -0,0 +1,125 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+
+import { ref } from 'vue';
+
+import { getSimpleDeliveryPickUpStoreList } from '#/api/mall/trade/delivery/pickUpStore';
+import {
+  DeliveryTypeEnum,
+  DICT_TYPE,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.PickUpStore[]>([]);
+
+getSimpleDeliveryPickUpStoreList().then((res) => {
+  pickUpStoreList.value = res;
+});
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'pickUpStoreId',
+      label: '自提门店',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeliveryPickUpStoreList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['deliveryType'],
+        trigger: (values) =>
+          values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      field: 'no',
+      title: '订单号',
+      fixed: 'left',
+      minWidth: 180,
+    },
+    {
+      field: 'user.nickname',
+      title: '用户信息',
+      minWidth: 100,
+    },
+    {
+      field: 'brokerageUser.nickname',
+      title: '推荐人信息',
+      minWidth: 100,
+    },
+    {
+      field: 'spuName',
+      title: '商品信息',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        if (row.items.length > 1) {
+          return row.items.map((item: any) => item.spuName).join(',');
+        }
+      },
+    },
+    {
+      field: 'payPrice',
+      title: '实付金额(元)',
+      formatter: 'formatFenToYuanAmount',
+      minWidth: 180,
+    },
+    {
+      field: 'storeStaffName',
+      title: '核销员',
+      minWidth: 160,
+    },
+    {
+      field: 'pickUpStoreId',
+      title: '核销门店',
+      minWidth: 160,
+      formatter: ({ row }) => {
+        return pickUpStoreList.value.find(
+          (item) => item.id === row.pickUpStoreId,
+        )?.name;
+      },
+    },
+    {
+      field: 'payStatus',
+      title: '支付状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'status',
+      title: '订单状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.TRADE_ORDER_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'createTime',
+      title: '下单时间',
+      formatter: 'formatDateTime',
+      minWidth: 160,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue
new file mode 100644
index 00000000..c7b8828a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -0,0 +1,241 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { h, onMounted, ref } from 'vue';
+
+import { Page, prompt } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import { ElCard, ElInput, ElMessage } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getOrderByPickUpVerifyCode,
+  getOrderPage,
+  getOrderSummary,
+} from '#/api/mall/trade/order';
+import { SummaryCard } from '#/components/summary-card';
+import { DeliveryTypeEnum, TradeOrderStatusEnum } from '#/utils';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const summary = ref<MallOrderApi.OrderSummary>();
+
+async function getOrderSum() {
+  const query = await gridApi.formApi.getValues();
+  query.deliveryType = DeliveryTypeEnum.PICK_UP.type;
+  const res = await getOrderSummary(query as any);
+  summary.value = res;
+}
+
+/** 核销 */
+async function handlePickup(pickUpVerifyCode?: string) {
+  if (!pickUpVerifyCode) {
+    await prompt({
+      component: () => {
+        return h(ElInput, {});
+      },
+      content: '请输入核销码',
+      title: '核销订单',
+      modelPropName: 'value',
+    }).then(async (val) => {
+      if (val) {
+        pickUpVerifyCode = val;
+      }
+    });
+  }
+  if (!pickUpVerifyCode) {
+    return;
+  }
+  const data = await getOrderByPickUpVerifyCode(pickUpVerifyCode);
+  if (data?.deliveryType !== DeliveryTypeEnum.PICK_UP.type) {
+    ElMessage.error('未查询到订单');
+    return;
+  }
+  if (data?.status !== TradeOrderStatusEnum.UNDELIVERED.status) {
+    ElMessage.error('订单不是待核销状态');
+  }
+}
+
+const port = ref('');
+const ports = ref([]);
+const reader = ref('');
+const serialPort = ref(false); // 是否连接扫码枪
+
+/** 连接扫码枪 */
+async function connectToSerialPort() {
+  try {
+    // 判断浏览器支持串口通信
+    if (
+      'serial' in navigator &&
+      navigator.serial !== null &&
+      typeof navigator.serial === 'object' &&
+      'requestPort' in navigator.serial
+    ) {
+      // 提示用户选择一个串口
+      port.value = await (navigator.serial as any).requestPort();
+    } else {
+      ElMessage.error('浏览器不支持扫码枪连接，请更换浏览器重试');
+      return;
+    }
+
+    // 获取用户之前授予该网站访问权限的所有串口。
+    ports.value = await (navigator.serial as any).getPorts();
+
+    // 等待串口打开
+    await (port.value as any).open({
+      baudRate: 9600,
+      dataBits: 8,
+      stopBits: 2,
+    });
+
+    ElMessage.success('成功连接扫码枪');
+    serialPort.value = true;
+    readData();
+  } catch (error) {
+    // 处理连接串口出错的情况
+    console.error('Error connecting to serial port:', error);
+  }
+}
+
+/** 监听扫码枪输入 */
+async function readData() {
+  reader.value = (port.value as any).readable.getReader();
+  let data = ''; // 扫码数据
+  // 监听来自串口的数据
+  while (true) {
+    const { value, done } = await (reader.value as any).read();
+    if (done) {
+      // 允许稍后关闭串口
+      (reader.value as any).releaseLock();
+      break;
+    }
+    // 获取发送的数据
+    const serialData = new TextDecoder().decode(value);
+    data = `${data}${serialData}`;
+    if (serialData.includes('\r')) {
+      // 读取结束
+      const codeData = data.replace('\r', '');
+      data = ''; // 清空下次读取不会叠加
+      console.warn(`二维码数据:${codeData}`);
+      // 处理拿到数据逻辑
+      handlePickup(codeData);
+    }
+  }
+}
+
+async function cutPort() {
+  if (port.value === '') {
+    ElMessage.warning('请先连接或打开扫码枪');
+  } else {
+    await (reader.value as any).cancel();
+    await (port.value as any).close();
+    port.value = '';
+    console.warn('断开扫码枪连接');
+    ElMessage.success('已成功断开扫码枪连接');
+    serialPort.value = false;
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            deliveryType: DeliveryTypeEnum.PICK_UP.type,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.Order>,
+});
+
+onMounted(() => {
+  getOrderSum();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <ElCard class="mb-4 h-[10%]">
+      <div class="flex flex-row gap-4">
+        <SummaryCard
+          class="flex flex-1"
+          title="订单数量"
+          icon="icon-park-outline:transaction-order"
+          icon-color="bg-blue-100"
+          icon-bg-color="text-blue-500"
+          :value="summary?.orderCount || 0"
+        />
+        <SummaryCard
+          class="flex flex-1"
+          title="订单金额"
+          icon="streamline:money-cash-file-dollar-common-money-currency-cash-file"
+          icon-color="bg-purple-100"
+          icon-bg-color="text-purple-500"
+          prefix="￥"
+          :decimals="2"
+          :value="Number(fenToYuan(summary?.orderPayPrice || 0))"
+        />
+        <SummaryCard
+          class="flex flex-1"
+          title="退款单数"
+          icon="heroicons:receipt-refund"
+          icon-color="bg-yellow-100"
+          icon-bg-color="text-yellow-500"
+          :value="summary?.afterSaleCount || 0"
+        />
+        <SummaryCard
+          class="flex flex-1"
+          title="退款金额"
+          icon="ri:refund-2-line"
+          icon-color="bg-green-100"
+          icon-bg-color="text-green-500"
+          prefix="￥"
+          :decimals="2"
+          :value="Number(fenToYuan(summary?.afterSalePrice || 0))"
+        />
+      </div>
+    </ElCard>
+    <Grid class="h-4/5" table-title="核销订单">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '核销',
+              type: 'primary',
+              icon: 'lucide:circle-check-big',
+              auth: ['trade:order:pick-up'],
+              onClick: handlePickup.bind(null, undefined),
+            },
+            {
+              label: serialPort ? '断开扫描枪' : '连接扫描枪',
+              type: 'primary',
+              icon: serialPort ? 'lucide:circle-x' : 'lucide:circle-play',
+              link: true,
+              onClick: serialPort ? cutPort : connectToSerialPort,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
new file mode 100644
index 00000000..86b08471
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
@@ -0,0 +1,248 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { getAreaTree } from '#/api/system/area';
+import { getSimpleUserList } from '#/api/system/user';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'logo',
+      label: '门店logo',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '门店名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'phone',
+      label: '门店手机',
+      rules: 'mobileRequired',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'introduction',
+      label: '门店简介',
+    },
+    {
+      fieldName: 'areaId',
+      label: '地址',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: () => getAreaTree(),
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'detailAddress',
+      label: '详细地址',
+      rules: 'required',
+    },
+    {
+      component: 'TimePicker',
+      fieldName: 'openingTime',
+      label: '营业开始时间',
+      rules: 'required',
+    },
+    {
+      component: 'TimePicker',
+      fieldName: 'closingTime',
+      label: '营业结束时间',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'longitude',
+      label: '经度',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'latitude',
+      label: '纬度',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'getGeo',
+      label: '获取经纬度',
+    },
+    {
+      fieldName: 'status',
+      label: '门店状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 绑定店员的表单 */
+export function useBindFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '门店名称',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: true,
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'verifyUserIds',
+      label: '门店店员',
+      rules: 'required',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        labelField: 'nickname',
+        valueField: 'id',
+        mode: 'tags',
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'verifyUsers',
+      label: '店员列表',
+      rules: 'required',
+      componentProps: {
+        options: [],
+        mode: 'tags',
+      },
+      dependencies: {
+        triggerFields: ['verifyUserIds'],
+        trigger(values, form) {
+          form.setFieldValue('verifyUsers', values.verifyUserIds);
+        },
+        disabled: true,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'phone',
+      label: '门店手机',
+      component: 'Input',
+    },
+    {
+      fieldName: 'name',
+      label: '门店名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '门店状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'logo',
+      title: '门店logo',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '门店名称',
+    },
+    {
+      field: 'phone',
+      title: '门店手机',
+    },
+    {
+      field: 'detailAddress',
+      title: '地址',
+    },
+    {
+      field: 'openingTime',
+      title: '营业时间',
+      formatter: ({ row }) => {
+        return `${row.openingTime} ~ ${row.closingTime}`;
+      },
+    },
+    {
+      field: 'status',
+      title: '开启状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue
new file mode 100644
index 00000000..ababd476
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue
@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDeliveryPickUpStore,
+  getDeliveryPickUpStorePage,
+} from '#/api/mall/trade/delivery/pickUpStore';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import BindForm from './modules/bind-form.vue';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [BindFormModal, bindFormModalApi] = useVbenModal({
+  connectedComponent: BindForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建门店 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑门店 */
+function handleEdit(row: MallDeliveryPickUpStoreApi.PickUpStore) {
+  formModalApi.setData(row).open();
+}
+
+/** 绑定店员 */
+function handleBind(row: MallDeliveryPickUpStoreApi.PickUpStore) {
+  bindFormModalApi.setData(row).open();
+}
+
+/** 删除门店 */
+async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteDeliveryPickUpStore(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDeliveryPickUpStorePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallDeliveryPickUpStoreApi.PickUpStore>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <BindFormModal />
+    <Grid table-title="门店列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['门店']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['trade:delivery:pick-up-store:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['trade:delivery:pick-up-store:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '绑定店员',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              auth: ['trade:delivery:pick-up-store:update'],
+              onClick: handleBind.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              link: true,
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['trade:delivery:pick-up-store:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/bind-form.vue b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/bind-form.vue
new file mode 100644
index 00000000..6e6f792f
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/bind-form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  bindStoreStaffId,
+  getDeliveryPickUpStore,
+} from '#/api/mall/trade/delivery/pickUpStore';
+import { $t } from '#/locales';
+
+import { useBindFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallDeliveryPickUpStoreApi.PickUpStore>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['绑定店员'])
+    : $t('ui.actionTitle.create', ['绑定店员']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useBindFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallDeliveryPickUpStoreApi.BindStaffRequest;
+    try {
+      await bindStoreStaffId(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data =
+      modalApi.getData<MallDeliveryPickUpStoreApi.BindStaffRequest>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDeliveryPickUpStore(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/form.vue b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/form.vue
new file mode 100644
index 00000000..2a4afeaa
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createDeliveryPickUpStore,
+  getDeliveryPickUpStore,
+  updateDeliveryPickUpStore,
+} from '#/api/mall/trade/delivery/pickUpStore';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallDeliveryPickUpStoreApi.PickUpStore>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['自提订单'])
+    : $t('ui.actionTitle.create', ['自提订单']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MallDeliveryPickUpStoreApi.PickUpStore;
+    try {
+      await (formData.value?.id
+        ? updateDeliveryPickUpStore(data)
+        : createDeliveryPickUpStore(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallDeliveryPickUpStoreApi.PickUpStore>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDeliveryPickUpStore(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/order/data.ts b/apps/web-ele/src/views/mall/trade/order/data.ts
new file mode 100644
index 00000000..e81813ab
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/data.ts
@@ -0,0 +1,214 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+
+import { ref } from 'vue';
+
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { getSimpleDeliveryPickUpStoreList } from '#/api/mall/trade/delivery/pickUpStore';
+import {
+  DeliveryTypeEnum,
+  DICT_TYPE,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.PickUpStore[]>([]);
+
+getSimpleDeliveryPickUpStoreList().then((res) => {
+  pickUpStoreList.value = res;
+});
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'status',
+      label: '订单状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_ORDER_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'payChannelCode',
+      label: '支付方式',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'number'),
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '品牌名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'terminal',
+      label: '订单来源',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TERMINAL, 'number'),
+      },
+    },
+    {
+      fieldName: 'deliveryType',
+      label: '配送方式',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'logisticsId',
+      label: '快递公司',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeliveryExpressList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['deliveryType'],
+        show: (values) => values.deliveryType === DeliveryTypeEnum.EXPRESS.type,
+      },
+    },
+    {
+      fieldName: 'pickUpStoreId',
+      label: '自提门店',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeliveryPickUpStoreList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['deliveryType'],
+        show: (values) => values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
+      },
+    },
+    {
+      fieldName: 'pickUpVerifyCode',
+      label: '核销码',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['deliveryType'],
+        show: (values) => values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'expand',
+      width: 80,
+      slots: { content: 'expand_content' },
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '订单号',
+      fixed: 'left',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '下单时间',
+      formatter: 'formatDateTime',
+      minWidth: 160,
+    },
+    {
+      field: 'terminal',
+      title: '订单来源',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.TERMINAL },
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'payChannelCode',
+      title: '支付方式',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'payTime',
+      title: '支付时间',
+      formatter: 'formatDateTime',
+      minWidth: 160,
+    },
+    {
+      field: 'type',
+      title: '订单类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.TRADE_ORDER_TYPE },
+      },
+      minWidth: 80,
+    },
+
+    {
+      field: 'payPrice',
+      title: '实际支付',
+      formatter: 'formatFenToYuanAmount',
+      minWidth: 180,
+    },
+    {
+      field: 'user',
+      title: '买家/收货人',
+      formatter: ({ row }) => {
+        if (row.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
+          return `买家：${row.user?.nickname} / 收货人： ${row.receiverName} ${row.receiverMobile}${row.receiverAreaName}${row.receiverDetailAddress}`;
+        }
+        if (row.deliveryType === DeliveryTypeEnum.PICK_UP.type) {
+          return `门店名称：${pickUpStoreList.value.find((item) => item.id === row.pickUpStoreId)?.name} /
+                  门店手机：${pickUpStoreList.value.find((item) => item.id === row.pickUpStoreId)?.phone} /
+                  自提门店：${pickUpStoreList.value.find((item) => item.id === row.pickUpStoreId)?.detailAddress}
+                  `;
+        }
+        return '';
+      },
+      minWidth: 180,
+    },
+    {
+      field: 'deliveryType',
+      title: '配送方式',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.TRADE_DELIVERY_TYPE },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'status',
+      title: '订单状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.TRADE_ORDER_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/order/index.vue b/apps/web-ele/src/views/mall/trade/order/index.vue
new file mode 100644
index 00000000..327f776e
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/index.vue
@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { h } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, prompt, useVbenModal } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import { ElImage, ElInput, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage, updateOrderRemark } from '#/api/mall/trade/order';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { DeliveryTypeEnum, DICT_TYPE, TradeOrderStatusEnum } from '#/utils';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DeleveryForm from './modules/delevery-form.vue';
+
+const [DeleveryFormModal, deleveryFormModalApi] = useVbenModal({
+  connectedComponent: DeleveryForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+const { push } = useRouter();
+// TODO xingyu：貌似详情，还点不进去哇？
+/** 详情 */
+function handleDetail(row: MallOrderApi.Order) {
+  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+}
+
+/** 发货 */
+function handleDelivery(row: MallOrderApi.Order) {
+  deleveryFormModalApi.setData(row).open();
+}
+
+/** 备注 */
+function handleRemake(row: MallOrderApi.Order) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        defaultValue: row.remark,
+        rows: 3,
+        type: 'textarea',
+      });
+    },
+    content: '请输入订单备注',
+    title: '订单备注',
+    modelPropName: 'value',
+  }).then(async (val) => {
+    if (val) {
+      await updateOrderRemark({
+        id: row.id as number,
+        remark: val,
+      });
+      onRefresh();
+    }
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【交易】交易订单"
+        url="https://doc.iocoder.cn/mall/trade-order/"
+      />
+      <DocAlert
+        title="【交易】购物车"
+        url="https://doc.iocoder.cn/mall/trade-cart/"
+      />
+    </template>
+    <DeleveryFormModal @success="onRefresh" />
+    <Grid table-title="订单列表">
+      <template #expand_content="{ row }">
+        <div class="order-items">
+          <div v-for="item in row.items" :key="item.id" class="order-item">
+            <div class="order-item-image">
+              <ElImage :src="item.picUrl" class="h-40 w-40" />
+            </div>
+            <div class="order-item-content">
+              <div class="order-item-name">
+                {{ item.spuName }}
+                <ElTag
+                  v-for="property in item.properties"
+                  :key="property.id"
+                  class="ml-1"
+                >
+                  {{ property.propertyName }}: {{ property.valueName }}
+                </ElTag>
+              </div>
+              <div class="order-item-info">
+                <span>
+                  原价：{{ fenToYuan(item.price) }} 元 / 数量：{{
+                    item.count
+                  }}个
+                </span>
+                <DictTag
+                  :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                  :value="item.afterSaleStatus"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['trade:order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '发货',
+              link: true,
+              ifShow: () =>
+                row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
+                row.status === TradeOrderStatusEnum.UNDELIVERED.status,
+              onClick: handleDelivery.bind(null, row),
+            },
+            {
+              label: '备注',
+              link: true,
+              onClick: handleRemake.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+.order-items {
+  padding: 8px 0;
+}
+
+.order-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.order-item-image {
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.order-item-content {
+  flex: 1;
+}
+
+.order-item-name {
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.order-item-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  color: #666;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue
new file mode 100644
index 00000000..54081616
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { deliveryOrder } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'expressType',
+      label: '发货方式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '快递', value: 'express' },
+          { label: '无需发货', value: 'none' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'logisticsId',
+      label: '物流公司',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeliveryExpressList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+    },
+    {
+      fieldName: 'logisticsNo',
+      label: '物流单号',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
+    if (data.expressType === 'none') {
+      // 无需发货的情况
+      data.logisticsId = 0;
+      data.logisticsNo = '';
+    }
+    try {
+      await deliveryOrder(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      if (data.logisticsId === 0) {
+        await formApi.setValues({ expressType: 'none' });
+      }
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/detail.vue b/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
new file mode 100644
index 00000000..dadab139
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
@@ -0,0 +1,555 @@
+<script lang="ts" setup>
+import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElMessage,
+  ElTimeline,
+  ElTimelineItem,
+} from 'element-plus';
+
+import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
+import * as DeliveryPickUpStoreApi from '#/api/mall/trade/delivery/pickUpStore';
+import * as TradeOrderApi from '#/api/mall/trade/order';
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { DictTag } from '#/components/dict-tag';
+import { DeliveryTypeEnum, TradeOrderStatusEnum } from '#/utils/constants';
+import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
+
+import OrderDeliveryForm from './delevery-form.vue';
+import OrderUpdateAddressForm from './update-address-form.vue';
+import OrderUpdatePriceForm from './update-price-form.vue';
+import OrderUpdateRemarkForm from './update-remark-form.vue';
+
+defineOptions({ name: 'TradeOrderDetail' });
+
+// 查询参数
+const props = defineProps({
+  id: {
+    type: Number,
+    default: undefined,
+  }, // 订单ID
+  showPickUp: {
+    type: Boolean,
+    default: true,
+  }, // 显示核销按钮
+});
+
+const [OrderDeliveryFormModal, formModalApi] = useVbenModal({
+  connectedComponent: OrderDeliveryForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdateRemarkFormModal, remarkFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdateRemarkForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdateAddressFormModal, addressFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdateAddressForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdatePriceFormModal, priceFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdatePriceForm,
+  destroyOnClose: true,
+});
+
+/** 获得 userType 颜色 */
+const getUserTypeColor = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
+  }
+  return '#409EFF';
+};
+
+// 订单详情
+const formData = ref<MallOrderApi.Order>({
+  logs: [],
+});
+
+/** 各种操作 */
+const remark = () => {
+  remarkFormModalApi.setData(formData.value).open();
+};
+
+const delivery = () => {
+  formModalApi.setData(formData.value).open();
+};
+const updateAddress = () => {
+  addressFormModalApi.setData(formData.value).open();
+};
+
+const updatePrice = () => {
+  priceFormModalApi.setData(formData.value).open();
+};
+
+/** 核销 */
+const handlePickUp = async () => {
+  // 二次确认
+  await confirm(`确认核销订单吗？`);
+  await TradeOrderApi.pickUpOrder(formData.value.id!);
+  ElMessage.success('核销成功');
+  // 刷新列表
+  await getDetail();
+};
+
+/** 获得详情 */
+const { params } = useRoute();
+const id = (params.id || props.id) as unknown as number;
+const getDetail = async () => {
+  if (id) {
+    const res = (await TradeOrderApi.getOrder(id)) as MallOrderApi.Order;
+    // 没有表单信息则关闭页面返回
+    if (!res) {
+      ElMessage.error('交易订单不存在');
+      close();
+    }
+    formData.value = res;
+  }
+};
+
+/** 关闭 tag */
+const { push } = useRouter(); // 路由
+const close = () => {
+  push({ name: 'TradeOrder' });
+};
+
+/** 复制 */
+const clipboardSuccess = () => {
+  ElMessage.success('复制成功');
+};
+
+/** 初始化 */
+const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
+  [],
+);
+// 物流公司
+const expressTrackList = ref<MallOrderApi.OrderExpressTrackRespDTO[]>([]); // 物流详情
+const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore>(
+  {} as MallDeliveryPickUpStoreApi.PickUpStore,
+); // 自提门店
+onMounted(async () => {
+  await getDetail();
+  // 如果配送方式为快递，则查询物流公司
+  if (formData.value.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
+    deliveryExpressList.value =
+      await DeliveryExpressApi.getSimpleDeliveryExpressList();
+    if (formData.value.logisticsId) {
+      expressTrackList.value = await TradeOrderApi.getExpressTrackList(
+        formData.value.id!,
+      );
+    }
+  } else if (
+    formData.value.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
+    formData.value.pickUpStoreId
+  ) {
+    pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
+      formData.value.pickUpStoreId,
+    );
+  }
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ContentWrap>
+      <!-- 订单信息 -->
+      <ElDescriptions title="订单信息">
+        <ElDescriptionsItem label="订单号: ">
+          {{ formData.no }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家: ">
+          {{ formData?.user?.nickname }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单类型: ">
+          <DictTag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单来源: ">
+          <DictTag :type="DICT_TYPE.TERMINAL" :value="formData.terminal!" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家留言: ">
+          {{ formData.userRemark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="商家备注: ">
+          {{ formData.remark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="支付单号: ">
+          {{ formData.payOrderId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="付款方式: ">
+          <DictTag
+            :type="DICT_TYPE.PAY_CHANNEL_CODE"
+            :value="formData.payChannelCode!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem v-if="formData.brokerageUser" label="推广用户: ">
+          {{ formData.brokerageUser?.nickname }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 订单状态 -->
+      <ElDescriptions :column="1" title="订单状态">
+        <ElDescriptionsItem label="订单状态: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_ORDER_STATUS"
+            :value="formData.status!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          v-hasPermi="['trade:order:update']"
+          label-class-name="no-colon"
+        >
+          <el-button
+            v-if="formData.status! === TradeOrderStatusEnum.UNPAID.status"
+            type="primary"
+            @click="updatePrice"
+          >
+            调整价格
+          </el-button>
+          <el-button type="primary" @click="remark">备注</el-button>
+          <!-- 待发货 -->
+          <template
+            v-if="formData.status! === TradeOrderStatusEnum.UNDELIVERED.status"
+          >
+            <!-- 快递发货 -->
+            <el-button
+              v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+              type="primary"
+              @click="delivery"
+            >
+              发货
+            </el-button>
+            <el-button
+              v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+              type="primary"
+              @click="updateAddress"
+            >
+              修改地址
+            </el-button>
+            <!-- 到店自提 -->
+            <el-button
+              v-if="
+                formData.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
+                showPickUp
+              "
+              type="primary"
+              @click="handlePickUp"
+            >
+              核销
+            </el-button>
+          </template>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label>
+            <span style="color: red">提醒: </span>
+          </template>
+          <el-text>
+            买家付款成功后，货款将直接进入您的商户号（微信、支付宝）<br />
+            请及时关注你发出的包裹状态，确保可以配送至买家手中 <br />
+            如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商
+          </el-text>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 商品信息 -->
+      <ElDescriptions title="商品信息">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-row :gutter="20">
+            <el-col :span="15">
+              <el-table :data="formData.items" border>
+                <el-table-column label="商品" prop="spuName" width="auto">
+                  <template #default="{ row }">
+                    {{ row.spuName }}
+                    <el-tag
+                      v-for="property in row.properties"
+                      :key="property.propertyId"
+                    >
+                      {{ property.propertyName }}: {{ property.valueName }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品原价" prop="price" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.price) }}元
+                  </template>
+                </el-table-column>
+                <el-table-column label="数量" prop="count" width="100" />
+                <el-table-column label="合计" prop="payPrice" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.payPrice) }}元
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="售后状态"
+                  prop="afterSaleStatus"
+                  width="120"
+                >
+                  <template #default="{ row }">
+                    <DictTag
+                      :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                      :value="row.afterSaleStatus"
+                    />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="10" />
+          </el-row>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+      <ElDescriptions :column="4">
+        <!-- 第一层 -->
+        <ElDescriptionsItem label="商品总额: ">
+          {{ fenToYuan(formData.totalPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="运费金额: ">
+          {{ fenToYuan(formData.deliveryPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单调价: ">
+          {{ fenToYuan(formData.adjustPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          v-for="item in 1"
+          :key="item"
+          label-class-name="no-colon"
+        />
+        <!-- 第二层 -->
+        <ElDescriptionsItem>
+          <template #label>
+            <span style="color: red">优惠劵优惠: </span>
+          </template>
+          {{ fenToYuan(formData.couponPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">VIP 优惠: </span></template>
+          {{ fenToYuan(formData.vipPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">活动优惠: </span></template>
+          {{ fenToYuan(formData.discountPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">积分抵扣: </span></template>
+          {{ fenToYuan(formData.pointPrice!) }} 元
+        </ElDescriptionsItem>
+        <!-- 第三层 -->
+        <ElDescriptionsItem
+          v-for="item in 3"
+          :key="item"
+          label-class-name="no-colon"
+        />
+        <ElDescriptionsItem label="应付金额: ">
+          {{ fenToYuan(formData.payPrice!) }} 元
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 物流信息 -->
+      <ElDescriptions :column="4" title="收货信息">
+        <ElDescriptionsItem label="配送方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_DELIVERY_TYPE"
+            :value="formData.deliveryType!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="收货人: ">
+          {{ formData.receiverName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="联系电话: ">
+          {{ formData.receiverMobile }}
+        </ElDescriptionsItem>
+        <!-- 快递配送 -->
+        <div v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type">
+          <ElDescriptionsItem
+            v-if="formData.receiverDetailAddress"
+            label="收货地址: "
+          >
+            {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
+            <el-link
+              v-clipboard:copy="
+                `${formData.receiverAreaName} ${formData.receiverDetailAddress}`
+              "
+              v-clipboard:success="clipboardSuccess"
+              icon="ep:document-copy"
+              type="primary"
+            />
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.logisticsId" label="物流公司: ">
+            {{
+              deliveryExpressList.find(
+                (item) => item.id === formData.logisticsId,
+              )?.name
+            }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.logisticsId" label="运单号: ">
+            {{ formData.logisticsNo }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.deliveryTime" label="发货时间: ">
+            {{ formatDate(formData.deliveryTime) }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem
+            v-for="item in 2"
+            :key="item"
+            label-class-name="no-colon"
+          />
+          <ElDescriptionsItem
+            v-if="expressTrackList.length > 0"
+            label="物流详情: "
+          >
+            <ElTimeline>
+              <ElTimelineItem
+                v-for="(express, index) in expressTrackList"
+                :key="index"
+                :timestamp="formatDate(express.time)?.toString()"
+              >
+                {{ express.content }}
+              </ElTimelineItem>
+            </ElTimeline>
+          </ElDescriptionsItem>
+        </div>
+        <!-- 自提门店 -->
+        <div v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type">
+          <ElDescriptionsItem v-if="formData.pickUpStoreId" label="自提门店: ">
+            {{ pickUpStore?.name }}
+          </ElDescriptionsItem>
+        </div>
+      </ElDescriptions>
+
+      <!-- 订单日志 -->
+      <ElDescriptions title="订单操作日志">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <ElTimeline>
+            <ElTimelineItem
+              v-for="(log, index) in formData.logs"
+              :key="index"
+              :timestamp="formatDate(log.createTime!)!.toString()"
+              placement="top"
+            >
+              <div class="el-timeline-right-content">
+                {{ log.content }}
+              </div>
+              <template #dot>
+                <span
+                  :style="{ backgroundColor: getUserTypeColor(log.userType!) }"
+                  class="dot-node-style"
+                >
+                  {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+                </span>
+              </template>
+            </ElTimelineItem>
+          </ElTimeline>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ContentWrap>
+
+    <!-- 各种操作的弹窗 -->
+    <OrderDeliveryFormModal @success="getDetail" />
+    <OrderUpdateRemarkFormModal @success="getDetail" />
+    <OrderUpdateAddressFormModal @success="getDetail" />
+    <OrderUpdatePriceFormModal @success="getDetail" />
+  </Page>
+</template>
+<style lang="scss" scoped>
+:deep(.el-descriptions) {
+  &:not(:nth-child(1)) {
+    margin-top: 20px;
+  }
+
+  .el-descriptions__title {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      width: 3px;
+      height: 20px;
+      margin-right: 10px;
+      content: '';
+      background-color: #409eff;
+    }
+  }
+
+  .el-descriptions-item__container {
+    margin: 0 10px;
+
+    .no-colon {
+      margin: 0;
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+}
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0 0 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+}
+
+/* 单独定义气泡样式，不使用嵌套 */
+:deep(.el-timeline-right-content) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 10px;
+  margin-left: 10px;
+  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
+  border-radius: 4px;
+}
+
+:deep(.el-timeline-right-content)::before {
+  position: absolute;
+  top: 10px;
+  left: -16px;
+  content: '';
+  border-color: transparent #f5f7fa transparent transparent;
+  border-style: solid;
+  border-width: 8px;
+}
+
+.dot-node-style {
+  position: absolute;
+  left: -5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  color: #fff;
+  border-radius: 50%;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/update-address-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/update-address-form.vue
new file mode 100644
index 00000000..c68d5fe7
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/update-address-form.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderAddress } from '#/api/mall/trade/order';
+import { getAreaTree } from '#/api/system/area';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'receiverName',
+      label: '收件人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人名称',
+      },
+    },
+    {
+      fieldName: 'receiverMobile',
+      label: '手机号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人手机号',
+      },
+    },
+    {
+      fieldName: 'receiverAreaId',
+      label: '所在地',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: () => getAreaTree(),
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择收件人所在地',
+        treeDefaultExpandAll: true,
+      },
+    },
+    {
+      fieldName: 'receiverDetailAddress',
+      label: '详细地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人详细地址',
+        type: 'textarea',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.AddressRequest;
+    try {
+      await updateOrderAddress(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      await formApi.setValues({
+        id: data.id,
+        receiverName: data.receiverName,
+        receiverMobile: data.receiverMobile,
+        receiverAreaId: data.receiverAreaId,
+        receiverDetailAddress: data.receiverDetailAddress,
+      });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/update-price-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/update-price-form.vue
new file mode 100644
index 00000000..1728944c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/update-price-form.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { floatToFixed2 } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderPrice } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+const newPayPrice = ref<string>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'payPrice',
+      label: '应付金额(总)',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应付金额(总)',
+        disabled: true,
+        formatter: (value: string) => `${floatToFixed2(value)}元`,
+      },
+    },
+    {
+      fieldName: 'adjustPrice',
+      label: '订单调价',
+      component: 'InputNumber',
+      componentProps: {
+        class: 'w-100%',
+        placeholder: '请输入订单调价',
+        step: 0.1,
+        precision: 2,
+        onChange: async (value: number) => {
+          const { payPrice } = await formApi.getValues();
+          await formApi.setValues({
+            newPayPrice: (payPrice + value * 100).toFixed(2),
+          });
+        },
+      },
+      description: '订单调价。 正数，加价；负数，减价',
+    },
+    {
+      fieldName: 'newPayPrice',
+      label: '调价后',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        formatter: (value: string) => `${floatToFixed2(value)}元`,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.PriceRequest;
+    if (data.adjustPrice) {
+      data.adjustPrice = data.adjustPrice * 100;
+    }
+    try {
+      await updateOrderPrice(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      newPayPrice.value = data.payPrice?.toString();
+      data.adjustPrice = data.adjustPrice ? data.adjustPrice / 100 : 0;
+      await formApi.setValues({
+        id: data.id,
+        payPrice: data.payPrice,
+        adjustPrice: data.adjustPrice,
+        newPayPrice: newPayPrice.value,
+      });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/update-remark-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/update-remark-form.vue
new file mode 100644
index 00000000..b84767ca
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/update-remark-form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderRemark } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.RemarkRequest;
+    try {
+      await updateOrderRemark(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      await formApi.setValues({ id: data.id, remark: data.remark });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/config/index.vue b/apps/web-ele/src/views/member/config/index.vue
new file mode 100644
index 00000000..cd102234
--- /dev/null
+++ b/apps/web-ele/src/views/member/config/index.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import type { MemberConfigApi } from '#/api/member/config';
+
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { ElCard, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getConfig, saveConfig } from '#/api/member/config';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberConfigApi.Config>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    labelClass: 'w-2/6',
+  },
+  layout: 'horizontal',
+  wrapperClass: 'grid-cols-1',
+  actionWrapperClass: 'text-center',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Switch',
+      fieldName: 'pointTradeDeductEnable',
+      label: '积分抵扣',
+      help: '开启后，用户可以积分抵扣',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'pointTradeDeductUnitPrice',
+      label: '积分抵扣单价',
+      help: '用户每消费1元，可以抵扣多少积分',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'pointTradeDeductMaxPrice',
+      label: '积分抵扣最大值',
+      help: '单次下单积分使用上限，0 不限制',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'pointTradeGivePoint',
+      label: '1 元赠送多少分',
+      help: '下单支付金额按比例赠送积分（实际支付 1 元赠送多少积分）',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+      },
+    },
+  ],
+  // 提交函数
+  handleSubmit: onSubmit,
+});
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  // 提交表单
+  const data = (await formApi.getValues()) as MemberConfigApi.Config;
+  formApi.setState({ commonConfig: { disabled: true } });
+  try {
+    await saveConfig(data);
+    // 关闭并提示
+    emit('success');
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    formApi.setState({ commonConfig: { disabled: false } });
+  }
+}
+
+async function getConfigInfo() {
+  try {
+    const res = await getConfig();
+    formData.value = res;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+onMounted(() => {
+  getConfigInfo();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <ElCard title="积分设置">
+      <Form class="w-1/4" />
+    </ElCard>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/group/data.ts b/apps/web-ele/src/views/member/group/data.ts
new file mode 100644
index 00000000..e7466bd3
--- /dev/null
+++ b/apps/web-ele/src/views/member/group/data.ts
@@ -0,0 +1,88 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '分组名称',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分组名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '分组名称',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/member/group/index.vue b/apps/web-ele/src/views/member/group/index.vue
new file mode 100644
index 00000000..69ae7a4e
--- /dev/null
+++ b/apps/web-ele/src/views/member/group/index.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberGroupApi } from '#/api/member/group';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteGroup, getGroupPage } from '#/api/member/group';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建分组 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑分组 */
+function handleEdit(row: MemberGroupApi.Group) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分组 */
+async function handleDelete(row: MemberGroupApi.Group) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteGroup(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getGroupPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberGroupApi.Group>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="分组列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['分组']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['member:group:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['member:group:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['member:group:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/group/modules/form.vue b/apps/web-ele/src/views/member/group/modules/form.vue
new file mode 100644
index 00000000..b25a6cbc
--- /dev/null
+++ b/apps/web-ele/src/views/member/group/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { MemberGroupApi } from '#/api/member/group';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createGroup, getGroup, updateGroup } from '#/api/member/group';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberGroupApi.Group>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['会员分组'])
+    : $t('ui.actionTitle.create', ['会员分组']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberGroupApi.Group;
+    try {
+      await (formData.value?.id ? updateGroup(data) : createGroup(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberGroupApi.Group>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getGroup(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/level/data.ts b/apps/web-ele/src/views/member/level/data.ts
new file mode 100644
index 00000000..d60a180d
--- /dev/null
+++ b/apps/web-ele/src/views/member/level/data.ts
@@ -0,0 +1,152 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '等级名称',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'level',
+      label: '等级',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      fieldName: 'experience',
+      label: '升级经验',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '享受折扣(%)',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 100,
+        precision: 0,
+      },
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'icon',
+      label: '等级图标',
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'backgroundUrl',
+      label: '等级背景图',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '等级名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'icon',
+      title: '等级图标',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'backgroundUrl',
+      title: '等级背景图',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '等级名称',
+    },
+    {
+      field: 'level',
+      title: '等级',
+    },
+    {
+      field: 'experience',
+      title: '升级经验',
+    },
+    {
+      field: 'discountPercent',
+      title: '享受折扣(%)',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/member/level/index.vue b/apps/web-ele/src/views/member/level/index.vue
new file mode 100644
index 00000000..ede8ea00
--- /dev/null
+++ b/apps/web-ele/src/views/member/level/index.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberLevelApi } from '#/api/member/level';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteLevel, getLevelList } from '#/api/member/level';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建等级 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑等级 */
+function handleEdit(row: MemberLevelApi.Level) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除等级 */
+async function handleDelete(row: MemberLevelApi.Level) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteLevel(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params, formValues) => {
+          return await getLevelList({
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberLevelApi.Level>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="等级列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['等级']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['member:level:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['member:level:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['member:level:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/level/modules/form.vue b/apps/web-ele/src/views/member/level/modules/form.vue
new file mode 100644
index 00000000..95a693b3
--- /dev/null
+++ b/apps/web-ele/src/views/member/level/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { MemberLevelApi } from '#/api/member/level';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createLevel, getLevel, updateLevel } from '#/api/member/level';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberLevelApi.Level>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['等级'])
+    : $t('ui.actionTitle.create', ['等级']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberLevelApi.Level;
+    try {
+      await (formData.value?.id ? updateLevel(data) : createLevel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberLevelApi.Level>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getLevel(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/point/record/data.ts b/apps/web-ele/src/views/member/point/record/data.ts
new file mode 100644
index 00000000..df373c37
--- /dev/null
+++ b/apps/web-ele/src/views/member/point/record/data.ts
@@ -0,0 +1,101 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { ElTag } from 'element-plus';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'nickname',
+      label: '用户',
+      component: 'Input',
+    },
+    {
+      fieldName: 'bizType',
+      label: '业务类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '积分标题',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createDate',
+      label: '获得时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'createTime',
+      title: '获得时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'nickname',
+      title: '用户',
+    },
+    {
+      field: 'point',
+      title: '获得积分',
+      slots: {
+        default: ({ row }) => {
+          return h(
+            ElTag,
+            {
+              class: 'mr-1',
+              color: row.point > 0 ? 'blue' : 'red',
+            },
+            () => (row.point > 0 ? `+${row.point}` : row.point),
+          );
+        },
+      },
+    },
+    {
+      field: 'totalPoint',
+      title: '总积分',
+    },
+    {
+      field: 'title',
+      title: '标题',
+    },
+    {
+      field: 'description',
+      title: '描述',
+    },
+    {
+      field: 'bizId',
+      title: '业务编码',
+    },
+    {
+      field: 'bizType',
+      title: '业务类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MEMBER_POINT_BIZ_TYPE },
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/member/point/record/index.vue b/apps/web-ele/src/views/member/point/record/index.vue
new file mode 100644
index 00000000..15d1a813
--- /dev/null
+++ b/apps/web-ele/src/views/member/point/record/index.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberPointRecordApi } from '#/api/member/point/record';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getRecordPage } from '#/api/member/point/record';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberPointRecordApi.Record>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="积分记录列表" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/signin/config/data.ts b/apps/web-ele/src/views/member/signin/config/data.ts
new file mode 100644
index 00000000..be1d8e27
--- /dev/null
+++ b/apps/web-ele/src/views/member/signin/config/data.ts
@@ -0,0 +1,101 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'day',
+      label: '签到天数',
+      help: '只允许设置 1-7，默认签到 7 天为一个周期',
+      componentProps: {
+        min: 1,
+        max: 7,
+        precision: 0,
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'point',
+      label: '获得积分',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'experience',
+      label: '奖励经验',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'day',
+      title: '签到天数',
+      formatter: ({ cellValue }) => ['第', cellValue, '天'].join(' '),
+    },
+    {
+      field: 'point',
+      title: '获得积分',
+    },
+    {
+      field: 'experience',
+      title: '奖励经验',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/member/signin/config/index.vue b/apps/web-ele/src/views/member/signin/config/index.vue
new file mode 100644
index 00000000..92ccb83a
--- /dev/null
+++ b/apps/web-ele/src/views/member/signin/config/index.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberSignInConfigApi } from '#/api/member/signin/config';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSignInConfig,
+  getSignInConfigList,
+} from '#/api/member/signin/config';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建签到配置 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑签到配置 */
+function handleEdit(row: MemberSignInConfigApi.SignInConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除签到配置 */
+async function handleDelete(row: MemberSignInConfigApi.SignInConfig) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+    fullscreen: true,
+  });
+  try {
+    await deleteSignInConfig(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getSignInConfigList();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberSignInConfigApi.SignInConfig>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="签到配置列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['签到配置']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['point:sign-in-config:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['point:sign-in-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['point:sign-in-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/signin/config/modules/form.vue b/apps/web-ele/src/views/member/signin/config/modules/form.vue
new file mode 100644
index 00000000..f24c6bd1
--- /dev/null
+++ b/apps/web-ele/src/views/member/signin/config/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { MemberSignInConfigApi } from '#/api/member/signin/config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createSignInConfig,
+  getSignInConfig,
+  updateSignInConfig,
+} from '#/api/member/signin/config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberSignInConfigApi.SignInConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['签到配置'])
+    : $t('ui.actionTitle.create', ['签到配置']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MemberSignInConfigApi.SignInConfig;
+    try {
+      await (formData.value?.id
+        ? updateSignInConfig(data)
+        : createSignInConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberSignInConfigApi.SignInConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSignInConfig(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/signin/record/data.ts b/apps/web-ele/src/views/member/signin/record/data.ts
new file mode 100644
index 00000000..b361a55a
--- /dev/null
+++ b/apps/web-ele/src/views/member/signin/record/data.ts
@@ -0,0 +1,73 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { ElTag } from 'element-plus';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'nickname',
+      label: '签到用户',
+      component: 'Input',
+    },
+    {
+      fieldName: 'day',
+      label: '签到天数',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '签到时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'nickname',
+      title: '签到用户',
+    },
+    {
+      field: 'day',
+      title: '签到天数',
+      formatter: ({ cellValue }) => ['第', cellValue, '天'].join(' '),
+    },
+    {
+      field: 'point',
+      title: '获得积分',
+      slots: {
+        default: ({ row }) => {
+          return h(
+            ElTag,
+            {
+              class: 'mr-5px',
+              color: row.point > 0 ? 'blue' : 'red',
+            },
+            () => (row.point > 0 ? `+${row.point}` : row.point),
+          );
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '签到时间',
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/member/signin/record/index.vue b/apps/web-ele/src/views/member/signin/record/index.vue
new file mode 100644
index 00000000..a89b1210
--- /dev/null
+++ b/apps/web-ele/src/views/member/signin/record/index.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberSignInRecordApi } from '#/api/member/signin/record';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSignInRecordPage } from '#/api/member/signin/record';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSignInRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="签到记录列表" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/tag/data.ts b/apps/web-ele/src/views/member/tag/data.ts
new file mode 100644
index 00000000..c0da8541
--- /dev/null
+++ b/apps/web-ele/src/views/member/tag/data.ts
@@ -0,0 +1,68 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '标签名称',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '标签名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '标签名称',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/member/tag/index.vue b/apps/web-ele/src/views/member/tag/index.vue
new file mode 100644
index 00000000..08ed6c91
--- /dev/null
+++ b/apps/web-ele/src/views/member/tag/index.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberTagApi } from '#/api/member/tag';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMemberTag, getMemberTagPage } from '#/api/member/tag';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建会员标签 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑会员标签 */
+function handleEdit(row: MemberTagApi.Tag) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除会员标签 */
+async function handleDelete(row: MemberTagApi.Tag) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteMemberTag(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMemberTagPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberTagApi.Tag>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="会员用户、标签、分组"
+        url="https://doc.iocoder.cn/member/user/"
+      />
+    </template>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="会员标签列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['会员标签']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['member:tag:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['member:tag:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['member:tag:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/tag/modules/form.vue b/apps/web-ele/src/views/member/tag/modules/form.vue
new file mode 100644
index 00000000..0517412d
--- /dev/null
+++ b/apps/web-ele/src/views/member/tag/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { MemberTagApi } from '#/api/member/tag';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createMemberTag,
+  getMemberTag,
+  updateMemberTag,
+} from '#/api/member/tag';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberTagApi.Tag>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['会员标签'])
+    : $t('ui.actionTitle.create', ['会员标签']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberTagApi.Tag;
+    try {
+      await (formData.value?.id
+        ? updateMemberTag(data)
+        : createMemberTag(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberTagApi.Tag>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getMemberTag(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-account-info.vue b/apps/web-ele/src/views/member/user/components/user-account-info.vue
new file mode 100644
index 00000000..16a28298
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-account-info.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { MemberUserApi } from '#/api/member/user';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { fenToYuan } from '@vben/utils';
+
+import { ElCard } from 'element-plus';
+
+import { useDescription } from '#/components/description';
+
+withDefaults(
+  defineProps<{
+    mode?: 'kefu' | 'member';
+    user: MemberUserApi.User;
+    wallet: PayWalletApi.Wallet;
+  }>(),
+  {
+    mode: 'member',
+  },
+);
+
+const [Description] = useDescription({
+  componentProps: {
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    labelWidth: 100,
+    title: '',
+    extra: '',
+  },
+  schema: [
+    {
+      field: 'levelName',
+      label: '等级',
+      content: (data) => data.levelName || '无',
+    },
+    {
+      field: 'experience',
+      label: '成长值',
+      content: (data) => data.experience || 0,
+    },
+    {
+      field: 'point',
+      label: '当前积分',
+      content: (data) => data.point || 0,
+    },
+    {
+      field: 'totalPoint',
+      label: '总积分',
+      content: (data) => data.totalPoint || 0,
+    },
+    {
+      field: 'balance',
+      label: '当前余额',
+      content: (data) => fenToYuan(data.balance || 0),
+    },
+    {
+      field: 'totalExpense',
+      label: '支出金额',
+      content: (data) => fenToYuan(data.totalExpense || 0),
+    },
+    {
+      field: 'totalRecharge',
+      label: '充值金额',
+      content: (data) => fenToYuan(data.totalRecharge || 0),
+    },
+  ],
+});
+</script>
+
+<template>
+  <ElCard>
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+    <template #extra>
+      <slot name="extra"></slot>
+    </template>
+    <Description
+      :column="mode === 'member' ? 2 : 1"
+      :data="{
+        ...user,
+        ...wallet,
+      }"
+    />
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-address-list.vue b/apps/web-ele/src/views/member/user/components/user-address-list.vue
new file mode 100644
index 00000000..a839c5b0
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-address-list.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberAddressApi } from '#/api/member/address';
+
+import { h } from 'vue';
+
+import { ElTag } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAddressList } from '#/api/member/address';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '地址编号',
+      },
+      {
+        field: 'name',
+        title: '收件人名称',
+      },
+      {
+        field: 'mobile',
+        title: '手机号',
+      },
+      {
+        field: 'areaId',
+        title: '地区编码',
+      },
+      {
+        field: 'detailAddress',
+        title: '收件详细地址',
+      },
+      {
+        field: 'defaultStatus',
+        title: '是否默认',
+        slots: {
+          default: ({ row }) => {
+            return h(
+              ElTag,
+              {
+                class: 'mr-1',
+                color: row.defaultStatus ? 'blue' : 'red',
+              },
+              () => (row.defaultStatus ? '是' : '否'),
+            );
+          },
+        },
+      },
+      {
+        field: 'createTime',
+        title: '创建时间',
+        formatter: 'formatDateTime',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getAddressList({
+            userId: props.userId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberAddressApi.Address>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-after-sale-list.vue b/apps/web-ele/src/views/member/user/components/user-after-sale-list.vue
new file mode 100644
index 00000000..d867593e
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-after-sale-list.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale/index';
+
+import { ref, watch } from 'vue';
+
+import { ElTabPane, ElTabs } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAfterSalePage } from '#/api/mall/trade/afterSale';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+import { useGridColumns } from '#/views/mall/trade/order/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+// 添加当前选中的售后状态
+const activeStatus = ref<number | string>('all');
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'spuName',
+        label: '商品名称',
+        component: 'Input',
+      },
+      {
+        fieldName: 'no',
+        label: '退款编号',
+        component: 'Input',
+      },
+      {
+        fieldName: 'orderNo',
+        label: '订单编号',
+        component: 'Input',
+      },
+      {
+        fieldName: 'status',
+        label: '售后状态',
+        component: 'Select',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS, 'number'),
+        },
+      },
+      {
+        fieldName: 'type',
+        label: '售后方式',
+        component: 'Select',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY, 'number'),
+        },
+      },
+      {
+        fieldName: 'type',
+        label: '售后类型',
+        component: 'Select',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE, 'number'),
+        },
+      },
+      {
+        fieldName: 'createTime',
+        label: '创建时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+    // 监听表单值变化
+    handleValuesChange: (values, changedFields) => {
+      // 如果状态字段发生变化
+      if (changedFields.includes('status')) {
+        // 同步更新标签页选中状态
+        activeStatus.value = values.status ? String(values.status) : 'all';
+      }
+    },
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAfterSalePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+      slots: {
+        buttons: 'customTop',
+      },
+    },
+  } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
+  separator: false,
+});
+
+// 监听标签页变化，更新表单状态值并触发查询
+watch(activeStatus, (val) => {
+  // 使用formApi获取表单对象
+  if (gridApi.formApi) {
+    // 设置状态值
+    gridApi.formApi.setFieldValue(
+      'status',
+      val === 'all' ? undefined : Number(val),
+    );
+
+    // 触发查询
+    gridApi.query({ status: val === 'all' ? undefined : Number(val) });
+  }
+});
+</script>
+
+<template>
+  <Grid>
+    <template #customTop>
+      <ElTabs v-model="activeStatus">
+        <ElTabPane label="全部" name="all" />
+        <ElTabPane
+          v-for="item in getDictOptions(
+            DICT_TYPE.TRADE_AFTER_SALE_STATUS,
+            'number',
+          )"
+          :key="String(item.value)"
+          :label="item.label"
+          :name="String(item.value)"
+        />
+      </ElTabs>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-balance-list.vue b/apps/web-ele/src/views/member/user/components/user-balance-list.vue
new file mode 100644
index 00000000..35853c2e
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-balance-list.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTransactionPage } from '#/api/pay/wallet/transaction';
+
+const props = defineProps<{
+  walletId: number | undefined;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '编号',
+      },
+      {
+        field: 'title',
+        title: '关联业务标题',
+      },
+      {
+        field: 'price',
+        title: '交易金额',
+        formatter: 'formatAmount2',
+      },
+      {
+        field: 'balance',
+        title: '钱包余额',
+        formatter: 'formatAmount2',
+      },
+      {
+        field: 'createTime',
+        title: '交易时间',
+        formatter: 'formatDateTime',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTransactionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            walletId: props.walletId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WalletTransactionApi.Transaction>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-basic-info.vue b/apps/web-ele/src/views/member/user/components/user-basic-info.vue
new file mode 100644
index 00000000..5bf91d7d
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-basic-info.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { MemberUserApi } from '#/api/member/user';
+
+import { h } from 'vue';
+
+import { formatDate } from '@vben/utils';
+
+import { ElAvatar, ElCard, ElCol, ElRow } from 'element-plus';
+
+import { useDescription } from '#/components/description';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
+
+withDefaults(
+  defineProps<{ mode?: 'kefu' | 'member'; user: MemberUserApi.User }>(),
+  {
+    mode: 'member',
+  },
+);
+
+const [Description] = useDescription({
+  componentProps: {
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    labelWidth: 100,
+    title: '',
+    extra: '',
+  },
+  schema: [
+    {
+      field: 'name',
+      label: '用户名',
+    },
+    {
+      field: 'nickname',
+      label: '昵称',
+    },
+    {
+      field: 'mobile',
+      label: '手机号',
+    },
+    {
+      field: 'sex',
+      label: '性别',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.SYSTEM_USER_SEX,
+          value: data.sex,
+        }),
+    },
+    {
+      field: 'areaName',
+      label: '所在地',
+    },
+    {
+      field: 'registerIp',
+      label: '注册 IP',
+    },
+    {
+      field: 'birthday',
+      label: '生日',
+      content: (data) => formatDate(data.birthday)?.toString() || '空',
+    },
+    {
+      field: 'createTime',
+      label: '注册时间',
+      content: (data) => formatDate(data.createTime)?.toString() || '空',
+    },
+    {
+      field: 'loginDate',
+      label: '最后登录时间',
+      content: (data) => formatDate(data.loginDate)?.toString() || '空',
+    },
+  ],
+});
+</script>
+
+<template>
+  <ElCard>
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+    <template #extra>
+      <slot name="extra"></slot>
+    </template>
+    <ElRow v-if="mode === 'member'" :gutter="24">
+      <ElCol :span="4">
+        <ElAvatar :size="140" shape="square" :src="user.avatar" />
+      </ElCol>
+      <ElCol :span="20">
+        <Description :column="2" :data="user" />
+      </ElCol>
+    </ElRow>
+    <template v-else-if="mode === 'kefu'">
+      <ElAvatar :size="140" shape="square" :src="user.avatar" />
+      <Description :column="1" :data="user" />
+    </template>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-brokerage-list.vue b/apps/web-ele/src/views/member/user/components/user-brokerage-list.vue
new file mode 100644
index 00000000..cf4b8be6
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-brokerage-list.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { ref, watch } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as BrokerageUserApi from '#/api/mall/trade/brokerage/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+// 添加当前选中的状态
+const activeStatus = ref<number | string>('all');
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'level',
+        label: '用户类型',
+        component: 'RadioGroup',
+        componentProps: {
+          options: [
+            {
+              label: '全部',
+              value: 0,
+            },
+            {
+              label: '一级',
+              value: 1,
+            },
+            {
+              label: '二级',
+              value: 2,
+            },
+          ],
+          isButton: true,
+        },
+      },
+      {
+        fieldName: 'bindUserTime',
+        label: '绑定时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '用户编号',
+      },
+      {
+        field: 'avatar',
+        title: '头像',
+        cellRender: {
+          name: 'CellImage',
+          props: {
+            height: 40,
+            width: 40,
+            shape: 'circle',
+          },
+        },
+      },
+      {
+        field: 'nickname',
+        title: '昵称',
+      },
+      {
+        field: 'level',
+        title: '等级',
+        formatter: (row: any) => {
+          return row.level === 1 ? '一级' : '二级';
+        },
+      },
+      {
+        field: 'bindUserTime',
+        title: '绑定时间',
+        formatter: 'formatDateTime',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await BrokerageUserApi.getBrokerageUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
+  separator: false,
+});
+
+// 监听标签页变化，更新表单状态值并触发查询
+watch(activeStatus, (val) => {
+  // 使用formApi获取表单对象
+  if (gridApi.formApi) {
+    // 设置状态值
+    gridApi.formApi.setFieldValue(
+      'status',
+      val === 'all' ? undefined : Number(val),
+    );
+
+    // 触发查询
+    gridApi.query({ status: val === 'all' ? undefined : Number(val) });
+  }
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-coupon-list.vue b/apps/web-ele/src/views/member/user/components/user-coupon-list.vue
new file mode 100644
index 00000000..d5a5760e
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-coupon-list.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
+
+import { ref, watch } from 'vue';
+
+import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCoupon,
+  getCouponPage,
+} from '#/api/mall/promotion/coupon/coupon';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+// 添加当前选中的状态
+const activeStatus = ref<number | string>('all');
+
+/** 删除按钮操作 */
+const handleDelete = async (row: MallCouponApi.Coupon) => {
+  const hideLoading = ElLoading.service({
+    text: '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？',
+    fullscreen: true,
+  });
+  try {
+    await deleteCoupon(row.id as number);
+    ElMessage.success('回收成功');
+    // 重新加载列表
+    gridApi.query();
+  } finally {
+    hideLoading.close();
+  }
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'createTime',
+        label: '创建时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: [
+      {
+        field: 'name',
+        title: '优惠劵',
+      },
+      {
+        field: 'discountType',
+        title: 'discountType',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
+        },
+      },
+      {
+        field: 'takeType',
+        title: '领取方式',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
+        },
+      },
+      {
+        field: 'status',
+        title: '状态',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.PROMOTION_COUPON_STATUS },
+        },
+      },
+      {
+        field: 'createTime',
+        title: '领取时间',
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'useTime',
+        title: '使用时间',
+        formatter: 'formatDateTime',
+      },
+      {
+        title: '操作',
+        width: 180,
+        fixed: 'right',
+        slots: { default: 'actions' },
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCouponPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+      slots: {
+        buttons: 'customTop',
+      },
+    },
+  } as VxeTableGridOptions<MallCouponApi.Coupon>,
+  separator: false,
+});
+
+// 监听标签页变化，更新表单状态值并触发查询
+watch(activeStatus, (val) => {
+  // 使用formApi获取表单对象
+  if (gridApi.formApi) {
+    // 设置状态值
+    gridApi.formApi.setFieldValue(
+      'status',
+      val === 'all' ? undefined : Number(val),
+    );
+
+    // 触发查询
+    gridApi.query({ status: val === 'all' ? undefined : Number(val) });
+  }
+});
+</script>
+
+<template>
+  <Grid>
+    <template #customTop>
+      <ElTabs v-model="activeStatus">
+        <ElTabPane label="全部" name="all" />
+        <ElTabPane
+          v-for="item in getDictOptions(
+            DICT_TYPE.PROMOTION_COUPON_STATUS,
+            'number',
+          )"
+          :key="String(item.value)"
+          :label="item.label"
+          :name="String(item.value)"
+        />
+      </ElTabs>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '回收',
+            link: true,
+            icon: ACTION_ICON.EDIT,
+            auth: ['promotion:coupon:delete'],
+            onClick: handleDelete.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-experience-record-list.vue b/apps/web-ele/src/views/member/user/components/user-experience-record-list.vue
new file mode 100644
index 00000000..c66fab8d
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-experience-record-list.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberExperienceRecordApi } from '#/api/member/experience-record';
+
+import { h } from 'vue';
+
+import { ElTag } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExperienceRecordPage } from '#/api/member/experience-record';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'bizType',
+        label: '业务类型',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(
+            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
+            'number',
+          ),
+        },
+      },
+      {
+        fieldName: 'title',
+        label: '标题',
+        component: 'Input',
+      },
+      {
+        fieldName: 'createDate',
+        label: '获得时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '编号',
+      },
+      {
+        field: 'createTime',
+        title: '获得时间',
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'experience',
+        title: '经验',
+        slots: {
+          default: ({ row }) => {
+            return h(
+              ElTag,
+              {
+                class: 'mr-1',
+                color: row.experience > 0 ? 'blue' : 'red',
+              },
+              () =>
+                row.experience > 0 ? `+${row.experience}` : row.experience,
+            );
+          },
+        },
+      },
+      {
+        field: 'totalExperience',
+        title: '总经验',
+      },
+      {
+        field: 'title',
+        title: '标题',
+      },
+      {
+        field: 'description',
+        title: '描述',
+      },
+      {
+        field: 'bizId',
+        title: '业务编号',
+      },
+      {
+        field: 'bizType',
+        title: '业务类型',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
+        },
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getExperienceRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
+  separator: false,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-favorite-list.vue b/apps/web-ele/src/views/member/user/components/user-favorite-list.vue
new file mode 100644
index 00000000..54acaa10
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-favorite-list.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallFavoriteApi } from '#/api/mall/product/favorite';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as FavoriteApi from '#/api/mall/product/favorite';
+import { DICT_TYPE } from '#/utils';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '商品编号',
+      },
+      {
+        field: 'picUrl',
+        title: '商品图',
+        cellRender: {
+          name: 'CellImage',
+          props: {
+            height: 40,
+            width: 40,
+          },
+        },
+      },
+      {
+        field: 'name',
+        title: '商品名称',
+      },
+      {
+        field: 'price',
+        title: '商品售价',
+      },
+      {
+        field: 'salesCount',
+        title: '销量',
+      },
+      {
+        field: 'createTime',
+        title: '收藏时间',
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'status',
+        title: '状态',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.PRODUCT_SPU_STATUS },
+        },
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await FavoriteApi.getFavoritePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallFavoriteApi.Favorite>,
+  separator: false,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-order-list.vue b/apps/web-ele/src/views/member/user/components/user-order-list.vue
new file mode 100644
index 00000000..b5bdb568
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-order-list.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+import type { MallOrderApi } from '#/api/mall/trade/order/index';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+import { fenToYuan } from '@vben/utils';
+
+import { ElImage, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { getSimpleDeliveryPickUpStoreList } from '#/api/mall/trade/delivery/pickUpStore';
+import * as OrderApi from '#/api/mall/trade/order/index';
+import { DictTag } from '#/components/dict-tag';
+import {
+  DeliveryTypeEnum,
+  DICT_TYPE,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+import { useGridColumns } from '#/views/mall/trade/order/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.PickUpStore[]>([]);
+
+getSimpleDeliveryPickUpStoreList().then((res) => {
+  pickUpStoreList.value = res;
+});
+const { push } = useRouter();
+/** 详情 */
+function handleDetail(row: MallOrderApi.Order) {
+  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'bizType',
+        label: '订单状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(DICT_TYPE.TRADE_ORDER_STATUS, 'number'),
+          placeholder: '全部',
+        },
+      },
+      {
+        fieldName: 'payChannelCode',
+        label: '支付方式',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'number'),
+          placeholder: '全部',
+        },
+      },
+      {
+        fieldName: 'createTime',
+        label: '创建时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+      {
+        fieldName: 'terminal',
+        label: '订单来源',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(DICT_TYPE.TERMINAL, 'number'),
+          placeholder: '全部',
+        },
+      },
+      {
+        fieldName: 'type',
+        label: '订单类型',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(DICT_TYPE.TRADE_ORDER_TYPE, 'number'),
+          placeholder: '全部',
+        },
+      },
+      {
+        fieldName: 'deliveryType',
+        label: '配送方式',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
+          placeholder: '全部',
+        },
+      },
+      {
+        fieldName: 'logisticsId',
+        label: '快递公司',
+        component: 'ApiSelect',
+        componentProps: {
+          allowClear: true,
+          api: getSimpleDeliveryExpressList,
+          labelField: 'name',
+          valueField: 'id',
+          placeholder: '全部',
+        },
+        dependencies: {
+          triggerFields: ['deliveryType'],
+          show: (values) =>
+            values.deliveryType === DeliveryTypeEnum.EXPRESS.type,
+        },
+      },
+      {
+        fieldName: 'pickUpStoreId',
+        label: '自提门店',
+        component: 'ApiSelect',
+        componentProps: {
+          api: getSimpleDeliveryPickUpStoreList,
+          labelField: 'name',
+          valueField: 'id',
+        },
+        dependencies: {
+          triggerFields: ['deliveryType'],
+          show: (values) =>
+            values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
+        },
+      },
+      {
+        fieldName: 'pickUpVerifyCode',
+        label: '核销码',
+        component: 'Input',
+        dependencies: {
+          triggerFields: ['deliveryType'],
+          show: (values) =>
+            values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await OrderApi.getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.Order>,
+  separator: false,
+});
+</script>
+
+<template>
+  <Grid table-title="订单列表">
+    <template #expand_content="{ row }">
+      <div class="order-items">
+        <div v-for="item in row.items" :key="item.id" class="order-item">
+          <div class="order-item-image">
+            <ElImage :src="item.picUrl" :width="40" :height="40" />
+          </div>
+          <div class="order-item-content">
+            <div class="order-item-name">
+              {{ item.spuName }}
+              <ElTag
+                v-for="property in item.properties"
+                :key="property.id"
+                class="ml-1"
+              >
+                {{ property.propertyName }}: {{ property.valueName }}
+              </ElTag>
+            </div>
+            <div class="order-item-info">
+              <span
+                >原价：{{ fenToYuan(item.price) }} 元 / 数量：{{
+                  item.count
+                }}
+                个</span
+              >
+              <DictTag
+                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                :value="item.afterSaleStatus"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.detail'),
+            link: true,
+            icon: ACTION_ICON.VIEW,
+            auth: ['trade:order:query'],
+            onClick: handleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
+<style lang="scss" scoped>
+.order-items {
+  padding: 8px 0;
+}
+
+.order-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.order-item-image {
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.order-item-content {
+  flex: 1;
+}
+
+.order-item-name {
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.order-item-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  color: #666;
+}
+</style>
diff --git a/apps/web-ele/src/views/member/user/components/user-point-list.vue b/apps/web-ele/src/views/member/user/components/user-point-list.vue
new file mode 100644
index 00000000..d82e93f6
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-point-list.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberPointRecordApi } from '#/api/member/point/record';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getRecordPage } from '#/api/member/point/record';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+import { useGridColumns } from '#/views/member/point/record/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'bizType',
+        label: '业务类型',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
+        },
+      },
+      {
+        fieldName: 'title',
+        label: '积分标题',
+        component: 'Input',
+      },
+      {
+        fieldName: 'createDate',
+        label: '获得时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberPointRecordApi.Record>,
+  separator: false,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/components/user-sign-list.vue b/apps/web-ele/src/views/member/user/components/user-sign-list.vue
new file mode 100644
index 00000000..59ba62dd
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/components/user-sign-list.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberSignInRecordApi } from '#/api/member/signin/record';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSignInRecordPage } from '#/api/member/signin/record';
+import { getRangePickerDefaultProps } from '#/utils';
+import { useGridColumns } from '#/views/member/signin/record/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'day',
+        label: '签到天数',
+        component: 'Input',
+      },
+      {
+        fieldName: 'createTime',
+        label: '签到时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSignInRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
+  separator: false,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/data.ts b/apps/web-ele/src/views/member/user/data.ts
new file mode 100644
index 00000000..aaadde5f
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/data.ts
@@ -0,0 +1,457 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { convertToInteger, formatToFraction } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { getSimpleGroupList } from '#/api/member/group';
+import { getSimpleLevelList } from '#/api/member/level';
+import { getSimpleTagList } from '#/api/member/tag';
+import { getAreaTree } from '#/api/system/area';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+/** 修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'mobile',
+      label: '手机号',
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE).optional(),
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '用户昵称',
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'avatar',
+      label: '头像',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '真实名字',
+    },
+    {
+      fieldName: 'sex',
+      label: '用户性别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'birthday',
+      label: '出生日期',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+      },
+    },
+    {
+      component: 'ApiTreeSelect',
+      fieldName: 'areaId',
+      label: '所在地',
+      componentProps: {
+        api: () => getAreaTree(),
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'tagIds',
+      label: '用户标签',
+      componentProps: {
+        api: () => getSimpleTagList(),
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'groupId',
+      label: '用户分组',
+      componentProps: {
+        api: () => getSimpleGroupList(),
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'mark',
+      label: '会员备注',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'loginDate',
+      label: '登录时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '注册时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+    {
+      fieldName: 'tagIds',
+      label: '用户标签',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleTagList(),
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+      },
+    },
+    {
+      fieldName: 'levelId',
+      label: '用户等级',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleLevelList(),
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'groupId',
+      label: '用户分组',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleGroupList(),
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+    },
+    {
+      field: 'id',
+      title: '用户编号',
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      slots: {
+        default: ({ row }) => {
+          return h('img', {
+            src: row.avatar,
+            style: { width: '40px' },
+          });
+        },
+      },
+    },
+    {
+      field: 'mobile',
+      title: '手机号',
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+    },
+    {
+      field: 'levelName',
+      title: '等级',
+    },
+    {
+      field: 'groupName',
+      title: '分组',
+    },
+    {
+      field: 'tagNames',
+      title: '用户标签',
+      slots: {
+        default: ({ row }) => {
+          return row.tagNames?.map((tagName: string, index: number) => {
+            return h(
+              ElTag,
+              {
+                key: index,
+                class: 'mr-1',
+                color: 'blue',
+              },
+              () => tagName,
+            );
+          });
+        },
+      },
+    },
+    {
+      field: 'point',
+      title: '积分',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'loginDate',
+      title: '登录时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '注册时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 修改用户等级 */
+export function useLeavelFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '用户编号',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '用户昵称',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'point',
+      label: '用户等级',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleLevelList(),
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'reason',
+      label: '修改原因',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 修改用户余额 */
+export function useBalanceFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '用户编号',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '用户昵称',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'balance',
+      label: '变动前余额(元)',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'changeType',
+      label: '变动类型',
+      componentProps: {
+        options: [
+          { label: '增加', value: 1 },
+          { label: '减少', value: -1 },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: 1,
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'changeBalance',
+      label: '变动余额(元)',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.1,
+      },
+      defaultValue: 0,
+    },
+    {
+      component: 'Input',
+      fieldName: 'balanceResult',
+      label: '变动后余额(元)',
+      dependencies: {
+        triggerFields: ['changeBalance', 'changeType'],
+        disabled: true,
+        trigger(values, form) {
+          form.setFieldValue(
+            'balanceResult',
+            formatToFraction(
+              convertToInteger(values.balance) +
+                convertToInteger(values.changeBalance) * values.changeType,
+            ),
+          );
+        },
+      },
+    },
+  ];
+}
+
+/** 修改用户积分 */
+export function usePointFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '用户编号',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '用户昵称',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'point',
+      label: '变动前积分',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'changeType',
+      label: '变动类型',
+      componentProps: {
+        options: [
+          { label: '增加', value: 1 },
+          { label: '减少', value: -1 },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: 1,
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'changePoint',
+      label: '变动积分',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+      defaultValue: 0,
+    },
+    {
+      component: 'Input',
+      fieldName: 'pointResult',
+      label: '变动后积分',
+      dependencies: {
+        triggerFields: ['changePoint', 'changeType'],
+        disabled: true,
+        trigger(values, form) {
+          form.setFieldValue(
+            'pointResult',
+            values.point + values.changePoint * values.changeType ||
+              values.point,
+          );
+        },
+      },
+      rules: z.number().min(0),
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/member/user/index.vue b/apps/web-ele/src/views/member/user/index.vue
new file mode 100644
index 00000000..b08746cc
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/index.vue
@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getUserPage } from '#/api/member/user';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import BalanceForm from './modules/balance-form.vue';
+import Form from './modules/form.vue';
+import LeavelForm from './modules/leavel-form.vue';
+import PointForm from './modules/point-form.vue';
+
+const router = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [PointFormModal, pointFormModalApi] = useVbenModal({
+  connectedComponent: PointForm,
+  destroyOnClose: true,
+});
+
+const [BalanceFormModal, balanceFormModalApi] = useVbenModal({
+  connectedComponent: BalanceForm,
+  destroyOnClose: true,
+});
+
+const [LeavelFormModal, leavelFormModalApi] = useVbenModal({
+  connectedComponent: LeavelForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格数据 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 设置选中 ID */
+const checkedIds = ref<number[]>([]);
+function setCheckedIds({ records }: { records: MemberUserApi.User[] }) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 发送优惠券 */
+function handleSendCoupon() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑会员 */
+function handleEdit(row: MemberUserApi.User) {
+  formModalApi.setData(row).open();
+}
+
+/** 修改会员等级 */
+function handleUpdateLevel(row: MemberUserApi.User) {
+  leavelFormModalApi.setData(row).open();
+}
+
+/** 修改会员积分 */
+function handleUpdatePoint(row: MemberUserApi.User) {
+  pointFormModalApi.setData(row).open();
+}
+
+/** 修改会员余额 */
+function handleUpdateBalance(row: MemberUserApi.User) {
+  balanceFormModalApi.setData(row).open();
+}
+
+/** 查看会员详情 */
+function handleViewDetail(row: MemberUserApi.User) {
+  router.push({
+    name: 'MemberUserDetail',
+    query: {
+      id: row.id,
+    },
+  });
+}
+
+// 表格实例
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    checkboxConfig: {
+      highlight: true,
+      labelField: 'checkbox',
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberUserApi.User>,
+  gridEvents: {
+    checkboxAll: setCheckedIds,
+    checkboxChange: setCheckedIds,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="会员用户、标签、分组"
+        url="https://doc.iocoder.cn/member/user/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <PointFormModal @success="onRefresh" />
+    <BalanceFormModal @success="onRefresh" />
+    <LeavelFormModal @success="onRefresh" />
+    <Grid table-title="会员列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '发送优惠券',
+              type: 'primary',
+              icon: 'lucide:mouse-pointer-2',
+              auth: ['promotion:coupon:send'],
+              onClick: handleSendCoupon,
+            },
+          ]"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleViewDetail.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              auth: ['member:user:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '修改等级',
+              type: 'primary',
+              link: true,
+              auth: ['member:user:update-level'],
+              onClick: handleUpdateLevel.bind(null, row),
+            },
+            {
+              label: '修改积分',
+              type: 'primary',
+              link: true,
+              auth: ['member:user:update-point'],
+              onClick: handleUpdatePoint.bind(null, row),
+            },
+            {
+              label: '修改余额',
+              type: 'primary',
+              link: true,
+              auth: ['pay:wallet:update-balance'],
+              onClick: handleUpdateBalance.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/user/modules/balance-form.vue b/apps/web-ele/src/views/member/user/modules/balance-form.vue
new file mode 100644
index 00000000..e9b13e50
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/modules/balance-form.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { formatToFraction } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/member/user';
+import { getWallet } from '#/api/pay/wallet/balance';
+import { $t } from '#/locales';
+
+import { useBalanceFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref({
+  id: 0,
+  nickname: '',
+  balance: '0',
+  changeBalance: 0,
+  changeType: 1,
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useBalanceFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberUserApi.User;
+    try {
+      await updateUser(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const user = await getUser(data.id as number);
+      if (!user || !user.id) {
+        return;
+      }
+      const wallet = await getWallet({ userId: user.id });
+      formData.value.id = user.id;
+      formData.value.nickname = user.nickname || '';
+      formData.value.balance = formatToFraction(wallet.balance);
+      formData.value.changeType = 1; // 默认增加余额
+      formData.value.changeBalance = 0; // 变动余额默认0
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['用户余额'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/user/modules/detail.vue b/apps/web-ele/src/views/member/user/modules/detail.vue
new file mode 100644
index 00000000..54f55679
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/modules/detail.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { MemberUserApi } from '#/api/member/user';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { ElButton, ElCard, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { getUser } from '#/api/member/user';
+import { getWallet } from '#/api/pay/wallet/balance';
+import { $t } from '#/locales';
+
+import UserAccountInfo from '../components/user-account-info.vue';
+import UserAddressList from '../components/user-address-list.vue';
+import UserAfterSaleList from '../components/user-after-sale-list.vue';
+import UserBalanceList from '../components/user-balance-list.vue';
+import UserBasicInfo from '../components/user-basic-info.vue';
+import UserBrokerageList from '../components/user-brokerage-list.vue';
+import UserCouponList from '../components/user-coupon-list.vue';
+import UserExperienceRecordList from '../components/user-experience-record-list.vue';
+import UserFavoriteList from '../components/user-favorite-list.vue';
+import UserOrderList from '../components/user-order-list.vue';
+import UserPointList from '../components/user-point-list.vue';
+import UserSignList from '../components/user-sign-list.vue';
+import Form from './form.vue';
+
+const route = useRoute();
+const { closeCurrentTab, refreshTab } = useTabs();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const userId = Number(route.query.id);
+const user = ref<MemberUserApi.User>();
+const wallet = ref<PayWalletApi.Wallet>();
+const activeName = ref('UserPointList');
+/* 钱包初始化数据 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0,
+} as PayWalletApi.Wallet;
+
+async function getUserDetail() {
+  if (!userId) {
+    ElMessage.error('参数错误，会员编号不能为空！');
+    closeCurrentTab();
+    return;
+  }
+  user.value = await getUser(userId);
+  wallet.value = (await getWallet({ userId })) || WALLET_INIT_DATA;
+}
+
+function handleEdit() {
+  formModalApi.setData(user.value).open();
+}
+
+onMounted(async () => {
+  await getUserDetail();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <FormModal @success="refreshTab" />
+    <div class="flex">
+      <UserBasicInfo v-if="user" class="w-3/5" :user="user" mode="member">
+        <template #title> 基本信息 </template>
+        <template #extra>
+          <ElButton type="primary" @click="handleEdit">
+            {{ $t('common.edit') }}
+          </ElButton>
+        </template>
+      </UserBasicInfo>
+      <UserAccountInfo
+        v-if="user && wallet"
+        class="ml-4 w-2/5"
+        :user="user"
+        :wallet="wallet"
+      >
+        <template #title> 账户信息 </template>
+      </UserAccountInfo>
+    </div>
+    <div class="mt-4">
+      <ElCard title="账户明细">
+        <ElTabs v-model="activeName">
+          <ElTabPane label="积分" name="UserPointList">
+            <UserPointList class="h-full" :user-id="userId" />
+          </ElTabPane>
+          <ElTabPane label="签到" name="UserSignList">
+            <UserSignList class="h-full" :user-id="userId" />
+          </ElTabPane>
+          <ElTabPane label="成长值" name="UserExperienceRecordList">
+            <UserExperienceRecordList class="h-full" :user-id="userId" />
+          </ElTabPane>
+          <ElTabPane label="余额" name="UserBalanceList">
+            <UserBalanceList class="h-full" :wallet-id="wallet?.id" />
+          </ElTabPane>
+          <ElTabPane label="收货地址" name="UserAddressList">
+            <UserAddressList class="h-full" :user-id="userId" />
+          </ElTabPane>
+          <ElTabPane label="订单管理" name="UserOrderList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <UserOrderList class="h-full" :user-id="userId" />
+            </div>
+          </ElTabPane>
+          <ElTabPane label="售后管理" name="UserAfterSaleList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <UserAfterSaleList class="h-full" :user-id="userId" />
+            </div>
+          </ElTabPane>
+          <ElTabPane label="收藏记录" name="UserFavoriteList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <UserFavoriteList class="h-full" :user-id="userId" />
+            </div>
+          </ElTabPane>
+          <ElTabPane label="优惠劵" name="UserCouponList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <UserCouponList class="h-full" :user-id="userId" />
+            </div>
+          </ElTabPane>
+          <ElTabPane label="推广用户" name="UserBrokerageList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <UserBrokerageList class="h-full" :user-id="userId" />
+            </div>
+          </ElTabPane>
+        </ElTabs>
+      </ElCard>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/member/user/modules/form.vue b/apps/web-ele/src/views/member/user/modules/form.vue
new file mode 100644
index 00000000..cb15a59c
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/modules/form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/member/user';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberUserApi.User>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberUserApi.User;
+    try {
+      await updateUser(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="$t('ui.actionTitle.edit', ['会员'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/user/modules/leavel-form.vue b/apps/web-ele/src/views/member/user/modules/leavel-form.vue
new file mode 100644
index 00000000..faf56f7c
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/modules/leavel-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/member/user';
+import { $t } from '#/locales';
+
+import { useLeavelFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberUserApi.User>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useLeavelFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberUserApi.User;
+    try {
+      await updateUser(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['用户等级'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/user/modules/point-form.vue b/apps/web-ele/src/views/member/user/modules/point-form.vue
new file mode 100644
index 00000000..48fe0d3d
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/modules/point-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/member/user';
+import { $t } from '#/locales';
+
+import { usePointFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberUserApi.User>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: usePointFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberUserApi.User;
+    try {
+      await updateUser(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['用户积分'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/app/data.ts b/apps/web-ele/src/views/pay/app/data.ts
new file mode 100644
index 00000000..d84bd9e9
--- /dev/null
+++ b/apps/web-ele/src/views/pay/app/data.ts
@@ -0,0 +1,242 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app';
+
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '应用名',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '开启状态',
+      componentProps: {
+        placeholder: '请选择开启状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+      },
+    },
+  ];
+}
+
+export function useGridColumns<T = PayAppApi.App>(
+  onStatusChange?: (
+    newStatus: number,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 60 },
+    {
+      title: '应用标识',
+      field: 'appKey',
+    },
+    {
+      title: '应用名',
+      field: 'name',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+          inlinePrompt: true,
+        },
+      },
+    },
+    {
+      title: '支付宝配置',
+      children: [
+        {
+          title: 'APP 支付',
+          slots: {
+            default: 'alipayAppConfig',
+          },
+        },
+        {
+          title: 'PC 网站支付',
+          slots: {
+            default: 'alipayPCConfig',
+          },
+        },
+        {
+          title: 'WAP 网站支付',
+          slots: {
+            default: 'alipayWAPConfig',
+          },
+        },
+        {
+          title: '扫码支付',
+          slots: {
+            default: 'alipayQrConfig',
+          },
+        },
+        {
+          title: '条码支付',
+          slots: {
+            default: 'alipayBarConfig',
+          },
+        },
+      ],
+    },
+    {
+      title: '微信配置',
+      children: [
+        {
+          title: '小程序支付',
+          slots: {
+            default: 'wxLiteConfig',
+          },
+        },
+        {
+          title: 'JSAPI 支付',
+          slots: {
+            default: 'wxPubConfig',
+          },
+        },
+        {
+          title: 'APP 支付',
+          slots: {
+            default: 'wxAppConfig',
+          },
+        },
+        {
+          title: 'Native 支付',
+          slots: {
+            default: 'wxNativeConfig',
+          },
+        },
+        {
+          title: 'WAP 网站支付',
+          slots: {
+            default: 'wxWapConfig',
+          },
+        },
+        {
+          title: '条码支付',
+          slots: {
+            default: 'wxBarConfig',
+          },
+        },
+      ],
+    },
+    {
+      title: '钱包支付配置',
+      field: 'walletConfig',
+      slots: {
+        default: 'walletConfig',
+      },
+    },
+    {
+      title: '模拟支付配置',
+      field: 'mockConfig',
+      slots: {
+        default: 'mockConfig',
+      },
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      label: '应用编号',
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+    },
+    {
+      label: '应用名',
+      fieldName: 'name',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
+    },
+    {
+      label: '应用标识',
+      fieldName: 'appKey',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入应用标识',
+      },
+    },
+    {
+      label: '开启状态',
+      fieldName: 'status',
+      component: 'RadioGroup',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      label: '支付结果的回调地址',
+      fieldName: 'orderNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入支付结果的回调地址',
+      },
+    },
+    {
+      label: '退款结果的回调地址',
+      fieldName: 'refundNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入支付结果的回调地址',
+      },
+    },
+    {
+      label: '转账结果的回调地址',
+      fieldName: 'transferNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入转账结果的回调地址',
+      },
+    },
+    {
+      label: '备注',
+      fieldName: 'remark',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/app/index.vue b/apps/web-ele/src/views/pay/app/index.vue
new file mode 100644
index 00000000..e5547027
--- /dev/null
+++ b/apps/web-ele/src/views/pay/app/index.vue
@@ -0,0 +1,527 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app/index';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { changeAppStatus, deleteApp, getAppPage } from '#/api/pay/app/index';
+import { $t } from '#/locales';
+import { CommonStatusEnum, PayChannelEnum } from '#/utils';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import appFrom from './modules/app-form.vue';
+import channelFrom from './modules/channel-form.vue';
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const [AppFormModal, appFormModalApi] = useVbenModal({
+  connectedComponent: appFrom,
+  destroyOnClose: true,
+});
+
+const [ChannelFormModal, channelFormModalApi] = useVbenModal({
+  connectedComponent: channelFrom,
+  destroyOnClose: true,
+});
+
+function handleCreate() {
+  appFormModalApi.setData(null).open();
+}
+
+function handleEdit(row: Required<PayAppApi.App>) {
+  appFormModalApi.setData({ id: row.id }).open();
+}
+
+async function handleDelete(row: Required<PayAppApi.App>) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteApp(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 更新状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: PayAppApi.App,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用';
+    confirm({
+      content: `确认要${text + row.name}应用吗?`,
+    })
+      .then(async () => {
+        // 更新状态
+        const res = await changeAppStatus({
+          id: row.id as number,
+          status: newStatus,
+        });
+        if (res) {
+          // 提示并返回成功
+          ElMessage.success(`${text}成功`);
+          resolve(true);
+        } else {
+          reject(new Error('更新失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/**
+ * 根据渠道编码判断渠道列表中是否存在
+ *
+ * @param channels 渠道列表
+ * @param channelCode 渠道编码
+ */
+function isChannelExists(channels: string[], channelCode: string) {
+  if (!channels) {
+    return false;
+  }
+  return channels.includes(channelCode);
+}
+
+async function openChannelForm(row: PayAppApi.App, payCode: string) {
+  channelFormModalApi.setData({ id: row.id, payCode }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAppPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayAppApi.App>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <AppFormModal @success="onRefresh" />
+    <ChannelFormModal @success="onRefresh" />
+
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['应用']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['pay:app:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              link: true,
+              type: 'primary',
+              icon: ACTION_ICON.EDIT,
+              auth: ['pay:app:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              link: true,
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['pay:app:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #alipayAppConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #alipayPCConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_PC.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #alipayWAPConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_WAP.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #alipayQrConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_QR.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #alipayBarConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_BAR.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #wxLiteConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_LITE.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_LITE.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_LITE.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #wxPubConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_PUB.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_PUB.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_PUB.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #wxAppConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_APP.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_APP.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_APP.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #wxNativeConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_NATIVE.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_NATIVE.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #wxWapConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_WAP.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_WAP.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_WAP.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #wxBarConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_BAR.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_BAR.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_BAR.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #walletConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WALLET.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WALLET.code,
+              )
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WALLET.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+      <template #mockConfig="{ row }">
+        <TableAction
+          :actions="[
+            {
+              size: 'small',
+              icon: isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
+                ? 'lucide:check'
+                : 'lucide:x',
+              type: !isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
+                ? 'danger'
+                : 'primary',
+              circle: true,
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.MOCK.code,
+              ),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/app/modules/app-form.vue b/apps/web-ele/src/views/pay/app/modules/app-form.vue
new file mode 100644
index 00000000..4d941958
--- /dev/null
+++ b/apps/web-ele/src/views/pay/app/modules/app-form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { PayAppApi } from '#/api/pay/app';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createApp, getApp, updateApp } from '#/api/pay/app';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<PayAppApi.App>();
+const title = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as PayAppApi.App;
+    try {
+      await (formData.value?.id ? updateApp(data) : createApp(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { id } = modalApi.getData() as {
+      id?: number;
+    };
+    if (!id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getApp(id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal :close-on-click-modal="false" :title="title" class="w-2/5">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/app/modules/channel-form.vue b/apps/web-ele/src/views/pay/app/modules/channel-form.vue
new file mode 100644
index 00000000..732336c7
--- /dev/null
+++ b/apps/web-ele/src/views/pay/app/modules/channel-form.vue
@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import type { PayChannelApi } from '#/api/pay/channel';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
+import { CommonStatusEnum } from '#/utils';
+
+import { channelSchema } from './data';
+
+const emit = defineEmits(['success']);
+const formData = ref<any>();
+const formType = ref<string>('');
+const title = computed(() => {
+  return formData.value?.id === 0
+    ? $t('ui.actionTitle.create', '应用')
+    : $t('ui.actionTitle.edit', '应用');
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as PayChannelApi.Channel;
+    // 只保留表单中实际存在的字段，且值不为 undefined
+    const data2 = Object.fromEntries(
+      Object.entries(data).filter(([key, value]) => {
+        // 检查字段是否在表单中存在，且值不为 undefined
+        return key in data && value !== undefined;
+      }),
+    );
+    const data3 = { ...formData.value, ...data2 };
+    data3.config = JSON.stringify(data3.config);
+    try {
+      await (data3.id ? updateChannel(data3) : createChannel(data3));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+    if (!id || !payCode) {
+      return;
+    }
+    modalApi.lock();
+    formType.value = payCode;
+    if (payCode.includes('alipay_')) {
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: null,
+        config: {
+          appId: '',
+          serverUrl: null,
+          signType: 'RSA2',
+          mode: null,
+          privateKey: '',
+          alipayPublicKey: '',
+          appCertContent: '',
+          alipayPublicCertContent: '',
+          rootCertContent: '',
+          encryptType: '',
+          encryptKey: '',
+        },
+      };
+    } else if (payCode.includes('mock')) {
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: 0,
+        config: {
+          name: 'mock-conf',
+        },
+      };
+    } else if (payCode.includes('wallet')) {
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: 0,
+        config: {
+          name: 'mock-conf',
+        },
+      };
+    } else if (payCode.includes('wx')) {
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        feeRate: undefined,
+        remark: '',
+        config: {
+          appId: '',
+          mchId: '',
+          apiVersion: '',
+          mchKey: '',
+          keyContent: '',
+          privateKeyContent: '',
+          certSerialNo: '',
+          apiV3Key: '',
+          publicKeyContent: '',
+          publicKeyId: '',
+        },
+      };
+    }
+
+    try {
+      const res = await getChannel(id, payCode);
+      formData.value = {
+        ...res,
+        config: {
+          ...JSON.parse(res.config),
+        },
+      };
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :close-on-click-modal="false" :title="title" class="w-2/5">
+    <Form :schema="channelSchema(formType)" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/app/modules/data.ts b/apps/web-ele/src/views/pay/app/modules/data.ts
new file mode 100644
index 00000000..56188df2
--- /dev/null
+++ b/apps/web-ele/src/views/pay/app/modules/data.ts
@@ -0,0 +1,491 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { h } from 'vue';
+
+import { InputUpload } from '#/components/upload';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+export function channelSchema(formType: string): VbenFormSchema[] {
+  if (formType.includes('alipay_')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '开放平台 APPID',
+        fieldName: 'config.appId',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入开放平台 APPID',
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '网关地址',
+        fieldName: 'config.serverUrl',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'https://openapi.alipay.com/gateway.do',
+              label: '线上环境',
+            },
+            {
+              value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
+              label: '沙箱环境',
+            },
+          ],
+        },
+      },
+      {
+        label: '算法类型',
+        fieldName: 'config.signType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'RSA2',
+              label: 'RSA2',
+            },
+          ],
+        },
+        defaultValue: 'RSA2',
+      },
+      {
+        label: '公钥类型',
+        fieldName: 'config.mode',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 1,
+              label: '公钥模式',
+            },
+            {
+              value: 2,
+              label: '证书模式',
+            },
+          ],
+        },
+      },
+      {
+        label: '应用私钥',
+        fieldName: 'config.privateKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入应用私钥',
+          rows: 8,
+        },
+      },
+      {
+        label: '支付宝公钥',
+        fieldName: 'config.alipayPublicKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入支付宝公钥',
+          rows: 8,
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 1;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '商户公钥应用证书',
+        fieldName: 'config.appCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '支付宝公钥证书',
+        fieldName: 'config.alipayPublicCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '根证书',
+        fieldName: 'config.rootCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传根证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '接口内容加密方式',
+        fieldName: 'config.encryptType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'NONE',
+              label: '无加密',
+            },
+            {
+              value: 'AES',
+              label: 'AES',
+            },
+          ],
+        },
+        defaultValue: 'NONE',
+      },
+      {
+        label: '接口内容加密密钥',
+        fieldName: 'config.encryptKey',
+        component: 'Input',
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.encryptType === 'AES';
+          },
+          triggerFields: ['config.encryptType', 'encryptType', 'config'],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else if (formType.includes('mock') || formType.includes('wallet')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '渠道编码',
+        fieldName: 'code',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else if (formType.includes('wx')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道编码',
+        fieldName: 'code',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '微信 APPID',
+        fieldName: 'config.appId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage]查看 APPID',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入微信 APPID',
+        },
+      },
+      {
+        label: '商户号',
+        fieldName: 'config.mchId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/pay_setting]查看商户号',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户号',
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: 'API 版本',
+        fieldName: 'config.apiVersion',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              label: 'v2',
+              value: 'v2',
+            },
+            {
+              label: 'v3',
+              value: 'v3',
+            },
+          ],
+        },
+      },
+      {
+        label: '商户密钥',
+        fieldName: 'config.mchKey',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户密钥',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_cert.p12 证书',
+        fieldName: 'config.keyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 8,
+            placeholder: '请上传 apiclient_cert.p12 证书',
+          },
+          fileUploadProps: {
+            accept: ['p12'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'API V3 密钥',
+        fieldName: 'config.apiV3Key',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入 API V3 密钥',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_key.pem 证书',
+        fieldName: 'config.privateKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 8,
+            placeholder: '请上传 apiclient_key.pem 证书',
+          },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '证书序列号',
+        fieldName: 'config.certSerialNo',
+        component: 'Input',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage]查看证书序列号',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入证书序列号',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'public_key.pem 证书',
+        fieldName: 'config.publicKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 8,
+            placeholder: '请上传 public_key.pem 证书',
+          },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '公钥 ID',
+        fieldName: 'config.publicKeyId',
+        component: 'Input',
+        help: '微信支付公钥产品简介及使用说明[https://pay.weixin.qq.com/doc/v3/merchant/4012153196]',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入公钥 ID',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else {
+    return [];
+  }
+}
diff --git a/apps/web-ele/src/views/pay/cashier/data.ts b/apps/web-ele/src/views/pay/cashier/data.ts
new file mode 100644
index 00000000..0918a6f1
--- /dev/null
+++ b/apps/web-ele/src/views/pay/cashier/data.ts
@@ -0,0 +1,81 @@
+import {
+  SvgAlipayAppIcon,
+  SvgAlipayBarIcon,
+  SvgAlipayPcIcon,
+  SvgAlipayQrIcon,
+  SvgAlipayWapIcon,
+  SvgMockIcon,
+  SvgWalletIcon,
+  SvgWxAppIcon,
+  SvgWxBarIcon,
+  SvgWxLiteIcon,
+  SvgWxNativeIcon,
+  SvgWxPubIcon,
+} from '@vben/icons';
+
+export const channelsAlipay = [
+  {
+    name: '支付宝 PC 网站支付',
+    icon: SvgAlipayPcIcon,
+    code: 'alipay_pc',
+  },
+  {
+    name: '支付宝 Wap 网站支付',
+    icon: SvgAlipayWapIcon,
+    code: 'alipay_wap',
+  },
+  {
+    name: '支付宝 App 网站支付',
+    icon: SvgAlipayAppIcon,
+    code: 'alipay_app',
+  },
+  {
+    name: '支付宝扫码支付',
+    icon: SvgAlipayQrIcon,
+    code: 'alipay_qr',
+  },
+  {
+    name: '支付宝条码支付',
+    icon: SvgAlipayBarIcon,
+    code: 'alipay_bar',
+  },
+];
+export const channelsWechat = [
+  {
+    name: '微信公众号支付',
+    icon: SvgWxPubIcon,
+    code: 'wx_pub',
+  },
+  {
+    name: '微信小程序支付',
+    icon: SvgWxLiteIcon,
+    code: 'wx_lite',
+  },
+  {
+    name: '微信 App 支付',
+    icon: SvgWxAppIcon,
+    code: 'wx_app',
+  },
+  {
+    name: '微信扫码支付',
+    icon: SvgWxNativeIcon,
+    code: 'wx_native',
+  },
+  {
+    name: '微信条码支付',
+    icon: SvgWxBarIcon,
+    code: 'wx_bar',
+  },
+];
+export const channelsMock = [
+  {
+    name: '钱包支付',
+    icon: SvgWalletIcon,
+    code: 'wallet',
+  },
+  {
+    name: '模拟支付',
+    icon: SvgMockIcon,
+    code: 'mock',
+  },
+];
diff --git a/apps/web-ele/src/views/pay/cashier/index.vue b/apps/web-ele/src/views/pay/cashier/index.vue
new file mode 100644
index 00000000..d6476d1b
--- /dev/null
+++ b/apps/web-ele/src/views/pay/cashier/index.vue
@@ -0,0 +1,389 @@
+<script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElDescriptions,
+  ElImage,
+  ElInput,
+  ElMessage,
+} from 'element-plus';
+
+import { getOrder, submitOrder } from '#/api/pay/order';
+import {
+  PayChannelEnum,
+  PayDisplayModeEnum,
+  PayOrderStatusEnum,
+} from '#/utils';
+
+import { channelsAlipay, channelsMock, channelsWechat } from './data';
+
+defineOptions({ name: 'PayCashier' });
+
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  destroyOnClose: true,
+});
+
+const route = useRoute();
+const { push } = useRouter(); // 路由
+const { closeCurrentTab } = useTabs();
+
+const id = ref(); // 支付单号
+const title = ref('支付订单');
+const returnUrl = ref<string>(); // 支付完的回调地址
+
+const payOrder = ref<PayOrderApi.Order>();
+const interval = ref<any>(undefined); // 定时任务，轮询是否完成支付
+
+/** 展示形式：二维码 */
+const qrCode = ref({
+  url: '',
+  visible: false,
+});
+
+/** 展示形式：条形码 */
+const barCode = ref({
+  channelCode: '',
+  value: '',
+  visible: false,
+});
+
+/** 获得支付信息 */
+async function getDetail() {
+  // 1. 获取路由参数
+  id.value = route.query.id;
+  if (route.query.returnUrl) {
+    returnUrl.value = decodeURIComponent(route.query.returnUrl as string);
+  }
+  // 1.1 未传递订单编号
+  if (!id.value) {
+    ElMessage.error('未传递支付单号，无法查看对应的支付信息');
+    goReturnUrl('cancel');
+    return;
+  }
+  const res = await getOrder(id.value);
+  // 1.2 无法查询到支付信息
+  if (!res) {
+    ElMessage.error('支付订单不存在，请检查！');
+    goReturnUrl('cancel');
+    return;
+  }
+  // 1.3 如果已支付、或者已关闭，则直接跳转
+  if (res.status === PayOrderStatusEnum.SUCCESS.status) {
+    ElMessage.success('支付成功');
+    goReturnUrl('success');
+    return;
+  } else if (res.status === PayOrderStatusEnum.CLOSED.status) {
+    ElMessage.error('无法支付，原因：订单已关闭');
+    goReturnUrl('close');
+    return;
+  }
+  payOrder.value = res;
+}
+
+function handlePay(channelCode: string) {
+  switch (channelCode) {
+    // 条形码支付，需要特殊处理
+    case PayChannelEnum.ALIPAY_BAR.code: {
+      title.value = '“支付宝”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    case PayChannelEnum.WX_BAR.code: {
+      title.value = '“微信”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    // 微信公众号、小程序支付，无法在 PC 网页中进行
+    case PayChannelEnum.WX_LITE.code: {
+      ElMessage.error('微信小程序：不支持 PC 网站');
+      break;
+    }
+    case PayChannelEnum.WX_PUB.code: {
+      ElMessage.error('微信公众号支付：不支持 PC 网站');
+      break;
+    }
+    default: {
+      submit(channelCode);
+      break;
+    }
+  }
+}
+
+async function submit(channelCode: string) {
+  try {
+    const submitParam = {
+      id: id.value,
+      channelCode,
+      returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
+      ...buildSubmitParam(channelCode),
+    };
+    const data = await submitOrder(submitParam);
+    // 直接返回已支付的情况，例如说扫码支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      ElMessage.success('支付成功！');
+      goReturnUrl('success');
+      return;
+    }
+
+    // 展示对应的界面
+    switch (data.displayMode) {
+      case PayDisplayModeEnum.APP.mode: {
+        displayApp(channelCode);
+        break;
+      }
+      case PayDisplayModeEnum.QR_CODE.mode: {
+        displayQrCode(channelCode, data);
+        break;
+      }
+      case PayDisplayModeEnum.URL.mode: {
+        displayUrl(data);
+        break;
+      }
+      // No default
+    }
+
+    // 打开轮询任务
+    createQueryInterval();
+  } finally {
+    // message.success('支付成功！')
+  }
+}
+
+/** 构建提交支付的额外参数 */
+function buildSubmitParam(channelCode: string) {
+  // ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
+    return {
+      channelExtras: {
+        auth_code: barCode.value.value,
+      },
+    };
+  }
+  // ② 微信 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.WX_BAR.code) {
+    return {
+      channelExtras: {
+        authCode: barCode.value.value,
+      },
+    };
+  }
+  return {};
+}
+
+/** 提交支付后，URL 的展示形式 */
+function displayUrl(data: any) {
+  location.href = data.displayContent;
+}
+
+/** 提交支付后（扫码支付） */
+function displayQrCode(channelCode: string, data: any) {
+  title.value = '请使用手机浏览器“扫一扫”';
+  if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
+    // 考虑到 WAP 测试，所以引导手机浏览器搞
+  } else if (channelCode.indexOf('alipay_') === 0) {
+    title.value = '请使用支付宝“扫一扫”扫码支付';
+  } else if (channelCode.indexOf('wx_') === 0) {
+    title.value = '请使用微信“扫一扫”扫码支付';
+  }
+  qrCode.value = {
+    url: data.displayContent,
+    visible: true,
+  };
+}
+
+/** 提交支付后（App） */
+function displayApp(channelCode: string) {
+  if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
+    ElMessage.error('支付宝 App 支付：无法在网页支付！');
+  }
+  if (channelCode === PayChannelEnum.WX_APP.code) {
+    ElMessage.error('微信 App 支付：无法在网页支付！');
+  }
+}
+
+/** 轮询查询任务 */
+function createQueryInterval() {
+  if (interval.value) {
+    return;
+  }
+  interval.value = setInterval(async () => {
+    const data = await getOrder(id.value);
+    // 已支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      ElMessage.success('支付成功！');
+      goReturnUrl('success');
+    }
+    // 已取消
+    if (data.status === PayOrderStatusEnum.CLOSED.status) {
+      clearQueryInterval();
+      ElMessage.error('支付已关闭！');
+      goReturnUrl('close');
+    }
+  }, 1000 * 2);
+}
+
+/** 清空查询任务 */
+function clearQueryInterval() {
+  // 清空数据
+  qrCode.value = {
+    url: '',
+    visible: false,
+  };
+  barCode.value = {
+    channelCode: '',
+    value: '',
+    visible: false,
+  };
+  // 清空任务
+  clearInterval(interval.value);
+  interval.value = undefined;
+}
+
+/**
+ * 回到业务的 URL
+ *
+ * @param payResult 支付结果
+ *  ① success：支付成功
+ *  ② cancel：取消支付
+ *  ③ close：支付已关闭
+ */
+function goReturnUrl(payResult: string) {
+  // 清理任务
+  clearQueryInterval();
+
+  // 未配置的情况下，只能关闭
+  if (!returnUrl.value) {
+    closeCurrentTab();
+    return;
+  }
+
+  const url = returnUrl.value.includes('?')
+    ? `${returnUrl.value}&payResult=${payResult}`
+    : `${returnUrl.value}?payResult=${payResult}`;
+  // 如果有配置，且是 http 开头，则浏览器跳转
+  if (returnUrl.value.indexOf('http') === 0) {
+    location.href = url;
+  } else {
+    closeCurrentTab();
+    push({ path: url });
+  }
+}
+
+onMounted(async () => {
+  await getDetail();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ElCard class="mt-4">
+      <ElDescriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
+        <ElDescriptions.Item label="支付单号">
+          {{ payOrder?.id }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="商品标题">
+          {{ payOrder?.subject }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="商品内容">
+          {{ payOrder?.body }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="支付金额">
+          {{ `￥${fenToYuan(payOrder?.price || 0)}` }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="创建时间">
+          {{ formatDate(payOrder?.createTime) }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="过期时间">
+          {{ formatDate(payOrder?.expireTime) }}
+        </ElDescriptions.Item>
+      </ElDescriptions>
+    </ElCard>
+    <ElCard title="选择支付宝支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsAlipay"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <ElCard title="选择微信支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsWechat"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <ElCard title="选择其它支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsMock"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <Modal class="w-2/5" :title="title">
+      <ElImage v-if="qrCode.visible" :src="qrCode.url" />
+      <ElInput
+        v-if="barCode.visible"
+        v-model:value="barCode.value"
+        placeholder="请输入条形码"
+        required
+      />
+      <div class="text-right" v-if="barCode.visible">
+        或使用
+        <ElButton
+          type="danger"
+          link
+          target="_blank"
+          href="https://baike.baidu.com/item/条码支付/10711903"
+        >
+          (扫码枪/扫码盒)
+        </ElButton>
+        扫码
+      </div>
+    </Modal>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/demo/order/data.ts b/apps/web-ele/src/views/pay/demo/order/data.ts
new file mode 100644
index 00000000..db91034d
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/order/data.ts
@@ -0,0 +1,94 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'spuId',
+      label: '商品',
+      rules: 'required',
+      componentProps: {
+        options: [
+          { label: '华为手机 --- 1.00元', value: 1, price: 1 },
+          { label: '小米电视 --- 10.00元', value: 2, price: 10 },
+          { label: '苹果手表 --- 100.00元', value: 3, price: 100 },
+          { label: '华硕笔记本 --- 1000.00元', value: 4, price: 1000 },
+          { label: '蔚来汽车 --- 200000.00元', value: 5, price: 200_000 },
+        ],
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '订单编号',
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+    },
+    {
+      field: 'spuName',
+      title: '商品名字',
+    },
+    {
+      field: 'price',
+      title: '支付价格',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'payOrderId',
+      title: '支付单号',
+    },
+    {
+      field: 'payStatus',
+      title: '是否支付',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'payTime',
+      title: '支付时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'refundTime',
+      title: '退款时间',
+      slots: { default: 'refundTime' },
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/demo/order/index.vue b/apps/web-ele/src/views/pay/demo/order/index.vue
new file mode 100644
index 00000000..020a1d19
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/order/index.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DemoOrderApi } from '#/api/pay/demo/order';
+
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemoOrderPage, refundDemoOrder } from '#/api/pay/demo/order';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const router = useRouter();
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建订单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 支付按钮操作 */
+function handlePay(row: DemoOrderApi.Order) {
+  router.push({
+    name: 'PayCashier',
+    query: {
+      id: row.payOrderId,
+      returnUrl: encodeURIComponent(`/pay/demo/order?id=${row.id}`),
+    },
+  });
+}
+
+/** 退款按钮操作 */
+async function handleRefund(row: DemoOrderApi.Order) {
+  const loadingInstance = ElLoading.service({
+    text: '退款中，请稍后...',
+    fullscreen: true,
+  });
+  try {
+    await refundDemoOrder(row.id as number);
+    ElMessage.success('退款成功');
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemoOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<DemoOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝支付接入"
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+      />
+      <DocAlert
+        title="支付宝、微信退款接入"
+        url="https://doc.iocoder.cn/pay/refund-demo/"
+      />
+      <DocAlert
+        title="微信公众号支付接入"
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+      />
+      <DocAlert
+        title="微信小程序支付接入"
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="示例订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例订单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #refundTime="{ row }">
+        <span v-if="row.refundTime">{{ formatDateTime(row.refundTime) }}</span>
+        <span v-else-if="row.payRefundId">退款中，等待退款结果</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '前往支付',
+              type: 'primary',
+              link: true,
+              ifShow: !row.payStatus,
+              onClick: handlePay.bind(null, row),
+            },
+            {
+              label: '发起退款',
+              type: 'danger',
+              link: true,
+              ifShow: row.payStatus && !row.payRefundId,
+              popConfirm: {
+                title: '确定发起退款吗？',
+                confirm: handleRefund.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/demo/order/modules/form.vue b/apps/web-ele/src/views/pay/demo/order/modules/form.vue
new file mode 100644
index 00000000..9820b298
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/order/modules/form.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { DemoOrderApi } from '#/api/pay/demo/order';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDemoOrder } from '#/api/pay/demo/order';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as DemoOrderApi.Order;
+    try {
+      await createDemoOrder(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="$t('ui.actionTitle.create', ['退款订单'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/demo/withdraw/data.ts b/apps/web-ele/src/views/pay/demo/withdraw/data.ts
new file mode 100644
index 00000000..f73f65d6
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/withdraw/data.ts
@@ -0,0 +1,124 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'subject',
+      label: '提现标题',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'price',
+      label: '提现金额',
+      rules: 'required',
+      componentProps: {
+        min: 1,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'type',
+      label: '提现类型',
+      rules: 'required',
+      componentProps: {
+        options: [
+          { label: '支付宝', value: 1 },
+          { label: '微信余额', value: 2 },
+          { label: '钱包余额', value: 3 },
+        ],
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'userName',
+      label: '收款人姓名',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'userAccount',
+      label: '收款人账号',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '提现单编号',
+    },
+    {
+      field: 'subject',
+      title: '提现标题',
+    },
+    {
+      field: 'type',
+      title: '提现类型',
+      slots: { default: 'type' },
+    },
+    {
+      field: 'price',
+      title: '提现金额',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'userName',
+      title: '收款人姓名',
+    },
+    {
+      field: 'userAccount',
+      title: '收款人账号',
+    },
+    {
+      field: 'status',
+      title: '提现状态',
+      slots: { default: 'status' },
+    },
+    {
+      field: 'payTransferId',
+      title: '转账单号',
+    },
+    {
+      field: 'transferChannelCode',
+      title: '转账渠道',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'transferTime',
+      title: '转账时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'transferErrorMsg',
+      title: '转账失败原因',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/demo/withdraw/index.vue b/apps/web-ele/src/views/pay/demo/withdraw/index.vue
new file mode 100644
index 00000000..88e42d54
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/withdraw/index.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { ElLoading, ElMessage, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getDemoWithdrawPage,
+  transferDemoWithdraw,
+} from '#/api/pay/demo/withdraw';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建提现单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 处理转账操作 */
+async function handleTransfer(row: DemoWithdrawApi.Withdraw) {
+  const loadingInstance = ElLoading.service({
+    text: '转账中，请稍后...',
+    fullscreen: true,
+  });
+  try {
+    const payTransferId = await transferDemoWithdraw(row.id as number);
+    ElMessage.success(`转账提交成功，转账单号：${payTransferId}`);
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemoWithdrawPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<DemoWithdrawApi.Withdraw>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝转账接入"
+        url="https://doc.iocoder.cn/pay/alipay-transfer-demo/"
+      />
+      <DocAlert
+        title="微信转账接入"
+        url="https://doc.iocoder.cn/pay/wx-transfer-demo/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="示例提现单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例提现单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #type="{ row }">
+        <ElTag v-if="row.type === 1">支付宝</ElTag>
+        <ElTag v-else-if="row.type === 2">微信余额</ElTag>
+        <ElTag v-else-if="row.type === 3">钱包余额</ElTag>
+      </template>
+      <template #price="{ row }">
+        <span>￥{{ erpPriceInputFormatter(row.price) }}</span>
+      </template>
+      <template #status="{ row }">
+        <ElTag v-if="row.status === 0 && !row.payTransferId" type="warning">
+          等待转账
+        </ElTag>
+        <ElTag v-else-if="row.status === 0 && row.payTransferId" type="info">
+          转账中
+        </ElTag>
+        <ElTag v-else-if="row.status === 10" type="success"> 转账成功 </ElTag>
+        <ElTag v-else-if="row.status === 20" type="danger"> 转账失败 </ElTag>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '发起转账',
+              type: 'primary',
+              link: true,
+              ifShow: row.status === 0 && !row.payTransferId,
+              onClick: handleTransfer.bind(null, row),
+            },
+            {
+              label: '重新转账',
+              type: 'primary',
+              link: true,
+              ifShow: row.status === 20,
+              onClick: handleTransfer.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/demo/withdraw/modules/form.vue b/apps/web-ele/src/views/pay/demo/withdraw/modules/form.vue
new file mode 100644
index 00000000..dae1422c
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/withdraw/modules/form.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDemoWithdraw } from '#/api/pay/demo/withdraw';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as DemoWithdrawApi.Withdraw;
+    try {
+      await createDemoWithdraw(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="$t('ui.actionTitle.create', ['示例提现单'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/notify/data.ts b/apps/web-ele/src/views/pay/notify/data.ts
new file mode 100644
index 00000000..4d28b521
--- /dev/null
+++ b/apps/web-ele/src/views/pay/notify/data.ts
@@ -0,0 +1,168 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getAppList } from '#/api/pay/app';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'appId',
+      label: '应用编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getAppList();
+          return data.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        autoSelect: 'first',
+        placeholder: '请选择数据源',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '通知类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.PAY_NOTIFY_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'dataId',
+      label: '关联编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '通知状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.PAY_NOTIFY_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'merchantOrderId',
+      label: '商户订单编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '任务编号',
+    },
+    {
+      field: 'appName',
+      title: '应用编号',
+    },
+    {
+      field: 'merchantOrderId',
+      title: '商户订单编号',
+    },
+    {
+      field: 'type',
+      title: '通知类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_NOTIFY_TYPE },
+      },
+    },
+    {
+      field: 'dataId',
+      title: '关联编号',
+    },
+    {
+      field: 'status',
+      title: '通知状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
+      },
+    },
+    {
+      field: 'lastExecuteTime',
+      title: '最后通知时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'nextNotifyTime',
+      title: '下次通知时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'notifyTimes',
+      title: '通知次数',
+      cellRender: {
+        name: 'CellTag',
+        props: {
+          type: 'success',
+          content: '{notifyTimes} / {maxNotifyTimes}',
+        },
+      },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export const detailColumns = [
+  {
+    title: '日志编号',
+    dataIndex: 'id',
+    key: 'id',
+    width: 120,
+    ellipsis: false,
+  },
+  {
+    title: '通知状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 120,
+    ellipsis: false,
+  },
+  {
+    title: '通知次数',
+    dataIndex: 'notifyTimes',
+    key: 'notifyTimes',
+    width: 120,
+    ellipsis: false,
+  },
+  {
+    title: '通知时间',
+    dataIndex: 'lastExecuteTime',
+    key: 'lastExecuteTime',
+    width: 120,
+    ellipsis: false,
+  },
+  {
+    title: '响应结果',
+    dataIndex: 'response',
+    key: 'response',
+    width: 120,
+    ellipsis: false,
+  },
+];
diff --git a/apps/web-ele/src/views/pay/notify/index.vue b/apps/web-ele/src/views/pay/notify/index.vue
new file mode 100644
index 00000000..983b9443
--- /dev/null
+++ b/apps/web-ele/src/views/pay/notify/index.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getNotifyTaskPage } from '#/api/pay/notify';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+function handleDetail(row: any) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNotifyTaskPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="支付通知列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:notify:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/notify/modules/detail.vue b/apps/web-ele/src/views/pay/notify/modules/detail.vue
new file mode 100644
index 00000000..bbc1a315
--- /dev/null
+++ b/apps/web-ele/src/views/pay/notify/modules/detail.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDivider,
+  ElTable,
+  ElTag,
+} from 'element-plus';
+
+import { getNotifyTaskDetail } from '#/api/pay/notify';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
+
+import { detailColumns } from '../data';
+
+const formData = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getNotifyTaskDetail(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="通知详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <ElDescriptions border :column="2" class="mx-4">
+      <ElDescriptionsItem label="商户订单编号">
+        <ElTag>{{ formData?.merchantOrderId }}</ElTag>
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="通知状态">
+        <DictTag
+          :type="DICT_TYPE.PAY_NOTIFY_STATUS"
+          :value="formData?.status"
+        />
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="应用编号">
+        {{ formData?.appId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="应用名称">
+        {{ formData?.appName }}
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="关联编号">
+        {{ formData?.dataId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="通知类型">
+        <DictTag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="formData?.type" />
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="通知次数">
+        {{ formData?.notifyTimes }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="最大通知次数">
+        {{ formData?.maxNotifyTimes }}
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="最后通知时间">
+        {{ formatDateTime(formData?.lastExecuteTime || '') }}
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="创建时间">
+        {{ formatDateTime(formData?.createTime || '') }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="更新时间">
+        {{ formatDateTime(formData?.updateTime || '') }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+
+    <ElDivider />
+
+    <ElDescriptions border :column="1" class="mx-4">
+      <ElDescriptionsItem label="回调日志">
+        <ElTable
+          v-if="formData"
+          :data-source="formData.logs"
+          :columns="detailColumns"
+        />
+      </ElDescriptionsItem>
+    </ElDescriptions>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/order/data.ts b/apps/web-ele/src/views/pay/order/data.ts
new file mode 100644
index 00000000..d3a2a522
--- /dev/null
+++ b/apps/web-ele/src/views/pay/order/data.ts
@@ -0,0 +1,263 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayOrderApi } from '#/api/pay/order';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'appId',
+      label: '应用编号',
+      componentProps: {
+        placeholder: '请输入应用编号',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'channelCode',
+      label: '支付渠道',
+      componentProps: {
+        placeholder: '请选择开启状态',
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'merchantOrderId',
+      label: '商户单号',
+      componentProps: {
+        placeholder: '请输入商户单号',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'no',
+      label: '支付单号',
+      componentProps: {
+        placeholder: '请输入支付单号',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'channelOrderNo',
+      label: '渠道单号',
+      componentProps: {
+        placeholder: '请输入渠道单号',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '支付状态',
+      componentProps: {
+        placeholder: '请选择支付状态',
+        options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+      },
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 60 },
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '支付金额',
+      field: 'price',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      title: '退款金额',
+      field: 'refundPrice',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      title: '手续金额',
+      field: 'channelFeePrice',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      title: '订单号',
+      field: 'no',
+      slots: {
+        default: 'no',
+      },
+    },
+    {
+      title: '支付状态',
+      field: 'status',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+      },
+    },
+    {
+      title: '支付渠道',
+      field: 'channelCode',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      title: '支付时间',
+      field: 'successTime',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '支付应用',
+      field: 'appName',
+    },
+    {
+      title: '商品标题',
+      field: 'subject',
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'merchantOrderId',
+      label: '商户单号',
+    },
+    {
+      field: 'no',
+      label: '支付单号',
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'status',
+      label: '支付状态',
+      content: (data: PayOrderApi.Order) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_ORDER_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'price',
+      label: '支付金额',
+      content: (data: PayOrderApi.Order) =>
+        `￥${erpPriceInputFormatter(data?.price)}`,
+    },
+    {
+      field: 'channelFeePrice',
+      label: '手续费',
+      content: (data: PayOrderApi.Order) =>
+        `￥${erpPriceInputFormatter(data?.channelFeePrice)}`,
+    },
+    {
+      field: 'channelFeeRate',
+      label: '手续费比例',
+      content: (data: PayOrderApi.Order) =>
+        `${erpPriceInputFormatter(data?.channelFeeRate)}%`,
+    },
+    {
+      field: 'successTime',
+      label: '支付时间',
+      content: (data: PayOrderApi.Order) =>
+        formatDateTime(data?.successTime) as string,
+    },
+    {
+      field: 'expireTime',
+      label: '失效时间',
+      content: (data: PayOrderApi.Order) =>
+        formatDateTime(data?.expireTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data: PayOrderApi.Order) =>
+        formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data: PayOrderApi.Order) =>
+        formatDateTime(data?.updateTime) as string,
+    },
+    {
+      field: 'subject',
+      label: '商品标题',
+    },
+    {
+      field: 'body',
+      label: '商品描述',
+    },
+    {
+      field: 'channelCode',
+      label: '支付渠道',
+      content: (data: PayOrderApi.Order) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.channelCode,
+        }),
+    },
+    {
+      field: 'userIp',
+      label: '支付 IP',
+    },
+    {
+      field: 'channelOrderNo',
+      label: '渠道单号',
+      content: (data: PayOrderApi.Order) =>
+        h(ElTag, { color: 'green' }, () => data?.channelOrderNo || ''),
+    },
+    {
+      field: 'channelUserId',
+      label: '渠道用户',
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      content: (data: PayOrderApi.Order) =>
+        `￥${erpPriceInputFormatter(data?.refundPrice)}`,
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '支付通道异步回调内容',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/order/index.vue b/apps/web-ele/src/views/pay/order/index.vue
new file mode 100644
index 00000000..f849cf62
--- /dev/null
+++ b/apps/web-ele/src/views/pay/order/index.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage } from '#/api/pay/order';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+function handleDetail(row: PayOrderApi.Order) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    collapsed: false,
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 80,
+    },
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isCurrent: true,
+      isHover: true,
+      resizable: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝支付接入"
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+      />
+      <DocAlert
+        title="微信公众号支付接入"
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+      />
+      <DocAlert
+        title="微信小程序支付接入"
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+      />
+    </template>
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="支付订单列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div class="flex flex-col gap-1 text-left">
+          <p class="text-sm">
+            <ElTag size="small" type="primary"> 商户</ElTag>
+            {{ row.merchantOrderId }}
+          </p>
+          <p class="text-sm" v-if="row.no">
+            <ElTag size="small" type="warning">支付</ElTag> {{ row.no }}
+          </p>
+          <p class="text-sm" v-if="row.channelOrderNo">
+            <ElTag size="small" type="success">渠道</ElTag>
+            {{ row.channelOrderNo }}
+          </p>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/order/modules/detail.vue b/apps/web-ele/src/views/pay/order/modules/detail.vue
new file mode 100644
index 00000000..22c1b9fd
--- /dev/null
+++ b/apps/web-ele/src/views/pay/order/modules/detail.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getOrder } from '#/api/pay/order';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const detailData = ref<PayOrderApi.Order>();
+
+const [Description] = useDescription({
+  componentProps: {
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    title: '',
+    labelWidth: 200,
+    extra: '',
+  },
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      detailData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayOrderApi.Order>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      detailData.value = await getOrder(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    title="订单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Description :data="detailData" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/refund/data.ts b/apps/web-ele/src/views/pay/refund/data.ts
new file mode 100644
index 00000000..2050fcd3
--- /dev/null
+++ b/apps/web-ele/src/views/pay/refund/data.ts
@@ -0,0 +1,254 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { fenToYuan, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { getAppList } from '#/api/pay/app';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'appId',
+      label: '应用编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getAppList();
+          return data.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        autoSelect: 'first',
+        placeholder: '请选择数据源',
+      },
+    },
+    {
+      fieldName: 'channelCode',
+      label: '退款渠道',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+      },
+    },
+    {
+      fieldName: 'merchantOrderId',
+      label: '商户支付单号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'merchantRefundId',
+      label: '商户退款单号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'channelOrderNo',
+      label: '渠道支付单号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'channelRefundNo',
+      label: '渠道退款单号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '退款状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.PAY_REFUND_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'merchantRefundId',
+      title: '退款订单号',
+    },
+    {
+      field: 'channelRefundNo',
+      title: '渠道退款单号',
+    },
+    {
+      field: 'payPrice',
+      title: '支付金额',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'status',
+      title: '退款状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_REFUND_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useBaseDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'merchantRefundId',
+      label: '商户退款单号',
+      content: (data) =>
+        h(ElTag, {}, () => {
+          return data?.merchantRefundId || '-';
+        }),
+    },
+    {
+      field: 'channelRefundNo',
+      label: '渠道退款单号',
+      content: (data) =>
+        h(ElTag, {}, () => {
+          return data?.channelRefundNo || '-';
+        }),
+    },
+    {
+      field: 'merchantOrderId',
+      label: '商户支付单号',
+      content: (data) =>
+        h(ElTag, {}, () => {
+          return data?.merchantOrderId || '-';
+        }),
+    },
+    {
+      field: 'channelOrderNo',
+      label: '渠道支付单号',
+      content: (data) =>
+        h(ElTag, {}, () => {
+          return data?.channelOrderNo || '-';
+        }),
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'payPrice',
+      label: '支付金额',
+      content: (data) =>
+        h(ElTag, { color: 'success' }, () => {
+          return fenToYuan(data.payPrice || 0);
+        }),
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      content: (data) =>
+        h(ElTag, { color: 'red' }, () => {
+          return fenToYuan(data.refundPrice || 0);
+        }),
+    },
+    {
+      field: 'status',
+      label: '退款状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_REFUND_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'successTime',
+      label: '退款时间',
+      content: (data) => formatDateTime(data.successTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data) => formatDateTime(data.updateTime) as string,
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useChannelDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'channelCode',
+      label: '退款渠道',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.channelCode,
+        }),
+    },
+    {
+      field: 'reason',
+      label: '退款原因',
+    },
+    {
+      field: 'userIp',
+      label: '退款 IP',
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelErrorCode',
+      label: '渠道错误码',
+    },
+    {
+      field: 'channelErrorMsg',
+      label: '渠道错误码描述',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '支付通道异步回调内容',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/refund/index.vue b/apps/web-ele/src/views/pay/refund/index.vue
new file mode 100644
index 00000000..0f6bad3c
--- /dev/null
+++ b/apps/web-ele/src/views/pay/refund/index.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as RefundApi from '#/api/pay/refund';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [RefundDetailModal, refundDetailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await RefundApi.exportRefund(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '支付退款.xls', source: data });
+}
+
+/** 查看详情 */
+function handleDetail(row: any) {
+  refundDetailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await RefundApi.getRefundPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝、微信退款接入"
+        url="https://doc.iocoder.cn/pay/refund-demo/"
+      />
+    </template>
+    <RefundDetailModal @success="onRefresh" />
+    <Grid table-title="支付退款列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:refund:query'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:refund:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/refund/modules/detail.vue b/apps/web-ele/src/views/pay/refund/modules/detail.vue
new file mode 100644
index 00000000..226d7bf3
--- /dev/null
+++ b/apps/web-ele/src/views/pay/refund/modules/detail.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { PayRefundApi } from '#/api/pay/refund';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElDivider } from 'element-plus';
+
+import { getRefund } from '#/api/pay/refund';
+import { useDescription } from '#/components/description';
+
+import { useBaseDetailSchema, useChannelDetailSchema } from '../data';
+
+const formData = ref<PayRefundApi.Refund>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    title: '',
+    labelWidth: 200,
+    extra: '',
+  },
+  schema: useBaseDetailSchema(),
+});
+
+const [ChannelDescription] = useDescription({
+  componentProps: {
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    title: '',
+    labelWidth: 200,
+    extra: '',
+  },
+  schema: useChannelDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayRefundApi.Refund>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getRefund(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="退款详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <BaseDescription :data="formData" />
+    <ElDivider />
+    <ChannelDescription :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/transfer/data.ts b/apps/web-ele/src/views/pay/transfer/data.ts
new file mode 100644
index 00000000..9da7183b
--- /dev/null
+++ b/apps/web-ele/src/views/pay/transfer/data.ts
@@ -0,0 +1,274 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '转账单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入转账单号',
+      },
+    },
+    {
+      fieldName: 'channelCode',
+      label: '转账渠道',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE),
+        allowClear: true,
+        placeholder: '请选择支付渠道',
+      },
+    },
+    {
+      fieldName: 'merchantTransferId',
+      label: '商户单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商户单号',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE),
+        allowClear: true,
+        placeholder: '请选择类型',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '转账状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS),
+        allowClear: true,
+        placeholder: '请选择转账状态',
+      },
+    },
+    {
+      fieldName: 'userName',
+      label: '收款人姓名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入收款人姓名',
+      },
+    },
+    {
+      fieldName: 'accountNo',
+      label: '收款人账号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入收款人账号',
+      },
+    },
+    {
+      fieldName: 'channelTransferNo',
+      label: '渠道单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入渠道单号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'appName',
+      title: '支付应用',
+    },
+    {
+      field: 'price',
+      title: '转账金额',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'status',
+      title: '转账状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_TRANSFER_STATUS },
+      },
+    },
+    {
+      field: 'type',
+      title: '类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_TRANSFER_TYPE },
+      },
+    },
+    {
+      field: 'channelCode',
+      title: '支付渠道',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'merchantTransferId',
+      title: '商户单号',
+    },
+    {
+      field: 'channelTransferNo',
+      title: '渠道单号',
+    },
+    {
+      field: 'userName',
+      title: '收款人姓名',
+    },
+    {
+      field: 'accountNo',
+      title: '收款人账号',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的配置 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '编号',
+    },
+    {
+      field: 'merchantTransferId',
+      label: '商户单号',
+      content: (data) => {
+        return h(ElTag, {
+          color: 'blue',
+          content: data?.merchantTransferId,
+        });
+      },
+    },
+    {
+      field: 'no',
+      label: '转账单号',
+      content: (data) => {
+        return h(ElTag, {
+          color: 'blue',
+          content: data?.no,
+        });
+      },
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'status',
+      label: '转账状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_TRANSFER_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'price',
+      label: '转账金额',
+      content: (data) => {
+        return h(ElTag, {
+          color: 'blue',
+          content: `￥${erpPriceInputFormatter(data?.price)}`,
+        });
+      },
+    },
+    {
+      field: 'successTime',
+      label: '转账时间',
+      content: (data) => formatDateTime(data?.successTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'userName',
+      label: '收款人姓名',
+    },
+    {
+      field: 'userAccount',
+      label: '收款人账号',
+    },
+    {
+      field: 'channelCode',
+      label: '支付渠道',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.channelCode,
+        }),
+    },
+    {
+      field: 'channelCode',
+      label: '支付 IP',
+    },
+    {
+      field: 'channelTransferNo',
+      label: '渠道单号',
+      content: (data) => {
+        return h(ElTag, {
+          color: 'blue',
+          content: data?.channelTransferNo,
+        });
+      },
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '转账渠道通知内容',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/transfer/index.vue b/apps/web-ele/src/views/pay/transfer/index.vue
new file mode 100644
index 00000000..9f50fd85
--- /dev/null
+++ b/apps/web-ele/src/views/pay/transfer/index.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayTransferApi } from '#/api/pay/transfer';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportTransfer, getTransferPage } from '#/api/pay/transfer';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportTransfer(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '转账单.xls', source: data });
+}
+
+/** 查看转账详情 */
+function handleDetail(row: PayTransferApi.Transfer) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTransferPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayTransferApi.Transfer>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="转账管理" url="https://doc.iocoder.cn/pay/transfer/" />
+    </template>
+
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="转账单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:transfer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:transfer:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/transfer/modules/detail.vue b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
new file mode 100644
index 00000000..79868c19
--- /dev/null
+++ b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { PayTransferApi } from '#/api/pay/transfer';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getTransfer } from '#/api/pay/transfer';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<PayTransferApi.Transfer>();
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayTransferApi.Transfer>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTransfer(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+const [Description] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    labelWidth: 200,
+    extra: '',
+  },
+  schema: useDetailSchema(),
+});
+</script>
+
+<template>
+  <Modal
+    title="转账单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Description :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/balance/data.ts b/apps/web-ele/src/views/pay/wallet/balance/data.ts
new file mode 100644
index 00000000..c1598e8c
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/balance/data.ts
@@ -0,0 +1,86 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        allowClear: true,
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '用户编号',
+      field: 'userId',
+    },
+    {
+      title: '用户类型',
+      field: 'userType',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      title: '余额',
+      field: 'balance',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      title: '累计支出',
+      field: 'totalExpense',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      title: '累计充值',
+      field: 'totalRecharge',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      title: '冻结金额',
+      field: 'freezePrice',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/wallet/balance/index.vue b/apps/web-ele/src/views/pay/wallet/balance/index.vue
new file mode 100644
index 00000000..735c58c5
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/balance/index.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWalletPage } from '#/api/pay/wallet/balance';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import WalletDetail from './modules/detail.vue';
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const [WalletModal, walletModalApi] = useVbenModal({
+  connectedComponent: WalletDetail,
+  destroyOnClose: true,
+});
+
+function handleDetail(row: Required<PayWalletApi.Wallet>) {
+  walletModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWalletPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayWalletApi.Wallet>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="钱包余额" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <WalletModal @reload="onRefresh" />
+
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue b/apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue
new file mode 100644
index 00000000..1fa71020
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import WalletTransactionList from '../../transaction/index.vue';
+
+const walletId = ref(0);
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayWalletApi.Wallet>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      walletId.value = data.id;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    title="消息详情"
+    class="w-2/5"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <WalletTransactionList :wallet-id="walletId" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/rechargePackage/data.ts b/apps/web-ele/src/views/pay/wallet/rechargePackage/data.ts
new file mode 100644
index 00000000..40c26316
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/rechargePackage/data.ts
@@ -0,0 +1,119 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'payPrice',
+      label: '支付金额(元)',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      fieldName: 'bonusPrice',
+      label: '赠送金额(元)',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        allowClear: true,
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '套餐名称',
+    },
+    {
+      field: 'payPrice',
+      title: '支付金额',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'bonusPrice',
+      title: '赠送金额',
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue b/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
new file mode 100644
index 00000000..e4d9ed3f
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePackage,
+  getPackagePage,
+} from '#/api/pay/wallet/rechargePackage';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建套餐 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑套餐 */
+function handleEdit(row: any) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除套餐 */
+async function handleDelete(row: any) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deletePackage(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="充值套餐列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['充值套餐']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['pay:wallet-recharge-package:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['pay:wallet-recharge-package:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['pay:wallet-recharge-package:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/rechargePackage/modules/form.vue b/apps/web-ele/src/views/pay/wallet/rechargePackage/modules/form.vue
new file mode 100644
index 00000000..7c594595
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/rechargePackage/modules/form.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { WalletRechargePackageApi } from '#/api/pay/wallet/rechargePackage';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan, yuanToFen } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPackage,
+  getPackage,
+  updatePackage,
+} from '#/api/pay/wallet/rechargePackage';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<WalletRechargePackageApi.Package>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['充值套餐'])
+    : $t('ui.actionTitle.create', ['充值套餐']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as WalletRechargePackageApi.Package;
+    try {
+      // 转换金额单位
+      data.payPrice = yuanToFen(data.payPrice);
+      data.bonusPrice = yuanToFen(data.bonusPrice);
+      await (formData.value?.id ? updatePackage(data) : createPackage(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<WalletRechargePackageApi.Package>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPackage(data.id as number);
+      // 转换金额单位
+      formData.value.payPrice = Number.parseFloat(
+        fenToYuan(formData.value.payPrice),
+      );
+      formData.value.bonusPrice = Number.parseFloat(
+        fenToYuan(formData.value.bonusPrice),
+      );
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/transaction/data.ts b/apps/web-ele/src/views/pay/wallet/transaction/data.ts
new file mode 100644
index 00000000..2fe7a727
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/transaction/data.ts
@@ -0,0 +1,40 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      width: 80,
+    },
+    {
+      field: 'walletId',
+      title: '钱包编号',
+      width: 100,
+    },
+    {
+      field: 'title',
+      title: '关联业务标题',
+      width: 200,
+    },
+    {
+      field: 'price',
+      title: '交易金额',
+      width: 120,
+      formatter: ({ cellValue }) => `${cellValue / 100} 元`,
+    },
+    {
+      field: 'balance',
+      title: '钱包余额',
+      width: 120,
+      formatter: ({ cellValue }) => `${cellValue / 100} 元`,
+    },
+    {
+      field: 'createTime',
+      title: '交易时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/wallet/transaction/index.vue b/apps/web-ele/src/views/pay/wallet/transaction/index.vue
new file mode 100644
index 00000000..4116a8e7
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/transaction/index.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWallet } from '#/api/pay/wallet/balance';
+import { getTransactionPage } from '#/api/pay/wallet/transaction';
+
+import { useGridColumns } from './data';
+
+const props = defineProps({
+  walletId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+  userId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+});
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          let walletId = props.walletId;
+          if (props.userId) {
+            const wallet = await getWallet({ userId: props.userId });
+            walletId = wallet.id;
+          }
+          return await getTransactionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            walletId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="钱包交易记录" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/system/area/index.vue b/apps/web-ele/src/views/system/area/index.vue
index a83acf48..59b242da 100644
--- a/apps/web-ele/src/views/system/area/index.vue
+++ b/apps/web-ele/src/views/system/area/index.vue
@@ -46,7 +46,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       rowField: 'id',
diff --git a/apps/web-ele/src/views/system/dept/index.vue b/apps/web-ele/src/views/system/dept/index.vue
index abaaf0c6..fa057d64 100644
--- a/apps/web-ele/src/views/system/dept/index.vue
+++ b/apps/web-ele/src/views/system/dept/index.vue
@@ -70,8 +70,6 @@ async function onDelete(row: SystemDeptApi.Dept) {
     await deleteDept(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
@@ -114,7 +112,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       parentField: 'parentId',
diff --git a/apps/web-ele/src/views/system/dict/modules/data-grid.vue b/apps/web-ele/src/views/system/dict/modules/data-grid.vue
index a28ccc01..18394f7a 100644
--- a/apps/web-ele/src/views/system/dict/modules/data-grid.vue
+++ b/apps/web-ele/src/views/system/dict/modules/data-grid.vue
@@ -7,7 +7,7 @@ import type { SystemDictDataApi } from '#/api/system/dict/data';
 
 import { ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -60,12 +60,12 @@ function onEdit(row: any) {
 /** 删除字典数据 */
 async function onDelete(row: any) {
   const loadingInstance = ElLoading.service({
-    text: $t('common.processing'),
+    text: $t('ui.actionMessage.deleting', [row.name]),
     fullscreen: true,
   });
   try {
     await deleteDictData(row.id);
-    ElMessage.success($t('common.operationSuccess'));
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
   } finally {
     loadingInstance.close();
@@ -74,17 +74,10 @@ async function onDelete(row: any) {
 
 /** 批量删除字典数据 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteDictDataList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该字典数据吗？');
+  await deleteDictDataList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -134,7 +127,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemDictDataApi.DictData>,
diff --git a/apps/web-ele/src/views/system/dict/modules/type-grid.vue b/apps/web-ele/src/views/system/dict/modules/type-grid.vue
index 675b665a..627b218c 100644
--- a/apps/web-ele/src/views/system/dict/modules/type-grid.vue
+++ b/apps/web-ele/src/views/system/dict/modules/type-grid.vue
@@ -7,7 +7,7 @@ import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
 import { ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -55,12 +55,12 @@ function onEdit(row: any) {
 /** 删除字典类型 */
 async function onDelete(row: SystemDictTypeApi.DictType) {
   const loadingInstance = ElLoading.service({
-    text: $t('common.processing'),
+    text: $t('ui.actionMessage.deleting', [row.name]),
     fullscreen: true,
   });
   try {
     await deleteDictType(row.id as number);
-    ElMessage.success($t('common.operationSuccess'));
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
   } finally {
     loadingInstance.close();
@@ -69,17 +69,10 @@ async function onDelete(row: SystemDictTypeApi.DictType) {
 
 /** 批量删除字典类型 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteDictTypeList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该字典类型吗？');
+  await deleteDictTypeList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -132,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isCurrent: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemDictTypeApi.DictType>,
diff --git a/apps/web-ele/src/views/system/loginlog/index.vue b/apps/web-ele/src/views/system/loginlog/index.vue
index 066393a2..98c31bea 100644
--- a/apps/web-ele/src/views/system/loginlog/index.vue
+++ b/apps/web-ele/src/views/system/loginlog/index.vue
@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemLoginLogApi.LoginLog>,
diff --git a/apps/web-ele/src/views/system/mail/account/index.vue b/apps/web-ele/src/views/system/mail/account/index.vue
index fdd342bb..ded39c96 100644
--- a/apps/web-ele/src/views/system/mail/account/index.vue
+++ b/apps/web-ele/src/views/system/mail/account/index.vue
@@ -7,7 +7,7 @@ import type { SystemMailAccountApi } from '#/api/system/mail/account';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -60,17 +60,10 @@ async function onDelete(row: SystemMailAccountApi.MailAccount) {
 
 /** 批量删除邮箱账号 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteMailAccountList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该邮箱账号吗？');
+  await deleteMailAccountList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -122,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailAccountApi.MailAccount>,
diff --git a/apps/web-ele/src/views/system/mail/log/data.ts b/apps/web-ele/src/views/system/mail/log/data.ts
index 04f8d32e..b2b11e00 100644
--- a/apps/web-ele/src/views/system/mail/log/data.ts
+++ b/apps/web-ele/src/views/system/mail/log/data.ts
@@ -91,9 +91,28 @@ export function useGridColumns<T = SystemMailLogApi.MailLog>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'toMail',
-      title: '收件邮箱',
-      minWidth: 160,
+      field: 'userType',
+      title: '接收用户',
+      minWidth: 150,
+      slots: { default: 'userInfo' },
+    },
+    {
+      field: 'toMails',
+      title: '接收信息',
+      minWidth: 300,
+      formatter: ({ row }) => {
+        const lines: string[] = [];
+        if (row.toMails && row.toMails.length > 0) {
+          lines.push(`收件：${row.toMails.join('、')}`);
+        }
+        if (row.ccMails && row.ccMails.length > 0) {
+          lines.push(`抄送：${row.ccMails.join('、')}`);
+        }
+        if (row.bccMails && row.bccMails.length > 0) {
+          lines.push(`密送：${row.bccMails.join('、')}`);
+        }
+        return lines.join('\n');
+      },
     },
     {
       field: 'templateTitle',
diff --git a/apps/web-ele/src/views/system/mail/log/index.vue b/apps/web-ele/src/views/system/mail/log/index.vue
index c34a2444..7aaeef2f 100644
--- a/apps/web-ele/src/views/system/mail/log/index.vue
+++ b/apps/web-ele/src/views/system/mail/log/index.vue
@@ -9,6 +9,8 @@ import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getMailLogPage } from '#/api/system/mail/log';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Detail from './modules/detail.vue';
@@ -64,7 +66,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailLogApi.MailLog>,
@@ -78,6 +80,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <DetailModal @success="onRefresh" />
     <Grid table-title="邮件日志列表">
+      <template #userInfo="{ row }">
+        <div v-if="row.userType && row.userId" class="flex items-center gap-1">
+          <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
+          <span>({{ row.userId }})</span>
+        </div>
+        <div v-else>-</div>
+      </template>
       <template #toolbar-tools> </template>
     </Grid>
   </Page>
diff --git a/apps/web-ele/src/views/system/mail/log/modules/detail.vue b/apps/web-ele/src/views/system/mail/log/modules/detail.vue
index be61a42b..ab7828ac 100644
--- a/apps/web-ele/src/views/system/mail/log/modules/detail.vue
+++ b/apps/web-ele/src/views/system/mail/log/modules/detail.vue
@@ -47,17 +47,31 @@ const [Modal, modalApi] = useVbenModal({
         <ElDescriptionsItem label="创建时间">
           {{ formatDateTime(formData?.createTime || '') }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="收件邮箱">
-          {{ formData?.toMail }}
-        </ElDescriptionsItem>
         <ElDescriptionsItem label="发送邮箱">
           {{ formData?.fromMail }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="用户编号">
-          {{ formData?.userId }}
+        <ElDescriptionsItem label="接收用户">
+          <div
+            v-if="formData?.userType && formData?.userId"
+            class="flex items-center gap-1"
+          >
+            <DictTag :type="DICT_TYPE.USER_TYPE" :value="formData.userType" />
+            <span>({{ formData.userId }})</span>
+          </div>
+          <div v-else>无</div>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="用户类型">
-          {{ formData?.userType }}
+        <ElDescriptionsItem label="接收信息" :span="2">
+          <div v-if="formData">
+            <div v-if="formData.toMails && formData.toMails.length > 0">
+              收件：{{ formData.toMails.join('、') }}
+            </div>
+            <div v-if="formData.ccMails && formData.ccMails.length > 0">
+              抄送：{{ formData.ccMails.join('、') }}
+            </div>
+            <div v-if="formData.bccMails && formData.bccMails.length > 0">
+              密送：{{ formData.bccMails.join('、') }}
+            </div>
+          </div>
         </ElDescriptionsItem>
         <ElDescriptionsItem label="模板编号">
           {{ formData?.templateId }}
diff --git a/apps/web-ele/src/views/system/mail/template/data.ts b/apps/web-ele/src/views/system/mail/template/data.ts
index 13465299..26295395 100644
--- a/apps/web-ele/src/views/system/mail/template/data.ts
+++ b/apps/web-ele/src/views/system/mail/template/data.ts
@@ -126,13 +126,31 @@ export function useSendMailFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'mail',
+      fieldName: 'toMails',
       label: '收件邮箱',
-      component: 'Input',
+      component: 'Textarea',
       componentProps: {
-        placeholder: '请输入收件邮箱',
+        placeholder: '请输入收件邮箱，每行一个邮箱地址',
+        rows: 3,
+      },
+    },
+    {
+      fieldName: 'ccMails',
+      label: '抄送邮箱',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入抄送邮箱，每行一个邮箱地址',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'bccMails',
+      label: '密送邮箱',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入密送邮箱，每行一个邮箱地址',
+        rows: 2,
       },
-      rules: z.string().email('请输入正确的邮箱'),
     },
   ];
 }
diff --git a/apps/web-ele/src/views/system/mail/template/index.vue b/apps/web-ele/src/views/system/mail/template/index.vue
index 3e2bedca..2a7f1b47 100644
--- a/apps/web-ele/src/views/system/mail/template/index.vue
+++ b/apps/web-ele/src/views/system/mail/template/index.vue
@@ -8,7 +8,7 @@ import type { SystemMailTemplateApi } from '#/api/system/mail/template';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -80,17 +80,10 @@ async function onDelete(row: SystemMailTemplateApi.MailTemplate) {
 
 /** 批量删除邮件模板 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteMailTemplateList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该邮件模板吗？');
+  await deleteMailTemplateList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -146,7 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailTemplateApi.MailTemplate>,
diff --git a/apps/web-ele/src/views/system/mail/template/modules/send-form.vue b/apps/web-ele/src/views/system/mail/template/modules/send-form.vue
index a6fc843f..b40359dd 100644
--- a/apps/web-ele/src/views/system/mail/template/modules/send-form.vue
+++ b/apps/web-ele/src/views/system/mail/template/modules/send-form.vue
@@ -42,8 +42,17 @@ const [Modal, modalApi] = useVbenModal({
         paramsObj[param] = values[`param_${param}`];
       });
     }
+    const parseEmails = (text: string): string[] => {
+      if (!text) return [];
+      return text
+        .split('\n')
+        .map((email) => email.trim())
+        .filter((email) => email.length > 0);
+    };
     const data: SystemMailTemplateApi.MailSendReqVO = {
-      mail: values.mail,
+      toMails: parseEmails(values.toMails || ''),
+      ccMails: parseEmails(values.ccMails || ''),
+      bccMails: parseEmails(values.bccMails || ''),
       templateCode: formData.value?.code || '',
       templateParams: paramsObj,
     };
diff --git a/apps/web-ele/src/views/system/menu/index.vue b/apps/web-ele/src/views/system/menu/index.vue
index f8f2959e..c0e80c8d 100644
--- a/apps/web-ele/src/views/system/menu/index.vue
+++ b/apps/web-ele/src/views/system/menu/index.vue
@@ -55,8 +55,6 @@ async function onDelete(row: SystemMenuApi.Menu) {
     await deleteMenu(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
@@ -106,7 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       parentField: 'parentId',
diff --git a/apps/web-ele/src/views/system/notice/index.vue b/apps/web-ele/src/views/system/notice/index.vue
index 4970ac43..319ec4e9 100644
--- a/apps/web-ele/src/views/system/notice/index.vue
+++ b/apps/web-ele/src/views/system/notice/index.vue
@@ -7,10 +7,10 @@ import type { SystemNoticeApi } from '#/api/system/notice';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -46,14 +46,12 @@ function onEdit(row: SystemNoticeApi.Notice) {
 
 /** 删除公告 */
 async function onDelete(row: SystemNoticeApi.Notice) {
-  const loadingInstance = ElMessage({
-    message: $t('ui.actionMessage.deleting', [row.title]),
-    type: 'info',
-    duration: 0,
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.title]),
+    fullscreen: true,
   });
   try {
     await deleteNotice(row.id as number);
-    loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
     onRefresh();
   } finally {
@@ -63,19 +61,10 @@ async function onDelete(row: SystemNoticeApi.Notice) {
 
 /** 批量删除公告 */
 async function onDeleteBatch() {
-  const loadingInstance = ElMessage({
-    message: $t('ui.actionMessage.deleting'),
-    type: 'info',
-    duration: 0,
-  });
-  try {
-    await deleteNoticeList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该公告吗？');
+  await deleteNoticeList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -147,7 +136,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNoticeApi.Notice>,
diff --git a/apps/web-ele/src/views/system/notify/message/index.vue b/apps/web-ele/src/views/system/notify/message/index.vue
index 1bf80124..1bcc489b 100644
--- a/apps/web-ele/src/views/system/notify/message/index.vue
+++ b/apps/web-ele/src/views/system/notify/message/index.vue
@@ -64,7 +64,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
diff --git a/apps/web-ele/src/views/system/notify/my/index.vue b/apps/web-ele/src/views/system/notify/my/index.vue
index e89640de..020e98e4 100644
--- a/apps/web-ele/src/views/system/notify/my/index.vue
+++ b/apps/web-ele/src/views/system/notify/my/index.vue
@@ -132,7 +132,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     checkboxConfig: {
diff --git a/apps/web-ele/src/views/system/notify/template/index.vue b/apps/web-ele/src/views/system/notify/template/index.vue
index bbfa31a1..46d6fa71 100644
--- a/apps/web-ele/src/views/system/notify/template/index.vue
+++ b/apps/web-ele/src/views/system/notify/template/index.vue
@@ -148,7 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNotifyTemplateApi.NotifyTemplate>,
diff --git a/apps/web-ele/src/views/system/oauth2/client/index.vue b/apps/web-ele/src/views/system/oauth2/client/index.vue
index 895c4c7a..15c6f1d2 100644
--- a/apps/web-ele/src/views/system/oauth2/client/index.vue
+++ b/apps/web-ele/src/views/system/oauth2/client/index.vue
@@ -7,7 +7,7 @@ import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -60,17 +60,10 @@ async function onDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
 
 /** 批量删除 OAuth2 客户端 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteOAuth2ClientList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该 OAuth2 客户端吗？');
+  await deleteOAuth2ClientList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -122,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOAuth2ClientApi.OAuth2Client>,
diff --git a/apps/web-ele/src/views/system/oauth2/token/index.vue b/apps/web-ele/src/views/system/oauth2/token/index.vue
index 88b0311a..32f69913 100644
--- a/apps/web-ele/src/views/system/oauth2/token/index.vue
+++ b/apps/web-ele/src/views/system/oauth2/token/index.vue
@@ -26,15 +26,13 @@ function onRefresh() {
 /** 删除 OAuth2 令牌 */
 async function onDelete(row: SystemOAuth2TokenApi.OAuth2Token) {
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', ['令牌']),
+    text: $t('ui.actionMessage.deleting', [row.accessToken]),
     fullscreen: true,
   });
   try {
     await deleteOAuth2Token(row.accessToken);
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.accessToken]));
     onRefresh();
-  } catch {
-    // 异常处理
   } finally {
     loadingInstance.close();
   }
@@ -76,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOAuth2TokenApi.OAuth2Token>,
diff --git a/apps/web-ele/src/views/system/operatelog/data.ts b/apps/web-ele/src/views/system/operatelog/data.ts
index e7c74247..d23d210f 100644
--- a/apps/web-ele/src/views/system/operatelog/data.ts
+++ b/apps/web-ele/src/views/system/operatelog/data.ts
@@ -18,7 +18,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        fieldNames: {
+        props: {
           label: 'nickname',
           value: 'id',
         },
diff --git a/apps/web-ele/src/views/system/operatelog/index.vue b/apps/web-ele/src/views/system/operatelog/index.vue
index b71863c3..bced20cc 100644
--- a/apps/web-ele/src/views/system/operatelog/index.vue
+++ b/apps/web-ele/src/views/system/operatelog/index.vue
@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOperateLogApi.OperateLog>,
diff --git a/apps/web-ele/src/views/system/post/index.vue b/apps/web-ele/src/views/system/post/index.vue
index 37cbebaf..fb2ee0cb 100644
--- a/apps/web-ele/src/views/system/post/index.vue
+++ b/apps/web-ele/src/views/system/post/index.vue
@@ -7,7 +7,7 @@ import type { SystemPostApi } from '#/api/system/post';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -67,17 +67,10 @@ async function onDelete(row: SystemPostApi.Post) {
 
 /** 批量删除岗位 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deletePostList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该岗位吗？');
+  await deletePostList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -126,7 +119,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemPostApi.Post>,
diff --git a/apps/web-ele/src/views/system/role/index.vue b/apps/web-ele/src/views/system/role/index.vue
index c1d23cb2..a458b1d2 100644
--- a/apps/web-ele/src/views/system/role/index.vue
+++ b/apps/web-ele/src/views/system/role/index.vue
@@ -7,7 +7,7 @@ import type { SystemRoleApi } from '#/api/system/role';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
@@ -81,17 +81,10 @@ async function onDelete(row: SystemRoleApi.Role) {
 
 /** 批量删除角色 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteRoleList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该角色吗？');
+  await deleteRoleList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -158,7 +151,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemRoleApi.Role>,
diff --git a/apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue b/apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue
index 8a747841..08597ebf 100644
--- a/apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue
+++ b/apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue
@@ -74,11 +74,11 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      await formApi.setValues(await getRole(data.id as number));
-
       // 加载部门列表
       await loadDeptTree();
       toggleExpandAll();
+      // 设置表单值, 一定要在加载树之后
+      await formApi.setValues(await getRole(data.id as number));
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-ele/src/views/system/role/modules/assign-menu-form.vue b/apps/web-ele/src/views/system/role/modules/assign-menu-form.vue
index 36634ccb..9384403a 100644
--- a/apps/web-ele/src/views/system/role/modules/assign-menu-form.vue
+++ b/apps/web-ele/src/views/system/role/modules/assign-menu-form.vue
@@ -63,19 +63,19 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+    // 加载菜单列表
+    await loadMenuTree();
     const data = modalApi.getData<SystemRoleApi.Role>();
     if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
-      await formApi.setValues(data);
-
       // 加载角色菜单
       const menuIds = await getRoleMenuList(data.id as number);
       await formApi.setFieldValue('menuIds', menuIds);
-      // 加载菜单列表
-      await loadMenuTree();
+
+      await formApi.setValues(data);
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-ele/src/views/system/sms/channel/index.vue b/apps/web-ele/src/views/system/sms/channel/index.vue
index e01b2c7a..b0abc338 100644
--- a/apps/web-ele/src/views/system/sms/channel/index.vue
+++ b/apps/web-ele/src/views/system/sms/channel/index.vue
@@ -7,7 +7,7 @@ import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -67,17 +67,10 @@ async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
 
 /** 批量删除短信渠道 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteSmsChannelList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该短信渠道吗？');
+  await deleteSmsChannelList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -129,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsChannelApi.SmsChannel>,
diff --git a/apps/web-ele/src/views/system/sms/log/index.vue b/apps/web-ele/src/views/system/sms/log/index.vue
index a7b72d59..c62bee54 100644
--- a/apps/web-ele/src/views/system/sms/log/index.vue
+++ b/apps/web-ele/src/views/system/sms/log/index.vue
@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsLogApi.SmsLog>,
diff --git a/apps/web-ele/src/views/system/sms/template/index.vue b/apps/web-ele/src/views/system/sms/template/index.vue
index 1e35e38f..3e272faa 100644
--- a/apps/web-ele/src/views/system/sms/template/index.vue
+++ b/apps/web-ele/src/views/system/sms/template/index.vue
@@ -7,7 +7,7 @@ import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -78,17 +78,10 @@ async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
 
 /** 批量删除短信模板 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteSmsTemplateList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该短信模板吗？');
+  await deleteSmsTemplateList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -144,7 +137,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
diff --git a/apps/web-ele/src/views/system/social/client/index.vue b/apps/web-ele/src/views/system/social/client/index.vue
index 46245f58..a7e880ab 100644
--- a/apps/web-ele/src/views/system/social/client/index.vue
+++ b/apps/web-ele/src/views/system/social/client/index.vue
@@ -7,7 +7,7 @@ import type { SystemSocialClientApi } from '#/api/system/social/client';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -60,17 +60,10 @@ async function onDelete(row: SystemSocialClientApi.SocialClient) {
 
 /** 批量删除社交客户端 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteSocialClientList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该社交客户端吗？');
+  await deleteSocialClientList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -122,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSocialClientApi.SocialClient>,
diff --git a/apps/web-ele/src/views/system/social/user/index.vue b/apps/web-ele/src/views/system/social/user/index.vue
index 92cb2e88..4925ebd5 100644
--- a/apps/web-ele/src/views/system/social/user/index.vue
+++ b/apps/web-ele/src/views/system/social/user/index.vue
@@ -64,7 +64,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSocialUserApi.SocialUser>,
diff --git a/apps/web-ele/src/views/system/tenant/index.vue b/apps/web-ele/src/views/system/tenant/index.vue
index f692af9f..6fd8fe95 100644
--- a/apps/web-ele/src/views/system/tenant/index.vue
+++ b/apps/web-ele/src/views/system/tenant/index.vue
@@ -8,7 +8,7 @@ import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -64,34 +64,25 @@ function onEdit(row: SystemTenantApi.Tenant) {
 
 /** 删除租户 */
 async function onDelete(row: SystemTenantApi.Tenant) {
-  const loading = ElLoading.service({
-    lock: true,
+  const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
-    background: 'rgba(0, 0, 0, 0.7)',
+    fullscreen: true,
   });
   try {
     await deleteTenant(row.id as number);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
   } finally {
-    loading.close();
+    loadingInstance.close();
   }
 }
 
 /** 批量删除租户 */
 async function onDeleteBatch() {
-  const loading = ElLoading.service({
-    lock: true,
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
-  });
-  try {
-    await deleteTenantList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loading.close();
-  }
+  await confirm('确定要批量删除该租户吗？');
+  await deleteTenantList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -143,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantApi.Tenant>,
diff --git a/apps/web-ele/src/views/system/tenantPackage/index.vue b/apps/web-ele/src/views/system/tenantPackage/index.vue
index 246cd5cf..accd69a8 100644
--- a/apps/web-ele/src/views/system/tenantPackage/index.vue
+++ b/apps/web-ele/src/views/system/tenantPackage/index.vue
@@ -7,10 +7,10 @@ import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
 
 import { ref } from 'vue';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,14 +45,12 @@ function onEdit(row: SystemTenantPackageApi.TenantPackage) {
 
 /** 删除租户套餐 */
 async function onDelete(row: SystemTenantPackageApi.TenantPackage) {
-  const loadingInstance = ElMessage({
-    message: $t('ui.actionMessage.deleting', [row.name]),
-    type: 'info',
-    duration: 0,
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
   });
   try {
     await deleteTenantPackage(row.id as number);
-    loadingInstance.close();
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     onRefresh();
   } finally {
@@ -62,19 +60,10 @@ async function onDelete(row: SystemTenantPackageApi.TenantPackage) {
 
 /** 批量删除租户套餐 */
 async function onDeleteBatch() {
-  const loadingInstance = ElMessage({
-    message: $t('ui.actionMessage.deleting'),
-    type: 'info',
-    duration: 0,
-  });
-  try {
-    await deleteTenantPackageList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该租户套餐吗？');
+  await deleteTenantPackageList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -127,7 +116,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantPackageApi.TenantPackage>,
diff --git a/apps/web-ele/src/views/system/user/data.ts b/apps/web-ele/src/views/system/user/data.ts
index a20318be..ad3d94f4 100644
--- a/apps/web-ele/src/views/system/user/data.ts
+++ b/apps/web-ele/src/views/system/user/data.ts
@@ -323,8 +323,8 @@ export function useGridColumns<T = SystemUserApi.User>(
         attrs: { beforeChange: onStatusChange },
         name: 'CellSwitch',
         props: {
-          checkedValue: CommonStatusEnum.ENABLE,
-          unCheckedValue: CommonStatusEnum.DISABLE,
+          activeValue: CommonStatusEnum.ENABLE,
+          inactiveValue: CommonStatusEnum.DISABLE,
         },
       },
     },
diff --git a/apps/web-ele/src/views/system/user/index.vue b/apps/web-ele/src/views/system/user/index.vue
index 13ec5428..9f621825 100644
--- a/apps/web-ele/src/views/system/user/index.vue
+++ b/apps/web-ele/src/views/system/user/index.vue
@@ -98,17 +98,10 @@ async function onDelete(row: SystemUserApi.User) {
 
 /** 批量删除用户 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
-  });
-  try {
-    await deleteUserList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await confirm('确定要批量删除该用户吗？');
+  await deleteUserList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
@@ -180,7 +173,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemUserApi.User>,
@@ -267,7 +260,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   icon: ACTION_ICON.DELETE,
                   auth: ['system:user:delete'],
                   popConfirm: {
-                    title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                    title: $t('ui.actionMessage.deleteConfirm', [row.username]),
                     confirm: onDelete.bind(null, row),
                   },
                 },
diff --git a/apps/web-naive/package.json b/apps/web-naive/package.json
index dcce96ca..0a5b6b31 100644
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-naive/src/views/infra/apiAccessLog/index.vue b/apps/web-naive/src/views/infra/apiAccessLog/index.vue
index ce893731..725ab8e2 100644
--- a/apps/web-naive/src/views/infra/apiAccessLog/index.vue
+++ b/apps/web-naive/src/views/infra/apiAccessLog/index.vue
@@ -78,7 +78,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraApiAccessLogApi.ApiAccessLog>,
diff --git a/apps/web-naive/src/views/infra/apiErrorLog/index.vue b/apps/web-naive/src/views/infra/apiErrorLog/index.vue
index 3f97554e..3529851e 100644
--- a/apps/web-naive/src/views/infra/apiErrorLog/index.vue
+++ b/apps/web-naive/src/views/infra/apiErrorLog/index.vue
@@ -101,7 +101,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraApiErrorLogApi.ApiErrorLog>,
diff --git a/apps/web-naive/src/views/infra/codegen/index.vue b/apps/web-naive/src/views/infra/codegen/index.vue
index 9dab2ab7..635f7d5a 100644
--- a/apps/web-naive/src/views/infra/codegen/index.vue
+++ b/apps/web-naive/src/views/infra/codegen/index.vue
@@ -178,7 +178,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraCodegenApi.CodegenTable>,
diff --git a/apps/web-naive/src/views/infra/config/index.vue b/apps/web-naive/src/views/infra/config/index.vue
index 788e84b7..1d3f1692 100644
--- a/apps/web-naive/src/views/infra/config/index.vue
+++ b/apps/web-naive/src/views/infra/config/index.vue
@@ -99,7 +99,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraConfigApi.Config>,
diff --git a/apps/web-naive/src/views/infra/file/index.vue b/apps/web-naive/src/views/infra/file/index.vue
index c62eb2c6..3f5cd20d 100644
--- a/apps/web-naive/src/views/infra/file/index.vue
+++ b/apps/web-naive/src/views/infra/file/index.vue
@@ -113,7 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraFileApi.File>,
diff --git a/apps/web-naive/src/views/infra/fileConfig/index.vue b/apps/web-naive/src/views/infra/fileConfig/index.vue
index d88e4427..6955be4a 100644
--- a/apps/web-naive/src/views/infra/fileConfig/index.vue
+++ b/apps/web-naive/src/views/infra/fileConfig/index.vue
@@ -148,7 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraFileConfigApi.FileConfig>,
diff --git a/apps/web-naive/src/views/infra/job/index.vue b/apps/web-naive/src/views/infra/job/index.vue
index a90454ad..75dc2f24 100644
--- a/apps/web-naive/src/views/infra/job/index.vue
+++ b/apps/web-naive/src/views/infra/job/index.vue
@@ -172,7 +172,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraJobApi.Job>,
diff --git a/apps/web-naive/src/views/infra/job/logger/index.vue b/apps/web-naive/src/views/infra/job/logger/index.vue
index 4f3083de..59c3cd4e 100644
--- a/apps/web-naive/src/views/infra/job/logger/index.vue
+++ b/apps/web-naive/src/views/infra/job/logger/index.vue
@@ -78,7 +78,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraJobLogApi.JobLog>,
diff --git a/apps/web-naive/src/views/system/area/index.vue b/apps/web-naive/src/views/system/area/index.vue
index 0be98cb0..54c00b09 100644
--- a/apps/web-naive/src/views/system/area/index.vue
+++ b/apps/web-naive/src/views/system/area/index.vue
@@ -46,7 +46,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       rowField: 'id',
diff --git a/apps/web-naive/src/views/system/dept/index.vue b/apps/web-naive/src/views/system/dept/index.vue
index 3fad508e..60af15fb 100644
--- a/apps/web-naive/src/views/system/dept/index.vue
+++ b/apps/web-naive/src/views/system/dept/index.vue
@@ -114,7 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       parentField: 'parentId',
diff --git a/apps/web-naive/src/views/system/dict/modules/data-grid.vue b/apps/web-naive/src/views/system/dict/modules/data-grid.vue
index b306fae1..a8c8f74d 100644
--- a/apps/web-naive/src/views/system/dict/modules/data-grid.vue
+++ b/apps/web-naive/src/views/system/dict/modules/data-grid.vue
@@ -115,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemDictDataApi.DictData>,
diff --git a/apps/web-naive/src/views/system/dict/modules/type-grid.vue b/apps/web-naive/src/views/system/dict/modules/type-grid.vue
index ac8d5394..8d9ecff1 100644
--- a/apps/web-naive/src/views/system/dict/modules/type-grid.vue
+++ b/apps/web-naive/src/views/system/dict/modules/type-grid.vue
@@ -119,7 +119,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isCurrent: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemDictTypeApi.DictType>,
diff --git a/apps/web-naive/src/views/system/loginlog/index.vue b/apps/web-naive/src/views/system/loginlog/index.vue
index bf4710dd..3226b47e 100644
--- a/apps/web-naive/src/views/system/loginlog/index.vue
+++ b/apps/web-naive/src/views/system/loginlog/index.vue
@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemLoginLogApi.LoginLog>,
diff --git a/apps/web-naive/src/views/system/mail/account/index.vue b/apps/web-naive/src/views/system/mail/account/index.vue
index 72308875..6719611d 100644
--- a/apps/web-naive/src/views/system/mail/account/index.vue
+++ b/apps/web-naive/src/views/system/mail/account/index.vue
@@ -97,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailAccountApi.MailAccount>,
diff --git a/apps/web-naive/src/views/system/mail/log/index.vue b/apps/web-naive/src/views/system/mail/log/index.vue
index c34a2444..bf1eecad 100644
--- a/apps/web-naive/src/views/system/mail/log/index.vue
+++ b/apps/web-naive/src/views/system/mail/log/index.vue
@@ -64,7 +64,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailLogApi.MailLog>,
diff --git a/apps/web-naive/src/views/system/mail/template/index.vue b/apps/web-naive/src/views/system/mail/template/index.vue
index fd08b062..321f1f30 100644
--- a/apps/web-naive/src/views/system/mail/template/index.vue
+++ b/apps/web-naive/src/views/system/mail/template/index.vue
@@ -123,7 +123,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemMailTemplateApi.MailTemplate>,
diff --git a/apps/web-naive/src/views/system/menu/index.vue b/apps/web-naive/src/views/system/menu/index.vue
index 55a7882e..eddadd31 100644
--- a/apps/web-naive/src/views/system/menu/index.vue
+++ b/apps/web-naive/src/views/system/menu/index.vue
@@ -106,7 +106,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       parentField: 'parentId',
diff --git a/apps/web-naive/src/views/system/notice/index.vue b/apps/web-naive/src/views/system/notice/index.vue
index 82452687..a68b691f 100644
--- a/apps/web-naive/src/views/system/notice/index.vue
+++ b/apps/web-naive/src/views/system/notice/index.vue
@@ -113,7 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNoticeApi.Notice>,
diff --git a/apps/web-naive/src/views/system/notify/message/index.vue b/apps/web-naive/src/views/system/notify/message/index.vue
index 605c9a23..5f02ddcd 100644
--- a/apps/web-naive/src/views/system/notify/message/index.vue
+++ b/apps/web-naive/src/views/system/notify/message/index.vue
@@ -64,7 +64,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
diff --git a/apps/web-naive/src/views/system/notify/my/index.vue b/apps/web-naive/src/views/system/notify/my/index.vue
index a635c18f..6edefd28 100644
--- a/apps/web-naive/src/views/system/notify/my/index.vue
+++ b/apps/web-naive/src/views/system/notify/my/index.vue
@@ -130,7 +130,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     checkboxConfig: {
diff --git a/apps/web-naive/src/views/system/notify/template/index.vue b/apps/web-naive/src/views/system/notify/template/index.vue
index beb57203..f61d9c05 100644
--- a/apps/web-naive/src/views/system/notify/template/index.vue
+++ b/apps/web-naive/src/views/system/notify/template/index.vue
@@ -120,7 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemNotifyTemplateApi.NotifyTemplate>,
diff --git a/apps/web-naive/src/views/system/oauth2/client/index.vue b/apps/web-naive/src/views/system/oauth2/client/index.vue
index bb3348f1..3765a527 100644
--- a/apps/web-naive/src/views/system/oauth2/client/index.vue
+++ b/apps/web-naive/src/views/system/oauth2/client/index.vue
@@ -97,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOAuth2ClientApi.OAuth2Client>,
diff --git a/apps/web-naive/src/views/system/oauth2/token/index.vue b/apps/web-naive/src/views/system/oauth2/token/index.vue
index 6144ec8b..f2a721db 100644
--- a/apps/web-naive/src/views/system/oauth2/token/index.vue
+++ b/apps/web-naive/src/views/system/oauth2/token/index.vue
@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOAuth2TokenApi.OAuth2Token>,
diff --git a/apps/web-naive/src/views/system/operatelog/index.vue b/apps/web-naive/src/views/system/operatelog/index.vue
index 4b67a40e..cc32c7c1 100644
--- a/apps/web-naive/src/views/system/operatelog/index.vue
+++ b/apps/web-naive/src/views/system/operatelog/index.vue
@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemOperateLogApi.OperateLog>,
diff --git a/apps/web-naive/src/views/system/post/index.vue b/apps/web-naive/src/views/system/post/index.vue
index 10b1130c..ae222d19 100644
--- a/apps/web-naive/src/views/system/post/index.vue
+++ b/apps/web-naive/src/views/system/post/index.vue
@@ -98,7 +98,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemPostApi.Post>,
diff --git a/apps/web-naive/src/views/system/role/index.vue b/apps/web-naive/src/views/system/role/index.vue
index 367f9c8f..770eca57 100644
--- a/apps/web-naive/src/views/system/role/index.vue
+++ b/apps/web-naive/src/views/system/role/index.vue
@@ -129,7 +129,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemRoleApi.Role>,
diff --git a/apps/web-naive/src/views/system/role/modules/assign-data-permission-form.vue b/apps/web-naive/src/views/system/role/modules/assign-data-permission-form.vue
index 892aefad..21ac3d9f 100644
--- a/apps/web-naive/src/views/system/role/modules/assign-data-permission-form.vue
+++ b/apps/web-naive/src/views/system/role/modules/assign-data-permission-form.vue
@@ -75,11 +75,11 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      await formApi.setValues(await getRole(data.id as number));
-
       // 加载部门列表
       await loadDeptTree();
       toggleExpandAll();
+      // 设置表单值, 一定要在加载树之后
+      await formApi.setValues(await getRole(data.id as number));
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-naive/src/views/system/role/modules/assign-menu-form.vue b/apps/web-naive/src/views/system/role/modules/assign-menu-form.vue
index 683d1f82..1712494f 100644
--- a/apps/web-naive/src/views/system/role/modules/assign-menu-form.vue
+++ b/apps/web-naive/src/views/system/role/modules/assign-menu-form.vue
@@ -63,19 +63,19 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+    // 加载菜单列表
+    await loadMenuTree();
     const data = modalApi.getData<SystemRoleApi.Role>();
     if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
-      await formApi.setValues(data);
-
       // 加载角色菜单
       const menuIds = await getRoleMenuList(data.id as number);
       await formApi.setFieldValue('menuIds', menuIds);
-      // 加载菜单列表
-      await loadMenuTree();
+
+      await formApi.setValues(data);
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-naive/src/views/system/sms/channel/index.vue b/apps/web-naive/src/views/system/sms/channel/index.vue
index 4c73e4a3..dfc2bc74 100644
--- a/apps/web-naive/src/views/system/sms/channel/index.vue
+++ b/apps/web-naive/src/views/system/sms/channel/index.vue
@@ -105,7 +105,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsChannelApi.SmsChannel>,
diff --git a/apps/web-naive/src/views/system/sms/log/index.vue b/apps/web-naive/src/views/system/sms/log/index.vue
index 8d9603bb..919e428f 100644
--- a/apps/web-naive/src/views/system/sms/log/index.vue
+++ b/apps/web-naive/src/views/system/sms/log/index.vue
@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsLogApi.SmsLog>,
diff --git a/apps/web-naive/src/views/system/sms/template/index.vue b/apps/web-naive/src/views/system/sms/template/index.vue
index d83e37d8..c1b25d57 100644
--- a/apps/web-naive/src/views/system/sms/template/index.vue
+++ b/apps/web-naive/src/views/system/sms/template/index.vue
@@ -120,7 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
diff --git a/apps/web-naive/src/views/system/social/client/index.vue b/apps/web-naive/src/views/system/social/client/index.vue
index bfb1ff9a..267627d0 100644
--- a/apps/web-naive/src/views/system/social/client/index.vue
+++ b/apps/web-naive/src/views/system/social/client/index.vue
@@ -97,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSocialClientApi.SocialClient>,
diff --git a/apps/web-naive/src/views/system/social/user/index.vue b/apps/web-naive/src/views/system/social/user/index.vue
index 92cb2e88..4925ebd5 100644
--- a/apps/web-naive/src/views/system/social/user/index.vue
+++ b/apps/web-naive/src/views/system/social/user/index.vue
@@ -64,7 +64,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemSocialUserApi.SocialUser>,
diff --git a/apps/web-naive/src/views/system/tenant/index.vue b/apps/web-naive/src/views/system/tenant/index.vue
index 3453ed6b..84c8bb58 100644
--- a/apps/web-naive/src/views/system/tenant/index.vue
+++ b/apps/web-naive/src/views/system/tenant/index.vue
@@ -115,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantApi.Tenant>,
diff --git a/apps/web-naive/src/views/system/tenantPackage/index.vue b/apps/web-naive/src/views/system/tenantPackage/index.vue
index 8818a050..1f845262 100644
--- a/apps/web-naive/src/views/system/tenantPackage/index.vue
+++ b/apps/web-naive/src/views/system/tenantPackage/index.vue
@@ -98,7 +98,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemTenantPackageApi.TenantPackage>,
diff --git a/apps/web-naive/src/views/system/user/index.vue b/apps/web-naive/src/views/system/user/index.vue
index e1102e90..db99cb4e 100644
--- a/apps/web-naive/src/views/system/user/index.vue
+++ b/apps/web-naive/src/views/system/user/index.vue
@@ -183,7 +183,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<SystemUserApi.User>,
diff --git a/docs/package.json b/docs/package.json
index f57dfc85..639ca07a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "private": true,
   "scripts": {
     "build": "vitepress build",
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
index a6d45525..aed2b9f8 100644
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@@ -395,7 +395,7 @@ export interface FormCommonConfig {
    * 所有表单项的栅格布局
    * @default ""
    */
-  formItemClass?: string;
+  formItemClass?: (() => string) | string;
   /**
    * 隐藏所有表单项label
    * @default false
diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md
index 3c8200f9..fc714e27 100644
--- a/docs/src/components/common-ui/vben-modal.md
+++ b/docs/src/components/common-ui/vben-modal.md
@@ -56,6 +56,15 @@ Modal 内的内容一般业务中，会比较复杂，所以我们可以将 moda
 
 <DemoPreview dir="demos/vben-modal/shared-data" />
 
+## 动画类型
+
+通过 `animationType` 属性可以控制弹窗的动画效果：
+
+- `slide`（默认）：从顶部向下滑动进入/退出
+- `scale`：缩放淡入/淡出效果
+
+<DemoPreview dir="demos/vben-modal/animation-type" />
+
 ::: info 注意
 
 - `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
@@ -112,6 +121,7 @@ const [Modal, modalApi] = useVbenModal({
 | bordered | 是否显示border | `boolean` | `false` |
 | zIndex | 弹窗的ZIndex层级 | `number` | `1000` |
 | overlayBlur | 遮罩模糊度 | `number` | - |
+| animationType | 动画类型 | `'slide' \| 'scale'` | `'slide'` |
 | submitting | 标记为提交中，锁定弹窗当前状态 | `boolean` | `false` |
 
 ::: info appendToMain
diff --git a/docs/src/demos/vben-modal/animation-type/index.vue b/docs/src/demos/vben-modal/animation-type/index.vue
new file mode 100644
index 00000000..79ba9d33
--- /dev/null
+++ b/docs/src/demos/vben-modal/animation-type/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+const [SlideModal, slideModalApi] = useVbenModal({
+  animationType: 'slide',
+});
+
+const [ScaleModal, scaleModalApi] = useVbenModal({
+  animationType: 'scale',
+});
+
+function openSlideModal() {
+  slideModalApi.open();
+}
+
+function openScaleModal() {
+  scaleModalApi.open();
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex gap-4">
+      <VbenButton @click="openSlideModal">滑动动画</VbenButton>
+      <VbenButton @click="openScaleModal">缩放动画</VbenButton>
+    </div>
+
+    <SlideModal title="滑动动画示例" class="w-[500px]">
+      <p>这是使用滑动动画的弹窗，从顶部向下滑动进入。</p>
+    </SlideModal>
+
+    <ScaleModal title="缩放动画示例" class="w-[500px]">
+      <p>这是使用缩放动画的弹窗，以缩放淡入淡出的方式显示。</p>
+    </ScaleModal>
+  </div>
+</template>
diff --git a/internal/lint-configs/commitlint-config/package.json b/internal/lint-configs/commitlint-config/package.json
index a137f947..16984c2f 100644
--- a/internal/lint-configs/commitlint-config/package.json
+++ b/internal/lint-configs/commitlint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/lint-configs/stylelint-config/package.json b/internal/lint-configs/stylelint-config/package.json
index 8e2a97c2..00f9b1d1 100644
--- a/internal/lint-configs/stylelint-config/package.json
+++ b/internal/lint-configs/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/node-utils/package.json b/internal/node-utils/package.json
index 8b8db745..490df9e9 100644
--- a/internal/node-utils/package.json
+++ b/internal/node-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json
index 8506891b..72c63819 100644
--- a/internal/tailwind-config/package.json
+++ b/internal/tailwind-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/tsconfig/package.json b/internal/tsconfig/package.json
index 44ee3f1b..74cfb915 100644
--- a/internal/tsconfig/package.json
+++ b/internal/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json
index d7ba6a65..c37777f2 100644
--- a/internal/vite-config/package.json
+++ b/internal/vite-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/vite-config",
-  "version": "5.5.6",
+  "version": "5.5.8",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/package.json b/package.json
index 8b87dc38..487cff52 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-monorepo",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "private": true,
   "keywords": [
     "monorepo",
diff --git a/packages/@core/base/design/package.json b/packages/@core/base/design/package.json
index 33e92474..13d2fefc 100644
--- a/packages/@core/base/design/package.json
+++ b/packages/@core/base/design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/icons/package.json b/packages/@core/base/icons/package.json
index 9a349883..1e6e5250 100644
--- a/packages/@core/base/icons/package.json
+++ b/packages/@core/base/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/shared/package.json b/packages/@core/base/shared/package.json
index b02cc6e4..6599c54c 100644
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/shared/src/utils/__tests__/resources.test.ts b/packages/@core/base/shared/src/utils/__tests__/resources.test.ts
new file mode 100644
index 00000000..f14ff896
--- /dev/null
+++ b/packages/@core/base/shared/src/utils/__tests__/resources.test.ts
@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { loadScript } from '../resources';
+
+const testJsPath =
+  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js';
+
+describe('loadScript', () => {
+  beforeEach(() => {
+    // 每个测试前清空 head，保证环境干净
+    document.head.innerHTML = '';
+  });
+
+  it('should resolve when the script loads successfully', async () => {
+    const promise = loadScript(testJsPath);
+
+    // 此时脚本元素已被创建并插入
+    const script = document.querySelector(
+      `script[src="${testJsPath}"]`,
+    ) as HTMLScriptElement;
+    expect(script).toBeTruthy();
+
+    // 模拟加载成功
+    script.dispatchEvent(new Event('load'));
+
+    // 等待 promise resolve
+    await expect(promise).resolves.toBeUndefined();
+  });
+
+  it('should not insert duplicate script and resolve immediately if already loaded', async () => {
+    // 先手动插入一个相同 src 的 script
+    const existing = document.createElement('script');
+    existing.src = 'bar.js';
+    document.head.append(existing);
+
+    // 再次调用
+    const promise = loadScript('bar.js');
+
+    // 立即 resolve
+    await expect(promise).resolves.toBeUndefined();
+
+    // head 中只保留一个
+    const scripts = document.head.querySelectorAll('script[src="bar.js"]');
+    expect(scripts).toHaveLength(1);
+  });
+
+  it('should reject when the script fails to load', async () => {
+    const promise = loadScript('error.js');
+
+    const script = document.querySelector(
+      'script[src="error.js"]',
+    ) as HTMLScriptElement;
+    expect(script).toBeTruthy();
+
+    // 模拟加载失败
+    script.dispatchEvent(new Event('error'));
+
+    await expect(promise).rejects.toThrow('Failed to load script: error.js');
+  });
+
+  it('should handle multiple concurrent calls and only insert one script tag', async () => {
+    const p1 = loadScript(testJsPath);
+    const p2 = loadScript(testJsPath);
+
+    const script = document.querySelector(
+      `script[src="${testJsPath}"]`,
+    ) as HTMLScriptElement;
+    expect(script).toBeTruthy();
+
+    // 触发一次 load，两个 promise 都应该 resolve
+    script.dispatchEvent(new Event('load'));
+
+    await expect(p1).resolves.toBeUndefined();
+    await expect(p2).resolves.toBeUndefined();
+
+    // 只插入一次
+    const scripts = document.head.querySelectorAll(
+      `script[src="${testJsPath}"]`,
+    );
+    expect(scripts).toHaveLength(1);
+  });
+});
diff --git a/packages/@core/base/shared/src/utils/date.ts b/packages/@core/base/shared/src/utils/date.ts
index b66654d0..8cc41b41 100644
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/packages/@core/base/shared/src/utils/date.ts
@@ -26,6 +26,15 @@ export function formatDateTime(time: Date | number | string | undefined) {
   return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
 
+export function formatDate2(date: Date, format?: string): string {
+  // 日期不存在，则返回空
+  if (!date) {
+    return '';
+  }
+  // 日期存在，则进行格式化
+  return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : '';
+}
+
 export function isDate(value: any): value is Date {
   return value instanceof Date;
 }
diff --git a/packages/@core/base/shared/src/utils/index.ts b/packages/@core/base/shared/src/utils/index.ts
index 7a22c972..ec6ac834 100644
--- a/packages/@core/base/shared/src/utils/index.ts
+++ b/packages/@core/base/shared/src/utils/index.ts
@@ -8,6 +8,7 @@ export * from './inference';
 export * from './letter';
 export * from './merge';
 export * from './nprogress';
+export * from './resources';
 export * from './state-handler';
 export * from './time';
 export * from './to';
@@ -22,3 +23,18 @@ export { default as cloneDeep } from 'lodash.clonedeep';
 export { default as get } from 'lodash.get';
 export { default as isEqual } from 'lodash.isequal';
 export { default as set } from 'lodash.set';
+
+/**
+ * 构建排序字段
+ * @param prop 字段名称
+ * @param order 顺序
+ */
+export const buildSortingField = ({
+  prop,
+  order,
+}: {
+  order: 'ascending' | 'descending';
+  prop: string;
+}) => {
+  return { field: prop, order: order === 'ascending' ? 'asc' : 'desc' };
+};
diff --git a/packages/@core/base/shared/src/utils/resources.ts b/packages/@core/base/shared/src/utils/resources.ts
new file mode 100644
index 00000000..c5afa7f1
--- /dev/null
+++ b/packages/@core/base/shared/src/utils/resources.ts
@@ -0,0 +1,21 @@
+/**
+ * 加载js文件
+ * @param src js文件地址
+ */
+function loadScript(src: string) {
+  return new Promise<void>((resolve, reject) => {
+    if (document.querySelector(`script[src="${src}"]`)) {
+      // 如果已经加载过，直接 resolve
+      return resolve();
+    }
+    const script = document.createElement('script');
+    script.src = src;
+    script.addEventListener('load', () => resolve());
+    script.addEventListener('error', () =>
+      reject(new Error(`Failed to load script: ${src}`)),
+    );
+    document.head.append(script);
+  });
+}
+
+export { loadScript };
diff --git a/packages/@core/base/typings/package.json b/packages/@core/base/typings/package.json
index e2ab1870..e0e2c372 100644
--- a/packages/@core/base/typings/package.json
+++ b/packages/@core/base/typings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/typings",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/composables/package.json b/packages/@core/composables/package.json
index 08db5106..39ca108f 100644
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/preferences/package.json b/packages/@core/preferences/package.json
index 726b473d..786e6c2c 100644
--- a/packages/@core/preferences/package.json
+++ b/packages/@core/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/preferences",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/form-ui/package.json b/packages/@core/ui-kit/form-ui/package.json
index 36ae1678..497da77a 100644
--- a/packages/@core/ui-kit/form-ui/package.json
+++ b/packages/@core/ui-kit/form-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/form-ui",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
index ff827c42..a8ca22a4 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -12,7 +12,12 @@ import type {
 import { computed } from 'vue';
 
 import { Form } from '@vben-core/shadcn-ui';
-import { cn, isString, mergeWithArrayOverride } from '@vben-core/shared/utils';
+import {
+  cn,
+  isFunction,
+  isString,
+  mergeWithArrayOverride,
+} from '@vben-core/shared/utils';
 
 import { provideFormRenderProps } from './context';
 import { useExpandable } from './expandable';
@@ -110,6 +115,17 @@ const computedSchema = computed(
           ? keepIndex <= index
           : false;
 
+      // 处理函数形式的formItemClass
+      let resolvedSchemaFormItemClass = schema.formItemClass;
+      if (isFunction(schema.formItemClass)) {
+        try {
+          resolvedSchemaFormItemClass = schema.formItemClass();
+        } catch (error) {
+          console.error('Error calling formItemClass function:', error);
+          resolvedSchemaFormItemClass = '';
+        }
+      }
+
       return {
         colon,
         disabled,
@@ -133,7 +149,7 @@ const computedSchema = computed(
           'flex-shrink-0',
           { hidden },
           formItemClass,
-          schema.formItemClass,
+          resolvedSchemaFormItemClass,
         ),
         labelClass: cn(labelClass, schema.labelClass),
       };
diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
index 9838f6b6..78c74ee5 100644
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -176,10 +176,10 @@ export interface FormCommonConfig {
    */
   formFieldProps?: FormFieldOptions;
   /**
-   * 所有表单项的栅格布局
+   * 所有表单项的栅格布局，支持函数形式
    * @default ""
    */
-  formItemClass?: string;
+  formItemClass?: (() => string) | string;
   /**
    * 隐藏所有表单项label
    * @default false
diff --git a/packages/@core/ui-kit/layout-ui/package.json b/packages/@core/ui-kit/layout-ui/package.json
index 57a462fe..0cf9ff87 100644
--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/menu-ui/package.json b/packages/@core/ui-kit/menu-ui/package.json
index 760d7646..3f893168 100644
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
index 27aa8216..18dc90c4 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -59,6 +59,7 @@ export class ModalApi {
       showCancelButton: true,
       showConfirmButton: true,
       title: '',
+      animationType: 'slide',
     };
 
     this.store = new Store<ModalState>(
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
index 2dbab9e4..fa41344e 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@@ -5,6 +5,11 @@ import type { MaybePromise } from '@vben-core/typings';
 import type { ModalApi } from './modal-api';
 
 export interface ModalProps {
+  /**
+   * 动画类型
+   * @default 'slide'
+   */
+  animationType?: 'scale' | 'slide';
   /**
    * 是否要挂载到内容区域
    * @default false
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index b3fdf3fb..89184750 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -94,12 +94,11 @@ const {
   submitting,
   title,
   titleTooltip,
+  animationType,
   zIndex,
 } = usePriorityValues(props, state);
 
-const shouldFullscreen = computed(
-  () => (fullscreen.value && header.value) || isMobile.value,
-);
+const shouldFullscreen = computed(() => fullscreen.value || isMobile.value);
 
 const shouldDraggable = computed(
   () => draggable.value && !shouldFullscreen.value && header.value,
@@ -244,6 +243,7 @@ function handleClosed() {
       :modal="modal"
       :open="state?.isOpen"
       :show-close="closable"
+      :animation-type="animationType"
       :z-index="zIndex"
       :overlay-blur="overlayBlur"
       close-class="top-3"
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 11d2918f..0525a303 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "#main": "./dist/index.mjs",
   "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
index 9f078987..22ed845a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -20,6 +20,7 @@ import DialogOverlay from './DialogOverlay.vue';
 const props = withDefaults(
   defineProps<
     DialogContentProps & {
+      animationType?: 'scale' | 'slide';
       appendTo?: HTMLElement | string;
       class?: ClassType;
       closeClass?: ClassType;
@@ -31,7 +32,12 @@ const props = withDefaults(
       zIndex?: number;
     }
   >(),
-  { appendTo: 'body', closeDisabled: false, showClose: true },
+  {
+    appendTo: 'body',
+    animationType: 'slide',
+    closeDisabled: false,
+    showClose: true,
+  },
 );
 const emits = defineEmits<
   DialogContentEmits & { close: []; closed: []; opened: [] }
@@ -43,6 +49,7 @@ const delegatedProps = computed(() => {
     modal: _modal,
     open: _open,
     showClose: __,
+    animationType: ___,
     ...delegated
   } = props;
 
@@ -100,7 +107,11 @@ defineExpose({
       v-bind="forwarded"
       :class="
         cn(
-          'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          {
+            'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
+              animationType === 'slide',
+          },
           props.class,
         )
       "
diff --git a/packages/@core/ui-kit/tabs-ui/package.json b/packages/@core/ui-kit/tabs-ui/package.json
index bc84b4d6..93c16e1e 100644
--- a/packages/@core/ui-kit/tabs-ui/package.json
+++ b/packages/@core/ui-kit/tabs-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/constants/package.json b/packages/constants/package.json
index c71e1184..2b098a2a 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/access/package.json b/packages/effects/access/package.json
index e4c39eb2..f620d6dc 100644
--- a/packages/effects/access/package.json
+++ b/packages/effects/access/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/access",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 42e2025d..81f29135 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/common-ui/src/ui/authentication/dingding-login.vue b/packages/effects/common-ui/src/ui/authentication/dingding-login.vue
new file mode 100644
index 00000000..4c63301e
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/authentication/dingding-login.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+import { RiDingding } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { alert, useVbenModal } from '@vben-core/popup-ui';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+import { loadScript } from '@vben-core/shared/utils';
+
+interface Props {
+  clientId: string;
+  corpId: string;
+  // 登录回调地址
+  redirectUri?: string;
+  // 是否内嵌二维码登录
+  isQrCode?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const route = useRoute();
+
+const [Modal, modalApi] = useVbenModal({
+  header: false,
+  footer: false,
+  fullscreenButton: false,
+  class: 'w-[302px] h-[302px] dingding-qrcode-login-modal',
+  onOpened() {
+    handleQrCodeLogin();
+  },
+});
+
+const getRedirectUri = () => {
+  const { redirectUri } = props;
+  if (redirectUri) {
+    return redirectUri;
+  }
+  return window.location.origin + route.fullPath;
+};
+
+/**
+ * 内嵌二维码登录
+ */
+const handleQrCodeLogin = async () => {
+  const { clientId, corpId } = props;
+  if (!(window as any).DTFrameLogin) {
+    // 二维码登录 加载资源
+    await loadScript(
+      'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js',
+    );
+  }
+  (window as any).DTFrameLogin(
+    {
+      id: 'dingding_qrcode_login_element',
+      width: 300,
+      height: 300,
+    },
+    {
+      // 注意：redirect_uri 需为完整URL，扫码后钉钉会带code跳转到这里
+      redirect_uri: encodeURIComponent(getRedirectUri()),
+      client_id: clientId,
+      scope: 'openid corpid',
+      response_type: 'code',
+      state: '1',
+      prompt: 'consent',
+      corpId,
+    },
+    (loginResult: any) => {
+      const { redirectUrl } = loginResult;
+      // 这里可以直接进行重定向
+      window.location.href = redirectUrl;
+    },
+    (errorMsg: string) => {
+      // 这里一般需要展示登录失败的具体原因
+      alert(`Login Error: ${errorMsg}`);
+    },
+  );
+};
+
+const handleLogin = () => {
+  const { clientId, corpId, isQrCode } = props;
+  if (isQrCode) {
+    // 内嵌二维码登录
+    modalApi.open();
+  } else {
+    window.location.href = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${encodeURIComponent(getRedirectUri())}&response_type=code&client_id=${clientId}&scope=openid&corpid=${corpId}&prompt=consent`;
+  }
+};
+</script>
+
+<template>
+  <div>
+    <VbenIconButton
+      @click="handleLogin"
+      :tooltip="$t('authentication.dingdingLogin')"
+      tooltip-side="top"
+    >
+      <RiDingding />
+    </VbenIconButton>
+    <Modal>
+      <div id="dingding_qrcode_login_element"></div>
+    </Modal>
+  </div>
+</template>
+
+<style>
+.dingding-qrcode-login-modal {
+  .relative {
+    padding: 0 !important;
+  }
+}
+</style>
diff --git a/packages/effects/common-ui/src/ui/authentication/third-party-login.vue b/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
index 1f339c7f..d922049d 100644
--- a/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AntdDingTalk, MdiGithub, MdiQqchat, MdiWechat } from '@vben/icons';
+import { MdiGithub, MdiQqchat, MdiWechat, RiDingding } from '@vben/icons';
 import { $t } from '@vben/locales';
 
 import { VbenIconButton } from '@vben-core/shadcn-ui';
@@ -37,7 +37,7 @@ function handleThirdLogin(type: number) {
         <MdiWechat />
       </VbenIconButton>
       <VbenIconButton class="mb-3" @click="handleThirdLogin(20)">
-        <AntdDingTalk />
+        <RiDingding />
       </VbenIconButton>
       <VbenIconButton class="mb-3" @click="handleThirdLogin(0)">
         <MdiQqchat />
diff --git a/packages/effects/hooks/package.json b/packages/effects/hooks/package.json
index 004f3c50..b5bcc0a0 100644
--- a/packages/effects/hooks/package.json
+++ b/packages/effects/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/hooks",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/hooks/src/use-app-config.ts b/packages/effects/hooks/src/use-app-config.ts
index eee9171e..44489641 100644
--- a/packages/effects/hooks/src/use-app-config.ts
+++ b/packages/effects/hooks/src/use-app-config.ts
@@ -15,11 +15,24 @@ export function useAppConfig(
     ? window._VBEN_ADMIN_PRO_APP_CONF_
     : (env as VbenAdminProAppConfigRaw);
 
-  const { VITE_GLOB_API_URL } = config;
+  const {
+    VITE_GLOB_API_URL,
+    VITE_GLOB_AUTH_DINGDING_CORP_ID,
+    VITE_GLOB_AUTH_DINGDING_CLIENT_ID,
+  } = config;
 
-  return {
+  const applicationConfig: ApplicationConfig = {
     apiURL: VITE_GLOB_API_URL,
+    auth: {},
   };
+  if (VITE_GLOB_AUTH_DINGDING_CORP_ID && VITE_GLOB_AUTH_DINGDING_CLIENT_ID) {
+    applicationConfig.auth.dingding = {
+      clientId: VITE_GLOB_AUTH_DINGDING_CLIENT_ID,
+      corpId: VITE_GLOB_AUTH_DINGDING_CORP_ID,
+    };
+  }
+
+  return applicationConfig;
 }
 
 export function isTenantEnable(): boolean {
diff --git a/packages/effects/layouts/package.json b/packages/effects/layouts/package.json
index a8439a02..76c99faf 100644
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/layouts",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
index 0d110ce0..2dd7d2f8 100644
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import type { SetupContext } from 'vue';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
 import type { MenuRecordRaw } from '@vben/types';
 
-import { computed, useSlots, watch } from 'vue';
+import { computed, onMounted, useSlots, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
 import { useRefresh } from '@vben/hooks';
 import { $t, i18n } from '@vben/locales';
@@ -153,6 +155,23 @@ function clickLogo() {
   emit('clickLogo');
 }
 
+function autoCollapseMenuByRouteMeta(route: RouteLocationNormalizedLoaded) {
+  // 只在双列模式下生效
+  if (
+    preferences.app.layout === 'sidebar-mixed-nav' &&
+    route.meta &&
+    route.meta.hideInMenu
+  ) {
+    sidebarExtraVisible.value = false;
+  }
+}
+
+const route = useRoute();
+
+onMounted(() => {
+  autoCollapseMenuByRouteMeta(route);
+});
+
 watch(
   () => preferences.app.layout,
   async (val) => {
diff --git a/packages/effects/layouts/src/basic/menu/use-navigation.ts b/packages/effects/layouts/src/basic/menu/use-navigation.ts
index 7b88de8f..6ba484a4 100644
--- a/packages/effects/layouts/src/basic/menu/use-navigation.ts
+++ b/packages/effects/layouts/src/basic/menu/use-navigation.ts
@@ -32,6 +32,10 @@ function useNavigation() {
     return route?.meta?.openInNewWindow ?? false;
   };
 
+  const resolveHref = (path: string): string => {
+    return router.resolve(path).href;
+  };
+
   const navigation = async (path: string) => {
     try {
       const route = routeMetaMap.get(path);
@@ -40,7 +44,7 @@ function useNavigation() {
       if (isHttpUrl(path)) {
         openWindow(path, { target: '_blank' });
       } else if (openInNewWindow) {
-        openRouteInNewWindow(path);
+        openRouteInNewWindow(resolveHref(path));
       } else {
         await router.push({
           path,
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
index 736d09d5..6fb7a54a 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -85,7 +85,7 @@ useScrollLock();
     <transition name="slide-left">
       <div v-show="!showUnlockForm" class="size-full">
         <div
-          class="flex-col-center text-foreground/80 hover:text-foreground group my-4 cursor-pointer text-xl font-semibold"
+          class="flex-col-center text-foreground/80 hover:text-foreground group fixed left-1/2 top-6 z-[2001] -translate-x-1/2 cursor-pointer text-xl font-semibold"
           @click="toggleUnlockForm"
         >
           <LockKeyhole
@@ -93,19 +93,23 @@ useScrollLock();
           />
           <span>{{ $t('ui.widgets.lockScreen.unlock') }}</span>
         </div>
-        <div class="flex h-full justify-center px-[10%]">
-          <div
-            class="bg-accent flex-center relative mb-14 mr-20 h-4/5 w-2/5 flex-auto rounded-3xl text-center text-[260px]"
-          >
-            <span class="absolute left-4 top-4 text-xl font-semibold">
-              {{ meridiem }}
-            </span>
-            {{ hour }}
-          </div>
-          <div
-            class="bg-accent flex-center mb-14 h-4/5 w-2/5 flex-auto rounded-3xl text-center text-[260px]"
-          >
-            {{ minute }}
+        <div class="flex h-full w-full items-center justify-center">
+          <div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
+            <div
+              class="bg-accent relative flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
+            >
+              <span
+                class="absolute left-3 top-3 text-xs font-semibold sm:text-sm md:text-xl"
+              >
+                {{ meridiem }}
+              </span>
+              {{ hour }}
+            </div>
+            <div
+              class="bg-accent flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
+            >
+              {{ minute }}
+            </div>
           </div>
         </div>
       </div>
@@ -117,9 +121,8 @@ useScrollLock();
         class="flex-center size-full"
         @keydown.enter.prevent="handleSubmit"
       >
-        <div class="flex-col-center mb-10 w-[300px]">
+        <div class="flex-col-center mb-10 w-[90%] max-w-[300px] px-4">
           <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
-
           <div class="enter-x mb-2 w-full items-center">
             <Form />
           </div>
@@ -145,12 +148,13 @@ useScrollLock();
     </transition>
 
     <div
-      class="enter-y absolute bottom-5 w-full text-center xl:text-xl 2xl:text-3xl"
+      class="enter-y absolute bottom-5 w-full text-center text-xl md:text-2xl xl:text-xl 2xl:text-3xl"
     >
-      <div v-if="showUnlockForm" class="enter-x mb-2 text-3xl">
-        {{ hour }}:{{ minute }} <span class="text-lg">{{ meridiem }}</span>
+      <div v-if="showUnlockForm" class="enter-x mb-2 text-2xl md:text-3xl">
+        {{ hour }}:{{ minute }}
+        <span class="text-base md:text-lg">{{ meridiem }}</span>
       </div>
-      <div class="text-3xl">{{ date }}</div>
+      <div class="text-xl md:text-3xl">{{ date }}</div>
     </div>
   </div>
 </template>
diff --git a/packages/effects/plugins/package.json b/packages/effects/plugins/package.json
index dfd45679..6f455212 100644
--- a/packages/effects/plugins/package.json
+++ b/packages/effects/plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/plugins",
-  "version": "5.5.6",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 70f4cfa5..8cc12bef 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -1,8 +1,9 @@
 export { AsyncComponents, setupVbenVxeTable } from './init';
 export type { VxeTableGridOptions } from './types';
 export * from './use-vxe-grid';
-
 export { default as VbenVxeGrid } from './use-vxe-grid.vue';
+
+export * from './validation';
 export type {
   VxeGridListeners,
   VxeGridProps,
diff --git a/packages/effects/plugins/src/vxe-table/style.css b/packages/effects/plugins/src/vxe-table/style.css
index 5b47fa2c..152fcf21 100644
--- a/packages/effects/plugins/src/vxe-table/style.css
+++ b/packages/effects/plugins/src/vxe-table/style.css
@@ -115,3 +115,29 @@
 .vxe-grid--layout-body-content-wrapper {
   overflow: hidden;
 }
+
+/* 必填字段错误样式 */
+.vxe-table .required-field-error::after {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  z-index: 10;
+  padding: 1px 4px;
+  font-size: 10px;
+  line-height: 1;
+  color: white;
+  content: '必填';
+  background-color: #ff4d4f;
+  border-radius: 0 0 0 4px;
+}
+
+/* 必填字段内的输入框样式 */
+.vxe-table .required-field-error .ant-select,
+.vxe-table .required-field-error .ant-input-number,
+.vxe-table .required-field-error .ant-input {
+  border-color: #ff4d4f !important;
+}
+
+.vxe-table .required-field-error .ant-select .ant-select-selector {
+  border-color: #ff4d4f !important;
+}
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index f3eb6735..7b002a20 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -300,7 +300,7 @@ async function init() {
   const enableProxyConfig = options.value.proxyConfig?.enabled;
   if (enableProxyConfig && autoLoad) {
     props.api.grid.commitProxy?.(
-      '_init',
+      'query',
       formOptions.value ? ((await formApi.getValues()) ?? {}) : {},
     );
     // props.api.reload(formApi.form?.values ?? {});
diff --git a/packages/effects/plugins/src/vxe-table/validation.ts b/packages/effects/plugins/src/vxe-table/validation.ts
new file mode 100644
index 00000000..487f2410
--- /dev/null
+++ b/packages/effects/plugins/src/vxe-table/validation.ts
@@ -0,0 +1,61 @@
+/**
+ * 创建验证类名的工具函数
+ * @param isValidating 验证状态
+ * @param fieldName 字段名
+ * @param validationRules 验证规则，可以是字符串或自定义函数
+ * @returns 返回 className 函数
+ */
+function createValidationClassName(
+  isValidating: any,
+  fieldName: string,
+  validationRules: ((row: any) => boolean) | string,
+) {
+  return ({ row }: { row: any }) => {
+    if (!isValidating?.value) return '';
+
+    let isValid = true;
+    if (typeof validationRules === 'string') {
+      // 处理简单的验证规则
+      if (validationRules === 'required') {
+        isValid =
+          fieldName === 'count'
+            ? row[fieldName] && row[fieldName] > 0
+            : !!row[fieldName];
+      }
+    } else if (typeof validationRules === 'function') {
+      // 处理自定义验证函数
+      isValid = validationRules(row);
+    }
+
+    return isValid ? '' : 'required-field-error';
+  };
+}
+
+/**
+ * 创建必填字段验证
+ * @param isValidating 验证状态
+ * @param fieldName 字段名
+ * @returns 返回 className 函数
+ */
+function createRequiredValidation(isValidating: any, fieldName: string) {
+  return createValidationClassName(isValidating, fieldName, 'required');
+}
+
+/**
+ * 创建自定义验证
+ * @param isValidating 验证状态
+ * @param validationFn 自定义验证函数
+ * @returns 返回 className 函数
+ */
+function createCustomValidation(
+  isValidating: any,
+  validationFn: (row: any) => boolean,
+) {
+  return createValidationClassName(isValidating, '', validationFn);
+}
+
+export {
+  createCustomValidation,
+  createRequiredValidation,
+  createValidationClassName,
+};
diff --git a/packages/effects/request/package.json b/packages/effects/request/package.json
index b94639cd..b4a47804 100644
--- a/packages/effects/request/package.json
+++ b/packages/effects/request/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/request",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 85838394..8ac80940 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index 3342ec1a..c4c7116e 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -20,8 +20,7 @@ export const MsRefresh = createIconifyIcon('material-symbols:refresh-rounded');
 
 export const TMinimize = createIconifyIcon('tabler:arrows-minimize');
 
-export const AntdDingTalk = createIconifyIcon('ant-design:dingtalk');
-
 export const AntdProfileOutlined = createIconifyIcon(
   'ant-design:profile-outlined',
 );
+export const RiDingding = createIconifyIcon('ri:dingding-fill');
diff --git a/packages/locales/package.json b/packages/locales/package.json
index 5e92de54..281df25a 100644
--- a/packages/locales/package.json
+++ b/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/locales",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/locales/src/langs/en-US/authentication.json b/packages/locales/src/langs/en-US/authentication.json
index 6ea4c789..d5ea890b 100644
--- a/packages/locales/src/langs/en-US/authentication.json
+++ b/packages/locales/src/langs/en-US/authentication.json
@@ -41,6 +41,11 @@
   "qrcodeSubtitle": "Scan the QR code with your phone to login",
   "qrcodePrompt": "Click 'Confirm' after scanning to complete login",
   "qrcodeLogin": "QR Code Login",
+  "wechatLogin": "Wechat Login",
+  "qqLogin": "QQ Login",
+  "githubLogin": "Github Login",
+  "googleLogin": "Google Login",
+  "dingdingLogin": "Dingding Login",
   "codeSubtitle": "Enter your phone number to start managing your project",
   "code": "Security code",
   "codeTip": "Security code required {0} characters",
diff --git a/packages/locales/src/langs/zh-CN/authentication.json b/packages/locales/src/langs/zh-CN/authentication.json
index 588f2e8b..9f96dbdd 100644
--- a/packages/locales/src/langs/zh-CN/authentication.json
+++ b/packages/locales/src/langs/zh-CN/authentication.json
@@ -41,6 +41,11 @@
   "qrcodeSubtitle": "请用手机扫描二维码登录",
   "qrcodePrompt": "扫码后点击 '确认'，即可完成登录",
   "qrcodeLogin": "扫码登录",
+  "wechatLogin": "微信登录",
+  "qqLogin": "QQ登录",
+  "githubLogin": "Github登录",
+  "googleLogin": "Google登录",
+  "dingdingLogin": "钉钉登录",
   "codeSubtitle": "请输入您的手机号码以开始管理您的项目",
   "code": "验证码",
   "codeTip": "请输入{0}位验证码",
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index de276c72..e3334f33 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/stores/package.json b/packages/stores/package.json
index c9860b59..bb5796f4 100644
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stores",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 127bd4d5..960842da 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/styles",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/types/global.d.ts b/packages/types/global.d.ts
index 0c8f0198..5b3b3e91 100644
--- a/packages/types/global.d.ts
+++ b/packages/types/global.d.ts
@@ -9,10 +9,20 @@ declare module 'vue-router' {
 
 export interface VbenAdminProAppConfigRaw {
   VITE_GLOB_API_URL: string;
+  VITE_GLOB_AUTH_DINGDING_CLIENT_ID: string;
+  VITE_GLOB_AUTH_DINGDING_CORP_ID: string;
+}
+
+interface AuthConfig {
+  dingding?: {
+    clientId: string;
+    corpId: string;
+  };
 }
 
 export interface ApplicationConfig {
   apiURL: string;
+  auth: AuthConfig;
 }
 
 declare global {
diff --git a/packages/types/package.json b/packages/types/package.json
index 2fa047d8..74a4b547 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/types",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 38a6ca19..447f3b6c 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/playground/.env.development b/playground/.env.development
index dcf361e7..0b1dc057 100644
--- a/playground/.env.development
+++ b/playground/.env.development
@@ -14,3 +14,7 @@ VITE_DEVTOOLS=false
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 钉钉登录配置
+VITE_GLOB_AUTH_DINGDING_CLIENT_ID=应用的clientId
+VITE_GLOB_AUTH_DINGDING_CORP_ID=应用的corpId
diff --git a/playground/package.json b/playground/package.json
index 8bfd17d5..c918f2de 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/playground/src/views/examples/vxe-table/remote.vue b/playground/src/views/examples/vxe-table/remote.vue
index 907c1e2c..7042019f 100644
--- a/playground/src/views/examples/vxe-table/remote.vue
+++ b/playground/src/views/examples/vxe-table/remote.vue
@@ -55,7 +55,7 @@ const gridOptions: VxeGridProps<RowType> = {
     custom: true,
     export: true,
     // import: true,
-    refresh: { code: 'query' },
+    refresh: true,
     zoom: true,
   },
 };
diff --git a/playground/src/views/system/dept/list.vue b/playground/src/views/system/dept/list.vue
index 1b4154d4..13d45a6e 100644
--- a/playground/src/views/system/dept/list.vue
+++ b/playground/src/views/system/dept/list.vue
@@ -110,7 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       custom: true,
       export: false,
-      refresh: { code: 'query' },
+      refresh: true,
       zoom: true,
     },
     treeConfig: {
diff --git a/playground/src/views/system/menu/list.vue b/playground/src/views/system/menu/list.vue
index 9ab45644..759dccf6 100644
--- a/playground/src/views/system/menu/list.vue
+++ b/playground/src/views/system/menu/list.vue
@@ -44,7 +44,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       custom: true,
       export: false,
-      refresh: { code: 'query' },
+      refresh: true,
       zoom: true,
     },
     treeConfig: {
diff --git a/playground/src/views/system/role/list.vue b/playground/src/views/system/role/list.vue
index b5e383a6..4775c028 100644
--- a/playground/src/views/system/role/list.vue
+++ b/playground/src/views/system/role/list.vue
@@ -52,7 +52,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       custom: true,
       export: false,
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
       zoom: true,
     },
@@ -151,7 +151,7 @@ function onCreate() {
 </script>
 <template>
   <Page auto-content-height>
-    <FormDrawer />
+    <FormDrawer @success="onRefresh" />
     <Grid :table-title="$t('system.role.list')">
       <template #toolbar-tools>
         <Button type="primary" @click="onCreate">
diff --git a/playground/src/views/system/role/modules/form.vue b/playground/src/views/system/role/modules/form.vue
index cae54a1c..25b6fedc 100644
--- a/playground/src/views/system/role/modules/form.vue
+++ b/playground/src/views/system/role/modules/form.vue
@@ -47,10 +47,13 @@ const [Drawer, drawerApi] = useVbenDrawer({
         drawerApi.unlock();
       });
   },
-  onOpenChange(isOpen) {
+  async onOpenChange(isOpen) {
     if (isOpen) {
       const data = drawerApi.getData<SystemRoleApi.SystemRole>();
       formApi.resetForm();
+      if (permissions.value.length === 0) {
+        await loadPermissions();
+      }
       if (data) {
         formData.value = data;
         id.value = data.id;
@@ -58,10 +61,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
       } else {
         id.value = undefined;
       }
-
-      if (permissions.value.length === 0) {
-        loadPermissions();
-      }
     }
   },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 14967774..c5f4d89f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -565,11 +565,11 @@ catalogs:
       specifier: ^0.2.4
       version: 0.2.4
     vxe-pc-ui:
-      specifier: ^4.6.42
-      version: 4.6.49
+      specifier: ^4.7.12
+      version: 4.7.16
     vxe-table:
-      specifier: ^4.13.51
-      version: 4.13.52
+      specifier: ^4.14.4
+      version: 4.14.4
     watermark-js-plus:
       specifier: ^1.6.2
       version: 1.6.2
@@ -1862,10 +1862,10 @@ importers:
         version: 3.5.17(typescript@5.8.3)
       vxe-pc-ui:
         specifier: 'catalog:'
-        version: 4.6.49(vue@3.5.17(typescript@5.8.3))
+        version: 4.7.16(vue@3.5.17(typescript@5.8.3))
       vxe-table:
         specifier: 'catalog:'
-        version: 4.13.52(vue@3.5.17(typescript@5.8.3))
+        version: 4.14.4(vue@3.5.17(typescript@5.8.3))
     devDependencies:
       '@types/markdown-it':
         specifier: 'catalog:'
@@ -5317,8 +5317,8 @@ packages:
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
-  '@vxe-ui/core@4.2.1':
-    resolution: {integrity: sha512-tfImwvh9vRPEER+VRqPKEqU6lgB8y9u1O7iMC5V+mhJq/iWaJUE3EufSkfg5GQK8vBaceVtea1ydICl0Pr4j7w==}
+  '@vxe-ui/core@4.2.5':
+    resolution: {integrity: sha512-K/0ae1VoCaVHZTnV3rUFsQdkwCU6dKjbFVtf0bvVRCYG5v+KrKbvFBSkqdnGT7sDoeotPVjL/WjBbl64RpHs3w==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -11430,11 +11430,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  vxe-pc-ui@4.6.49:
-    resolution: {integrity: sha512-VqRmNHTWVUINevIn2vok3cdMFVU3ciGRCBfRFXqXcZHVSfl+z/zl+CxjjU6Orv6xs6XxJlpACY2S1I0PmyknNg==}
+  vxe-pc-ui@4.7.16:
+    resolution: {integrity: sha512-t+E+x25FvRIax9HQJygO2wQA+2lxmNCkW4RY3m01c+bem4rs1FqM7UmxtUMBMM8OVH15mD42qwU4BtX7Ylf+EA==}
 
-  vxe-table@4.13.52:
-    resolution: {integrity: sha512-cP+H2zJNrXiu3PooOWJSh7XisT8Q0/KpjByMKbWlwt4txJrZ0xFdgxr+u+xIcSiO3pbdPAUjg7fJnZgOgFrKYw==}
+  vxe-table@4.14.4:
+    resolution: {integrity: sha512-h4KDw8DHZz037kNULSJD2lEiNifAtHNw5XvXSH0Ropk60WK5My1zj9Kb2rX+uU1oGfh75dmv71JzR6V2iWoSUw==}
 
   wangeditor@4.7.15:
     resolution: {integrity: sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==}
@@ -11612,8 +11612,8 @@ packages:
     resolution: {integrity: sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==}
     engines: {node: '>=12'}
 
-  xe-utils@3.7.6:
-    resolution: {integrity: sha512-QxASuZUcjEaQ+QQj4DGBupOBvym1F5U0akd3+2gnKrSfk0w9OlLnHslmI4MO4N4jP+8zHcTV5KdKpIBf66hvcg==}
+  xe-utils@3.7.8:
+    resolution: {integrity: sha512-V/k6B/ASYir6yLYhp62DnM17po9u1N9mou/rn4if5WoFCsAO49JpCiVpkDpwCv4zxGfWmhWgzmz4FytWF+pDVw==}
 
   xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
@@ -15493,11 +15493,11 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vxe-ui/core@4.2.1(vue@3.5.17(typescript@5.8.3))':
+  '@vxe-ui/core@4.2.5(vue@3.5.17(typescript@5.8.3))':
     dependencies:
       dom-zindex: 1.0.6
       vue: 3.5.17(typescript@5.8.3)
-      xe-utils: 3.7.6
+      xe-utils: 3.7.8
 
   '@whatwg-node/disposablestack@0.0.6':
     dependencies:
@@ -21958,7 +21958,7 @@ snapshots:
       '@rollup/pluginutils': 5.2.0(rollup@4.44.2)
       es-module-lexer: 1.7.0
       rollup: 4.44.2
-      xe-utils: 3.7.6
+      xe-utils: 3.7.8
 
   vite-plugin-pwa@1.0.1(vite@5.4.19(@types/node@24.0.10)(less@4.3.0)(sass@1.89.2)(terser@5.43.1))(workbox-build@7.3.0)(workbox-window@7.3.0):
     dependencies:
@@ -22300,15 +22300,15 @@ snapshots:
       vooks: 0.2.12(vue@3.5.17(typescript@5.8.3))
       vue: 3.5.17(typescript@5.8.3)
 
-  vxe-pc-ui@4.6.49(vue@3.5.17(typescript@5.8.3)):
+  vxe-pc-ui@4.7.16(vue@3.5.17(typescript@5.8.3)):
     dependencies:
-      '@vxe-ui/core': 4.2.1(vue@3.5.17(typescript@5.8.3))
+      '@vxe-ui/core': 4.2.5(vue@3.5.17(typescript@5.8.3))
     transitivePeerDependencies:
       - vue
 
-  vxe-table@4.13.52(vue@3.5.17(typescript@5.8.3)):
+  vxe-table@4.14.4(vue@3.5.17(typescript@5.8.3)):
     dependencies:
-      vxe-pc-ui: 4.6.49(vue@3.5.17(typescript@5.8.3))
+      vxe-pc-ui: 4.7.16(vue@3.5.17(typescript@5.8.3))
     transitivePeerDependencies:
       - vue
 
@@ -22588,7 +22588,7 @@ snapshots:
 
   xdg-basedir@5.1.0: {}
 
-  xe-utils@3.7.6: {}
+  xe-utils@3.7.8: {}
 
   xml-name-validator@4.0.0: {}
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8466b761..59d65267 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -204,8 +204,8 @@ catalog:
   vue-router: ^4.5.1
   vue-tippy: ^6.7.1
   vue-tsc: 2.2.10
-  vxe-pc-ui: ^4.6.42
-  vxe-table: ^4.13.51
+  vxe-pc-ui: ^4.7.12
+  vxe-table: ^4.14.4
   watermark-js-plus: ^1.6.2
   zod: ^3.25.67
   zod-defaults: ^0.1.3
diff --git a/scripts/turbo-run/package.json b/scripts/turbo-run/package.json
index 4639c873..0a884157 100644
--- a/scripts/turbo-run/package.json
+++ b/scripts/turbo-run/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/turbo-run",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/scripts/vsh/package.json b/scripts/vsh/package.json
index a901e3c7..db4c55f6 100644
--- a/scripts/vsh/package.json
+++ b/scripts/vsh/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/vsh",
-  "version": "5.5.6",
+  "version": "5.5.8",
   "private": true,
   "license": "MIT",
   "type": "module",