diff --git a/apps/web-antd/src/api/erp/finance/account/index.ts b/apps/web-antd/src/api/erp/finance/account/index.ts
index e180af65f..1f630b87d 100644
--- a/apps/web-antd/src/api/erp/finance/account/index.ts
+++ b/apps/web-antd/src/api/erp/finance/account/index.ts
@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace ErpAccountApi {
-  /** ERP 结算账户信息 */
+  /** 结算账户信息 */
   export interface Account {
     id?: number; // 结算账户编号
     no: string; // 账户编码
@@ -13,17 +13,10 @@ export namespace ErpAccountApi {
     defaultStatus: boolean; // 是否默认
     name: string; // 账户名称
   }
-
-  /** 结算账户分页查询参数 */
-  export interface AccountPageParam extends PageParam {
-    name?: string;
-    no?: string;
-    status?: number;
-  }
 }
 
 /** 查询结算账户分页 */
-export function getAccountPage(params: ErpAccountApi.AccountPageParam) {
+export function getAccountPage(params: PageParam) {
   return requestClient.get<PageResult<ErpAccountApi.Account>>(
     '/erp/account/page',
     { 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
index 502811665..004713ce8 100644
--- a/apps/web-antd/src/api/erp/finance/payment/index.ts
+++ b/apps/web-antd/src/api/erp/finance/payment/index.ts
@@ -3,19 +3,6 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace ErpFinancePaymentApi {
-  /** 付款单项 */
-  export interface FinancePaymentItem {
-    id?: number;
-    row_id?: number; // 前端使用的临时ID
-    bizId: number; // 业务ID
-    bizType: number; // 业务类型
-    bizNo: string; // 业务编号
-    totalPrice: number; // 应付金额
-    paidPrice: number; // 已付金额
-    paymentPrice: number; // 本次付款
-    remark?: string; // 备注
-  }
-
   /** 付款单信息 */
   export interface FinancePayment {
     id?: number; // 付款单编号
@@ -39,24 +26,22 @@ export namespace ErpFinancePaymentApi {
     bizNo?: string; // 业务单号
   }
 
-  /** 付款单分页查询参数 */
-  export interface FinancePaymentPageParams extends PageParam {
-    no?: string;
-    paymentTime?: [string, string];
-    supplierId?: number;
-    creator?: string;
-    financeUserId?: number;
-    accountId?: number;
-    status?: number;
-    remark?: string;
-    bizNo?: string;
+  /** 付款单项 */
+  export interface FinancePaymentItem {
+    id?: number;
+    row_id?: number; // 前端使用的临时 ID
+    bizId: number; // 业务ID
+    bizType: number; // 业务类型
+    bizNo: string; // 业务编号
+    totalPrice: number; // 应付金额
+    paidPrice: number; // 已付金额
+    paymentPrice: number; // 本次付款
+    remark?: string; // 备注
   }
 }
 
 /** 查询付款单分页 */
-export function getFinancePaymentPage(
-  params: ErpFinancePaymentApi.FinancePaymentPageParams,
-) {
+export function getFinancePaymentPage(params: PageParam) {
   return requestClient.get<PageResult<ErpFinancePaymentApi.FinancePayment>>(
     '/erp/finance-payment/page',
     {
@@ -103,9 +88,7 @@ export function deleteFinancePayment(ids: number[]) {
 }
 
 /** 导出付款单 Excel */
-export function exportFinancePayment(
-  params: ErpFinancePaymentApi.FinancePaymentPageParams,
-) {
+export function exportFinancePayment(params: any) {
   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
index e86a3f699..f871035b5 100644
--- a/apps/web-antd/src/api/erp/finance/receipt/index.ts
+++ b/apps/web-antd/src/api/erp/finance/receipt/index.ts
@@ -6,7 +6,7 @@ export namespace ErpFinanceReceiptApi {
   /** 收款单项 */
   export interface FinanceReceiptItem {
     id?: number;
-    row_id?: number; // 前端使用的临时ID
+    row_id?: number; // 前端使用的临时 ID
     bizId: number; // 业务ID
     bizType: number; // 业务类型
     bizNo: string; // 业务编号
@@ -38,25 +38,10 @@ export namespace ErpFinanceReceiptApi {
     items?: FinanceReceiptItem[]; // 收款明细
     bizNo?: string; // 业务单号
   }
-
-  /** 收款单分页查询参数 */
-  export interface FinanceReceiptPageParams extends PageParam {
-    no?: string;
-    receiptTime?: [string, string];
-    customerId?: number;
-    creator?: string;
-    financeUserId?: number;
-    accountId?: number;
-    status?: number;
-    remark?: string;
-    bizNo?: string;
-  }
 }
 
 /** 查询收款单分页 */
-export function getFinanceReceiptPage(
-  params: ErpFinanceReceiptApi.FinanceReceiptPageParams,
-) {
+export function getFinanceReceiptPage(params: PageParam) {
   return requestClient.get<PageResult<ErpFinanceReceiptApi.FinanceReceipt>>(
     '/erp/finance-receipt/page',
     {
@@ -103,9 +88,7 @@ export function deleteFinanceReceipt(ids: number[]) {
 }
 
 /** 导出收款单 Excel */
-export function exportFinanceReceipt(
-  params: ErpFinanceReceiptApi.FinanceReceiptPageParams,
-) {
+export function exportFinanceReceipt(params: any) {
   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
index 87c855319..3c96b5893 100644
--- a/apps/web-antd/src/api/erp/product/category/index.ts
+++ b/apps/web-antd/src/api/erp/product/category/index.ts
@@ -1,7 +1,7 @@
 import { requestClient } from '#/api/request';
 
 export namespace ErpProductCategoryApi {
-  /** ERP 产品分类信息 */
+  /** 产品分类信息 */
   export interface ProductCategory {
     id?: number; // 分类编号
     parentId?: number; // 父分类编号
diff --git a/apps/web-antd/src/api/erp/product/product/index.ts b/apps/web-antd/src/api/erp/product/product/index.ts
index 157827fff..a9ca836f9 100644
--- a/apps/web-antd/src/api/erp/product/product/index.ts
+++ b/apps/web-antd/src/api/erp/product/product/index.ts
@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace ErpProductApi {
-  /** ERP 产品信息 */
+  /** 产品信息 */
   export interface Product {
     id?: number; // 产品编号
     name: string; // 产品名称
diff --git a/apps/web-antd/src/api/erp/product/unit/index.ts b/apps/web-antd/src/api/erp/product/unit/index.ts
index 317c09c85..23514963b 100644
--- a/apps/web-antd/src/api/erp/product/unit/index.ts
+++ b/apps/web-antd/src/api/erp/product/unit/index.ts
@@ -3,24 +3,16 @@ 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,
-) {
+export function getProductUnitPage(params: PageParam) {
   return requestClient.get<PageResult<ErpProductUnitApi.ProductUnit>>(
     '/erp/product-unit/page',
     { 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
index f807e2800..060e1bcb8 100644
--- a/apps/web-antd/src/api/erp/purchase/in/index.ts
+++ b/apps/web-antd/src/api/erp/purchase/in/index.ts
@@ -23,6 +23,8 @@ export namespace ErpPurchaseInApi {
     taxPrice?: number; // 合计税额
     items?: PurchaseInItem[]; // 采购入库明细
   }
+
+  /** 采购项信息 */
   export interface PurchaseInItem {
     count?: number;
     id?: number;
@@ -42,21 +44,10 @@ export namespace ErpPurchaseInApi {
     warehouseId?: number;
     inCount?: number;
   }
-
-  /** 采购入库分页查询参数 */
-  export interface PurchaseInPageParams extends PageParam {
-    no?: string;
-    supplierId?: number;
-    status?: number;
-  }
 }
 
-/**
- * 查询采购入库分页
- */
-export function getPurchaseInPage(
-  params: ErpPurchaseInApi.PurchaseInPageParams,
-) {
+/** 查询采购入库分页 */
+export function getPurchaseInPage(params: PageParam) {
   return requestClient.get<PageResult<ErpPurchaseInApi.PurchaseIn>>(
     '/erp/purchase-in/page',
     {
@@ -65,32 +56,24 @@ export function getPurchaseInPage(
   );
 }
 
-/**
- * 查询采购入库详情
- */
+/** 查询采购入库详情 */
 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(id: number, status: number) {
   return requestClient.put('/erp/purchase-in/update-status', null, {
     params: {
@@ -100,9 +83,7 @@ export function updatePurchaseInStatus(id: number, status: number) {
   });
 }
 
-/**
- * 删除采购入库
- */
+/** 删除采购入库 */
 export function deletePurchaseIn(ids: number[]) {
   return requestClient.delete('/erp/purchase-in/delete', {
     params: {
@@ -111,12 +92,8 @@ export function deletePurchaseIn(ids: number[]) {
   });
 }
 
-/**
- * 导出采购入库 Excel
- */
-export function exportPurchaseIn(
-  params: ErpPurchaseInApi.PurchaseInPageParams,
-) {
+/** 导出采购入库 Excel */
+export function exportPurchaseIn(params: any) {
   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
index e2cc7a214..e59dcf68e 100644
--- a/apps/web-antd/src/api/erp/purchase/order/index.ts
+++ b/apps/web-antd/src/api/erp/purchase/order/index.ts
@@ -3,27 +3,7 @@ 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; // 采购订单号
@@ -51,24 +31,29 @@ export namespace ErpPurchaseOrderApi {
     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 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; // 库存数量（显示字段）
   }
 }
 
 /** 查询采购订单分页 */
-export function getPurchaseOrderPage(
-  params: ErpPurchaseOrderApi.PurchaseOrderPageParam,
-) {
+export function getPurchaseOrderPage(params: PageParam) {
   return requestClient.get<PageResult<ErpPurchaseOrderApi.PurchaseOrder>>(
     '/erp/purchase-order/page',
     { 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
index 4114f1908..315ceeadb 100644
--- a/apps/web-antd/src/api/erp/purchase/return/index.ts
+++ b/apps/web-antd/src/api/erp/purchase/return/index.ts
@@ -1,4 +1,4 @@
-import type { PageParam, PageResult } from '@vben/request';
+import type { PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
@@ -19,6 +19,8 @@ export namespace ErpPurchaseReturnApi {
     otherPrice?: number; // 其他费用
     items?: PurchaseReturnItem[];
   }
+
+  /** 采购退货项 */
   export interface PurchaseReturnItem {
     count?: number;
     id?: number;
@@ -37,27 +39,10 @@ export namespace ErpPurchaseReturnApi {
     totalPrice?: number;
     warehouseId?: number;
   }
-
-  /** 采购退货分页查询参数 */
-  export interface PurchaseReturnPageParams extends PageParam {
-    no?: string;
-    supplierId?: number;
-    status?: number;
-  }
-
-  /** 采购退货状态更新参数 */
-  export interface PurchaseReturnStatusParams {
-    id: number;
-    status: number;
-  }
 }
 
-/**
- * 查询采购退货分页
- */
-export function getPurchaseReturnPage(
-  params: ErpPurchaseReturnApi.PurchaseReturnPageParams,
-) {
+/** 查询采购退货分页 */
+export function getPurchaseReturnPage(params: any) {
   return requestClient.get<PageResult<ErpPurchaseReturnApi.PurchaseReturn>>(
     '/erp/purchase-return/page',
     {
@@ -66,45 +51,35 @@ export function getPurchaseReturnPage(
   );
 }
 
-/**
- * 查询采购退货详情
- */
+/** 查询采购退货详情 */
 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(id: number, status: number) {
   return requestClient.put('/erp/purchase-return/update-status', null, {
     params: { id, status },
   });
 }
 
-/**
- * 删除采购退货
- */
+/** 删除采购退货 */
 export function deletePurchaseReturn(ids: number[]) {
   return requestClient.delete('/erp/purchase-return/delete', {
     params: {
@@ -113,12 +88,8 @@ export function deletePurchaseReturn(ids: number[]) {
   });
 }
 
-/**
- * 导出采购退货 Excel
- */
-export function exportPurchaseReturn(
-  params: ErpPurchaseReturnApi.PurchaseReturnPageParams,
-) {
+/** 导出采购退货 Excel */
+export function exportPurchaseReturn(params: any) {
   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
index fb74b9f37..42c4196b0 100644
--- a/apps/web-antd/src/api/erp/purchase/supplier/index.ts
+++ b/apps/web-antd/src/api/erp/purchase/supplier/index.ts
@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace ErpSupplierApi {
-  /** ERP 供应商信息 */
+  /** 供应商信息 */
   export interface Supplier {
     id?: number; // 供应商编号
     name: string; // 供应商名称
@@ -21,17 +21,10 @@ export namespace ErpSupplierApi {
     bankAccount: string; // 开户账号
     bankAddress: string; // 开户地址
   }
-
-  /** 供应商分页查询参数 */
-  export interface SupplierPageParam extends PageParam {
-    name?: string;
-    mobile?: string;
-    status?: number;
-  }
 }
 
 /** 查询供应商分页 */
-export function getSupplierPage(params: ErpSupplierApi.SupplierPageParam) {
+export function getSupplierPage(params: PageParam) {
   return requestClient.get<PageResult<ErpSupplierApi.Supplier>>(
     '/erp/supplier/page',
     { 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
index 6cebd018c..1bcd1b31a 100644
--- a/apps/web-antd/src/api/erp/sale/customer/index.ts
+++ b/apps/web-antd/src/api/erp/sale/customer/index.ts
@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace ErpCustomerApi {
-  /** ERP 客户信息 */
+  /** 客户信息 */
   export interface Customer {
     id?: number; // 客户编号
     name: string; // 客户名称
@@ -21,17 +21,10 @@ export namespace ErpCustomerApi {
     bankAccount: string; // 开户账号
     bankAddress: string; // 开户地址
   }
-
-  /** 客户分页查询参数 */
-  export interface CustomerPageParam extends PageParam {
-    name?: string;
-    mobile?: string;
-    status?: number;
-  }
 }
 
 /** 查询客户分页 */
-export function getCustomerPage(params: ErpCustomerApi.CustomerPageParam) {
+export function getCustomerPage(params: PageParam) {
   return requestClient.get<PageResult<ErpCustomerApi.Customer>>(
     '/erp/customer/page',
     { 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
index 6aff41d82..c190a3dc1 100644
--- a/apps/web-antd/src/api/erp/sale/order/index.ts
+++ b/apps/web-antd/src/api/erp/sale/order/index.ts
@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace ErpSaleOrderApi {
-  /** ERP 销售订单信息 */
+  /** 销售订单信息 */
   export interface SaleOrder {
     id?: number; // 订单工单编号
     no: string; // 销售订单号
@@ -25,6 +25,7 @@ export namespace ErpSaleOrderApi {
     items?: SaleOrderItem[]; // 销售订单产品明细列表
   }
 
+  /** 销售订单项 */
   export interface SaleOrderItem {
     id?: number; // 订单项编号
     orderId?: number; // 采购订单编号
@@ -43,17 +44,10 @@ export namespace ErpSaleOrderApi {
     remark?: string; // 备注
     stockCount?: number; // 库存数量（显示字段）
   }
-
-  /** 销售订单分页查询参数 */
-  export interface SaleOrderPageParam extends PageParam {
-    no?: string;
-    customerId?: number;
-    status?: number;
-  }
 }
 
 /** 查询销售订单分页 */
-export function getSaleOrderPage(params: ErpSaleOrderApi.SaleOrderPageParam) {
+export function getSaleOrderPage(params: PageParam) {
   return requestClient.get<PageResult<ErpSaleOrderApi.SaleOrder>>(
     '/erp/sale-order/page',
     { 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
index d78a91baf..a3e335af6 100644
--- a/apps/web-antd/src/api/erp/sale/out/index.ts
+++ b/apps/web-antd/src/api/erp/sale/out/index.ts
@@ -24,6 +24,7 @@ export namespace ErpSaleOutApi {
     items?: SaleOutItem[];
   }
 
+  /** 销售出库项 */
   export interface SaleOutItem {
     count?: number;
     id?: number;
@@ -43,17 +44,10 @@ export namespace ErpSaleOutApi {
     warehouseId?: number;
     outCount?: number;
   }
-
-  /** 销售出库分页查询参数 */
-  export interface SaleOutPageParams extends PageParam {
-    no?: string;
-    customerId?: number;
-    status?: number;
-  }
 }
 
 /** 查询销售出库分页 */
-export function getSaleOutPage(params: ErpSaleOutApi.SaleOutPageParams) {
+export function getSaleOutPage(params: PageParam) {
   return requestClient.get<PageResult<ErpSaleOutApi.SaleOut>>(
     '/erp/sale-out/page',
     {
@@ -94,7 +88,7 @@ export function deleteSaleOut(ids: number[]) {
 }
 
 /** 导出销售出库 Excel */
-export function exportSaleOut(params: ErpSaleOutApi.SaleOutPageParams) {
+export function exportSaleOut(params: any) {
   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
index adc718cc3..a0624cba2 100644
--- a/apps/web-antd/src/api/erp/sale/return/index.ts
+++ b/apps/web-antd/src/api/erp/sale/return/index.ts
@@ -23,6 +23,7 @@ export namespace ErpSaleReturnApi {
     items?: SaleReturnItem[];
   }
 
+  /** 销售退货项 */
   export interface SaleReturnItem {
     count?: number;
     id?: number;
@@ -42,21 +43,10 @@ export namespace ErpSaleReturnApi {
     warehouseId?: number;
     returnCount?: number;
   }
-
-  /** 销售退货分页查询参数 */
-  export interface SaleReturnPageParams extends PageParam {
-    no?: string;
-    customerId?: number;
-    status?: number;
-  }
 }
 
-/**
- * 查询销售退货分页
- */
-export function getSaleReturnPage(
-  params: ErpSaleReturnApi.SaleReturnPageParams,
-) {
+/** 查询销售退货分页 */
+export function getSaleReturnPage(params: PageParam) {
   return requestClient.get<PageResult<ErpSaleReturnApi.SaleReturn>>(
     '/erp/sale-return/page',
     {
@@ -65,41 +55,31 @@ export function getSaleReturnPage(
   );
 }
 
-/**
- * 查询销售退货详情
- */
+/** 查询销售退货详情 */
 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(id: number, status: number) {
   return requestClient.put('/erp/sale-return/update-status', null, {
     params: { id, status },
   });
 }
 
-/**
- * 删除销售退货
- */
+/** 删除销售退货 */
 export function deleteSaleReturn(ids: number[]) {
   return requestClient.delete('/erp/sale-return/delete', {
     params: {
@@ -108,12 +88,8 @@ export function deleteSaleReturn(ids: number[]) {
   });
 }
 
-/**
- * 导出销售退货 Excel
- */
-export function exportSaleReturn(
-  params: ErpSaleReturnApi.SaleReturnPageParams,
-) {
+/** 导出销售退货 Excel */
+export function exportSaleReturn(params: any) {
   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
index 170b9c117..126b6f283 100644
--- a/apps/web-antd/src/api/erp/statistics/purchase/index.ts
+++ b/apps/web-antd/src/api/erp/statistics/purchase/index.ts
@@ -1,16 +1,16 @@
 import { requestClient } from '#/api/request';
 
 export namespace ErpPurchaseStatisticsApi {
-  /** ERP 采购全局统计 */
-  export interface PurchaseSummary {
+  /** 采购全局统计 */
+  export interface PurchaseSummaryRespVO {
     todayPrice: number; // 今日采购金额
     yesterdayPrice: number; // 昨日采购金额
     monthPrice: number; // 本月采购金额
     yearPrice: number; // 今年采购金额
   }
 
-  /** ERP 采购时间段统计 */
-  export interface PurchaseTimeSummary {
+  /** 采购时间段统计 */
+  export interface PurchaseTimeSummaryRespVO {
     time: string; // 时间
     price: number; // 采购金额
   }
@@ -18,14 +18,14 @@ export namespace ErpPurchaseStatisticsApi {
 
 /** 获得采购统计 */
 export function getPurchaseSummary() {
-  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseSummary>(
+  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(
     '/erp/purchase-statistics/summary',
   );
 }
 
 /** 获得采购时间段统计 */
 export function getPurchaseTimeSummary() {
-  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(
-    '/erp/purchase-statistics/time-summary',
-  );
+  return requestClient.get<
+    ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]
+  >('/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
index c4c7986a8..209c1c938 100644
--- a/apps/web-antd/src/api/erp/statistics/sale/index.ts
+++ b/apps/web-antd/src/api/erp/statistics/sale/index.ts
@@ -1,16 +1,16 @@
 import { requestClient } from '#/api/request';
 
 export namespace ErpSaleStatisticsApi {
-  /** ERP 销售全局统计 */
-  export interface SaleSummary {
+  /** 销售全局统计 */
+  export interface SaleSummaryRespVO {
     todayPrice: number; // 今日销售金额
     yesterdayPrice: number; // 昨日销售金额
     monthPrice: number; // 本月销售金额
     yearPrice: number; // 今年销售金额
   }
 
-  /** ERP 销售时间段统计 */
-  export interface SaleTimeSummary {
+  /** 销售时间段统计 */
+  export interface SaleTimeSummaryRespVO {
     time: string; // 时间
     price: number; // 销售金额
   }
@@ -18,14 +18,14 @@ export namespace ErpSaleStatisticsApi {
 
 /** 获得销售统计 */
 export function getSaleSummary() {
-  return requestClient.get<ErpSaleStatisticsApi.SaleSummary>(
+  return requestClient.get<ErpSaleStatisticsApi.SaleSummaryRespVO>(
     '/erp/sale-statistics/summary',
   );
 }
 
 /** 获得销售时间段统计 */
 export function getSaleTimeSummary() {
-  return requestClient.get<ErpSaleStatisticsApi.SaleTimeSummary[]>(
+  return requestClient.get<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(
     '/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
index 386948432..b6f9d0bea 100644
--- a/apps/web-antd/src/api/erp/stock/check/index.ts
+++ b/apps/web-antd/src/api/erp/stock/check/index.ts
@@ -18,6 +18,7 @@ export namespace ErpStockCheckApi {
     items?: StockCheckItem[]; // 盘点产品清单
   }
 
+  /** 库存盘点项 */
   export interface StockCheckItem {
     id?: number; // 编号
     warehouseId?: number; // 仓库编号
@@ -33,20 +34,10 @@ export namespace ErpStockCheckApi {
     stockCount?: number; // 账面库存
     remark?: string; // 备注
   }
-
-  /** 库存盘点单分页查询参数 */
-  export interface StockCheckPageParams extends PageParam {
-    no?: string;
-    status?: number;
-  }
 }
 
-/**
- * 查询库存盘点单分页
- */
-export function getStockCheckPage(
-  params: ErpStockCheckApi.StockCheckPageParams,
-) {
+/** 查询库存盘点单分页 */
+export function getStockCheckPage(params: PageParam) {
   return requestClient.get<PageResult<ErpStockCheckApi.StockCheck>>(
     '/erp/stock-check/page',
     {
@@ -55,41 +46,31 @@ export function getStockCheckPage(
   );
 }
 
-/**
- * 查询库存盘点单详情
- */
+/** 查询库存盘点单详情 */
 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(id: number, status: number) {
   return requestClient.put('/erp/stock-check/update-status', null, {
     params: { id, status },
   });
 }
 
-/**
- * 删除库存盘点单
- */
+/** 删除库存盘点 */
 export function deleteStockCheck(ids: number[]) {
   return requestClient.delete('/erp/stock-check/delete', {
     params: {
@@ -98,12 +79,8 @@ export function deleteStockCheck(ids: number[]) {
   });
 }
 
-/**
- * 导出库存盘点单 Excel
- */
-export function exportStockCheck(
-  params: ErpStockCheckApi.StockCheckPageParams,
-) {
+/** 导出库存盘点单 Excel */
+export function exportStockCheck(params: any) {
   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
index 18e109314..e68c05b36 100644
--- a/apps/web-antd/src/api/erp/stock/in/index.ts
+++ b/apps/web-antd/src/api/erp/stock/in/index.ts
@@ -35,19 +35,10 @@ export namespace ErpStockInApi {
     stockCount?: number; // 库存数量
     remark?: string; // 备注
   }
-
-  /** 其它入库单分页查询参数 */
-  export interface StockInPageParams extends PageParam {
-    no?: string;
-    supplierId?: number;
-    status?: number;
-  }
 }
 
-/**
- * 查询其它入库单分页
- */
-export function getStockInPage(params: ErpStockInApi.StockInPageParams) {
+/** 查询其它入库单分页 */
+export function getStockInPage(params: PageParam) {
   return requestClient.get<PageResult<ErpStockInApi.StockIn>>(
     '/erp/stock-in/page',
     {
@@ -56,39 +47,29 @@ export function getStockInPage(params: ErpStockInApi.StockInPageParams) {
   );
 }
 
-/**
- * 查询其它入库单详情
- */
+/** 查询其它入库单详情 */
 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(id: number, status: number) {
   return requestClient.put('/erp/stock-in/update-status', null, {
     params: { id, status },
   });
 }
 
-/**
- * 删除其它入库单
- */
+/** 删除其它入库单 */
 export function deleteStockIn(ids: number[]) {
   return requestClient.delete('/erp/stock-in/delete', {
     params: {
@@ -97,10 +78,8 @@ export function deleteStockIn(ids: number[]) {
   });
 }
 
-/**
- * 导出其它入库单 Excel
- */
-export function exportStockIn(params: ErpStockInApi.StockInPageParams) {
+/** 导出其它入库单 Excel */
+export function exportStockIn(params: any) {
   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
index 04bb46ee4..0120a9b45 100644
--- a/apps/web-antd/src/api/erp/stock/move/index.ts
+++ b/apps/web-antd/src/api/erp/stock/move/index.ts
@@ -36,18 +36,10 @@ export namespace ErpStockMoveApi {
     toWarehouseId?: number; // 目标仓库ID
     totalPrice?: number; // 总价
   }
-
-  /** 库存调拨单分页查询参数 */
-  export interface StockMovePageParams extends PageParam {
-    no?: string;
-    status?: number;
-  }
 }
 
-/**
- * 查询库存调拨单分页
- */
-export function getStockMovePage(params: ErpStockMoveApi.StockMovePageParams) {
+/** 查询库存调拨单分页 */
+export function getStockMovePage(params: PageParam) {
   return requestClient.get<PageResult<ErpStockMoveApi.StockMove>>(
     '/erp/stock-move/page',
     {
@@ -56,41 +48,31 @@ export function getStockMovePage(params: ErpStockMoveApi.StockMovePageParams) {
   );
 }
 
-/**
- * 查询库存调拨单详情
- */
+/** 查询库存调拨单详情 */
 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(id: number, status: number) {
   return requestClient.put('/erp/stock-move/update-status', null, {
     params: { id, status },
   });
 }
 
-/**
- * 删除库存调拨单
- */
+/** 删除库存调拨单 */
 export function deleteStockMove(ids: number[]) {
   return requestClient.delete('/erp/stock-move/delete', {
     params: {
@@ -99,9 +81,7 @@ export function deleteStockMove(ids: number[]) {
   });
 }
 
-/**
- * 导出库存调拨单 Excel
- */
-export function exportStockMove(params: ErpStockMoveApi.StockMovePageParams) {
+/** 导出库存调拨单 Excel */
+export function exportStockMove(params: any) {
   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
index 2f64ff867..1ecb89233 100644
--- a/apps/web-antd/src/api/erp/stock/out/index.ts
+++ b/apps/web-antd/src/api/erp/stock/out/index.ts
@@ -32,19 +32,10 @@ export namespace ErpStockOutApi {
     stockCount?: number; // 库存数量
     remark?: string; // 备注
   }
-
-  /** 其它出库单分页查询参数 */
-  export interface StockOutPageParams extends PageParam {
-    no?: string;
-    customerId?: number;
-    status?: number;
-  }
 }
 
-/**
- * 查询其它出库单分页
- */
-export function getStockOutPage(params: ErpStockOutApi.StockOutPageParams) {
+/** 查询其它出库单分页 */
+export function getStockOutPage(params: PageParam) {
   return requestClient.get<PageResult<ErpStockOutApi.StockOut>>(
     '/erp/stock-out/page',
     {
@@ -53,41 +44,31 @@ export function getStockOutPage(params: ErpStockOutApi.StockOutPageParams) {
   );
 }
 
-/**
- * 查询其它出库单详情
- */
+/** 查询其它出库单详情 */
 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(id: number, status: number) {
   return requestClient.put('/erp/stock-out/update-status', null, {
     params: { id, status },
   });
 }
 
-/**
- * 删除其它出库单
- */
+/** 删除其它出库单 */
 export function deleteStockOut(ids: number[]) {
   return requestClient.delete('/erp/stock-out/delete', {
     params: {
@@ -96,10 +77,8 @@ export function deleteStockOut(ids: number[]) {
   });
 }
 
-/**
- * 导出其它出库单 Excel
- */
-export function exportStockOut(params: ErpStockOutApi.StockOutPageParams) {
+/** 导出其它出库单 Excel */
+export function exportStockOut(params: any) {
   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
index 364091bfb..30bc9dae0 100644
--- a/apps/web-antd/src/api/erp/stock/record/index.ts
+++ b/apps/web-antd/src/api/erp/stock/record/index.ts
@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace ErpStockRecordApi {
-  /** ERP 产品库存明细 */
+  /** 产品库存明细 */
   export interface StockRecord {
     id?: number; // 编号
     productId: number; // 产品编号
@@ -15,32 +15,16 @@ export namespace ErpStockRecordApi {
     bizItemId: number; // 业务项编号
     bizNo: string; // 业务单号
   }
-
-  /** 库存记录分页查询参数 */
-  export interface StockRecordPageParam extends PageParam {
-    productId?: number;
-    warehouseId?: number;
-    bizType?: number;
-  }
 }
 
 /** 查询产品库存明细分页 */
-export function getStockRecordPage(
-  params: ErpStockRecordApi.StockRecordPageParam,
-) {
+export function getStockRecordPage(params: PageParam) {
   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
index df8aaaa9b..7335c6d34 100644
--- a/apps/web-antd/src/api/erp/stock/stock/index.ts
+++ b/apps/web-antd/src/api/erp/stock/stock/index.ts
@@ -11,49 +11,21 @@ export namespace ErpStockApi {
     count: number; // 库存数量
   }
 
-  /** 产品库存分页查询参数 */
-  export interface StockPageParams extends PageParam {
-    productId?: number;
-    warehouseId?: number;
-  }
-
   /** 产品库存查询参数 */
-  export interface StockQueryParams {
+  export interface StockQueryReqVO {
     productId: number;
     warehouseId: number;
   }
 }
 
-/**
- * 查询产品库存分页
- */
-export function getStockPage(params: ErpStockApi.StockPageParams) {
+/** 查询产品库存分页 */
+export function getStockPage(params: PageParam) {
   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) {
@@ -64,19 +36,15 @@ export function getStockCount(productId: number, warehouseId?: number) {
   });
 }
 
-/**
- * 导出产品库存 Excel
- */
-export function exportStock(params: ErpStockApi.StockPageParams) {
+/** 导出产品库存 Excel */
+export function exportStock(params: any) {
   return requestClient.download('/erp/stock/export-excel', {
     params,
   });
 }
 
-/**
- * 获取库存数量
- */
-export function getWarehouseStockCount(params: ErpStockApi.StockQueryParams) {
+/** 获取库存数量 */
+export function getWarehouseStockCount(params: ErpStockApi.StockQueryReqVO) {
   return requestClient.get<number>('/erp/stock/get-count', {
     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
index a1cac8ead..e5d6e1a49 100644
--- a/apps/web-antd/src/api/erp/stock/warehouse/index.ts
+++ b/apps/web-antd/src/api/erp/stock/warehouse/index.ts
@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace ErpWarehouseApi {
-  /** ERP 仓库信息 */
+  /** 仓库信息 */
   export interface Warehouse {
     id?: number; // 仓库编号
     name: string; // 仓库名称
@@ -16,16 +16,10 @@ export namespace ErpWarehouseApi {
     status: number; // 开启状态
     defaultStatus: boolean; // 是否默认
   }
-
-  /** 仓库分页查询参数 */
-  export interface WarehousePageParam extends PageParam {
-    name?: string;
-    status?: number;
-  }
 }
 
 /** 查询仓库分页 */
-export function getWarehousePage(params: ErpWarehouseApi.WarehousePageParam) {
+export function getWarehousePage(params: PageParam) {
   return requestClient.get<PageResult<ErpWarehouseApi.Warehouse>>(
     '/erp/warehouse/page',
     { params },
diff --git a/apps/web-antd/src/api/mp/draft/index.ts b/apps/web-antd/src/api/mp/draft/index.ts
index 9032ffd57..70b7c0e83 100644
--- a/apps/web-antd/src/api/mp/draft/index.ts
+++ b/apps/web-antd/src/api/mp/draft/index.ts
@@ -50,13 +50,9 @@ export function updateDraft(
   mediaId: string,
   articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put(
-    '/mp/draft/update',
-    { articles },
-    {
-      params: { accountId, mediaId },
-    },
-  );
+  return requestClient.put('/mp/draft/update', articles, {
+    params: { accountId, mediaId },
+  });
 }
 
 /** 删除草稿 */
diff --git a/apps/web-antd/src/components/table-action/icons.ts b/apps/web-antd/src/components/table-action/icons.ts
index d474a6a25..578265f4c 100644
--- a/apps/web-antd/src/components/table-action/icons.ts
+++ b/apps/web-antd/src/components/table-action/icons.ts
@@ -12,4 +12,5 @@ export const ACTION_ICON = {
   COPY: 'lucide:copy',
   CLOSE: 'lucide:x',
   BOOK: 'lucide:book',
+  AUDIT: 'lucide:file-check',
 };
diff --git a/apps/web-antd/src/views/erp/finance/account/index.vue b/apps/web-antd/src/views/erp/finance/account/index.vue
index 9ef8f3f60..4ceb7abba 100644
--- a/apps/web-antd/src/views/erp/finance/account/index.vue
+++ b/apps/web-antd/src/views/erp/finance/account/index.vue
@@ -75,6 +75,7 @@ async function handleDefaultStatusChange(
         await updateAccountDefaultStatus(row.id!, newStatus);
         // 提示并返回成功
         message.success(`${text}默认成功`);
+        handleRefresh();
         resolve(true);
       })
       .catch(() => {
diff --git a/apps/web-antd/src/views/erp/finance/payment/data.ts b/apps/web-antd/src/views/erp/finance/payment/data.ts
index 804490eb7..f4a9a61a9 100644
--- a/apps/web-antd/src/views/erp/finance/payment/data.ts
+++ b/apps/web-antd/src/views/erp/finance/payment/data.ts
@@ -170,7 +170,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -208,6 +210,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -385,7 +388,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/finance/payment/index.vue b/apps/web-antd/src/views/erp/finance/payment/index.vue
index 7abf85a18..03c88b777 100644
--- a/apps/web-antd/src/views/erp/finance/payment/index.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:finance-payment:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:finance-payment:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/finance/payment/modules/form.vue b/apps/web-antd/src/views/erp/finance/payment/modules/form.vue
index 5778dca0e..767bd13b2 100644
--- a/apps/web-antd/src/views/erp/finance/payment/modules/form.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/modules/form.vue
@@ -187,6 +187,7 @@ const [Modal, modalApi] = useVbenModal({
           @update:items="handleUpdateItems"
           @update:total-price="handleUpdateTotalPrice"
           @update:payment-price="handleUpdatePaymentPrice"
+          class="w-full"
         />
       </template>
     </Form>
diff --git a/apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue b/apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue
index 5d0032aa6..aa0de59a0 100644
--- a/apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue
@@ -59,7 +59,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -234,7 +234,6 @@ defineExpose({ validate });
       </template>
       <template #actions="{ row }">
         <TableAction
-          v-if="!disabled"
           :actions="[
             {
               label: '删除',
diff --git a/apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue b/apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue
index 0aafa2fd2..ea4e118e8 100644
--- a/apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
   success: [rows: ErpPurchaseInApi.PurchaseIn[]];
 }>();
 
-const supplierId = ref<number>(); // 供应商ID
+const supplierId = ref<number>(); // 供应商 ID
 const open = ref<boolean>(false); // 弹窗是否打开
 const selectedRows = ref<ErpPurchaseInApi.PurchaseIn[]>([]); // 选中的行
 
diff --git a/apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue b/apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue
index 28460d516..a68cb945c 100644
--- a/apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
   success: [rows: ErpPurchaseReturnApi.PurchaseReturn[]];
 }>();
 
-const supplierId = ref<number>(); // 供应商ID
+const supplierId = ref<number>(); // 供应商 ID
 const open = ref<boolean>(false); // 弹窗是否打开
 const selectedRows = ref<ErpPurchaseReturnApi.PurchaseReturn[]>([]); // 选中的行
 
diff --git a/apps/web-antd/src/views/erp/finance/receipt/data.ts b/apps/web-antd/src/views/erp/finance/receipt/data.ts
index 6c860a5db..774ddb0b1 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/data.ts
+++ b/apps/web-antd/src/views/erp/finance/receipt/data.ts
@@ -170,7 +170,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -208,6 +210,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -385,7 +388,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/finance/receipt/index.vue b/apps/web-antd/src/views/erp/finance/receipt/index.vue
index 53e65c591..258de73fb 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/index.vue
+++ b/apps/web-antd/src/views/erp/finance/receipt/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:finance-receipt:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:finance-receipt:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/finance/receipt/modules/form.vue b/apps/web-antd/src/views/erp/finance/receipt/modules/form.vue
index 9a9a773be..f26f53ea5 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/modules/form.vue
+++ b/apps/web-antd/src/views/erp/finance/receipt/modules/form.vue
@@ -201,6 +201,7 @@ const [Modal, modalApi] = useVbenModal({
           @update:items="handleUpdateItems"
           @update:total-price="handleUpdateTotalPrice"
           @update:receipt-price="handleUpdateReceiptPrice"
+          class="w-full"
         />
       </template>
     </Form>
diff --git a/apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue b/apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue
index c0c02bba6..93cd3f4d8 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue
@@ -59,7 +59,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -234,7 +234,6 @@ defineExpose({ validate });
       </template>
       <template #actions="{ row }">
         <TableAction
-          v-if="!disabled"
           :actions="[
             {
               label: '删除',
diff --git a/apps/web-antd/src/views/erp/home/index.vue b/apps/web-antd/src/views/erp/home/index.vue
index 7b9d86e26..efb49045b 100644
--- a/apps/web-antd/src/views/erp/home/index.vue
+++ b/apps/web-antd/src/views/erp/home/index.vue
@@ -5,10 +5,10 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { Col, Row, Spin } from 'ant-design-vue';
 
-import SummaryCard from './modules/SummaryCard.vue';
-import TimeSummaryChart from './modules/TimeSummaryChart.vue';
+import SummaryCard from './modules/summary-card.vue';
+import TimeSummaryChart from './modules/time-summary-chart.vue';
 
-/** ERP首页 */
+/** ERP 首页 */
 defineOptions({ name: 'ErpHome' });
 
 const loading = ref(false); // 加载中
diff --git a/apps/web-antd/src/views/erp/home/modules/SummaryCard.vue b/apps/web-antd/src/views/erp/home/modules/summary-card.vue
similarity index 100%
rename from apps/web-antd/src/views/erp/home/modules/SummaryCard.vue
rename to apps/web-antd/src/views/erp/home/modules/summary-card.vue
diff --git a/apps/web-antd/src/views/erp/home/modules/TimeSummaryChart.vue b/apps/web-antd/src/views/erp/home/modules/time-summary-chart.vue
similarity index 93%
rename from apps/web-antd/src/views/erp/home/modules/TimeSummaryChart.vue
rename to apps/web-antd/src/views/erp/home/modules/time-summary-chart.vue
index 9bdc96eed..ef15eaaf1 100644
--- a/apps/web-antd/src/views/erp/home/modules/TimeSummaryChart.vue
+++ b/apps/web-antd/src/views/erp/home/modules/time-summary-chart.vue
@@ -26,17 +26,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 /** 销售统计数据 */
-const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
-const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
+const saleSummary = ref<ErpSaleStatisticsApi.SaleSummaryRespVO>(); // 销售概况统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(); // 销售时段统计
 const getSaleStatistics = async () => {
   saleSummary.value = await getSaleSummary();
   saleTimeSummaryList.value = await getSaleTimeSummary();
 };
 
 /** 采购统计数据 */
-const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(); // 采购概况统计
 const purchaseTimeSummaryList =
-  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]>(); // 采购时段统计
 const getPurchaseStatistics = async () => {
   purchaseSummary.value = await getPurchaseSummary();
   purchaseTimeSummaryList.value = await getPurchaseTimeSummary();
diff --git a/apps/web-antd/src/views/erp/purchase/in/data.ts b/apps/web-antd/src/views/erp/purchase/in/data.ts
index 9afdb4f39..2334ad260 100644
--- a/apps/web-antd/src/views/erp/purchase/in/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/in/data.ts
@@ -196,6 +196,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 /** 表单的明细表格列 */
 export function useFormItemColumns(
   formData?: any[],
+  disabled?: boolean,
 ): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
@@ -295,6 +296,7 @@ export function useFormItemColumns(
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -503,7 +505,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/purchase/in/index.vue b/apps/web-antd/src/views/erp/purchase/in/index.vue
index 2b4e3487a..fb87f1bfa 100644
--- a/apps/web-antd/src/views/erp/purchase/in/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/in/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:purchase-in:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:purchase-in:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue b/apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue
index a6415a62a..282466669 100644
--- a/apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue
@@ -65,7 +65,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(tableData.value),
+    columns: useFormItemColumns(tableData.value, props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -95,7 +95,7 @@ watch(
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：原数量、已入库动态列）
-    const columns = useFormItemColumns(tableData.value);
+    const columns = useFormItemColumns(tableData.value, props.disabled);
     await gridApi.grid.reloadColumn(columns || []);
   },
   {
@@ -258,7 +258,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index 254d41e87..a8cb484e7 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -160,7 +160,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -237,6 +239,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -434,7 +437,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       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 7e427c0c0..0f34f55df 100644
--- a/apps/web-antd/src/views/erp/purchase/order/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:purchase-order:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:purchase-order:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue
index f48897a5d..a1d768ab8 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue
@@ -61,7 +61,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -270,7 +270,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
diff --git a/apps/web-antd/src/views/erp/purchase/return/data.ts b/apps/web-antd/src/views/erp/purchase/return/data.ts
index 61cd082f0..ca3697d87 100644
--- a/apps/web-antd/src/views/erp/purchase/return/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/return/data.ts
@@ -195,6 +195,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 /** 表单的明细表格列 */
 export function useFormItemColumns(
   formData?: any[],
+  disabled?: boolean,
 ): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
@@ -295,6 +296,7 @@ export function useFormItemColumns(
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -490,12 +492,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
   ];
 }
+
 /** 列表的搜索表单 */
 export function useOrderGridFormSchema(): VbenFormSchema[] {
   return [
diff --git a/apps/web-antd/src/views/erp/purchase/return/index.vue b/apps/web-antd/src/views/erp/purchase/return/index.vue
index d45f4e1e0..aa4c3cc53 100644
--- a/apps/web-antd/src/views/erp/purchase/return/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/return/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:purchase-return:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:purchase-return:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue b/apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue
index 3c44718bd..d15302237 100644
--- a/apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue
@@ -65,7 +65,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(tableData.value),
+    columns: useFormItemColumns(tableData.value, props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -95,7 +95,7 @@ watch(
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：已入库、已退货动态列）
-    const columns = useFormItemColumns(tableData.value);
+    const columns = useFormItemColumns(tableData.value, props.disabled);
     await gridApi.grid.reloadColumn(columns || []);
   },
   {
@@ -260,7 +260,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
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 64cb81aaf..e012568b8 100644
--- a/apps/web-antd/src/views/erp/purchase/supplier/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/supplier/index.vue
@@ -124,7 +124,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/erp/sale/order/data.ts b/apps/web-antd/src/views/erp/sale/order/data.ts
index 03f0686a1..8764ce452 100644
--- a/apps/web-antd/src/views/erp/sale/order/data.ts
+++ b/apps/web-antd/src/views/erp/sale/order/data.ts
@@ -173,7 +173,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -251,6 +253,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -448,7 +451,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/sale/order/index.vue b/apps/web-antd/src/views/erp/sale/order/index.vue
index 08051a651..f0fa24c08 100644
--- a/apps/web-antd/src/views/erp/sale/order/index.vue
+++ b/apps/web-antd/src/views/erp/sale/order/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:sale-order:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:sale-order:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/sale/order/modules/item-form.vue b/apps/web-antd/src/views/erp/sale/order/modules/item-form.vue
index fc8bba129..faefd5db8 100644
--- a/apps/web-antd/src/views/erp/sale/order/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/sale/order/modules/item-form.vue
@@ -61,7 +61,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -270,7 +270,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
diff --git a/apps/web-antd/src/views/erp/sale/out/data.ts b/apps/web-antd/src/views/erp/sale/out/data.ts
index 54e0f56d0..9ad4cb2bb 100644
--- a/apps/web-antd/src/views/erp/sale/out/data.ts
+++ b/apps/web-antd/src/views/erp/sale/out/data.ts
@@ -216,6 +216,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 /** 表单的明细表格列 */
 export function useFormItemColumns(
   formData?: any[],
+  disabled?: boolean,
 ): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
@@ -316,6 +317,7 @@ export function useFormItemColumns(
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -517,7 +519,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/sale/out/index.vue b/apps/web-antd/src/views/erp/sale/out/index.vue
index cb38ad9fe..06f21645b 100644
--- a/apps/web-antd/src/views/erp/sale/out/index.vue
+++ b/apps/web-antd/src/views/erp/sale/out/index.vue
@@ -193,6 +193,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:sale-out:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -207,7 +208,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:sale-out:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/sale/out/modules/item-form.vue b/apps/web-antd/src/views/erp/sale/out/modules/item-form.vue
index 4e79e6e38..ba432144a 100644
--- a/apps/web-antd/src/views/erp/sale/out/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/sale/out/modules/item-form.vue
@@ -65,7 +65,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(tableData.value, props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -95,7 +95,7 @@ watch(
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：原数量、已出库动态列）
-    const columns = useFormItemColumns(tableData.value);
+    const columns = useFormItemColumns(tableData.value, props.disabled);
     await gridApi.grid.reloadColumn(columns || []);
   },
   {
@@ -258,7 +258,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
diff --git a/apps/web-antd/src/views/erp/sale/return/data.ts b/apps/web-antd/src/views/erp/sale/return/data.ts
index 47540944f..d0ceeab47 100644
--- a/apps/web-antd/src/views/erp/sale/return/data.ts
+++ b/apps/web-antd/src/views/erp/sale/return/data.ts
@@ -209,6 +209,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 /** 表单的明细表格列 */
 export function useFormItemColumns(
   formData?: any[],
+  disabled?: boolean,
 ): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
@@ -309,6 +310,7 @@ export function useFormItemColumns(
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -504,7 +506,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/sale/return/index.vue b/apps/web-antd/src/views/erp/sale/return/index.vue
index 5c4c297d6..9d63d0dd0 100644
--- a/apps/web-antd/src/views/erp/sale/return/index.vue
+++ b/apps/web-antd/src/views/erp/sale/return/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:sale-return:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:sale-return:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/sale/return/modules/item-form.vue b/apps/web-antd/src/views/erp/sale/return/modules/item-form.vue
index e07fe8a49..ccc0fa9ef 100644
--- a/apps/web-antd/src/views/erp/sale/return/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/sale/return/modules/item-form.vue
@@ -65,7 +65,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(tableData.value),
+    columns: useFormItemColumns(tableData.value, props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -95,7 +95,7 @@ watch(
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：已出库、已出库动态列）
-    const columns = useFormItemColumns(tableData.value);
+    const columns = useFormItemColumns(tableData.value, props.disabled);
     await gridApi.grid.reloadColumn(columns || []);
   },
   {
@@ -258,7 +258,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
diff --git a/apps/web-antd/src/views/erp/stock/check/data.ts b/apps/web-antd/src/views/erp/stock/check/data.ts
index 91a101b5e..f78fa4a38 100644
--- a/apps/web-antd/src/views/erp/stock/check/data.ts
+++ b/apps/web-antd/src/views/erp/stock/check/data.ts
@@ -85,7 +85,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -156,6 +158,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -296,7 +299,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/stock/check/index.vue b/apps/web-antd/src/views/erp/stock/check/index.vue
index c41d68332..3edef5eb3 100644
--- a/apps/web-antd/src/views/erp/stock/check/index.vue
+++ b/apps/web-antd/src/views/erp/stock/check/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:stock-check:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:stock-check:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/stock/check/modules/item-form.vue b/apps/web-antd/src/views/erp/stock/check/modules/item-form.vue
index 2a44ea909..46564c7f1 100644
--- a/apps/web-antd/src/views/erp/stock/check/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/stock/check/modules/item-form.vue
@@ -49,7 +49,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -265,7 +265,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
diff --git a/apps/web-antd/src/views/erp/stock/in/data.ts b/apps/web-antd/src/views/erp/stock/in/data.ts
index e5d88528a..5668018de 100644
--- a/apps/web-antd/src/views/erp/stock/in/data.ts
+++ b/apps/web-antd/src/views/erp/stock/in/data.ts
@@ -100,7 +100,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -163,6 +165,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
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 4d6910f71..4b362c25f 100644
--- a/apps/web-antd/src/views/erp/stock/in/index.vue
+++ b/apps/web-antd/src/views/erp/stock/in/index.vue
@@ -193,6 +193,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:stock-in:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -207,7 +208,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:stock-in:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/stock/in/modules/item-form.vue b/apps/web-antd/src/views/erp/stock/in/modules/item-form.vue
index b48a85421..4470b8600 100644
--- a/apps/web-antd/src/views/erp/stock/in/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/stock/in/modules/item-form.vue
@@ -49,7 +49,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -254,7 +254,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
diff --git a/apps/web-antd/src/views/erp/stock/move/data.ts b/apps/web-antd/src/views/erp/stock/move/data.ts
index 74c2db117..5cda3ed99 100644
--- a/apps/web-antd/src/views/erp/stock/move/data.ts
+++ b/apps/web-antd/src/views/erp/stock/move/data.ts
@@ -85,7 +85,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -154,6 +156,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -307,7 +310,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/stock/move/index.vue b/apps/web-antd/src/views/erp/stock/move/index.vue
index ad3214ac8..f5da612cd 100644
--- a/apps/web-antd/src/views/erp/stock/move/index.vue
+++ b/apps/web-antd/src/views/erp/stock/move/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:stock-move:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:stock-move:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/stock/move/modules/item-form.vue b/apps/web-antd/src/views/erp/stock/move/modules/item-form.vue
index 948a2073f..d8e0e5c0a 100644
--- a/apps/web-antd/src/views/erp/stock/move/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/stock/move/modules/item-form.vue
@@ -49,7 +49,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -275,7 +275,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
diff --git a/apps/web-antd/src/views/erp/stock/out/data.ts b/apps/web-antd/src/views/erp/stock/out/data.ts
index 3fb67b704..7906b03f5 100644
--- a/apps/web-antd/src/views/erp/stock/out/data.ts
+++ b/apps/web-antd/src/views/erp/stock/out/data.ts
@@ -102,7 +102,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -165,6 +167,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -331,7 +334,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/erp/stock/out/index.vue b/apps/web-antd/src/views/erp/stock/out/index.vue
index f323dec82..8cd238561 100644
--- a/apps/web-antd/src/views/erp/stock/out/index.vue
+++ b/apps/web-antd/src/views/erp/stock/out/index.vue
@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:stock-out:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:stock-out:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),
diff --git a/apps/web-antd/src/views/erp/stock/out/modules/item-form.vue b/apps/web-antd/src/views/erp/stock/out/modules/item-form.vue
index 7578a45ef..16ac8154a 100644
--- a/apps/web-antd/src/views/erp/stock/out/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/stock/out/modules/item-form.vue
@@ -49,7 +49,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -252,7 +252,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',
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 ea59edce1..e567fd2ec 100644
--- a/apps/web-antd/src/views/erp/stock/warehouse/index.vue
+++ b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
@@ -73,6 +73,7 @@ async function handleDefaultStatusChange(
         await updateWarehouseDefaultStatus(row.id!, newStatus);
         // 提示并返回成功
         message.success(`${text}默认成功`);
+        handleRefresh();
         resolve(true);
       })
       .catch(() => {
diff --git a/apps/web-antd/src/views/mall/promotion/combination/components/index.ts b/apps/web-antd/src/views/mall/promotion/combination/components/index.ts
index 91676dbc0..36d56af42 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/combination/components/index.ts
@@ -1,2 +1 @@
 export { default as CombinationShowcase } from './showcase.vue';
-
diff --git a/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue b/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
index 27b972ef5..1e61670d6 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
@@ -143,4 +143,3 @@ function emitActivityChange() {
     @change="handleActivitySelected"
   />
 </template>
-
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
index b09a30966..d889c7540 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
@@ -1,3 +1,5 @@
+/*  eslint-disable vue/one-component-per-file */
+// TODO @YunaiV eslint检测了
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
 import { defineComponent } from 'vue';
diff --git a/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue b/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
deleted file mode 100644
index 0b4cd6b11..000000000
--- a/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup>
-import type { Rule } from 'ant-design-vue/es/form';
-
-import type { Reply } from '#/views/mp/components';
-
-import { computed, ref } from 'vue';
-
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
-
-import { WxReply } from '#/views/mp/components';
-
-import { MsgType } from './types';
-
-defineOptions({ name: 'ReplyForm' });
-
-const props = defineProps<{
-  modelValue: any;
-  msgType: MsgType;
-  reply: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:reply', v: Reply): void;
-  (e: 'update:modelValue', v: any): void;
-}>();
-
-const reply = computed<Reply>({
-  get: () => props.reply,
-  set: (val) => emit('update:reply', val),
-});
-
-const replyForm = computed<any>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const formRef = ref(); // 表单 ref
-
-const RequestMessageTypes = [
-  'text',
-  'image',
-  'voice',
-  'video',
-  'shortvideo',
-  'location',
-  'link',
-]; // 允许选择的请求消息类型
-
-// 表单校验规则
-const rules = {
-  requestKeyword: [
-    { required: true, message: '请求的关键字不能为空', trigger: 'blur' },
-  ] as Rule[],
-  requestMatch: [
-    { required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
-  ] as Rule[],
-} as Record<string, Rule[]>;
-
-defineExpose({
-  resetFields: () => formRef.value?.resetFields(),
-  validate: async () => {
-    await formRef.value?.validate();
-  },
-});
-</script>
-
-<template>
-  <!-- TODO @hw：可以使用 <Form class="mx-4" /> 这种组件形式么？ 融合到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules/form.vue -->
-  <div>
-    <Form
-      ref="formRef"
-      :model="replyForm"
-      :rules="rules"
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
-    >
-      <FormItem
-        label="消息类型"
-        name="requestMessageType"
-        v-if="msgType === MsgType.Message"
-      >
-        <Select
-          v-model:value="replyForm.requestMessageType"
-          placeholder="请选择"
-        >
-          <SelectOption
-            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter(
-              (d) => RequestMessageTypes.includes(d.value as string),
-            )"
-            :key="dict.value"
-            :value="dict.value"
-          >
-            {{ dict.label }}
-          </SelectOption>
-        </Select>
-      </FormItem>
-      <FormItem
-        label="匹配类型"
-        name="requestMatch"
-        v-if="msgType === MsgType.Keyword"
-      >
-        <Select
-          v-model:value="replyForm.requestMatch"
-          placeholder="请选择匹配类型"
-          allow-clear
-        >
-          <SelectOption
-            v-for="dict in getDictOptions(
-              DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
-              'number',
-            )"
-            :key="String(dict.value)"
-            :value="dict.value"
-          >
-            {{ dict.label }}
-          </SelectOption>
-        </Select>
-      </FormItem>
-      <FormItem
-        label="关键词"
-        name="requestKeyword"
-        v-if="msgType === MsgType.Keyword"
-      >
-        <Input
-          v-model:value="replyForm.requestKeyword"
-          placeholder="请输入内容"
-          allow-clear
-        />
-      </FormItem>
-      <FormItem label="回复消息">
-        <WxReply v-model="reply" />
-      </FormItem>
-    </Form>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/mp/autoReply/data.ts b/apps/web-antd/src/views/mp/autoReply/data.ts
index 727e50de7..18fb7105e 100644
--- a/apps/web-antd/src/views/mp/autoReply/data.ts
+++ b/apps/web-antd/src/views/mp/autoReply/data.ts
@@ -1,13 +1,30 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
 import { markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
-import { WxAccountSelect } from '#/views/mp/components';
+import { getSimpleAccountList } from '#/api/mp/account';
+import { WxReply } from '#/views/mp/components';
 
-import { MsgType } from './components/types';
+import { MsgType } from './types';
+
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+const RequestMessageTypes = new Set([
+  'image',
+  'link',
+  'location',
+  'shortvideo',
+  'text',
+  'video',
+  'voice',
+]); // 允许选择的请求消息类型
 
 /** 获取表格列配置 */
 export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
@@ -76,13 +93,84 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
   return columns;
 }
 
+/** 新增/修改的表单 */
+export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
+  const schema: VbenFormSchema[] = [];
+
+  // 消息类型（仅消息回复显示）
+  if (msgType === MsgType.Message) {
+    schema.push({
+      fieldName: 'requestMessageType',
+      label: '消息类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择',
+        options: getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter((d) =>
+          RequestMessageTypes.has(d.value as string),
+        ),
+      },
+    });
+  }
+
+  // 匹配类型（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    schema.push({
+      fieldName: 'requestMatch',
+      label: '匹配类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择匹配类型',
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+          'number',
+        ),
+      },
+      rules: 'required',
+    });
+  }
+
+  // 关键词（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    schema.push({
+      fieldName: 'requestKeyword',
+      label: '关键词',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入内容',
+        allowClear: true,
+      },
+      rules: 'required',
+    });
+  }
+  // 回复消息
+  schema.push({
+    fieldName: 'reply',
+    label: '回复消息',
+    component: markRaw(WxReply),
+    // componentProps: {
+    //   modelValue: { type: 'video', content: '12456' },
+    // },
+    modelPropName: 'modelValue',
+  });
+  return schema;
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(WxAccountSelect),
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mp/autoReply/index.vue b/apps/web-antd/src/views/mp/autoReply/index.vue
index 05c531d86..f3642167f 100644
--- a/apps/web-antd/src/views/mp/autoReply/index.vue
+++ b/apps/web-antd/src/views/mp/autoReply/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
@@ -16,20 +16,13 @@ import {
 } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
 
-import ReplyContentCell from './components/ReplyTable.vue';
-import { MsgType } from './components/types';
 import { useGridColumns, useGridFormSchema } from './data';
+import ReplyContentCell from './modules/content.vue';
 import Form from './modules/form.vue';
+import { MsgType } from './types';
 
 defineOptions({ name: 'MpAutoReply' });
 
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query().then(() => {
-    updateTableDataLength();
-  });
-}
-
 const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
 
 /** 切换回复类型 */
@@ -46,7 +39,6 @@ async function onTabChange(tabName: any) {
   }
   // 查询数据
   await gridApi.query();
-  updateTableDataLength();
 }
 
 /** 新增按钮操作 */
@@ -54,7 +46,6 @@ async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   formModalApi
     .setData({
-      isCreating: true,
       msgType: Number(msgType.value) as MsgType,
       accountId: formValues.accountId,
     })
@@ -66,8 +57,8 @@ async function handleEdit(row: any) {
   const data = (await getAutoReply(row.id)) as any;
   formModalApi
     .setData({
-      isCreating: false,
       msgType: Number(msgType.value) as MsgType,
+      accountId: row.accountId,
       row: data,
     })
     .open();
@@ -83,9 +74,7 @@ async function handleDelete(row: any) {
   try {
     await deleteAutoReply(row.id);
     message.success('删除成功');
-    await gridApi.query();
-    // 查询完成后更新数据长度
-    updateTableDataLength();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -116,7 +105,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           });
         },
       },
-      autoLoad: false, // 禁用自动加载，等表单初始化完成后再加载
     },
     rowConfig: {
       keyField: 'id',
@@ -129,49 +117,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<any>,
 });
 
-// TODO @hw：按道理说，不太需呀哦这个？可以微信讨论下哈；
-const tableDataLength = ref(0); // 表格数据长度，用于判断是否显示新增按钮
-
-/** 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环） */
-function updateTableDataLength() {
-  try {
-    if (!gridApi.grid) {
-      return;
-    }
-    const tableData = gridApi.grid.getTableData();
-    tableDataLength.value = tableData?.tableData?.length || 0;
-  } catch {
-    tableDataLength.value = 0;
-  }
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
 }
 
-// TODO @hw：这个要不改成，直接 tableaction 那判断；
 // 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
 const showCreateButton = computed(() => {
   if (Number(msgType.value) !== MsgType.Follow) {
     return true;
   }
-  return tableDataLength.value <= 0;
+  try {
+    const tableData = gridApi.grid?.getTableData();
+    return (tableData?.tableData?.length || 0) <= 0;
+  } catch {
+    return true;
+  }
 });
 
-// TODO @hw：看看能不能参考 tag/index.vue 简化下
-/** 页面挂载后，等待表单初始化完成再加载数据 */
-onMounted(async () => {
-  // 等待 WxAccountSelect 组件加载并设置默认值
-  await nextTick();
-  if (!gridApi.formApi) {
-    return;
-  }
-  const formValues = await gridApi.formApi.getValues();
-  // 如果 accountId 有值，说明已经准备好了
-  if (formValues.accountId) {
-    // 设置为最新提交的值
-    gridApi.formApi.setLatestSubmissionValues(formValues);
-    // 触发首次查询
-    await gridApi.query();
-    updateTableDataLength();
-  }
-});
+// DONE @hw：看看能不能参考 tag/index.vue 简化下
 </script>
 
 <template>
@@ -181,23 +145,26 @@ onMounted(async () => {
     </template>
 
     <FormModal @success="handleRefresh" />
-
-    <Grid>
+    <Grid table-title="自动回复列表">
+      <!-- 第一层：公众号选择（在表单中） -->
+      <!-- 第二层：tab 切换 -->
       <template #toolbar-actions>
-        <!-- tab 切换 -->
-        <Tabs v-model:active-key="msgType" class="w-full" @change="onTabChange">
-          <!-- tab 项 -->
+        <Tabs
+          v-model:active-key="msgType"
+          class="w-full"
+          @change="(activeKey) => onTabChange(activeKey as string)"
+        >
           <Tabs.TabPane :key="String(MsgType.Follow)">
             <template #tab>
               <Row align="middle">
-                <IconifyIcon icon="lucide:star" class="mr-2px" /> 关注时回复
+                <IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
               </Row>
             </template>
           </Tabs.TabPane>
           <Tabs.TabPane :key="String(MsgType.Message)">
             <template #tab>
               <Row align="middle">
-                <IconifyIcon icon="lucide:message-circle" class="mr-2px" />
+                <IconifyIcon icon="ep:chat-line-round" class="mr-2px" />
                 消息回复
               </Row>
             </template>
@@ -205,13 +172,13 @@ onMounted(async () => {
           <Tabs.TabPane :key="String(MsgType.Keyword)">
             <template #tab>
               <Row align="middle">
-                <IconifyIcon icon="lucide:newspaper" class="mr-2px" />
-                关键词回复
+                <IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
               </Row>
             </template>
           </Tabs.TabPane>
         </Tabs>
       </template>
+      <!-- 第三层：table -->
       <template #toolbar-tools>
         <TableAction
           v-if="showCreateButton"
diff --git a/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue b/apps/web-antd/src/views/mp/autoReply/modules/content.vue
similarity index 88%
rename from apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
rename to apps/web-antd/src/views/mp/autoReply/modules/content.vue
index d17873042..0ce483ebe 100644
--- a/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/content.vue
@@ -5,7 +5,7 @@ import {
   WxVideoPlayer,
   WxVoicePlayer,
 } from '#/views/mp/components';
-// TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
+
 defineOptions({ name: 'ReplyContentCell' });
 
 const props = defineProps<{
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/form.vue b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
index 38d5fa386..388f78e58 100644
--- a/apps/web-antd/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
@@ -1,56 +1,84 @@
 <script lang="ts" setup>
 import type { Reply } from '#/views/mp/components';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/components';
+import { ReplyType } from '#/views/mp/components/constants';
 
-import ReplyForm from '../components/ReplyForm.vue';
-import { MsgType } from '../components/types';
+import { useFormSchema } from '../data';
+import { MsgType } from '../types';
 
 const emit = defineEmits(['success']);
 
-const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
-
-const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
-const replyForm = ref<any>({});
-const reply = ref<Reply>({
-  type: ReplyType.Text,
-  accountId: -1,
-});
+const formData = ref<{
+  accountId?: number;
+  msgType: MsgType;
+  row?: any;
+}>();
 const getTitle = computed(() => {
-  return formData.value?.isCreating
-    ? $t('ui.actionTitle.create', ['自动回复'])
-    : $t('ui.actionTitle.edit', ['自动回复']);
+  return formData.value?.row?.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(MsgType.Keyword),
+  showDefaultActions: false,
+});
+
+// 注意：schema 的更新现在在 onOpenChange 中手动处理，避免时序问题
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    await formRef.value?.validate();
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
 
     // 处理回复消息
-    const submitForm: any = { ...replyForm.value };
-    submitForm.responseMessageType = reply.value.type;
-    submitForm.responseContent = reply.value.content;
-    submitForm.responseMediaId = reply.value.mediaId;
-    submitForm.responseMediaUrl = reply.value.url;
-    submitForm.responseTitle = reply.value.title;
-    submitForm.responseDescription = reply.value.description;
-    submitForm.responseThumbMediaId = reply.value.thumbMediaId;
-    submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
-    submitForm.responseArticles = reply.value.articles;
-    submitForm.responseMusicUrl = reply.value.musicUrl;
-    submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
+    const submitForm: any = await formApi.getValues();
+    // 确保 type 字段使用当前选中的 tab 值
+    submitForm.type = formData.value?.msgType;
+    // 确保 accountId 字段存在
+    submitForm.accountId = formData.value?.accountId;
+    // 编辑模式下，确保 id 字段存在（从 row 中获取，因为表单 schema 中没有 id 字段）
+    if (formData.value?.row?.id && !submitForm.id) {
+      submitForm.id = formData.value.row.id;
+    }
+    const reply = submitForm.reply as Reply;
+    if (reply) {
+      submitForm.responseMessageType = reply.type;
+      submitForm.responseContent = reply.content;
+      submitForm.responseMediaId = reply.mediaId;
+      submitForm.responseMediaUrl = reply.url;
+      submitForm.responseTitle = reply.title;
+      submitForm.responseDescription = reply.description;
+      submitForm.responseThumbMediaId = reply.thumbMediaId;
+      submitForm.responseThumbMediaUrl = reply.thumbMediaUrl;
+      submitForm.responseArticles = reply.articles;
+      submitForm.responseMusicUrl = reply.musicUrl;
+      submitForm.responseHqMusicUrl = reply.hqMusicUrl;
+    }
+    delete submitForm.reply;
 
     modalApi.lock();
     try {
-      if (replyForm.value.id === undefined) {
+      if (submitForm.id === undefined) {
         await createAutoReply(submitForm);
         message.success('新增成功');
       } else {
@@ -66,50 +94,34 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
-      replyForm.value = {};
-      reply.value = {
-        type: ReplyType.Text,
-        accountId: -1,
-      };
       return;
     }
     // 加载数据
     const data = modalApi.getData<{
       accountId?: number;
-      isCreating: boolean;
       msgType: MsgType;
       row?: any;
     }>();
     if (!data) {
       return;
     }
-    formData.value = data;
+    // 先更新 schema，确保表单字段正确
+    formApi.setState({ schema: useFormSchema(data.msgType) });
+    // 等待 schema 更新完成
+    await nextTick();
 
-    if (data.isCreating) {
-      // 新建：初始化表单
-      replyForm.value = {
-        id: undefined,
-        accountId: data.accountId || -1,
-        type: data.msgType,
-        requestKeyword: undefined,
-        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
-        requestMessageType: undefined,
-      };
-      reply.value = {
-        type: ReplyType.Text,
-        accountId: data.accountId || -1,
-      };
-    } else if (data.row) {
+    formData.value = data;
+    if (data.row?.id) {
       // 编辑：加载数据
       const rowData = data.row;
-      replyForm.value = { ...rowData };
-      delete replyForm.value.responseMessageType;
-      delete replyForm.value.responseContent;
-      delete replyForm.value.responseMediaId;
-      delete replyForm.value.responseMediaUrl;
-      delete replyForm.value.responseDescription;
-      delete replyForm.value.responseArticles;
-      reply.value = {
+      const formValues: any = { ...rowData };
+      // delete formValues.responseMessageType;
+      // delete formValues.responseContent;
+      // delete formValues.responseMediaId;
+      // delete formValues.responseMediaUrl;
+      // delete formValues.responseDescription;
+      // delete formValues.responseArticles;
+      formValues.reply = {
         type: rowData.responseMessageType,
         accountId: data.accountId || -1,
         content: rowData.responseContent,
@@ -123,20 +135,29 @@ const [Modal, modalApi] = useVbenModal({
         musicUrl: rowData.responseMusicUrl,
         hqMusicUrl: rowData.responseHqMusicUrl,
       };
+      await formApi.setValues(formValues);
+    } else {
+      // 新建：初始化表单
+      const initialValues: any = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+        reply: {
+          type: ReplyType.Text,
+          accountId: data.accountId || -1,
+        },
+      };
+      await formApi.setValues(initialValues);
     }
   },
 });
 </script>
 
 <template>
-  <!-- TODO @hw：可以使用 <Form class="mx-4" /> 这种组件形式么？ -->
   <Modal :title="getTitle" class="w-4/5">
-    <ReplyForm
-      v-if="formData"
-      v-model="replyForm"
-      v-model:reply="reply"
-      :msg-type="formData.msgType"
-      ref="formRef"
-    />
+    <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mp/autoReply/components/types.ts b/apps/web-antd/src/views/mp/autoReply/types.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/autoReply/components/types.ts
rename to apps/web-antd/src/views/mp/autoReply/types.ts
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue b/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
index d2331f2d6..0c2849175 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
@@ -35,17 +35,41 @@ const emit = defineEmits<{
 }>();
 
 interface Props {
-  modelValue: Reply;
+  modelValue: Reply | undefined;
   newsType?: NewsType;
 }
 
+// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
+const defaultReply: Reply = {
+  accountId: -1,
+  type: ReplyType.Text,
+};
+
 const reply = computed<Reply>({
-  get: () => props.modelValue,
+  get: () => props.modelValue || defaultReply,
   set: (val) => emit('update:modelValue', val),
 });
 
 const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
-const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
+const currentTab = ref<ReplyType>(props.modelValue?.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
+
+// 监听 modelValue 变化，同步更新 currentTab 和缓存
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue?.type) {
+      // 如果类型变化，更新 currentTab
+      if (newValue.type !== currentTab.value) {
+        currentTab.value = newValue.type;
+      }
+      // 如果 modelValue 有数据，更新对应 tab 的缓存
+      if (newValue.type) {
+        tabCache.set(newValue.type, { ...newValue });
+      }
+    }
+  },
+  { immediate: true, deep: true },
+);
 
 watch(
   currentTab,
@@ -56,16 +80,30 @@ watch(
       return;
     }
 
-    tabCache.set(oldTab, unref(reply));
+    // 保存旧tab的数据到缓存
+    const oldReply = unref(reply);
+    // 只有当旧tab的reply有实际数据时才缓存（避免缓存空数据）
+    if (oldReply && oldTab === oldReply.type) {
+      tabCache.set(oldTab, oldReply);
+    }
 
     // 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
     const temp = tabCache.get(newTab);
     if (temp) {
       reply.value = temp;
     } else {
-      const newData = createEmptyReply(reply);
-      newData.type = newTab;
-      reply.value = newData;
+      // 如果当前reply的类型就是新tab的类型，说明这是从外部传入的数据，应该保留
+      const currentReply = unref(reply);
+      if (currentReply && currentReply.type === newTab) {
+        // 这是从外部传入的数据，直接缓存并使用
+        tabCache.set(newTab, currentReply);
+        // 不需要修改reply.value，因为它已经是正确的了
+      } else {
+        // 创建新的空reply
+        const newData = createEmptyReply(reply);
+        newData.type = newTab;
+        reply.value = newData;
+      }
     }
   },
   {
diff --git a/apps/web-antd/src/views/mp/draft/data.ts b/apps/web-antd/src/views/mp/draft/data.ts
index 8eccaa398..badc48f26 100644
--- a/apps/web-antd/src/views/mp/draft/data.ts
+++ b/apps/web-antd/src/views/mp/draft/data.ts
@@ -1,9 +1,12 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
-import { markRaw } from 'vue';
+import { getSimpleAccountList } from '#/api/mp/account';
 
-import { WxAccountSelect } from '#/views/mp/components';
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
 
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
@@ -14,12 +17,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 300,
       slots: { default: 'content' },
     },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
     {
       title: '操作',
       width: 200,
@@ -30,13 +27,21 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 }
 
 /** 列表的搜索表单 */
-// TODO @hw：这里的公众号选择，要改参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
+//  DONE @hw：这里的公众号选择，要改参考 /apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(WxAccountSelect),
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index 52a353103..21a04f4c1 100644
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import type { Article } from './components/types';
+import type { Article } from './modules/types';
 
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { nextTick, onMounted, provide, ref, watch } from 'vue';
-
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
@@ -12,13 +10,16 @@ import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDraft, getDraftPage } from '#/api/mp/draft';
+// DONE @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
 import { submitFreePublish } from '#/api/mp/freePublish';
-import { createEmptyNewsItem } from '#/views/mp/draft/components/types';
+import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
-import DraftTableCell from './components/draft-table.vue';
 import { useGridColumns, useGridFormSchema } from './data';
+import DraftTableCell from './modules/draft-table.vue';
 import Form from './modules/form.vue';
 
+// DONE @hw：参考 tag/index.vue 放到 formValues.accountId;
+// DONE @hw：看看这个 watch、provide 能不能简化掉；
 defineOptions({ name: 'MpDraft' });
 
 /** 刷新表格 */
@@ -31,120 +32,11 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-// TODO @hw：下面的方法，放到这个前面，和别的保持一致；
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-    submitOnChange: true,
-  },
-  gridOptions: {
-    columns: useGridColumns(),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          // 更新 accountId
-          if (formValues?.accountId) {
-            accountId.value = formValues.accountId;
-          }
-          const drafts = await getDraftPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-          // 处理 API 返回的数据，兼容不同的数据结构
-          // TODO @wx：看 yudao-ui-admin-vue3/src/views/mp/draft/index.vue 项目里，转换没这么复杂。。。是不是这里有办法简化下？
-          const formattedList: Article[] = drafts.list.map((draft: any) => {
-            // 如果已经是 content.newsItem 格式，直接使用
-            if (draft.content?.newsItem) {
-              const newsItem = draft.content.newsItem.map((item: any) => ({
-                ...item,
-                picUrl: item.thumbUrl || item.picUrl,
-              }));
-              return {
-                mediaId: draft.mediaId,
-                content: {
-                  newsItem,
-                },
-                updateTime:
-                  draft.updateTime ||
-                  (draft.createTime
-                    ? new Date(draft.createTime).getTime()
-                    : Date.now()),
-              };
-            }
-            // 如果是 articles 格式，转换为 content.newsItem 格式
-            if (draft.articles) {
-              const newsItem = draft.articles.map((article: any) => ({
-                ...article,
-                thumbUrl: article.thumbUrl || article.thumbMediaId,
-                picUrl: article.thumbUrl || article.thumbMediaId,
-              }));
-              return {
-                mediaId: draft.mediaId,
-                content: {
-                  newsItem,
-                },
-                updateTime:
-                  draft.updateTime ||
-                  (draft.createTime
-                    ? new Date(draft.createTime).getTime()
-                    : Date.now()),
-              };
-            }
-            // 默认返回空结构
-            return {
-              mediaId: draft.mediaId || '',
-              content: {
-                newsItem: [],
-              },
-              updateTime: draft.updateTime || Date.now(),
-            };
-          });
-          return {
-            page: {
-              total: drafts.total,
-            },
-            result: formattedList,
-          };
-        },
-      },
-      autoLoad: false,
-    },
-    rowConfig: {
-      keyField: 'mediaId',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<Article>,
-});
-
-// 提供 accountId 给子组件
-// TODO @hw：参考 tag/index.vue 放到 formValues.accountId;
-const accountId = ref<number>(-1);
-
-// 监听表单提交，更新 accountId
-// TODO @hw：看看这个 watch、provide 能不能简化掉；
-watch(
-  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
-  (newAccountId) => {
-    if (newAccountId !== undefined) {
-      accountId.value = newAccountId;
-    }
-  },
-);
-
-provide('accountId', accountId);
-
 /** 新增按钮操作 */
 async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     message.warning('请先选择公众号');
     return;
   }
@@ -161,7 +53,7 @@ async function handleCreate() {
 async function handleEdit(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     message.warning('请先选择公众号');
     return;
   }
@@ -170,7 +62,7 @@ async function handleEdit(row: Article) {
       isCreating: false,
       accountId,
       mediaId: row.mediaId,
-      newsList: structuredClone(row.content.newsItem),
+      newsList: row.content.newsItem,
     })
     .open();
 }
@@ -179,8 +71,8 @@ async function handleEdit(row: Article) {
 async function handlePublish(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  // TODO @hw：看看能不能去掉 -1 的判断哈？
-  if (!accountId || accountId === -1) {
+  // DONE @hw：看看能不能去掉 -1 的判断哈？
+  if (!accountId) {
     message.warning('请先选择公众号');
     return;
   }
@@ -193,11 +85,10 @@ async function handlePublish(row: Article) {
     content: '发布中...',
     duration: 0,
   });
-  // TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
   try {
     await submitFreePublish(accountId, row.mediaId);
     message.success('发布成功');
-    await gridApi.query();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -207,7 +98,7 @@ async function handlePublish(row: Article) {
 async function handleDelete(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     message.warning('请先选择公众号');
     return;
   }
@@ -219,25 +110,57 @@ async function handleDelete(row: Article) {
   try {
     await deleteDraft(accountId, row.mediaId);
     message.success('删除成功');
-    await gridApi.query();
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-// TODO @hw：看看能不能参考 tag/index.vue 简化下
-// 页面挂载后，等待表单初始化完成再加载数据
-onMounted(async () => {
-  await nextTick();
-  if (gridApi.formApi) {
-    const formValues = await gridApi.formApi.getValues();
-    if (formValues.accountId) {
-      accountId.value = formValues.accountId;
-      gridApi.formApi.setLatestSubmissionValues(formValues);
-      await gridApi.query();
-    }
-  }
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const drafts = await getDraftPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
+          drafts.list.forEach((draft: any) => {
+            const newsList = draft.content?.newsItem;
+            if (newsList) {
+              newsList.forEach((item: any) => {
+                item.picUrl = item.thumbUrl || item.picUrl;
+              });
+            }
+          });
+          return {
+            list: drafts.list as unknown as Article[],
+            total: drafts.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Article>,
 });
+
+// DONE @hw：看看能不能参考 tag/index.vue 简化下
 </script>
 
 <template>
@@ -305,7 +228,12 @@ onMounted(async () => {
   .vxe-table--body {
     .vxe-body--column {
       .vxe-cell {
+        height: auto !important;
         padding: 0;
+
+        img {
+          width: 300px !important;
+        }
       }
     }
   }
diff --git a/apps/web-antd/src/views/mp/draft/components/cover-select.vue b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
similarity index 61%
rename from apps/web-antd/src/views/mp/draft/components/cover-select.vue
rename to apps/web-antd/src/views/mp/draft/modules/cover-select.vue
index cc977b8d4..b5a20f62e 100644
--- a/apps/web-antd/src/views/mp/draft/components/cover-select.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
@@ -11,7 +11,6 @@ import { useAccessStore } from '@vben/stores';
 import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { WxMaterialSelect } from '#/views/mp/components';
 
 const props = defineProps<{
   isFirst: boolean;
@@ -33,8 +32,9 @@ const newsItem = computed<NewsItem>({
   },
 });
 
+const dialogVisible = ref(false);
+
 const accountId = inject<number>('accountId');
-const showImageDialog = ref(false);
 
 const fileList = ref<UploadFile[]>([]);
 interface UploadData {
@@ -46,27 +46,31 @@ const uploadData: UploadData = reactive({
   accountId: accountId!,
 });
 
-/** 素材选择完成事件*/
+function handleOpenDialog() {
+  dialogVisible.value = true;
+}
+
+/** 素材选择完成事件 */
 function onMaterialSelected(item: any) {
-  showImageDialog.value = false;
+  dialogVisible.value = false;
   newsItem.value.thumbMediaId = item.mediaId;
   newsItem.value.thumbUrl = item.url;
 }
-// TODO @hw：注释都补充下哈；
-function onBeforeUpload(file: UploadFile) {
-  return useBeforeUpload(UploadType.Image, 2)(file as any);
-}
+// DONE @hw：注释都补充下哈；
+/** 上传前校验 */
+const onBeforeUpload = (file: UploadFile) =>
+  useBeforeUpload(UploadType.Image, 2)(file as any);
 
-// TODO @hw：注释都补充下哈；
+// DONE @hw：注释都补充下哈；
+/** 上传错误处理 */
 function onUploadChange(info: any) {
-  if (info.file.status === 'done') {
-    onUploadSuccess(info.file.response || info.file);
-  } else if (info.file.status === 'error') {
+  if (info.file.status === 'error') {
     onUploadError(info.file.error || new Error('上传失败'));
   }
 }
 
-// TODO @hw：注释都补充下哈；
+// DONE @hw：注释都补充下哈；
+/** 上传成功处理 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
     message.error(`上传出错：${res.msg}`);
@@ -80,7 +84,8 @@ function onUploadSuccess(res: any) {
   newsItem.value.thumbUrl = res.data.url;
 }
 
-// TODO @hw：注释都补充下哈；
+// DONE @hw：注释都补充下哈；
+/** 上传失败处理 */
 function onUploadError(err: Error) {
   message.error(`上传失败: ${err.message}`);
 }
@@ -89,21 +94,22 @@ function onUploadError(err: Error) {
 <template>
   <div>
     <p>封面:</p>
-    <!-- TODO @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
-    <div class="thumb-div">
+    <!-- DONE @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
+    <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+    <div class="flex w-full flex-col items-center justify-center text-center">
       <Image
         v-if="newsItem.thumbUrl"
-        style="width: 300px; max-height: 300px"
+        class="max-h-[300px] w-[300px]"
         :src="newsItem.thumbUrl"
         :preview="false"
       />
       <IconifyIcon
         v-else
         icon="lucide:plus"
-        class="avatar-uploader-icon"
-        :class="isFirst ? 'avatar' : 'avatar1'"
+        class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
+        :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
       />
-      <div class="thumb-but">
+      <div class="m-[5px]">
         <div class="flex items-center justify-center">
           <Upload
             :action="UPLOAD_URL"
@@ -111,35 +117,35 @@ function onUploadError(err: Error) {
             :file-list="fileList"
             :data="{ ...uploadData }"
             :before-upload="onBeforeUpload"
+            @success="onUploadSuccess"
             @change="onUploadChange"
           >
             <template #default>
               <Button size="small" type="primary">本地上传</Button>
             </template>
           </Upload>
-          <!-- TODO @hw：tindwind -->
           <Button
             size="small"
             type="primary"
-            @click="showImageDialog = true"
-            style="margin-left: 5px"
+            class="ml-[5px]"
+            @click="handleOpenDialog"
           >
             素材库选择
           </Button>
         </div>
 
-        <div class="upload-tip">
+        <div class="ml-[5px] mt-[5px] text-xs text-[#999]">
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
         </div>
       </div>
-      <!-- TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
+      <!-- DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
       <Modal
-        title="选择图片"
-        v-model:open="showImageDialog"
-        width="80%"
-        destroy-on-close
+        v-model:open="dialogVisible"
+        title="图片选择"
+        width="65%"
+        :footer="null"
       >
-        <WxMaterialSelect
+        <MaterialSelect
           type="image"
           :account-id="accountId!"
           @select-material="onMaterialSelected"
@@ -148,47 +154,3 @@ function onUploadError(err: Error) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-.upload-tip {
-  margin-top: 5px;
-  margin-left: 5px;
-  font-size: 12px;
-  color: #999;
-}
-
-.thumb-div {
-  display: inline-block;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  text-align: center;
-
-  .avatar-uploader-icon {
-    width: 120px;
-    height: 120px;
-    font-size: 28px;
-    line-height: 120px;
-    color: #8c939d;
-    text-align: center;
-    border: 1px solid #d9d9d9;
-  }
-
-  .avatar {
-    width: 230px;
-    height: 120px;
-  }
-
-  .avatar1 {
-    width: 120px;
-    height: 120px;
-  }
-
-  .thumb-but {
-    margin: 5px;
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/draft/components/draft-table.vue b/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/draft/components/draft-table.vue
rename to apps/web-antd/src/views/mp/draft/modules/draft-table.vue
diff --git a/apps/web-antd/src/views/mp/draft/modules/form.vue b/apps/web-antd/src/views/mp/draft/modules/form.vue
index 25ce21bc7..9320031bd 100644
--- a/apps/web-antd/src/views/mp/draft/modules/form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/form.vue
@@ -1,35 +1,38 @@
 <script lang="ts" setup>
-import type { NewsItem } from '../components/types';
+import type { NewsItem } from './types';
 
-import { computed, ref } from 'vue';
+import { computed, provide, ref } from 'vue';
 
-import { confirm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 
 import { message, Spin } from 'ant-design-vue';
 
 import { createDraft, updateDraft } from '#/api/mp/draft';
 
-import NewsForm from '../components/news-form.vue';
+import NewsForm from './news-form.vue';
 
 const emit = defineEmits(['success']);
 
+// DONE @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
 const formData = ref<{
   accountId: number;
-  // TODO @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
-  isCreating: boolean;
   mediaId?: string;
   newsList?: NewsItem[];
 }>();
 const newsList = ref<NewsItem[]>([]);
-// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
+// DONE @hw：不需要 isSave，通过 modal 去 lock 就好啦。
 const isSubmitting = ref(false);
-// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
-const isSaved = ref(false);
 
 const getTitle = computed(() => {
-  return formData.value?.isCreating ? '新建图文' : '修改图文';
+  return formData.value?.mediaId ? '修改图文' : '新建图文';
 });
 
+// 提供 accountId 给子组件
+provide(
+  'accountId',
+  computed(() => formData.value?.accountId),
+);
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     if (!formData.value) {
@@ -39,18 +42,17 @@ const [Modal, modalApi] = useVbenModal({
     isSubmitting.value = true;
     modalApi.lock();
     try {
-      if (formData.value.isCreating) {
-        await createDraft(formData.value.accountId, newsList.value);
-        message.success('新增成功');
-      } else if (formData.value.mediaId) {
+      if (formData.value.mediaId) {
         await updateDraft(
           formData.value.accountId,
           formData.value.mediaId,
           newsList.value,
         );
         message.success('更新成功');
+      } else {
+        await createDraft(formData.value.accountId, newsList.value);
+        message.success('新增成功');
       }
-      isSaved.value = true;
       await modalApi.close();
       emit('success');
     } finally {
@@ -58,26 +60,12 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-  async onBeforeClose() {
-    // 如果已经成功保存，直接关闭，不显示提示
-    if (isSaved.value) {
-      return true;
-    }
-    try {
-      await confirm('修改内容可能还未保存，确定关闭吗?');
-      return true;
-    } catch {
-      return false;
-    }
-  },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
       newsList.value = [];
-      isSaved.value = false;
       return;
     }
-    isSaved.value = false;
     const data = modalApi.getData<{
       accountId: number;
       isCreating: boolean;
@@ -87,7 +75,11 @@ const [Modal, modalApi] = useVbenModal({
     if (!data) {
       return;
     }
-    formData.value = data;
+    formData.value = {
+      accountId: data.accountId,
+      mediaId: data.mediaId,
+      newsList: data.newsList,
+    };
     newsList.value = data.newsList || [];
   },
 });
@@ -99,7 +91,7 @@ const [Modal, modalApi] = useVbenModal({
       <NewsForm
         v-if="formData"
         v-model="newsList"
-        :is-creating="formData.isCreating"
+        :is-creating="!formData.mediaId"
       />
     </Spin>
   </Modal>
diff --git a/apps/web-antd/src/views/mp/draft/components/news-form.vue b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
similarity index 68%
rename from apps/web-antd/src/views/mp/draft/components/news-form.vue
rename to apps/web-antd/src/views/mp/draft/modules/news-form.vue
index 365137fd5..703974471 100644
--- a/apps/web-antd/src/views/mp/draft/components/news-form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
@@ -44,8 +44,8 @@ const activeNewsItem = computed(() => {
   return item;
 });
 
-// TODO @hw：注释使用 /** */
-// 将图文向下移动
+// DONE @hw：注释使用 /** */
+/** 将图文向下移动 */
 function moveDownNews(index: number) {
   const current = newsList.value[index];
   const next = newsList.value[index + 1];
@@ -56,7 +56,7 @@ function moveDownNews(index: number) {
   }
 }
 
-// 将图文向上移动
+/** 将图文向上移动 */
 function moveUpNews(index: number) {
   const current = newsList.value[index];
   const prev = newsList.value[index - 1];
@@ -67,7 +67,7 @@ function moveUpNews(index: number) {
   }
 }
 
-// 删除指定 index 的图文
+/** 删除指定 index 的图文 */
 async function removeNews(index: number) {
   await confirm('确定删除该图文吗?');
   newsList.value.splice(index, 1);
@@ -76,7 +76,7 @@ async function removeNews(index: number) {
   }
 }
 
-// 添加一个图文
+/** 添加一个图文 */
 function plusNews() {
   newsList.value.push(createEmptyNewsItem());
   activeNewsIndex.value = newsList.value.length - 1;
@@ -86,19 +86,29 @@ function plusNews() {
 <template>
   <Layout>
     <Layout.Sider width="40%" theme="light">
-      <div class="select-item">
+      <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+      <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
         <div v-for="(news, index) in newsList" :key="index">
           <div
-            class="news-main father"
+            class="group relative mx-auto h-[120px] w-full cursor-pointer bg-white"
             v-if="index === 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
             @click="activeNewsIndex = index"
           >
-            <div class="news-content">
-              <img class="material-img" :src="news.thumbUrl" />
-              <div class="news-content-title">{{ news.title }}</div>
+            <div class="relative h-[120px] w-full bg-[#acadae]">
+              <img class="h-full w-full" :src="news.thumbUrl" />
+              <div
+                class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
+              >
+                {{ news.title }}
+              </div>
             </div>
-            <div class="child" v-if="newsList.length > 1">
+            <div
+              class="relative -bottom-[25px] hidden text-center group-hover:block"
+              v-if="newsList.length > 1"
+            >
               <Button
                 type="default"
                 shape="circle"
@@ -120,18 +130,22 @@ function plusNews() {
             </div>
           </div>
           <div
-            class="news-main-item father"
+            class="group relative mx-auto w-full cursor-pointer border-t border-[#eaeaea] bg-white py-[5px]"
             v-if="index > 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
             @click="activeNewsIndex = index"
           >
-            <div class="news-content-item">
-              <div class="news-content-item-title">{{ news.title }}</div>
-              <div class="news-content-item-img">
-                <img class="material-img" :src="news.thumbUrl" width="100%" />
+            <div class="relative -ml-[3px]">
+              <div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
+              <div class="inline-block w-[25%] bg-[#acadae]">
+                <img class="h-full w-full" :src="news.thumbUrl" />
               </div>
             </div>
-            <div class="child">
+            <div
+              class="relative -bottom-[25px] hidden text-center group-hover:block"
+            >
               <Button
                 v-if="newsList.length > index + 1"
                 shape="circle"
@@ -163,7 +177,10 @@ function plusNews() {
             </div>
           </div>
         </div>
-        <Row justify="center" class="ope-row">
+        <Row
+          justify="center"
+          class="mt-[5px] border-t border-[#eaeaea] pt-[5px] text-center"
+        >
           <Button
             type="primary"
             shape="circle"
@@ -175,7 +192,7 @@ function plusNews() {
         </Row>
       </div>
     </Layout.Sider>
-    <Layout.Content :style="{ backgroundColor: '#fff' }">
+    <Layout.Content class="bg-white">
       <div v-if="newsList.length > 0 && activeNewsItem">
         <!-- 标题、作者、原文地址 -->
         <Row :gutter="20">
@@ -185,13 +202,13 @@ function plusNews() {
               placeholder="请输入标题（必填）"
             />
           </Col>
-          <Col :span="24" style="margin-top: 5px">
+          <Col :span="24" class="mt-[5px]">
             <Input
               v-model:value="activeNewsItem.author"
               placeholder="请输入作者"
             />
           </Col>
-          <Col :span="24" style="margin-top: 5px">
+          <Col :span="24" class="mt-[5px]">
             <Input
               v-model:value="activeNewsItem.contentSourceUrl"
               placeholder="请输入原文地址"
@@ -212,7 +229,7 @@ function plusNews() {
               :rows="8"
               v-model:value="activeNewsItem.digest"
               placeholder="请输入摘要"
-              class="digest"
+              class="inline-block w-full align-top"
               :maxlength="120"
               :show-count="true"
             />
@@ -230,14 +247,6 @@ function plusNews() {
 </template>
 
 <style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-.ope-row {
-  padding-top: 5px;
-  margin-top: 5px;
-  text-align: center;
-  border-top: 1px solid #eaeaea;
-}
-
 :deep(.ant-row) {
   margin-bottom: 20px;
 }
@@ -245,94 +254,4 @@ function plusNews() {
 :deep(.ant-row:last-child) {
   margin-bottom: 0;
 }
-
-.digest {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-}
-
-/* 新增图文 */
-.news-main {
-  width: 100%;
-  height: 120px;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  height: 120px;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: inline-block;
-  width: 98%;
-  height: 25px;
-  padding: 1%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 15px;
-  color: #fff;
-  white-space: nowrap;
-  background-color: black;
-  opacity: 0.65;
-}
-
-.news-main-item {
-  width: 100%;
-  padding: 5px 0;
-  margin: auto;
-  background-color: #fff;
-  border-top: 1px solid #eaeaea;
-}
-
-.news-content-item {
-  position: relative;
-  margin-left: -3px;
-}
-
-.news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  font-size: 12px;
-}
-
-.news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  background-color: #acadae;
-}
-
-.select-item {
-  width: 60%;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-
-  .activeAddNews {
-    border: 5px solid #2bb673;
-  }
-}
-
-.father .child {
-  position: relative;
-  bottom: 25px;
-  display: none;
-  text-align: center;
-}
-
-.father:hover .child {
-  display: block;
-}
-
-.material-img {
-  width: 100%;
-  height: 100%;
-}
 </style>
diff --git a/apps/web-antd/src/views/mp/draft/components/types.ts b/apps/web-antd/src/views/mp/draft/modules/types.ts
similarity index 92%
rename from apps/web-antd/src/views/mp/draft/components/types.ts
rename to apps/web-antd/src/views/mp/draft/modules/types.ts
index 5a08e1919..9fa7edeac 100644
--- a/apps/web-antd/src/views/mp/draft/components/types.ts
+++ b/apps/web-antd/src/views/mp/draft/modules/types.ts
@@ -1,4 +1,4 @@
-// TODO @hw：要不把 components 里的部分，拿到 modules 里。
+// DONE @hw：要不把 components 里的部分，拿到 modules 里。
 interface NewsItem {
   title: string;
   thumbMediaId: string;
diff --git a/apps/web-antd/src/views/mp/menu/components/index.ts b/apps/web-antd/src/views/mp/menu/components/index.ts
deleted file mode 100644
index 02a277aba..000000000
--- a/apps/web-antd/src/views/mp/menu/components/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// TODO @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
-export { default as MenuEditor } from './menu-editor.vue';
-export { default as MenuPreviewer } from './menu-previewer.vue';
-export * from './menuOptions';
-export type * from './types';
diff --git a/apps/web-antd/src/views/mp/menu/components/menuOptions.ts b/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
deleted file mode 100644
index 565f0e221..000000000
--- a/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// TODO @hw：这个要不合并到 types 里；
-export default [
-  {
-    value: 'view',
-    label: '跳转网页',
-  },
-  {
-    value: 'miniprogram',
-    label: '跳转小程序',
-  },
-  {
-    value: 'click',
-    label: '点击回复',
-  },
-  {
-    value: 'article_view_limited',
-    label: '跳转图文消息',
-  },
-  {
-    value: 'scancode_push',
-    label: '扫码直接返回结果',
-  },
-  {
-    value: 'scancode_waitmsg',
-    label: '扫码回复',
-  },
-  {
-    value: 'pic_sysphoto',
-    label: '系统拍照发图',
-  },
-  {
-    value: 'pic_photo_or_album',
-    label: '拍照或者相册',
-  },
-  {
-    value: 'pic_weixin',
-    label: '微信相册',
-  },
-  {
-    value: 'location_select',
-    label: '选择地理位置',
-  },
-];
diff --git a/apps/web-antd/src/views/mp/menu/data.ts b/apps/web-antd/src/views/mp/menu/data.ts
index 2a22837ba..ddb2bea42 100644
--- a/apps/web-antd/src/views/mp/menu/data.ts
+++ b/apps/web-antd/src/views/mp/menu/data.ts
@@ -1,3 +1,7 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
 /** 菜单未选中标识 */
 export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
 
@@ -7,3 +11,21 @@ export enum Level {
   Parent = '1',
   Undefined = '0',
 }
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleAccountList,
+        labelField: 'name',
+        valueField: 'id',
+        autoSelect: 'first',
+        placeholder: '请选择公众号',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/menu/index.vue b/apps/web-antd/src/views/mp/menu/index.vue
index fa1729797..3d3e45657 100644
--- a/apps/web-antd/src/views/mp/menu/index.vue
+++ b/apps/web-antd/src/views/mp/menu/index.vue
@@ -1,17 +1,26 @@
 <script lang="ts" setup>
-import type { Menu, RawMenu } from './components/types';
+import type { Menu, RawMenu } from './modules/types';
 
-import { ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 
 import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
-import { Button, Form, message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleAccountList } from '#/api/mp/account';
 import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
-import { WxAccountSelect } from '#/views/mp/components';
-import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components';
-import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
+import {
+  Level,
+  MENU_NOT_SELECTED,
+  useGridFormSchema,
+} from '#/views/mp/menu/data';
+import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/modules';
+
+import iphoneBackImg from './modules/assets/iphone_backImg.png';
+import menuFootImg from './modules/assets/menu_foot.png';
+import menuHeadImg from './modules/assets/menu_head.png';
 
 defineOptions({ name: 'MpMenu' });
 
@@ -21,6 +30,25 @@ const accountId = ref(-1);
 const accountName = ref<string>('');
 const menuList = ref<Menu[]>([]);
 
+// 创建表单
+const [AccountForm, accountFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-[240px]',
+    },
+  },
+  layout: 'horizontal',
+  schema: useGridFormSchema(),
+  wrapperClass: 'grid-cols-1',
+  showDefaultActions: false,
+  handleValuesChange: async (values, changedFields) => {
+    // 当 accountId 字段变化时（包括 autoSelect 自动选择），同步更新 accountId
+    if (changedFields.includes('accountId') && values.accountId) {
+      await onAccountChanged(values);
+    }
+  },
+});
+
 // ======================== 菜单操作 ========================
 // 当前选中菜单编码：
 //  * 一级（'x'）
@@ -50,12 +78,36 @@ const tempSelfObj = ref<{
 const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
 
 /** 侦听公众号变化 */
-function onAccountChanged(id: number, name: string) {
-  accountId.value = id;
-  accountName.value = name;
+async function onAccountChanged(values: Record<string, any>) {
+  accountId.value = values.accountId;
+  // 从 API 获取公众号列表并查找对应的公众号名称
+  const accountList = await getSimpleAccountList();
+  const account = accountList.find((item) => item.id === values.accountId);
+  accountName.value = account?.name || '';
   getList();
 }
 
+/** 初始化账号ID - 作为备用方案，防止 handleValuesChange 未触发 */
+async function initAccountId() {
+  // 等待表单初始化完成
+  await nextTick();
+  try {
+    const values = await accountFormApi.getValues();
+    if (values?.accountId && accountId.value === -1) {
+      // 如果表单有值但 accountId 还是初始值，则手动触发一次
+      await onAccountChanged(values);
+    }
+  } catch {
+    // 忽略错误
+  }
+}
+
+// 组件挂载时初始化账号ID
+onMounted(async () => {
+  await nextTick();
+  await initAccountId();
+});
+
 /** 查询并转换菜单 */
 async function getList() {
   loading.value = true;
@@ -249,21 +301,37 @@ function menuToBackend(menu: any) {
       <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
     </template>
 
-    <ContentWrap>
-      <!-- 搜索工作栏 -->
-      <Form class="mb-10 w-full">
-        <Form.Item label="公众号" prop="accountId" class="w-60">
-          <WxAccountSelect @change="onAccountChanged" />
-        </Form.Item>
-      </Form>
+    <!-- 搜索工作栏 -->
+    <!-- <ContentWrap> -->
+    <AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
+    <!-- </ContentWrap> -->
 
-      <div class="clearfix public-account-management mt-10" v-loading="loading">
+    <!-- DONE @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
+    <ContentWrap>
+      <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+      <div
+        class="mx-auto w-[1200px] after:clear-both after:table after:content-['']"
+        v-loading="loading"
+      >
         <!--左边配置菜单-->
-        <div class="left">
-          <div class="weixin-hd">
-            <div class="weixin-title">{{ accountName }}</div>
+        <div
+          class="relative float-left box-border block h-[715px] w-[350px] bg-[length:100%_auto] bg-no-repeat p-[518px_25px_88px]"
+          :style="{ backgroundImage: `url(${iphoneBackImg})` }"
+        >
+          <div
+            class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%] bg-[position:0_0] bg-no-repeat text-center text-white"
+            :style="{ backgroundImage: `url(${menuHeadImg})` }"
+          >
+            <div
+              class="absolute left-0 top-[33px] w-full text-center text-sm text-white"
+            >
+              {{ accountName }}
+            </div>
           </div>
-          <div class="clearfix weixin-menu">
+          <div
+            class="bg-[position:0_0] bg-no-repeat pl-[43px] text-xs after:clear-both after:table after:content-['']"
+            :style="{ backgroundImage: `url(${menuFootImg})` }"
+          >
             <MenuPreviewer
               v-model="menuList"
               :account-id="accountId"
@@ -273,27 +341,25 @@ function menuToBackend(menu: any) {
               @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
             />
           </div>
-          <div class="save-div">
+          <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+          <div class="mt-[15px] flex items-center justify-center gap-[10px]">
             <Button
-              class="save-btn"
               type="primary"
               @click="onSave"
               v-access:code="['mp:menu:save']"
             >
               保存并发布菜单
             </Button>
-            <Button
-              class="save-btn"
-              danger
-              @click="onClear"
-              v-access:code="['mp:menu:delete']"
-            >
+            <Button danger @click="onClear" v-access:code="['mp:menu:delete']">
               清空菜单
             </Button>
           </div>
         </div>
         <!--右边配置-->
-        <div class="right" v-if="showRightPanel">
+        <div
+          class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5"
+          v-if="showRightPanel"
+        >
           <MenuEditor
             :account-id="accountId"
             :is-parent="isParent"
@@ -302,94 +368,10 @@ function menuToBackend(menu: any) {
           />
         </div>
         <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
-        <div v-else class="right">
+        <div v-else class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5">
           <p>请选择菜单配置</p>
         </div>
       </div>
     </ContentWrap>
   </Page>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-
-/* 公共颜色变量 */
-.clearfix {
-  *zoom: 1;
-}
-
-.clearfix::after {
-  clear: both;
-  display: table;
-  content: '';
-}
-
-div {
-  text-align: left;
-}
-
-.weixin-hd {
-  position: relative;
-  bottom: 426px;
-  left: 0;
-  width: 300px;
-  height: 64px;
-  color: #fff;
-  text-align: center;
-  background: transparent url('./components/assets/menu_head.png') no-repeat 0 0;
-  background-position: 0 0;
-  background-size: 100%;
-}
-
-.weixin-title {
-  position: absolute;
-  top: 33px;
-  left: 0;
-  width: 100%;
-  font-size: 14px;
-  color: #fff;
-  text-align: center;
-}
-
-.weixin-menu {
-  padding-left: 43px;
-  font-size: 12px;
-  background: transparent url('./components/assets/menu_foot.png') no-repeat 0 0;
-}
-
-.public-account-management {
-  width: 1200px;
-  // min-width: 1200px;
-  margin: 0 auto;
-
-  .left {
-    position: relative;
-    float: left;
-    box-sizing: border-box;
-    display: block;
-    width: 350px;
-    height: 715px;
-    padding: 518px 25px 88px;
-    background: url('./components/assets/iphone_backImg.png') no-repeat;
-    background-size: 100% auto;
-
-    .save-div {
-      display: flex;
-      gap: 10px;
-      align-items: center;
-      justify-content: center;
-      margin-top: 15px;
-    }
-  }
-
-  /* 右边菜单内容 */
-  .right {
-    float: left;
-    box-sizing: border-box;
-    width: 63%;
-    padding: 20px;
-    margin-left: 20px;
-    background-color: #e8e7e7;
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png b/apps/web-antd/src/views/mp/menu/modules/assets/iphone_backImg.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png
rename to apps/web-antd/src/views/mp/menu/modules/assets/iphone_backImg.png
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png b/apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png
rename to apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/menu_head.png b/apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/components/assets/menu_head.png
rename to apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
diff --git a/apps/web-antd/src/views/mp/menu/components/menu-editor.vue b/apps/web-antd/src/views/mp/menu/modules/editor.vue
similarity index 65%
rename from apps/web-antd/src/views/mp/menu/components/menu-editor.vue
rename to apps/web-antd/src/views/mp/menu/modules/editor.vue
index 986e00ed7..b5953b0a7 100644
--- a/apps/web-antd/src/views/mp/menu/components/menu-editor.vue
+++ b/apps/web-antd/src/views/mp/menu/modules/editor.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-// TODO @hw：名字可以缩写成 editor.vue，文件名
+// DONE @hw：名字可以缩写成 editor.vue，文件名
 import { computed, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
@@ -16,7 +16,7 @@ import {
 
 import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
 
-import menuOptions from './menuOptions';
+import { menuOptions } from './types';
 
 const props = defineProps<{
   accountId: number;
@@ -38,13 +38,13 @@ const menu = computed({
   },
 });
 const showNewsDialog = ref(false);
-const hackResetWxReplySelect = ref(false);
+const hackResetReplySelect = ref(false);
 const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
 
 watch(menu, () => {
-  hackResetWxReplySelect.value = false; // 销毁组件
+  hackResetReplySelect.value = false; // 销毁组件
   nextTick(() => {
-    hackResetWxReplySelect.value = true; // 重建组件
+    hackResetReplySelect.value = true; // 重建组件
   });
 });
 
@@ -81,8 +81,9 @@ function deleteMaterial() {
 
 <template>
   <div>
-    <div class="configure-page">
-      <div class="delete-btn">
+    <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+    <div>
+      <div class="mb-[15px] text-right">
         <Button type="primary" danger @click="emit('delete')">
           <IconifyIcon icon="lucide:trash-2" />
           删除当前菜单
@@ -91,7 +92,7 @@ function deleteMaterial() {
       <div>
         <span>菜单名称：</span>
         <Input
-          class="input-width"
+          class="mr-[2%] w-[240px]"
           v-model:value="menu.name"
           placeholder="请输入菜单名称"
           :maxlength="isParent ? 4 : 7"
@@ -99,21 +100,21 @@ function deleteMaterial() {
         />
       </div>
       <div v-if="isLeave">
-        <div class="menu-content">
+        <div class="mt-5">
           <span>菜单标识：</span>
           <Input
-            class="input-width"
+            class="mr-[2%] w-[240px]"
             v-model:value="menu.menuKey"
             placeholder="请输入菜单 KEY"
             allow-clear
           />
         </div>
-        <div class="menu-content">
+        <div class="mt-5">
           <span>菜单内容：</span>
           <Select
             v-model:value="menu.type"
             placeholder="请选择"
-            class="input-width"
+            class="mr-[2%] w-[240px]"
             allow-clear
           >
             <Select.Option
@@ -126,56 +127,69 @@ function deleteMaterial() {
             </Select.Option>
           </Select>
         </div>
-        <div class="configur-content" v-if="menu.type === 'view'">
+        <div
+          class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
+          v-if="menu.type === 'view'"
+        >
           <span>跳转链接：</span>
           <Input
-            class="input-width"
+            class="mr-[2%] w-[240px]"
             v-model:value="menu.url"
             placeholder="请输入链接"
             allow-clear
           />
         </div>
-        <!-- TODO @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
-        <div class="configur-content" v-if="menu.type === 'miniprogram'">
-          <div class="applet">
-            <span>小程序的 appid ：</span>
+        <!-- DONE @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
+        <div
+          class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
+          v-if="menu.type === 'miniprogram'"
+        >
+          <div class="mb-5 flex items-center">
+            <div class="w-[20%]">小程序的 appid ：</div>
             <Input
-              class="input-width"
+              class="mr-[2%] flex-1"
               v-model:value="menu.miniProgramAppId"
               placeholder="请输入小程序的appid"
               allow-clear
             />
           </div>
-          <div class="applet">
-            <span>小程序的页面路径：</span>
+          <div class="mb-5 flex items-center">
+            <div class="w-[20%]">小程序的页面路径：</div>
             <Input
-              class="input-width"
+              class="mr-[2%] flex-1"
               v-model:value="menu.miniProgramPagePath"
               placeholder="请输入小程序的页面路径，如：pages/index"
               allow-clear
             />
           </div>
-          <div class="applet">
-            <span>小程序的备用网页：</span>
+          <div class="mb-5 flex items-center">
+            <div class="w-[20%]">小程序的备用网页：</div>
             <Input
-              class="input-width"
+              class="mr-[2%] flex-1"
               v-model:value="menu.url"
               placeholder="不支持小程序的老版本客户端将打开本网页"
               allow-clear
             />
           </div>
-          <p class="blue">
+          <p class="mt-[10px] text-[#29b6f6]">
             tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
           </p>
         </div>
         <div
-          class="configur-content"
+          class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
           v-if="menu.type === 'article_view_limited'"
         >
           <Row>
-            <div class="select-item" v-if="menu && menu.replyArticles">
+            <div
+              class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
+              v-if="menu && menu.replyArticles"
+            >
               <WxNews :articles="menu.replyArticles" />
-              <Row class="ope-row" justify="center" align="middle">
+              <Row
+                class="pt-[10px] text-center"
+                justify="center"
+                align="middle"
+              >
                 <Button
                   type="primary"
                   danger
@@ -188,8 +202,8 @@ function deleteMaterial() {
             </div>
             <div v-else>
               <Row justify="center">
-                <!-- TODO @hw：html 标签里的 style 要用 tindwind 替代下； -->
-                <Col :span="24" style="text-align: center">
+                <!-- DONE @hw：html 标签里的 style 要用 tindwind 替代下； -->
+                <Col :span="24" class="text-center">
                   <Button type="primary" @click="showNewsDialog = true">
                     素材库选择
                     <IconifyIcon icon="lucide:circle-check" />
@@ -211,80 +225,13 @@ function deleteMaterial() {
             </Modal>
           </Row>
         </div>
-        <!-- TODO @hw：貌似这个组件出不来 -->
         <div
-          class="configur-content"
+          class="configur-content mt-5"
           v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
         >
-          <WxReply v-if="hackResetWxReplySelect" v-model="menu.reply" />
+          <WxReply v-model="menu.reply" />
         </div>
-        <!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-:deep(.ant-input) {
-  // width: 70%;
-  margin-right: 2%;
-}
-
-.configure-page {
-  .delete-btn {
-    margin-bottom: 15px;
-    text-align: right;
-  }
-
-  .menu-content {
-    margin-top: 20px;
-  }
-
-  .configur-content {
-    padding: 20px 10px;
-    margin-top: 20px;
-    background-color: #fff;
-    border-radius: 5px;
-
-    .select-item {
-      width: 280px;
-      padding: 10px;
-      margin: 0 auto 10px;
-      border: 1px solid #eaeaea;
-
-      .ope-row {
-        padding-top: 10px;
-        text-align: center;
-      }
-    }
-  }
-
-  .blue {
-    margin-top: 10px;
-    color: #29b6f6;
-  }
-
-  .applet {
-    margin-bottom: 20px;
-
-    span {
-      width: 20%;
-    }
-  }
-
-  .input-width {
-    width: 240px;
-  }
-
-  .material {
-    .input-width {
-      width: 30%;
-    }
-
-    :deep(.ant-input) {
-      width: 80%;
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/menu/modules/index.ts b/apps/web-antd/src/views/mp/menu/modules/index.ts
new file mode 100644
index 000000000..335e9891a
--- /dev/null
+++ b/apps/web-antd/src/views/mp/menu/modules/index.ts
@@ -0,0 +1,5 @@
+// DONE @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
+export { default as MenuEditor } from './editor.vue';
+export { default as MenuPreviewer } from './previewer.vue';
+export type * from './types';
+export * from './types';
diff --git a/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue b/apps/web-antd/src/views/mp/menu/modules/previewer.vue
similarity index 68%
rename from apps/web-antd/src/views/mp/menu/components/menu-previewer.vue
rename to apps/web-antd/src/views/mp/menu/modules/previewer.vue
index cbdc1bee5..acfed8ad9 100644
--- a/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue
+++ b/apps/web-antd/src/views/mp/menu/modules/previewer.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-// TODO @hw：名字可以缩写成 previewer.vue，文件名
+// DONE @hw：名字可以缩写成 previewer.vue，文件名
 import type { Menu } from './types';
 
 import { computed } from 'vue';
@@ -44,9 +44,8 @@ function addMenu() {
 
 /** 添加横向二级菜单；parent 表示要操作的父菜单 */
 function addSubMenu(i: number, parent: any) {
-  const subMenuKeyLength = parent.children.length; // 获取二级菜单 key 长度
-  // TODO @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
-  const addButton = {
+  // DONE @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
+  parent.children[parent.children.length] = {
     name: '子菜单名称',
     reply: {
       // 用于存储回复内容
@@ -54,8 +53,11 @@ function addSubMenu(i: number, parent: any) {
       accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
     },
   };
-  parent.children[subMenuKeyLength] = addButton;
-  subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
+  subMenuClicked(
+    parent.children[parent.children.length - 1],
+    i,
+    parent.children.length - 1,
+  );
 }
 
 /** 一级菜单点击 */
@@ -129,18 +131,23 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
     @end="onParentDragEnd"
   >
     <template #item="{ element: parent, index: x }">
-      <div class="menu-bottom">
+      <div
+        class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
+      >
         <!-- 一级菜单 -->
         <div
           @click="menuClicked(parent, x)"
-          class="menu-item"
-          :class="{ active: props.activeIndex === `${x}` }"
+          class="box-border flex h-[44px] w-full items-center justify-center leading-[44px]"
+          :class="{ 'border border-[#2bb673]': props.activeIndex === `${x}` }"
         >
           <IconifyIcon icon="lucide:panel-right-open" color="black" />
           {{ parent.name }}
         </div>
         <!-- 以下为二级菜单-->
-        <div class="submenu" v-if="props.parentIndex === x && parent.children">
+        <div
+          class="absolute bottom-[45px] left-0 w-[85.5px]"
+          v-if="props.parentIndex === x && parent.children"
+        >
           <draggable
             v-model="parent.children"
             item-key="id"
@@ -149,11 +156,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
             @end="onChildDragEnd"
           >
             <template #item="{ element: child, index: y }">
-              <div class="menu-bottom subtitle">
+              <div
+                class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
+              >
                 <div
-                  class="menu-sub-item"
-                  v-if="parent.children"
-                  :class="{ active: props.activeIndex === `${x}-${y}` }"
+                  class="box-border h-[44px] text-center leading-[44px]"
+                  :class="{
+                    'border border-[#2bb673]':
+                      props.activeIndex === `${x}-${y}`,
+                  }"
                   @click="subMenuClicked(child, x, y)"
                 >
                   {{ child.name }}
@@ -161,13 +172,12 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
               </div>
             </template>
           </draggable>
-          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
           <div
-            class="menu-bottom menu-addicon"
+            class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
             v-if="!parent.children || parent.children.length < 5"
             @click="addSubMenu(x, parent)"
           >
-            <IconifyIcon icon="lucide:plus" class="plus" />
+            <IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
           </div>
         </div>
       </div>
@@ -176,78 +186,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
 
   <!-- 一级菜单加号 -->
   <div
-    class="menu-bottom menu-addicon"
+    class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
     v-if="menuList.length < 3"
     @click="addMenu"
   >
-    <IconifyIcon icon="lucide:plus" class="plus" />
+    <IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-.menu-bottom {
-  position: relative;
-  float: left;
-  box-sizing: border-box;
-  display: block;
-  width: 85.5px;
-  text-align: center;
-  cursor: pointer;
-  background-color: #fff;
-  border: 1px solid #ebedee;
-
-  &.menu-addicon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 46px;
-    line-height: 46px;
-
-    .plus {
-      color: #2bb673;
-    }
-  }
-
-  .menu-item {
-    // text-align: center;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 44px;
-    line-height: 44px;
-
-    &.active {
-      border: 1px solid #2bb673;
-    }
-  }
-
-  .menu-sub-item {
-    box-sizing: border-box;
-    height: 44px;
-    line-height: 44px;
-    text-align: center;
-
-    &.active {
-      border: 1px solid #2bb673;
-    }
-  }
-}
-
-/* 第二级菜单 */
-.submenu {
-  position: absolute;
-  bottom: 45px;
-  width: 85.5px;
-
-  .subtitle {
-    box-sizing: border-box;
-    background-color: #fff;
-  }
-}
-
 .draggable-ghost {
   background: #f7fafc;
   border: 1px solid #4299e1;
diff --git a/apps/web-antd/src/views/mp/menu/components/types.ts b/apps/web-antd/src/views/mp/menu/modules/types.ts
similarity index 63%
rename from apps/web-antd/src/views/mp/menu/components/types.ts
rename to apps/web-antd/src/views/mp/menu/modules/types.ts
index 928534ea9..9194af974 100644
--- a/apps/web-antd/src/views/mp/menu/components/types.ts
+++ b/apps/web-antd/src/views/mp/menu/modules/types.ts
@@ -71,3 +71,47 @@ interface _Menu extends RawMenu {
 }
 
 export type Menu = Partial<_Menu>;
+
+// DONE @hw：这个要不合并到 types 里；
+export const menuOptions = [
+  {
+    value: 'view',
+    label: '跳转网页',
+  },
+  {
+    value: 'miniprogram',
+    label: '跳转小程序',
+  },
+  {
+    value: 'click',
+    label: '点击回复',
+  },
+  {
+    value: 'article_view_limited',
+    label: '跳转图文消息',
+  },
+  {
+    value: 'scancode_push',
+    label: '扫码直接返回结果',
+  },
+  {
+    value: 'scancode_waitmsg',
+    label: '扫码回复',
+  },
+  {
+    value: 'pic_sysphoto',
+    label: '系统拍照发图',
+  },
+  {
+    value: 'pic_photo_or_album',
+    label: '拍照或者相册',
+  },
+  {
+    value: 'pic_weixin',
+    label: '微信相册',
+  },
+  {
+    value: 'location_select',
+    label: '选择地理位置',
+  },
+] as const;
diff --git a/apps/web-antd/src/views/mp/tag/data.ts b/apps/web-antd/src/views/mp/tag/data.ts
index e8efd6fba..a49cbb330 100644
--- a/apps/web-antd/src/views/mp/tag/data.ts
+++ b/apps/web-antd/src/views/mp/tag/data.ts
@@ -41,6 +41,7 @@ export function useFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的搜索表单 */
+// TODO @YunaiV 这种方式获取刷新浏览器会导致空白
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
diff --git a/apps/web-ele/src/api/erp/finance/account/index.ts b/apps/web-ele/src/api/erp/finance/account/index.ts
new file mode 100644
index 000000000..1f630b87d
--- /dev/null
+++ b/apps/web-ele/src/api/erp/finance/account/index.ts
@@ -0,0 +1,61 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpAccountApi {
+  /** 结算账户信息 */
+  export interface Account {
+    id?: number; // 结算账户编号
+    no: string; // 账户编码
+    remark: string; // 备注
+    status: number; // 开启状态
+    sort: number; // 排序
+    defaultStatus: boolean; // 是否默认
+    name: string; // 账户名称
+  }
+}
+
+/** 查询结算账户分页 */
+export function getAccountPage(params: PageParam) {
+  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-ele/src/api/erp/finance/payment/index.ts b/apps/web-ele/src/api/erp/finance/payment/index.ts
new file mode 100644
index 000000000..004713ce8
--- /dev/null
+++ b/apps/web-ele/src/api/erp/finance/payment/index.ts
@@ -0,0 +1,95 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpFinancePaymentApi {
+  /** 付款单信息 */
+  export interface FinancePayment {
+    id?: number; // 付款单编号
+    no: string; // 付款单号
+    supplierId?: number; // 供应商编号
+    supplierName?: string; // 供应商名称
+    paymentTime?: Date; // 付款时间
+    totalPrice: number; // 合计金额，单位：元
+    discountPrice: number; // 优惠金额
+    paymentPrice: number; // 实际付款金额
+    status: number; // 状态
+    remark: string; // 备注
+    fileUrl?: string; // 附件
+    accountId?: number; // 付款账户
+    accountName?: string; // 账户名称
+    financeUserId?: number; // 财务人员
+    financeUserName?: string; // 财务人员姓名
+    creator?: string; // 创建人
+    creatorName?: string; // 创建人姓名
+    items?: FinancePaymentItem[]; // 付款明细
+    bizNo?: string; // 业务单号
+  }
+
+  /** 付款单项 */
+  export interface FinancePaymentItem {
+    id?: number;
+    row_id?: number; // 前端使用的临时 ID
+    bizId: number; // 业务ID
+    bizType: number; // 业务类型
+    bizNo: string; // 业务编号
+    totalPrice: number; // 应付金额
+    paidPrice: number; // 已付金额
+    paymentPrice: number; // 本次付款
+    remark?: string; // 备注
+  }
+}
+
+/** 查询付款单分页 */
+export function getFinancePaymentPage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/finance-payment/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除付款单 */
+export function deleteFinancePayment(ids: number[]) {
+  return requestClient.delete('/erp/finance-payment/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出付款单 Excel */
+export function exportFinancePayment(params: any) {
+  return requestClient.download('/erp/finance-payment/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/finance/receipt/index.ts b/apps/web-ele/src/api/erp/finance/receipt/index.ts
new file mode 100644
index 000000000..f871035b5
--- /dev/null
+++ b/apps/web-ele/src/api/erp/finance/receipt/index.ts
@@ -0,0 +1,95 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpFinanceReceiptApi {
+  /** 收款单项 */
+  export interface FinanceReceiptItem {
+    id?: number;
+    row_id?: number; // 前端使用的临时 ID
+    bizId: number; // 业务ID
+    bizType: number; // 业务类型
+    bizNo: string; // 业务编号
+    totalPrice: number; // 应收金额
+    receiptedPrice: number; // 已收金额
+    receiptPrice: number; // 本次收款
+    remark?: string; // 备注
+  }
+
+  /** 收款单信息 */
+  export interface FinanceReceipt {
+    id?: number; // 收款单编号
+    no: string; // 收款单号
+    customerId: number; // 客户编号
+    customerName?: string; // 客户名称
+    receiptTime: Date; // 收款时间
+    totalPrice: number; // 合计金额，单位：元
+    discountPrice: number; // 优惠金额
+    receiptPrice: number; // 实际收款金额
+    status: number; // 状态
+    remark: string; // 备注
+    fileUrl?: string; // 附件
+    accountId?: number; // 收款账户
+    accountName?: string; // 账户名称
+    financeUserId?: number; // 财务人员
+    financeUserName?: string; // 财务人员姓名
+    creator?: string; // 创建人
+    creatorName?: string; // 创建人姓名
+    items?: FinanceReceiptItem[]; // 收款明细
+    bizNo?: string; // 业务单号
+  }
+}
+
+/** 查询收款单分页 */
+export function getFinanceReceiptPage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/finance-receipt/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除收款单 */
+export function deleteFinanceReceipt(ids: number[]) {
+  return requestClient.delete('/erp/finance-receipt/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出收款单 Excel */
+export function exportFinanceReceipt(params: any) {
+  return requestClient.download('/erp/finance-receipt/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/product/category/index.ts b/apps/web-ele/src/api/erp/product/category/index.ts
new file mode 100644
index 000000000..3c96b5893
--- /dev/null
+++ b/apps/web-ele/src/api/erp/product/category/index.ts
@@ -0,0 +1,62 @@
+import { requestClient } from '#/api/request';
+
+export namespace ErpProductCategoryApi {
+  /** 产品分类信息 */
+  export interface ProductCategory {
+    id?: number; // 分类编号
+    parentId?: number; // 父分类编号
+    name: string; // 分类名称
+    code?: string; // 分类编码
+    sort?: number; // 分类排序
+    status?: number; // 开启状态
+    children?: ProductCategory[]; // 子分类
+  }
+}
+
+/** 查询产品分类列表 */
+export function getProductCategoryList(params?: any) {
+  return requestClient.get<ErpProductCategoryApi.ProductCategory[]>(
+    '/erp/product-category/list',
+    { params },
+  );
+}
+
+/** 查询产品分类精简列表 */
+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-ele/src/api/erp/product/product/index.ts b/apps/web-ele/src/api/erp/product/product/index.ts
new file mode 100644
index 000000000..a9ca836f9
--- /dev/null
+++ b/apps/web-ele/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 {
+  /** 产品信息 */
+  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-ele/src/api/erp/product/unit/index.ts b/apps/web-ele/src/api/erp/product/unit/index.ts
new file mode 100644
index 000000000..23514963b
--- /dev/null
+++ b/apps/web-ele/src/api/erp/product/unit/index.ts
@@ -0,0 +1,54 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpProductUnitApi {
+  /** 产品单位信息 */
+  export interface ProductUnit {
+    id?: number; // 单位编号
+    name: string; // 单位名字
+    status: number; // 单位状态
+  }
+}
+
+/** 查询产品单位分页 */
+export function getProductUnitPage(params: PageParam) {
+  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-ele/src/api/erp/purchase/in/index.ts b/apps/web-ele/src/api/erp/purchase/in/index.ts
new file mode 100644
index 000000000..060e1bcb8
--- /dev/null
+++ b/apps/web-ele/src/api/erp/purchase/in/index.ts
@@ -0,0 +1,100 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export 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; // 采购退货数量
+    discountPercent?: number; // 折扣百分比
+    discountPrice?: number; // 折扣金额
+    paymentPrice?: number; // 实际支付金额
+    otherPrice?: number; // 其他费用
+    totalProductPrice?: number; // 合计商品金额
+    taxPrice?: number; // 合计税额
+    items?: PurchaseInItem[]; // 采购入库明细
+  }
+
+  /** 采购项信息 */
+  export interface PurchaseInItem {
+    count?: number;
+    id?: number;
+    orderItemId?: number;
+    productBarCode?: string;
+    productId?: number;
+    productName: string;
+    productPrice: number;
+    productUnitId?: number;
+    productUnitName?: string;
+    totalProductPrice?: number;
+    remark: string;
+    stockCount?: number;
+    taxPercent?: number;
+    taxPrice?: number;
+    totalPrice?: number;
+    warehouseId?: number;
+    inCount?: number;
+  }
+}
+
+/** 查询采购入库分页 */
+export function getPurchaseInPage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/purchase-in/update-status', null, {
+    params: {
+      id,
+      status,
+    },
+  });
+}
+
+/** 删除采购入库 */
+export function deletePurchaseIn(ids: number[]) {
+  return requestClient.delete('/erp/purchase-in/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出采购入库 Excel */
+export function exportPurchaseIn(params: any) {
+  return requestClient.download('/erp/purchase-in/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/purchase/order/index.ts b/apps/web-ele/src/api/erp/purchase/order/index.ts
new file mode 100644
index 000000000..e59dcf68e
--- /dev/null
+++ b/apps/web-ele/src/api/erp/purchase/order/index.ts
@@ -0,0 +1,97 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpPurchaseOrderApi {
+  /** 采购订单信息 */
+  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; // 采购入库数量
+    count?: number; // 数量
+    returnCount?: number; // 采购退货数量
+    inStatus?: number; // 入库状态
+    returnStatus?: number; // 退货状态
+    productNames?: string; // 产品名称列表
+    creatorName?: string; // 创建人名称
+    createTime?: Date; // 创建时间
+    items?: PurchaseOrderItem[]; // 订单项列表
+  }
+
+  /** 采购订单项信息 */
+  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; // 库存数量（显示字段）
+  }
+}
+
+/** 查询采购订单分页 */
+export function getPurchaseOrderPage(params: PageParam) {
+  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(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-ele/src/api/erp/purchase/return/index.ts b/apps/web-ele/src/api/erp/purchase/return/index.ts
new file mode 100644
index 000000000..315ceeadb
--- /dev/null
+++ b/apps/web-ele/src/api/erp/purchase/return/index.ts
@@ -0,0 +1,96 @@
+import type { PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpPurchaseReturnApi {
+  /** 采购退货信息 */
+  export interface PurchaseReturn {
+    id?: number; // 采购退货编号
+    no?: string; // 采购退货号
+    supplierId?: number; // 供应商编号
+    returnTime?: Date; // 退货时间
+    totalCount?: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    discountPercent?: number; // 折扣百分比
+    discountPrice?: number; // 折扣金额
+    status?: number; // 状态
+    remark?: string; // 备注
+    totalTaxPrice?: number; // 合计税额
+    otherPrice?: number; // 其他费用
+    items?: PurchaseReturnItem[];
+  }
+
+  /** 采购退货项 */
+  export interface PurchaseReturnItem {
+    count?: number;
+    id?: number;
+    orderItemId?: number;
+    productBarCode?: string;
+    productId?: number;
+    productName: string;
+    productPrice: number;
+    productUnitId?: number;
+    productUnitName?: string;
+    totalProductPrice?: number;
+    remark: string;
+    stockCount?: number;
+    taxPercent?: number;
+    taxPrice?: number;
+    totalPrice?: number;
+    warehouseId?: number;
+  }
+}
+
+/** 查询采购退货分页 */
+export function getPurchaseReturnPage(params: any) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/purchase-return/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除采购退货 */
+export function deletePurchaseReturn(ids: number[]) {
+  return requestClient.delete('/erp/purchase-return/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出采购退货 Excel */
+export function exportPurchaseReturn(params: any) {
+  return requestClient.download('/erp/purchase-return/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/purchase/supplier/index.ts b/apps/web-ele/src/api/erp/purchase/supplier/index.ts
new file mode 100644
index 000000000..42c4196b0
--- /dev/null
+++ b/apps/web-ele/src/api/erp/purchase/supplier/index.ts
@@ -0,0 +1,66 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpSupplierApi {
+  /** 供应商信息 */
+  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 function getSupplierPage(params: PageParam) {
+  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-ele/src/api/erp/sale/customer/index.ts b/apps/web-ele/src/api/erp/sale/customer/index.ts
new file mode 100644
index 000000000..1bcd1b31a
--- /dev/null
+++ b/apps/web-ele/src/api/erp/sale/customer/index.ts
@@ -0,0 +1,66 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpCustomerApi {
+  /** 客户信息 */
+  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 function getCustomerPage(params: PageParam) {
+  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-ele/src/api/erp/sale/order/index.ts b/apps/web-ele/src/api/erp/sale/order/index.ts
new file mode 100644
index 000000000..c190a3dc1
--- /dev/null
+++ b/apps/web-ele/src/api/erp/sale/order/index.ts
@@ -0,0 +1,98 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpSaleOrderApi {
+  /** 销售订单信息 */
+  export interface SaleOrder {
+    id?: number; // 订单工单编号
+    no: string; // 销售订单号
+    customerId: number; // 客户编号
+    accountId?: number; // 收款账户编号
+    orderTime: Date; // 订单时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+    outCount: number; // 销售出库数量
+    fileUrl?: string; // 附件地址
+    inCount?: number; // 采购入库数量
+    returnCount: number; // 销售退货数量
+    totalProductPrice?: number; // 产品金额，单位：元
+    discountPercent?: number; // 优惠率，百分比
+    discountPrice?: number; // 优惠金额，单位：元
+    depositPrice?: number; // 定金金额，单位：元
+    items?: SaleOrderItem[]; // 销售订单产品明细列表
+  }
+
+  /** 销售订单项 */
+  export interface SaleOrderItem {
+    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; // 库存数量（显示字段）
+  }
+}
+
+/** 查询销售订单分页 */
+export function getSaleOrderPage(params: PageParam) {
+  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 getSaleOrderItemListByOrderId(orderId: number) {
+  return requestClient.get<ErpSaleOrderApi.SaleOrderItem[]>(
+    `/erp/sale-order/item/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+/** 新增销售订单 */
+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-ele/src/api/erp/sale/out/index.ts b/apps/web-ele/src/api/erp/sale/out/index.ts
new file mode 100644
index 000000000..a3e335af6
--- /dev/null
+++ b/apps/web-ele/src/api/erp/sale/out/index.ts
@@ -0,0 +1,95 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpSaleOutApi {
+  /** 销售出库信息 */
+  export interface SaleOut {
+    id?: number; // 销售出库编号
+    no?: string; // 销售出库号
+    customerId?: number; // 客户编号
+    saleUserId?: number; // 客户编号
+    outTime?: Date; // 出库时间
+    totalCount?: number; // 合计数量
+    totalPrice?: number; // 合计金额，单位：元
+    status?: number; // 状态
+    remark?: string; // 备注
+    discountPercent?: number; // 折扣百分比
+    discountPrice?: number; // 折扣金额
+    otherPrice?: number; // 其他费用
+    totalProductPrice?: number; // 合计商品金额
+    taxPrice?: number; // 合计税额
+    totalTaxPrice?: number; // 合计税额
+    fileUrl?: string; // 附件地址
+    items?: SaleOutItem[];
+  }
+
+  /** 销售出库项 */
+  export interface SaleOutItem {
+    count?: number;
+    id?: number;
+    orderItemId?: number;
+    productBarCode?: string;
+    productId?: number;
+    productName: string;
+    productPrice: number;
+    productUnitId?: number;
+    productUnitName?: string;
+    totalProductPrice?: number;
+    remark: string;
+    stockCount?: number;
+    taxPercent?: number;
+    taxPrice?: number;
+    totalPrice?: number;
+    warehouseId?: number;
+    outCount?: number;
+  }
+}
+
+/** 查询销售出库分页 */
+export function getSaleOutPage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/sale-out/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除销售出库 */
+export function deleteSaleOut(ids: number[]) {
+  return requestClient.delete('/erp/sale-out/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出销售出库 Excel */
+export function exportSaleOut(params: any) {
+  return requestClient.download('/erp/sale-out/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/sale/return/index.ts b/apps/web-ele/src/api/erp/sale/return/index.ts
new file mode 100644
index 000000000..a0624cba2
--- /dev/null
+++ b/apps/web-ele/src/api/erp/sale/return/index.ts
@@ -0,0 +1,96 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpSaleReturnApi {
+  /** 销售退货信息 */
+  export interface SaleReturn {
+    id?: number; // 销售退货编号
+    no?: string; // 销售退货号
+    customerId?: number; // 客户编号
+    returnTime?: Date; // 退货时间
+    totalCount?: number; // 合计数量
+    totalPrice?: number; // 合计金额，单位：元
+    status?: number; // 状态
+    remark?: string; // 备注
+    discountPercent?: number; // 折扣百分比
+    discountPrice?: number; // 折扣金额
+    otherPrice?: number; // 其他费用
+    totalProductPrice?: number; // 合计商品金额
+    taxPrice?: number; // 合计税额
+    totalTaxPrice?: number; // 合计税额
+    fileUrl?: string; // 附件地址
+    items?: SaleReturnItem[];
+  }
+
+  /** 销售退货项 */
+  export interface SaleReturnItem {
+    count?: number;
+    id?: number;
+    orderItemId?: number;
+    productBarCode?: string;
+    productId?: number;
+    productName: string;
+    productPrice: number;
+    productUnitId?: number;
+    productUnitName?: string;
+    totalProductPrice?: number;
+    remark: string;
+    stockCount?: number;
+    taxPercent?: number;
+    taxPrice?: number;
+    totalPrice?: number;
+    warehouseId?: number;
+    returnCount?: number;
+  }
+}
+
+/** 查询销售退货分页 */
+export function getSaleReturnPage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/sale-return/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除销售退货 */
+export function deleteSaleReturn(ids: number[]) {
+  return requestClient.delete('/erp/sale-return/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出销售退货 Excel */
+export function exportSaleReturn(params: any) {
+  return requestClient.download('/erp/sale-return/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/statistics/purchase/index.ts b/apps/web-ele/src/api/erp/statistics/purchase/index.ts
new file mode 100644
index 000000000..126b6f283
--- /dev/null
+++ b/apps/web-ele/src/api/erp/statistics/purchase/index.ts
@@ -0,0 +1,31 @@
+import { requestClient } from '#/api/request';
+
+export namespace ErpPurchaseStatisticsApi {
+  /** 采购全局统计 */
+  export interface PurchaseSummaryRespVO {
+    todayPrice: number; // 今日采购金额
+    yesterdayPrice: number; // 昨日采购金额
+    monthPrice: number; // 本月采购金额
+    yearPrice: number; // 今年采购金额
+  }
+
+  /** 采购时间段统计 */
+  export interface PurchaseTimeSummaryRespVO {
+    time: string; // 时间
+    price: number; // 采购金额
+  }
+}
+
+/** 获得采购统计 */
+export function getPurchaseSummary() {
+  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(
+    '/erp/purchase-statistics/summary',
+  );
+}
+
+/** 获得采购时间段统计 */
+export function getPurchaseTimeSummary() {
+  return requestClient.get<
+    ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]
+  >('/erp/purchase-statistics/time-summary');
+}
diff --git a/apps/web-ele/src/api/erp/statistics/sale/index.ts b/apps/web-ele/src/api/erp/statistics/sale/index.ts
new file mode 100644
index 000000000..209c1c938
--- /dev/null
+++ b/apps/web-ele/src/api/erp/statistics/sale/index.ts
@@ -0,0 +1,31 @@
+import { requestClient } from '#/api/request';
+
+export namespace ErpSaleStatisticsApi {
+  /** 销售全局统计 */
+  export interface SaleSummaryRespVO {
+    todayPrice: number; // 今日销售金额
+    yesterdayPrice: number; // 昨日销售金额
+    monthPrice: number; // 本月销售金额
+    yearPrice: number; // 今年销售金额
+  }
+
+  /** 销售时间段统计 */
+  export interface SaleTimeSummaryRespVO {
+    time: string; // 时间
+    price: number; // 销售金额
+  }
+}
+
+/** 获得销售统计 */
+export function getSaleSummary() {
+  return requestClient.get<ErpSaleStatisticsApi.SaleSummaryRespVO>(
+    '/erp/sale-statistics/summary',
+  );
+}
+
+/** 获得销售时间段统计 */
+export function getSaleTimeSummary() {
+  return requestClient.get<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(
+    '/erp/sale-statistics/time-summary',
+  );
+}
diff --git a/apps/web-ele/src/api/erp/stock/check/index.ts b/apps/web-ele/src/api/erp/stock/check/index.ts
new file mode 100644
index 000000000..b6f9d0bea
--- /dev/null
+++ b/apps/web-ele/src/api/erp/stock/check/index.ts
@@ -0,0 +1,87 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpStockCheckApi {
+  /** 库存盘点单信息 */
+  export interface StockCheck {
+    id?: number; // 盘点编号
+    no: string; // 盘点单号
+    checkTime: Date; // 盘点时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+    fileUrl?: string; // 附件
+    productNames?: string; // 产品信息
+    creatorName?: string; // 创建人
+    items?: StockCheckItem[]; // 盘点产品清单
+  }
+
+  /** 库存盘点项 */
+  export interface StockCheckItem {
+    id?: number; // 编号
+    warehouseId?: number; // 仓库编号
+    productId?: number; // 产品编号
+    productName?: string; // 产品名称
+    productUnitId?: number; // 产品单位编号
+    productUnitName?: string; // 产品单位名称
+    productBarCode?: string; // 产品条码
+    count?: number; // 盈亏数量
+    actualCount?: number; // 实际库存
+    productPrice?: number; // 产品单价
+    totalPrice?: number; // 总价
+    stockCount?: number; // 账面库存
+    remark?: string; // 备注
+  }
+}
+
+/** 查询库存盘点单分页 */
+export function getStockCheckPage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/stock-check/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除库存盘点 */
+export function deleteStockCheck(ids: number[]) {
+  return requestClient.delete('/erp/stock-check/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出库存盘点单 Excel */
+export function exportStockCheck(params: any) {
+  return requestClient.download('/erp/stock-check/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/stock/in/index.ts b/apps/web-ele/src/api/erp/stock/in/index.ts
new file mode 100644
index 000000000..e68c05b36
--- /dev/null
+++ b/apps/web-ele/src/api/erp/stock/in/index.ts
@@ -0,0 +1,86 @@
+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 function getStockInPage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/stock-in/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除其它入库单 */
+export function deleteStockIn(ids: number[]) {
+  return requestClient.delete('/erp/stock-in/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出其它入库单 Excel */
+export function exportStockIn(params: any) {
+  return requestClient.download('/erp/stock-in/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/stock/move/index.ts b/apps/web-ele/src/api/erp/stock/move/index.ts
new file mode 100644
index 000000000..0120a9b45
--- /dev/null
+++ b/apps/web-ele/src/api/erp/stock/move/index.ts
@@ -0,0 +1,87 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpStockMoveApi {
+  /** 库存调拨单信息 */
+  export interface StockMove {
+    id?: number; // 调拨编号
+    no: string; // 调拨单号
+    outTime: Date; // 调拨时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+    fileUrl?: string; // 附件
+    fromWarehouseId?: number; // 来源仓库编号
+    createTime: Date; // 创建时间
+    creator: string; // 创建人
+    creatorName: string; // 创建人名称
+    productNames: string; // 产品名称
+    items?: StockMoveItem[]; // 子表信息
+  }
+
+  /** 库存调拨单子表信息 */
+  export interface StockMoveItem {
+    count: number; // 数量
+    fromWarehouseId?: number; // 来源仓库ID
+    id?: number; // ID
+    productBarCode: string; // 产品条形码
+    productId?: number; // 产品ID
+    productName?: string; // 产品名称
+    productPrice: number; // 产品单价
+    productUnitName?: string; // 产品单位
+    remark?: string; // 备注
+    stockCount: number; // 库存数量
+    toWarehouseId?: number; // 目标仓库ID
+    totalPrice?: number; // 总价
+  }
+}
+
+/** 查询库存调拨单分页 */
+export function getStockMovePage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/stock-move/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除库存调拨单 */
+export function deleteStockMove(ids: number[]) {
+  return requestClient.delete('/erp/stock-move/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出库存调拨单 Excel */
+export function exportStockMove(params: any) {
+  return requestClient.download('/erp/stock-move/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/erp/stock/out/index.ts b/apps/web-ele/src/api/erp/stock/out/index.ts
new file mode 100644
index 000000000..1ecb89233
--- /dev/null
+++ b/apps/web-ele/src/api/erp/stock/out/index.ts
@@ -0,0 +1,85 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpStockOutApi {
+  /** 其它出库单信息 */
+  export interface StockOut {
+    id?: number; // 出库编号
+    no: string; // 出库单号
+    customerId: number; // 客户编号
+    outTime: Date; // 出库时间
+    totalCount: number; // 合计数量
+    totalPrice: number; // 合计金额，单位：元
+    status: number; // 状态
+    remark: string; // 备注
+    fileUrl?: string; // 附件
+    items?: StockOutItem[]; // 出库产品清单
+  }
+
+  /** 其它出库单产品信息 */
+  export interface StockOutItem {
+    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 function getStockOutPage(params: PageParam) {
+  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(id: number, status: number) {
+  return requestClient.put('/erp/stock-out/update-status', null, {
+    params: { id, status },
+  });
+}
+
+/** 删除其它出库单 */
+export function deleteStockOut(ids: number[]) {
+  return requestClient.delete('/erp/stock-out/delete', {
+    params: {
+      ids: ids.join(','),
+    },
+  });
+}
+
+/** 导出其它出库单 Excel */
+export function exportStockOut(params: any) {
+  return requestClient.download('/erp/stock-out/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/stock/record/index.ts b/apps/web-ele/src/api/erp/stock/record/index.ts
new file mode 100644
index 000000000..30bc9dae0
--- /dev/null
+++ b/apps/web-ele/src/api/erp/stock/record/index.ts
@@ -0,0 +1,31 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpStockRecordApi {
+  /** 产品库存明细 */
+  export interface StockRecord {
+    id?: number; // 编号
+    productId: number; // 产品编号
+    warehouseId: number; // 仓库编号
+    count: number; // 出入库数量
+    totalCount: number; // 总库存量
+    bizType: number; // 业务类型
+    bizId: number; // 业务编号
+    bizItemId: number; // 业务项编号
+    bizNo: string; // 业务单号
+  }
+}
+
+/** 查询产品库存明细分页 */
+export function getStockRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<ErpStockRecordApi.StockRecord>>(
+    '/erp/stock-record/page',
+    { params },
+  );
+}
+
+/** 导出产品库存明细 Excel */
+export function exportStockRecord(params: any) {
+  return requestClient.download('/erp/stock-record/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/erp/stock/stock/index.ts b/apps/web-ele/src/api/erp/stock/stock/index.ts
new file mode 100644
index 000000000..7335c6d34
--- /dev/null
+++ b/apps/web-ele/src/api/erp/stock/stock/index.ts
@@ -0,0 +1,51 @@
+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 StockQueryReqVO {
+    productId: number;
+    warehouseId: number;
+  }
+}
+
+/** 查询产品库存分页 */
+export function getStockPage(params: PageParam) {
+  return requestClient.get<PageResult<ErpStockApi.Stock>>('/erp/stock/page', {
+    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: any) {
+  return requestClient.download('/erp/stock/export-excel', {
+    params,
+  });
+}
+
+/** 获取库存数量 */
+export function getWarehouseStockCount(params: ErpStockApi.StockQueryReqVO) {
+  return requestClient.get<number>('/erp/stock/get-count', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/erp/stock/warehouse/index.ts b/apps/web-ele/src/api/erp/stock/warehouse/index.ts
new file mode 100644
index 000000000..e5d6e1a49
--- /dev/null
+++ b/apps/web-ele/src/api/erp/stock/warehouse/index.ts
@@ -0,0 +1,71 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace ErpWarehouseApi {
+  /** 仓库信息 */
+  export interface Warehouse {
+    id?: number; // 仓库编号
+    name: string; // 仓库名称
+    address: string; // 仓库地址
+    sort: number; // 排序
+    remark: string; // 备注
+    principal: string; // 负责人
+    warehousePrice: number; // 仓储费，单位：元
+    truckagePrice: number; // 搬运费，单位：元
+    status: number; // 开启状态
+    defaultStatus: boolean; // 是否默认
+  }
+}
+
+/** 查询仓库分页 */
+export function getWarehousePage(params: PageParam) {
+  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-ele/src/components/markdown-view/index.ts b/apps/web-ele/src/components/markdown-view/index.ts
new file mode 100644
index 000000000..742bce8f5
--- /dev/null
+++ b/apps/web-ele/src/components/markdown-view/index.ts
@@ -0,0 +1,3 @@
+export { default as MarkdownView } from './markdown-view.vue';
+
+export * from './typing';
diff --git a/apps/web-ele/src/components/markdown-view/markdown-view.vue b/apps/web-ele/src/components/markdown-view/markdown-view.vue
new file mode 100644
index 000000000..e3af56379
--- /dev/null
+++ b/apps/web-ele/src/components/markdown-view/markdown-view.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import type { MarkdownViewProps } from './typing';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { MarkdownIt } from '@vben/plugins/markmap';
+
+import { useClipboard } from '@vueuse/core';
+import { ElMessage } from 'element-plus';
+import hljs from 'highlight.js';
+
+import 'highlight.js/styles/vs2015.min.css';
+
+// 定义组件属性
+const props = defineProps<MarkdownViewProps>();
+
+const { copy } = useClipboard(); // 初始化 copy 到粘贴板
+const contentRef = ref<HTMLElement | null>(null);
+
+const md = new MarkdownIt({
+  highlight(str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        const copyHtml = `<div id="copy" data-copy='${str}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`;
+        return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
+      } catch {}
+    }
+    return ``;
+  },
+});
+
+/** 渲染 markdown */
+const renderedMarkdown = computed(() => {
+  return md.render(props.content);
+});
+
+/** 初始化 */
+onMounted(async () => {
+  // 添加 copy 监听
+  contentRef.value?.addEventListener('click', (e: any) => {
+    if (e.target.id === 'copy') {
+      copy(e.target?.dataset?.copy);
+      ElMessage.success('复制成功!');
+    }
+  });
+});
+</script>
+
+<template>
+  <div ref="contentRef" class="markdown-view" v-html="renderedMarkdown"></div>
+</template>
+
+<style lang="scss">
+.markdown-view {
+  max-width: 100%;
+  font-family: 'PingFang SC';
+  font-size: 0.95rem;
+  font-weight: 400;
+  line-height: 1.6rem;
+  color: #3b3e55;
+  text-align: left;
+  letter-spacing: 0;
+
+  pre {
+    position: relative;
+  }
+
+  pre code.hljs {
+    width: auto;
+  }
+
+  code.hljs {
+    width: auto;
+    padding-top: 20px;
+    border-radius: 6px;
+
+    @media screen and (min-width: 1536px) {
+      width: 960px;
+    }
+
+    @media screen and (max-width: 1536px) and (min-width: 1024px) {
+      width: calc(100vw - 400px - 64px - 32px * 2);
+    }
+
+    @media screen and (max-width: 1024px) and (min-width: 768px) {
+      width: calc(100vw - 32px * 2);
+    }
+
+    @media screen and (max-width: 768px) {
+      width: calc(100vw - 16px * 2);
+    }
+  }
+
+  p,
+  code.hljs {
+    margin-bottom: 16px;
+  }
+
+  p {
+    //margin-bottom: 1rem !important;
+    margin: 0;
+    margin-bottom: 3px;
+  }
+
+  /* 标题通用格式 */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 24px 0 8px;
+    font-weight: 600;
+    color: #3b3e55;
+  }
+
+  h1 {
+    font-size: 22px;
+    line-height: 32px;
+  }
+
+  h2 {
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  h3 {
+    font-size: 18px;
+    line-height: 28px;
+  }
+
+  h4 {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  h5 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  h6 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  /* 列表（有序，无序） */
+  ul,
+  ol {
+    padding: 0;
+    margin: 0 0 8px;
+    font-size: 16px;
+    line-height: 24px;
+    color: #3b3e55; // var(--color-CG600);
+  }
+
+  li {
+    margin: 4px 0 0 20px;
+    margin-bottom: 1rem;
+  }
+
+  ol > li {
+    margin-bottom: 1rem;
+    list-style-type: decimal;
+    // 表达式,修复有序列表序号展示不全的问题
+    // &:nth-child(n + 10) {
+    //     margin-left: 30px;
+    // }
+
+    // &:nth-child(n + 100) {
+    //     margin-left: 30px;
+    // }
+  }
+
+  ul > li {
+    margin-right: 11px;
+    margin-bottom: 1rem;
+    font-size: 16px;
+    line-height: 24px;
+    color: #3b3e55; // var(--color-G900);
+    list-style-type: disc;
+  }
+
+  ol ul,
+  ol ul > li,
+  ul ul,
+  ul ul li {
+    margin-bottom: 1rem;
+    margin-left: 6px;
+    // list-style: circle;
+    font-size: 16px;
+    list-style: none;
+  }
+
+  ul ul ul,
+  ul ul ul li,
+  ol ol,
+  ol ol > li,
+  ol ul ul,
+  ol ul ul > li,
+  ul ol,
+  ul ol > li {
+    list-style: square;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/markdown-view/typing.ts b/apps/web-ele/src/components/markdown-view/typing.ts
new file mode 100644
index 000000000..350bbcf3a
--- /dev/null
+++ b/apps/web-ele/src/components/markdown-view/typing.ts
@@ -0,0 +1,3 @@
+export type MarkdownViewProps = {
+  content: string;
+};
diff --git a/apps/web-ele/src/components/operate-log/index.ts b/apps/web-ele/src/components/operate-log/index.ts
new file mode 100644
index 000000000..cf38b5e70
--- /dev/null
+++ b/apps/web-ele/src/components/operate-log/index.ts
@@ -0,0 +1,3 @@
+export { default as OperateLog } from './operate-log.vue';
+
+export type { OperateLogProps } from './typing';
diff --git a/apps/web-ele/src/components/operate-log/operate-log.vue b/apps/web-ele/src/components/operate-log/operate-log.vue
new file mode 100644
index 000000000..989452483
--- /dev/null
+++ b/apps/web-ele/src/components/operate-log/operate-log.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { OperateLogProps } from './typing';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel, getDictObj } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { ElTag, ElTimeline, ElTimelineItem } from 'element-plus';
+
+defineOptions({ name: 'OperateLogV2' });
+
+withDefaults(defineProps<OperateLogProps>(), {
+  logList: () => [],
+});
+
+function getUserTypeColor(userType: number) {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
+  if (dict && dict.colorType) {
+    return `hsl(var(--${dict.colorType}))`;
+  }
+  return 'hsl(var(--primary))';
+}
+</script>
+<template>
+  <div>
+    <ElTimeline>
+      <ElTimelineItem
+        v-for="log in logList"
+        :key="log.id"
+        :color="getUserTypeColor(log.userType)"
+      >
+        <template #dot>
+          <p
+            :style="{ backgroundColor: getUserTypeColor(log.userType) }"
+            class="absolute left-1 top-0 flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
+          >
+            {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+          </p>
+        </template>
+        <p class="ml-2">{{ formatDateTime(log.createTime) }}</p>
+        <p class="ml-2 mt-2">
+          <ElTag :color="getUserTypeColor(log.userType)">
+            {{ log.userName }}
+          </ElTag>
+          {{ log.action }}
+        </p>
+      </ElTimelineItem>
+    </ElTimeline>
+  </div>
+</template>
diff --git a/apps/web-ele/src/components/operate-log/typing.ts b/apps/web-ele/src/components/operate-log/typing.ts
new file mode 100644
index 000000000..773237b96
--- /dev/null
+++ b/apps/web-ele/src/components/operate-log/typing.ts
@@ -0,0 +1,5 @@
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+export interface OperateLogProps {
+  logList: SystemOperateLogApi.OperateLog[]; // 操作日志列表
+}
diff --git a/apps/web-ele/src/components/table-action/icons.ts b/apps/web-ele/src/components/table-action/icons.ts
index e6722e155..f8e5e90a7 100644
--- a/apps/web-ele/src/components/table-action/icons.ts
+++ b/apps/web-ele/src/components/table-action/icons.ts
@@ -11,4 +11,5 @@ export const ACTION_ICON = {
   VIEW: 'lucide:eye',
   COPY: 'lucide:copy',
   BOOK: 'lucide:book',
+  AUDIT: 'lucide:file-check',
 };
diff --git a/apps/web-ele/src/router/routes/modules/crm.ts b/apps/web-ele/src/router/routes/modules/crm.ts
new file mode 100644
index 000000000..eb16f4b52
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/crm.ts
@@ -0,0 +1,90 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/crm',
+    name: 'CrmCenter',
+    meta: {
+      title: '客户管理',
+      icon: 'simple-icons:civicrm',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      // {
+      //   path: 'clue/detail/:id',
+      //   name: 'CrmClueDetail',
+      //   meta: {
+      //     title: '线索详情',
+      //     activePath: '/crm/clue',
+      //   },
+      //   component: () => import('#/views/crm/clue/detail/index.vue'),
+      // },
+      // {
+      //   path: 'customer/detail/:id',
+      //   name: 'CrmCustomerDetail',
+      //   meta: {
+      //     title: '客户详情',
+      //     activePath: '/crm/customer',
+      //   },
+      //   component: () => import('#/views/crm/customer/detail/index.vue'),
+      // },
+      // {
+      //   path: 'business/detail/:id',
+      //   name: 'CrmBusinessDetail',
+      //   meta: {
+      //     title: '商机详情',
+      //     activePath: '/crm/business',
+      //   },
+      //   component: () => import('#/views/crm/business/detail/index.vue'),
+      // },
+      // {
+      //   path: 'contract/detail/:id',
+      //   name: 'CrmContractDetail',
+      //   meta: {
+      //     title: '合同详情',
+      //     activePath: '/crm/contract',
+      //   },
+      //   component: () => import('#/views/crm/contract/detail/index.vue'),
+      // },
+      // {
+      //   path: 'receivable-plan/detail/:id',
+      //   name: 'CrmReceivablePlanDetail',
+      //   meta: {
+      //     title: '回款计划详情',
+      //     activePath: '/crm/receivable-plan',
+      //   },
+      //   component: () => import('#/views/crm/receivable/plan/detail/index.vue'),
+      // },
+      // {
+      //   path: 'receivable/detail/:id',
+      //   name: 'CrmReceivableDetail',
+      //   meta: {
+      //     title: '回款详情',
+      //     activePath: '/crm/receivable',
+      //   },
+      //   component: () => import('#/views/crm/receivable/detail/index.vue'),
+      // },
+      // {
+      //   path: 'contact/detail/:id',
+      //   name: 'CrmContactDetail',
+      //   meta: {
+      //     title: '联系人详情',
+      //     activePath: '/crm/contact',
+      //   },
+      //   component: () => import('#/views/crm/contact/detail/index.vue'),
+      // },
+      {
+        path: 'product/detail/:id',
+        name: 'CrmProductDetail',
+        meta: {
+          title: '产品详情',
+          activePath: '/crm/product',
+        },
+        component: () => import('#/views/crm/product/detail/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/views/ai/chat/index/data.ts b/apps/web-ele/src/views/ai/chat/index/data.ts
new file mode 100644
index 000000000..8cc4ed6f3
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/data.ts
@@ -0,0 +1,77 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { AiModelTypeEnum } from '@vben/constants';
+
+import { getModelSimpleList } from '#/api/ai/model/model';
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'systemMessage',
+      label: '角色设定',
+      component: 'Textarea',
+      componentProps: {
+        rows: 4,
+        placeholder: '请输入角色设定',
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'modelId',
+      label: '模型',
+      componentProps: {
+        api: () => getModelSimpleList(AiModelTypeEnum.CHAT),
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择模型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'temperature',
+      label: '温度参数',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入温度参数',
+        class: 'w-full',
+        precision: 2,
+        min: 0,
+        max: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'maxTokens',
+      label: '回复数 Token 数',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入回复数 Token 数',
+        class: 'w-full',
+        min: 0,
+        max: 8192,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'maxContexts',
+      label: '上下文数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入上下文数量',
+        class: 'w-full',
+        min: 0,
+        max: 20,
+      },
+      rules: 'required',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/chat/index/index.vue b/apps/web-ele/src/views/ai/chat/index/index.vue
new file mode 100644
index 000000000..ae58f6ab6
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/index.vue
@@ -0,0 +1,690 @@
+<script lang="ts" setup>
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+import type { AiChatMessageApi } from '#/api/ai/chat/message';
+
+import { computed, nextTick, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { alert, confirm, Page, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElContainer,
+  ElFooter,
+  ElHeader,
+  ElMain,
+  ElMessage,
+  ElSwitch,
+} from 'element-plus';
+
+import { getChatConversationMy } from '#/api/ai/chat/conversation';
+import {
+  deleteByConversationId,
+  getChatMessageListByConversationId,
+  sendChatMessageStream,
+} from '#/api/ai/chat/message';
+
+import ConversationList from './modules/conversation/list.vue';
+import ConversationUpdateForm from './modules/conversation/update-form.vue';
+import MessageFileUpload from './modules/message/file-upload.vue';
+import MessageListEmpty from './modules/message/list-empty.vue';
+import MessageList from './modules/message/list.vue';
+import MessageLoading from './modules/message/loading.vue';
+import MessageNewConversation from './modules/message/new-conversation.vue';
+
+/** AI 聊天对话 列表 */
+defineOptions({ name: 'AiChat' });
+
+const route = useRoute();
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ConversationUpdateForm,
+  destroyOnClose: true,
+});
+
+// 聊天对话
+const conversationListRef = ref();
+const activeConversationId = ref<null | number>(null); // 选中的对话编号
+const activeConversation = ref<AiChatConversationApi.ChatConversation | null>(
+  null,
+); // 选中的 Conversation
+const conversationInProgress = ref(false); // 对话是否正在进行中。目前只有【发送】消息时，会更新为 true，避免切换对话、删除对话等操作
+
+// 消息列表
+const messageRef = ref();
+const activeMessageList = ref<AiChatMessageApi.ChatMessage[]>([]); // 选中对话的消息列表
+const activeMessageListLoading = ref<boolean>(false); // activeMessageList 是否正在加载中
+const activeMessageListLoadingTimer = ref<any>(); // activeMessageListLoading Timer 定时器。如果加载速度很快，就不进入加载中
+// 消息滚动
+const textSpeed = ref<number>(50); // Typing speed in milliseconds
+const textRoleRunning = ref<boolean>(false); // Typing speed in milliseconds
+
+// 发送消息输入框
+const isComposing = ref(false); // 判断用户是否在输入
+const conversationInAbortController = ref<any>(); // 对话进行中 abort 控制器(控制 stream 对话)
+const inputTimeout = ref<any>(); // 处理输入中回车的定时器
+const prompt = ref<string>(); // prompt
+const enableContext = ref<boolean>(true); // 是否开启上下文
+const enableWebSearch = ref<boolean>(false); // 是否开启联网搜索
+const uploadFiles = ref<string[]>([]); // 上传的文件 URL 列表
+// 接收 Stream 消息
+const receiveMessageFullText = ref('');
+const receiveMessageDisplayedText = ref('');
+
+// =========== 【聊天对话】相关 ===========
+
+/** 获取对话信息 */
+async function getConversation(id: null | number) {
+  if (!id) {
+    return;
+  }
+  const conversation: AiChatConversationApi.ChatConversation =
+    await getChatConversationMy(id);
+  if (!conversation) {
+    return;
+  }
+  activeConversation.value = conversation;
+  activeConversationId.value = conversation.id;
+}
+
+/**
+ * 点击某个对话
+ *
+ * @param conversation 选中的对话
+ * @return 是否切换成功
+ */
+async function handleConversationClick(
+  conversation: AiChatConversationApi.ChatConversation,
+) {
+  // 对话进行中，不允许切换
+  if (conversationInProgress.value) {
+    await alert('对话中，不允许切换!');
+    return false;
+  }
+
+  // 更新选中的对话 id
+  activeConversationId.value = conversation.id;
+  activeConversation.value = conversation;
+  // 刷新 message 列表
+  await getMessageList();
+  // 滚动底部
+  await scrollToBottom(true);
+  prompt.value = '';
+  // 清空输入框
+  prompt.value = '';
+  // 清空文件列表
+  uploadFiles.value = [];
+  return true;
+}
+
+/** 删除某个对话*/
+async function handlerConversationDelete(
+  delConversation: AiChatConversationApi.ChatConversation,
+) {
+  // 删除的对话如果是当前选中的，那么就重置
+  if (activeConversationId.value === delConversation.id) {
+    await handleConversationClear();
+  }
+}
+
+/** 清空选中的对话 */
+async function handleConversationClear() {
+  // 对话进行中，不允许切换
+  if (conversationInProgress.value) {
+    await alert('对话中，不允许切换!');
+    return false;
+  }
+  activeConversationId.value = null;
+  activeConversation.value = null;
+  activeMessageList.value = [];
+  // 清空输入框和文件列表
+  prompt.value = '';
+  uploadFiles.value = [];
+}
+
+async function openChatConversationUpdateForm() {
+  formModalApi.setData({ id: activeConversationId.value }).open();
+}
+
+/** 对话更新成功，刷新最新信息 */
+async function handleConversationUpdateSuccess() {
+  await getConversation(activeConversationId.value);
+}
+
+/** 处理聊天对话的创建成功 */
+async function handleConversationCreate() {
+  // 创建对话
+  await conversationListRef.value.createConversation();
+}
+
+/** 处理聊天对话的创建成功 */
+async function handleConversationCreateSuccess() {
+  // 创建新的对话，清空输入框
+  prompt.value = '';
+  // 清空文件列表
+  uploadFiles.value = [];
+}
+
+// =========== 【消息列表】相关 ===========
+
+/** 获取消息 message 列表 */
+async function getMessageList() {
+  try {
+    if (activeConversationId.value === null) {
+      return;
+    }
+    // Timer 定时器，如果加载速度很快，就不进入加载中
+    activeMessageListLoadingTimer.value = setTimeout(() => {
+      activeMessageListLoading.value = true;
+    }, 60);
+
+    // 获取消息列表
+    activeMessageList.value = await getChatMessageListByConversationId(
+      activeConversationId.value,
+    );
+
+    // 滚动到最下面
+    await nextTick();
+    await scrollToBottom();
+  } finally {
+    // time 定时器，如果加载速度很快，就不进入加载中
+    if (activeMessageListLoadingTimer.value) {
+      clearTimeout(activeMessageListLoadingTimer.value);
+    }
+    // 加载结束
+    activeMessageListLoading.value = false;
+  }
+}
+
+/**
+ * 消息列表
+ *
+ * 和 {@link #getMessageList()} 的差异是，把 systemMessage 考虑进去
+ */
+const messageList = computed(() => {
+  if (activeMessageList.value.length > 0) {
+    return activeMessageList.value;
+  }
+  // 没有消息时，如果有 systemMessage 则展示它
+  if (activeConversation.value?.systemMessage) {
+    return [
+      {
+        id: 0,
+        type: 'system',
+        content: activeConversation.value.systemMessage,
+      },
+    ];
+  }
+  return [];
+});
+
+/** 处理删除 message 消息 */
+function handleMessageDelete() {
+  if (conversationInProgress.value) {
+    alert('回答中，不能删除!');
+    return;
+  }
+  // 刷新 message 列表
+  getMessageList();
+}
+
+/** 处理 message 清空 */
+async function handlerMessageClear() {
+  if (!activeConversationId.value) {
+    return;
+  }
+  try {
+    // 确认提示
+    await confirm('确认清空对话消息？');
+    // 清空对话
+    await deleteByConversationId(activeConversationId.value);
+    // 刷新 message 列表
+    activeMessageList.value = [];
+  } catch {}
+}
+
+/** 回到 message 列表的顶部 */
+function handleGoTopMessage() {
+  messageRef.value.handlerGoTop();
+}
+
+// =========== 【发送消息】相关 ===========
+
+/** 处理来自 keydown 的发送消息 */
+async function handleSendByKeydown(event: any) {
+  // 判断用户是否在输入
+  if (isComposing.value) {
+    return;
+  }
+  // 进行中不允许发送
+  if (conversationInProgress.value) {
+    return;
+  }
+  const content = prompt.value?.trim() as string;
+  if (event.key === 'Enter') {
+    if (event.shiftKey) {
+      // 插入换行
+      prompt.value += '\r\n';
+      event.preventDefault(); // 防止默认的换行行为
+    } else {
+      // 发送消息
+      await doSendMessage(content);
+      event.preventDefault(); // 防止默认的提交行为
+    }
+  }
+}
+
+/** 处理来自【发送】按钮的发送消息 */
+function handleSendByButton() {
+  doSendMessage(prompt.value?.trim() as string);
+}
+
+/** 处理 prompt 输入变化 */
+function handlePromptInput(event: any) {
+  // 非输入法 输入设置为 true
+  if (!isComposing.value) {
+    // 回车 event data 是 null
+    if (event.data === null || event.data === 'null') {
+      return;
+    }
+    isComposing.value = true;
+  }
+  // 清理定时器
+  if (inputTimeout.value) {
+    clearTimeout(inputTimeout.value);
+  }
+  // 重置定时器
+  inputTimeout.value = setTimeout(() => {
+    isComposing.value = false;
+  }, 400);
+}
+
+function onCompositionstart() {
+  isComposing.value = true;
+}
+
+function onCompositionend() {
+  setTimeout(() => {
+    isComposing.value = false;
+  }, 200);
+}
+
+/** 真正执行【发送】消息操作 */
+async function doSendMessage(content: string) {
+  // 校验
+  if (content.length === 0) {
+    ElMessage.error('发送失败，原因：内容为空！');
+    return;
+  }
+  if (activeConversationId.value === null) {
+    ElMessage.error('还没创建对话，不能发送!');
+    return;
+  }
+
+  // 准备附件 URL 数组
+  const attachmentUrls = [...uploadFiles.value];
+
+  // 清空输入框和文件列表
+  prompt.value = '';
+  uploadFiles.value = [];
+
+  // 执行发送
+  await doSendMessageStream({
+    conversationId: activeConversationId.value,
+    content,
+    attachmentUrls,
+  } as AiChatMessageApi.ChatMessage);
+}
+
+/** 真正执行【发送】消息操作 */
+async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
+  // 创建 AbortController 实例，以便中止请求
+  conversationInAbortController.value = new AbortController();
+  // 标记对话进行中
+  conversationInProgress.value = true;
+  // 设置为空
+  receiveMessageFullText.value = '';
+
+  try {
+    // 1.1 先添加两个假数据，等 stream 返回再替换
+    activeMessageList.value.push(
+      {
+        id: -1,
+        conversationId: activeConversationId.value,
+        type: 'user',
+        content: userMessage.content,
+        attachmentUrls: userMessage.attachmentUrls || [],
+        createTime: new Date(),
+      } as AiChatMessageApi.ChatMessage,
+      {
+        id: -2,
+        conversationId: activeConversationId.value,
+        type: 'assistant',
+        content: '思考中...',
+        reasoningContent: '',
+        createTime: new Date(),
+      } as AiChatMessageApi.ChatMessage,
+    );
+    // 1.2 滚动到最下面
+    await nextTick();
+    await scrollToBottom(); // 底部
+    // 1.3 开始滚动
+    textRoll().then();
+
+    // 2. 发送 event stream
+    let isFirstChunk = true; // 是否是第一个 chunk 消息段
+    await sendChatMessageStream(
+      userMessage.conversationId,
+      userMessage.content,
+      conversationInAbortController.value,
+      enableContext.value,
+      enableWebSearch.value,
+      async (res: any) => {
+        const { code, data, msg } = JSON.parse(res.data);
+        if (code !== 0) {
+          await alert(`对话异常! ${msg}`);
+          // 如果未接收到消息，则进行删除
+          if (receiveMessageFullText.value === '') {
+            activeMessageList.value.pop();
+          }
+          return;
+        }
+
+        // 如果内容和推理内容都为空，就不处理
+        if (data.receive.content === '' && !data.receive.reasoningContent) {
+          return;
+        }
+
+        // 首次返回需要添加一个 message 到页面，后面的都是更新
+        if (isFirstChunk) {
+          isFirstChunk = false;
+          // 弹出两个假数据
+          activeMessageList.value.pop();
+          activeMessageList.value.pop();
+          // 更新返回的数据
+          activeMessageList.value.push(data.send, data.receive);
+          data.send.attachmentUrls = userMessage.attachmentUrls;
+        }
+
+        // 处理 reasoningContent
+        if (data.receive.reasoningContent) {
+          const lastMessage =
+            activeMessageList.value[activeMessageList.value.length - 1];
+          // 累加推理内容
+          lastMessage.reasoningContent =
+            (lastMessage.reasoningContent || '') +
+            data.receive.reasoningContent;
+        }
+
+        // 处理正常内容
+        if (data.receive.content !== '') {
+          receiveMessageFullText.value =
+            receiveMessageFullText.value + data.receive.content;
+        }
+
+        // 滚动到最下面
+        await scrollToBottom();
+      },
+      (error: any) => {
+        // 异常提示，并停止流
+        alert(`对话异常!`);
+        stopStream();
+        // 需要抛出异常，禁止重试
+        throw error;
+      },
+      () => {
+        stopStream();
+      },
+      userMessage.attachmentUrls,
+    );
+  } catch {}
+}
+
+/** 停止 stream 流式调用 */
+async function stopStream() {
+  // tip：如果 stream 进行中的 message，就需要调用 controller 结束
+  if (conversationInAbortController.value) {
+    conversationInAbortController.value.abort();
+  }
+  // 设置为 false
+  conversationInProgress.value = false;
+}
+
+/** 编辑 message：设置为 prompt，可以再次编辑 */
+function handleMessageEdit(message: AiChatMessageApi.ChatMessage) {
+  prompt.value = message.content;
+}
+
+/** 刷新 message：基于指定消息，再次发起对话 */
+function handleMessageRefresh(message: AiChatMessageApi.ChatMessage) {
+  doSendMessage(message.content);
+}
+
+// ============== 【消息滚动】相关 =============
+
+/** 滚动到 message 底部 */
+async function scrollToBottom(isIgnore?: boolean) {
+  await nextTick();
+  if (messageRef.value) {
+    messageRef.value.scrollToBottom(isIgnore);
+  }
+}
+
+/** 自提滚动效果 */
+async function textRoll() {
+  let index = 0;
+  try {
+    // 只能执行一次
+    if (textRoleRunning.value) {
+      return;
+    }
+    // 设置状态
+    textRoleRunning.value = true;
+    receiveMessageDisplayedText.value = '';
+    async function task() {
+      // 调整速度
+      const diff =
+        (receiveMessageFullText.value.length -
+          receiveMessageDisplayedText.value.length) /
+        10;
+      if (diff > 5) {
+        textSpeed.value = 10;
+      } else if (diff > 2) {
+        textSpeed.value = 30;
+      } else if (diff > 1.5) {
+        textSpeed.value = 50;
+      } else {
+        textSpeed.value = 100;
+      }
+      // 对话结束，就按 30 的速度
+      if (!conversationInProgress.value) {
+        textSpeed.value = 10;
+      }
+
+      if (index < receiveMessageFullText.value.length) {
+        receiveMessageDisplayedText.value +=
+          receiveMessageFullText.value[index];
+        index++;
+
+        // 更新 message
+        const lastMessage =
+          activeMessageList.value[activeMessageList.value.length - 1];
+        if (lastMessage)
+          lastMessage.content = receiveMessageDisplayedText.value;
+        // 滚动到住下面
+        await scrollToBottom();
+        // 重新设置任务
+        timer = setTimeout(task, textSpeed.value);
+      } else {
+        // 不是对话中可以结束
+        if (conversationInProgress.value) {
+          // 重新设置任务
+          timer = setTimeout(task, textSpeed.value);
+        } else {
+          textRoleRunning.value = false;
+          clearTimeout(timer);
+        }
+      }
+    }
+    let timer = setTimeout(task, textSpeed.value);
+  } catch {}
+}
+
+/** 初始化 */
+onMounted(async () => {
+  // 如果有 conversationId 参数，则默认选中
+  if (route.query.conversationId) {
+    const id = route.query.conversationId as unknown as number;
+    activeConversationId.value = id;
+    await getConversation(id);
+  }
+
+  // 获取列表数据
+  activeMessageListLoading.value = true;
+  await getMessageList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <ElContainer class="absolute left-0 top-0 m-4 h-full w-full flex-1">
+      <!-- 左侧：对话列表 -->
+      <ConversationList
+        class="!bg-card"
+        :active-id="activeConversationId"
+        ref="conversationListRef"
+        @on-conversation-create="handleConversationCreateSuccess"
+        @on-conversation-click="handleConversationClick"
+        @on-conversation-clear="handleConversationClear"
+        @on-conversation-delete="handlerConversationDelete"
+      />
+
+      <!-- 右侧：详情部分 -->
+      <ElContainer class="bg-card mx-4">
+        <ElHeader
+          class="!bg-card border-border flex !h-12 items-center justify-between border-b !px-4"
+        >
+          <div class="text-lg font-bold">
+            {{ activeConversation?.title ? activeConversation?.title : '对话' }}
+            <span v-if="activeMessageList.length > 0">
+              ({{ activeMessageList.length }})
+            </span>
+          </div>
+
+          <div class="flex w-72 justify-end" v-if="activeConversation">
+            <ElButton
+              type="primary"
+              plain
+              class="mr-2 px-2"
+              size="small"
+              @click="openChatConversationUpdateForm"
+            >
+              <span v-html="activeConversation?.modelName"></span>
+              <IconifyIcon icon="lucide:settings" class="ml-2 size-4" />
+            </ElButton>
+            <ElButton
+              size="small"
+              class="mr-2 px-2"
+              @click="handlerMessageClear"
+            >
+              <IconifyIcon icon="lucide:trash-2" color="#787878" />
+            </ElButton>
+            <ElButton size="small" class="mr-2 px-2">
+              <IconifyIcon icon="lucide:download" color="#787878" />
+            </ElButton>
+            <ElButton
+              size="small"
+              class="mr-2 px-2"
+              @click="handleGoTopMessage"
+            >
+              <IconifyIcon icon="lucide:arrow-up" color="#787878" />
+            </ElButton>
+          </div>
+        </ElHeader>
+
+        <ElMain class="relative m-0 h-full w-full p-0">
+          <div class="absolute inset-0 m-0 overflow-y-hidden p-0">
+            <MessageLoading v-if="activeMessageListLoading" />
+            <MessageNewConversation
+              v-if="!activeConversation"
+              @on-new-conversation="handleConversationCreate"
+            />
+            <MessageListEmpty
+              v-if="
+                !activeMessageListLoading &&
+                messageList.length === 0 &&
+                activeConversation
+              "
+              @on-prompt="doSendMessage"
+            />
+            <MessageList
+              v-if="!activeMessageListLoading && messageList.length > 0"
+              ref="messageRef"
+              :conversation="activeConversation as any"
+              :list="messageList as any"
+              @on-delete-success="handleMessageDelete"
+              @on-edit="handleMessageEdit"
+              @on-refresh="handleMessageRefresh"
+            />
+          </div>
+        </ElMain>
+
+        <ElFooter class="!bg-card flex flex-col !p-0">
+          <form
+            class="border-border mx-4 mb-8 mt-2 flex flex-col rounded-xl border p-2"
+          >
+            <textarea
+              class="box-border h-24 resize-none overflow-auto rounded-md p-2 focus:outline-none"
+              v-model="prompt"
+              @keydown="handleSendByKeydown"
+              @input="handlePromptInput"
+              @compositionstart="onCompositionstart"
+              @compositionend="onCompositionend"
+              placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
+            ></textarea>
+            <div class="flex justify-between pb-0 pt-1">
+              <div class="flex items-center gap-3">
+                <MessageFileUpload
+                  v-model="uploadFiles"
+                  :disabled="conversationInProgress"
+                />
+                <div class="flex items-center">
+                  <ElSwitch v-model="enableContext" size="small" />
+                  <span class="ml-1 text-sm text-gray-400">上下文</span>
+                </div>
+                <div class="flex items-center">
+                  <ElSwitch v-model="enableWebSearch" size="small" />
+                  <span class="ml-1 text-sm text-gray-400">联网搜索</span>
+                </div>
+              </div>
+              <ElButton
+                type="primary"
+                @click="handleSendByButton"
+                :loading="conversationInProgress"
+                v-if="conversationInProgress === false"
+              >
+                <IconifyIcon
+                  :icon="
+                    conversationInProgress
+                      ? 'lucide:loader'
+                      : 'lucide:send-horizontal'
+                  "
+                />
+                {{ conversationInProgress ? '进行中' : '发送' }}
+              </ElButton>
+              <ElButton
+                type="danger"
+                @click="stopStream()"
+                v-if="conversationInProgress === true"
+              >
+                <IconifyIcon icon="lucide:circle-stop" />
+                停止
+              </ElButton>
+            </div>
+          </form>
+        </ElFooter>
+      </ElContainer>
+    </ElContainer>
+    <FormModal @success="handleConversationUpdateSuccess" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/conversation/list.vue b/apps/web-ele/src/views/ai/chat/index/modules/conversation/list.vue
new file mode 100644
index 000000000..b87c15b1f
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/conversation/list.vue
@@ -0,0 +1,397 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+
+import { h, onMounted, ref, toRefs, watch } from 'vue';
+
+import { confirm, prompt, useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon, SvgGptIcon } from '@vben/icons';
+
+import {
+  ElAside,
+  ElAvatar,
+  ElButton,
+  ElEmpty,
+  ElInput,
+  ElMessage,
+} from 'element-plus';
+
+import {
+  createChatConversationMy,
+  deleteChatConversationMy,
+  deleteChatConversationMyByUnpinned,
+  getChatConversationMyList,
+  updateChatConversationMy,
+} from '#/api/ai/chat/conversation';
+import { $t } from '#/locales';
+
+import RoleRepository from '../role/repository.vue';
+
+const props = defineProps({
+  activeId: {
+    type: [Number, null] as PropType<null | number>,
+    default: null,
+  },
+});
+
+const emits = defineEmits([
+  'onConversationCreate',
+  'onConversationClick',
+  'onConversationClear',
+  'onConversationDelete',
+]);
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  connectedComponent: RoleRepository,
+});
+
+const searchName = ref<string>(''); // 对话搜索
+const activeConversationId = ref<null | number>(null); // 选中的对话，默认为 null
+const hoverConversationId = ref<null | number>(null); // 悬浮上去的对话
+const conversationList = ref([] as AiChatConversationApi.ChatConversation[]); // 对话列表
+const conversationMap = ref<any>({}); // 对话分组 (置顶、今天、三天前、一星期前、一个月前)
+const loading = ref<boolean>(false); // 加载中
+const loadingTime = ref<any>();
+
+/** 搜索对话 */
+async function searchConversation() {
+  // 恢复数据
+  if (searchName.value.trim().length === 0) {
+    conversationMap.value = await getConversationGroupByCreateTime(
+      conversationList.value,
+    );
+  } else {
+    // 过滤
+    const filterValues = conversationList.value.filter((item) => {
+      return item.title.includes(searchName.value.trim());
+    });
+    conversationMap.value =
+      await getConversationGroupByCreateTime(filterValues);
+  }
+}
+
+/** 点击对话 */
+async function handleConversationClick(id: number) {
+  // 过滤出选中的对话
+  const filterConversation = conversationList.value.find((item) => {
+    return item.id === id;
+  });
+  // 回调 onConversationClick
+  // noinspection JSVoidFunctionReturnValueUsed
+  const success = emits('onConversationClick', filterConversation) as any;
+  // 切换对话
+  if (success) {
+    activeConversationId.value = id;
+  }
+}
+
+/** 获取对话列表 */
+async function getChatConversationList() {
+  try {
+    // 加载中
+    loadingTime.value = setTimeout(() => {
+      loading.value = true;
+    }, 50);
+
+    // 1.1 获取 对话数据
+    conversationList.value = await getChatConversationMyList();
+    // 1.2 排序
+    conversationList.value.sort((a, b) => {
+      return Number(b.createTime) - Number(a.createTime);
+    });
+    // 1.3 没有任何对话情况
+    if (conversationList.value.length === 0) {
+      activeConversationId.value = null;
+      conversationMap.value = {};
+      return;
+    }
+
+    // 2. 对话根据时间分组(置顶、今天、一天前、三天前、七天前、30 天前)
+    conversationMap.value = await getConversationGroupByCreateTime(
+      conversationList.value,
+    );
+  } finally {
+    // 清理定时器
+    if (loadingTime.value) {
+      clearTimeout(loadingTime.value);
+    }
+    // 加载完成
+    loading.value = false;
+  }
+}
+
+/** 按照 creteTime 创建时间，进行分组 */
+async function getConversationGroupByCreateTime(
+  list: AiChatConversationApi.ChatConversation[],
+) {
+  // 排序、指定、时间分组(今天、一天前、三天前、七天前、30天前)
+  // noinspection NonAsciiCharacters
+  const groupMap: any = {
+    置顶: [],
+    今天: [],
+    一天前: [],
+    三天前: [],
+    七天前: [],
+    三十天前: [],
+  };
+  // 当前时间的时间戳
+  const now = Date.now();
+  // 定义时间间隔常量（单位：毫秒）
+  const oneDay = 24 * 60 * 60 * 1000;
+  const threeDays = 3 * oneDay;
+  const sevenDays = 7 * oneDay;
+  const thirtyDays = 30 * oneDay;
+  for (const conversation of list) {
+    // 置顶
+    if (conversation.pinned) {
+      groupMap['置顶'].push(conversation);
+      continue;
+    }
+    // 计算时间差（单位：毫秒）
+    const diff = now - Number(conversation.createTime);
+    // 根据时间间隔判断
+    if (diff < oneDay) {
+      groupMap['今天'].push(conversation);
+    } else if (diff < threeDays) {
+      groupMap['一天前'].push(conversation);
+    } else if (diff < sevenDays) {
+      groupMap['三天前'].push(conversation);
+    } else if (diff < thirtyDays) {
+      groupMap['七天前'].push(conversation);
+    } else {
+      groupMap['三十天前'].push(conversation);
+    }
+  }
+  return groupMap;
+}
+
+/** 新建对话 */
+async function handleConversationCreate() {
+  // 1. 创建对话
+  const conversationId = await createChatConversationMy({
+    roleId: undefined,
+  } as unknown as AiChatConversationApi.ChatConversation);
+
+  // 2. 刷新列表
+  await getChatConversationList();
+
+  // 3. 回调
+  emits('onConversationCreate', conversationId);
+}
+
+/** 清空未置顶的对话 */
+async function handleConversationClear() {
+  await confirm({
+    title: '清空未置顶的对话',
+    content: h('div', {}, [
+      h('p', '确认清空未置顶的对话吗？'),
+      h('p', '清空后，未置顶的对话将被删除，无法恢复！'),
+    ]),
+  });
+  // 清空
+  await deleteChatConversationMyByUnpinned();
+  // 刷新列表
+  await getChatConversationList();
+  // 回调
+  emits('onConversationClear');
+}
+
+/** 删除对话 */
+async function handleConversationDelete(id: number) {
+  await confirm({
+    title: '删除对话',
+    content: h('div', {}, [
+      h('p', '确认删除该对话吗？'),
+      h('p', '删除后，该对话将被删除，无法恢复！'),
+    ]),
+  });
+  // 删除
+  await deleteChatConversationMy(id);
+  // 刷新列表
+  await getChatConversationList();
+  // 回调
+  emits('onConversationDelete', id);
+}
+
+/** 置顶对话 */
+async function handleConversationPin(conversation: any) {
+  // 更新
+  await updateChatConversationMy({
+    id: conversation.id,
+    pinned: !conversation.pinned,
+  } as AiChatConversationApi.ChatConversation);
+  // 刷新列表
+  await getChatConversationList();
+}
+
+/** 编辑对话 */
+async function handleConversationEdit(conversation: any) {
+  const title = await prompt({
+    title: '编辑对话',
+    content: '请输入对话标题',
+    defaultValue: conversation.title,
+  });
+  // 更新
+  await updateChatConversationMy({
+    id: conversation.id,
+    title,
+  } as AiChatConversationApi.ChatConversation);
+  // 刷新列表
+  await getChatConversationList();
+  // 提示
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+}
+
+/** 打开角色仓库 */
+async function handleRoleRepositoryOpen() {
+  drawerApi.open();
+}
+
+/** 监听 activeId 变化 */
+watch(
+  () => props.activeId,
+  (newValue) => {
+    activeConversationId.value = newValue;
+  },
+);
+
+const { activeId } = toRefs(props);
+
+/** 初始化 */
+onMounted(async () => {
+  // 获取对话列表
+  await getChatConversationList();
+  // 设置选中的对话
+  if (activeId.value) {
+    activeConversationId.value = activeId.value;
+  }
+});
+
+defineExpose({ getChatConversationList });
+</script>
+
+<template>
+  <ElAside
+    class="bg-card relative flex h-full flex-col overflow-hidden border-r border-gray-200"
+    width="280px"
+  >
+    <Drawer />
+    <!-- 头部 -->
+    <div class="flex flex-col p-4">
+      <div class="mb-4 flex flex-row items-center justify-between">
+        <div class="text-lg font-bold">对话</div>
+        <div class="flex flex-row">
+          <ElButton
+            class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+            text
+            @click="handleConversationCreate"
+          >
+            <IconifyIcon icon="lucide:plus" />
+          </ElButton>
+          <ElButton
+            class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+            text
+            @click="handleConversationClear"
+          >
+            <IconifyIcon icon="lucide:trash" />
+          </ElButton>
+          <ElButton
+            class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+            text
+            @click="handleRoleRepositoryOpen"
+          >
+            <IconifyIcon icon="lucide:user" />
+          </ElButton>
+        </div>
+      </div>
+      <ElInput
+        v-model="searchName"
+        placeholder="搜索对话"
+        @keyup.enter="searchConversation"
+      >
+        <template #suffix>
+          <IconifyIcon icon="lucide:search" />
+        </template>
+      </ElInput>
+    </div>
+
+    <!-- 对话列表 -->
+    <div class="flex-1 overflow-y-auto px-4">
+      <div v-if="loading" class="flex h-full items-center justify-center">
+        <div class="text-sm text-gray-400">加载中...</div>
+      </div>
+      <div v-else-if="Object.keys(conversationMap).length === 0">
+        <ElEmpty description="暂无对话" />
+      </div>
+      <div v-else>
+        <div
+          v-for="(conversations, groupName) in conversationMap"
+          :key="groupName"
+        >
+          <div
+            v-if="conversations.length > 0"
+            class="mb-2 mt-4 text-xs text-gray-400"
+          >
+            {{ groupName }}
+          </div>
+          <div
+            v-for="conversation in conversations"
+            :key="conversation.id"
+            class="group relative mb-2 cursor-pointer rounded-lg p-2 transition-all hover:bg-gray-100"
+            :class="{
+              'bg-gray-100': activeConversationId === conversation.id,
+            }"
+            @click="handleConversationClick(conversation.id)"
+            @mouseenter="hoverConversationId = conversation.id"
+            @mouseleave="hoverConversationId = null"
+          >
+            <div class="flex items-center">
+              <ElAvatar
+                v-if="conversation.roleAvatar"
+                :src="conversation.roleAvatar"
+                :size="28"
+              />
+              <SvgGptIcon v-else class="size-7" />
+              <div class="ml-2 flex-1 overflow-hidden">
+                <div class="truncate text-sm font-medium">
+                  {{ conversation.title }}
+                </div>
+              </div>
+              <div
+                v-if="hoverConversationId === conversation.id"
+                class="flex flex-row"
+              >
+                <ElButton
+                  class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+                  text
+                  @click.stop="handleConversationPin(conversation)"
+                >
+                  <IconifyIcon
+                    :icon="
+                      conversation.pinned ? 'lucide:pin-off' : 'lucide:pin'
+                    "
+                  />
+                </ElButton>
+                <ElButton
+                  class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+                  text
+                  @click.stop="handleConversationEdit(conversation)"
+                >
+                  <IconifyIcon icon="lucide:edit" />
+                </ElButton>
+                <ElButton
+                  class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+                  text
+                  @click.stop="handleConversationDelete(conversation.id)"
+                >
+                  <IconifyIcon icon="lucide:trash" />
+                </ElButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ElAside>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/conversation/update-form.vue b/apps/web-ele/src/views/ai/chat/index/modules/conversation/update-form.vue
new file mode 100644
index 000000000..6a7ae84e4
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/conversation/update-form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  getChatConversationMy,
+  updateChatConversationMy,
+} from '#/api/ai/chat/conversation';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiChatConversationApi.ChatConversation>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 110,
+  },
+  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 AiChatConversationApi.ChatConversation;
+    try {
+      await updateChatConversationMy(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<AiChatConversationApi.ChatConversation>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getChatConversationMy(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" title="设定">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/file-upload.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/file-upload.vue
new file mode 100644
index 000000000..6d6b69179
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/file-upload.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatFileSize, getFileIcon } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useUpload } from '#/components/upload/use-upload';
+
+export interface FileItem {
+  name: string;
+  size: number;
+  url?: string;
+  uploading?: boolean;
+  progress?: number;
+  raw?: File;
+}
+
+const props = withDefaults(
+  defineProps<{
+    acceptTypes?: string;
+    disabled?: boolean;
+    limit?: number;
+    maxSize?: number;
+    modelValue?: string[];
+  }>(),
+  {
+    modelValue: () => [],
+    limit: 5,
+    maxSize: 10,
+    acceptTypes:
+      '.jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.txt,.xls,.xlsx,.ppt,.pptx,.csv,.md',
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+  uploadError: [error: any];
+  uploadSuccess: [file: FileItem];
+}>();
+
+const fileInputRef = ref<HTMLInputElement>();
+const fileList = ref<FileItem[]>([]);
+const uploadedUrls = ref<string[]>([]);
+const showTooltip = ref(false);
+const hideTimer = ref<NodeJS.Timeout | null>(null);
+const { httpRequest } = useUpload();
+
+/** 监听 v-model 变化 */
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    uploadedUrls.value = [...newVal];
+    if (newVal.length === 0) {
+      fileList.value = [];
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+/** 是否有文件 */
+const hasFiles = computed(() => fileList.value.length > 0);
+
+/** 是否达到上传限制 */
+const isLimitReached = computed(() => fileList.value.length >= props.limit);
+
+/** 触发文件选择 */
+function triggerFileInput() {
+  fileInputRef.value?.click();
+}
+
+/** 显示 tooltip */
+function showTooltipHandler() {
+  if (hideTimer.value) {
+    clearTimeout(hideTimer.value);
+    hideTimer.value = null;
+  }
+  showTooltip.value = true;
+}
+
+/** 隐藏 tooltip */
+function hideTooltipHandler() {
+  hideTimer.value = setTimeout(() => {
+    showTooltip.value = false;
+    hideTimer.value = null;
+  }, 300);
+}
+
+/** 处理文件选择 */
+async function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const files = [...(target.files || [])];
+  if (files.length === 0) {
+    return;
+  }
+
+  if (files.length + fileList.value.length > props.limit) {
+    ElMessage.error(`最多只能上传 ${props.limit} 个文件`);
+    target.value = '';
+    return;
+  }
+
+  for (const file of files) {
+    if (file.size > props.maxSize * 1024 * 1024) {
+      ElMessage.error(`文件 ${file.name} 大小超过 ${props.maxSize}MB`);
+      continue;
+    }
+
+    const fileItem: FileItem = {
+      name: file.name,
+      size: file.size,
+      uploading: true,
+      progress: 0,
+      raw: file,
+    };
+    fileList.value.push(fileItem);
+    await uploadFile(fileItem);
+  }
+
+  target.value = '';
+}
+
+/** 上传文件 */
+async function uploadFile(fileItem: FileItem) {
+  try {
+    const progressInterval = setInterval(() => {
+      if (fileItem.progress! < 90) {
+        fileItem.progress = (fileItem.progress || 0) + Math.random() * 10;
+      }
+    }, 100);
+
+    const response = await httpRequest(fileItem.raw!);
+    clearInterval(progressInterval);
+
+    fileItem.uploading = false;
+    fileItem.progress = 100;
+
+    // 调试日志
+    console.log('上传响应:', response);
+
+    // 兼容不同的返回格式：{ url: '...' } 或 { data: '...' } 或直接是字符串
+    const fileUrl =
+      (response as any)?.url || (response as any)?.data || response;
+    fileItem.url = fileUrl;
+
+    console.log('提取的文件 URL:', fileUrl);
+
+    // 只有当 URL 有效时才添加到列表
+    if (fileUrl && typeof fileUrl === 'string') {
+      uploadedUrls.value.push(fileUrl);
+      emit('uploadSuccess', fileItem);
+      updateModelValue();
+    } else {
+      throw new Error('上传返回的 URL 无效');
+    }
+  } catch (error) {
+    fileItem.uploading = false;
+    ElMessage.error(`文件 ${fileItem.name} 上传失败`);
+    emit('uploadError', error);
+
+    const index = fileList.value.indexOf(fileItem);
+    if (index !== -1) {
+      removeFile(index);
+    }
+  }
+}
+
+/** 删除文件 */
+function removeFile(index: number) {
+  const removedFile = fileList.value[index];
+  fileList.value.splice(index, 1);
+  if (removedFile?.url) {
+    const urlIndex = uploadedUrls.value.indexOf(removedFile.url);
+    if (urlIndex !== -1) {
+      uploadedUrls.value.splice(urlIndex, 1);
+    }
+  }
+  updateModelValue();
+}
+
+/** 更新 v-model */
+function updateModelValue() {
+  emit('update:modelValue', [...uploadedUrls.value]);
+}
+
+/** 清空文件 */
+function clearFiles() {
+  fileList.value = [];
+  uploadedUrls.value = [];
+  updateModelValue();
+}
+
+defineExpose({
+  triggerFileInput,
+  clearFiles,
+});
+
+onUnmounted(() => {
+  if (hideTimer.value) {
+    clearTimeout(hideTimer.value);
+  }
+});
+</script>
+
+<template>
+  <div
+    v-if="!disabled"
+    class="relative inline-block"
+    @mouseenter="showTooltipHandler"
+    @mouseleave="hideTooltipHandler"
+  >
+    <!-- 文件上传按钮 -->
+    <button
+      type="button"
+      class="relative flex h-8 w-8 items-center justify-center rounded-full border-0 bg-transparent text-gray-600 transition-all duration-200 hover:bg-gray-100"
+      :class="{ 'text-blue-500 hover:bg-blue-50': hasFiles }"
+      :disabled="isLimitReached"
+      @click="triggerFileInput"
+    >
+      <IconifyIcon icon="lucide:paperclip" :size="16" />
+      <!-- 文件数量徽章 -->
+      <span
+        v-if="hasFiles"
+        class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white"
+      >
+        {{ fileList.length }}
+      </span>
+    </button>
+
+    <!-- 隐藏的文件输入框 -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      style="display: none"
+      :accept="acceptTypes"
+      @change="handleFileSelect"
+    />
+
+    <!-- Hover 显示的文件列表 -->
+    <div
+      v-if="hasFiles && showTooltip"
+      class="animate-in fade-in slide-in-from-bottom-1 absolute bottom-[calc(100%+8px)] left-1/2 z-[1000] min-w-[240px] max-w-[320px] -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg duration-200"
+      @mouseenter="showTooltipHandler"
+      @mouseleave="hideTooltipHandler"
+    >
+      <!-- Tooltip 箭头 -->
+      <div
+        class="absolute -bottom-[5px] left-1/2 h-0 w-0 -translate-x-1/2 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-200"
+      >
+        <div
+          class="absolute bottom-[1px] left-1/2 h-0 w-0 -translate-x-1/2 border-l-[4px] border-r-[4px] border-t-[4px] border-l-transparent border-r-transparent border-t-white"
+        ></div>
+      </div>
+      <!-- 文件列表 -->
+      <div
+        class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-400 scrollbar-thumb-rounded-sm max-h-[200px] overflow-y-auto"
+      >
+        <div
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="mb-1 flex items-center justify-between rounded-md bg-gray-50 p-2 text-xs transition-all duration-200 last:mb-0 hover:bg-gray-100"
+          :class="{ 'opacity-70': file.uploading }"
+        >
+          <div class="flex min-w-0 flex-1 items-center">
+            <IconifyIcon
+              :icon="getFileIcon(file.name)"
+              class="mr-2 flex-shrink-0 text-blue-500"
+            />
+            <span
+              class="mr-1 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-medium text-gray-900"
+            >
+              {{ file.name }}
+            </span>
+            <span class="flex-shrink-0 text-[11px] text-gray-500">
+              ({{ formatFileSize(file.size) }})
+            </span>
+          </div>
+          <div class="ml-2 flex flex-shrink-0 items-center gap-1">
+            <div
+              v-if="file.uploading"
+              class="h-1 w-[60px] overflow-hidden rounded-full bg-gray-200"
+            >
+              <div
+                class="h-full bg-blue-500 transition-all duration-300"
+                :style="{ width: `${file.progress || 0}%` }"
+              ></div>
+            </div>
+            <button
+              v-else-if="!disabled"
+              type="button"
+              class="flex h-5 w-5 items-center justify-center rounded text-red-500 hover:bg-red-50"
+              @click="removeFile(index)"
+            >
+              <IconifyIcon icon="lucide:x" :size="12" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/files.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/files.vue
new file mode 100644
index 000000000..ed163a026
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/files.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { getFileIcon, getFileNameFromUrl, getFileTypeClass } from '@vben/utils';
+
+const props = defineProps<{
+  attachmentUrls?: string[];
+}>();
+
+/** 过滤掉空值的附件列表 */
+const validAttachmentUrls = computed(() => {
+  return (props.attachmentUrls || []).filter((url) => url && url.trim());
+});
+
+/** 点击文件 */
+function handleFileClick(url: string) {
+  window.open(url, '_blank');
+}
+</script>
+
+<template>
+  <div v-if="validAttachmentUrls.length > 0" class="mt-2">
+    <div class="flex flex-wrap gap-2">
+      <div
+        v-for="(url, index) in validAttachmentUrls"
+        :key="index"
+        class="max-w-70 flex min-w-40 cursor-pointer items-center rounded-lg border border-transparent bg-gray-100 p-3 transition-all duration-200 hover:-translate-y-1 hover:bg-gray-200 hover:shadow-lg"
+        @click="handleFileClick(url)"
+      >
+        <div class="mr-3 flex-shrink-0">
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br font-bold text-white"
+            :class="getFileTypeClass(getFileNameFromUrl(url))"
+          >
+            <IconifyIcon
+              :icon="getFileIcon(getFileNameFromUrl(url))"
+              :size="20"
+            />
+          </div>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div
+            class="mb-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-tight text-gray-800"
+            :title="getFileNameFromUrl(url)"
+          >
+            {{ getFileNameFromUrl(url) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/knowledge.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/knowledge.vue
new file mode 100644
index 000000000..34eabf15d
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/knowledge.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElTooltip } from 'element-plus';
+
+const props = defineProps<{
+  segments: {
+    content: string;
+    documentId: number;
+    documentName: string;
+    id: number;
+  }[];
+}>();
+
+const document = ref<null | {
+  id: number;
+  segments: {
+    content: string;
+    id: number;
+  }[];
+  title: string;
+}>(null); // 知识库文档列表
+const dialogVisible = ref(false); // 知识引用详情弹窗
+const documentRef = ref<HTMLElement>(); // 知识引用详情弹窗 Ref
+
+/** 按照 document 聚合 segments */
+const documentList = computed(() => {
+  if (!props.segments) return [];
+
+  const docMap = new Map();
+  props.segments.forEach((segment) => {
+    if (!docMap.has(segment.documentId)) {
+      docMap.set(segment.documentId, {
+        id: segment.documentId,
+        title: segment.documentName,
+        segments: [],
+      });
+    }
+    docMap.get(segment.documentId).segments.push({
+      id: segment.id,
+      content: segment.content,
+    });
+  });
+  return [...docMap.values()];
+});
+
+/** 点击 document 处理 */
+function handleClick(doc: any) {
+  document.value = doc;
+  dialogVisible.value = true;
+}
+</script>
+
+<template>
+  <!-- 知识引用列表 -->
+  <div
+    v-if="segments && segments.length > 0"
+    class="mt-2 rounded-lg bg-gray-50 p-2"
+  >
+    <div class="mb-2 flex items-center text-sm text-gray-400">
+      <IconifyIcon icon="lucide:file-text" class="mr-1" /> 知识引用
+    </div>
+    <div class="flex flex-wrap gap-2">
+      <div
+        v-for="(doc, index) in documentList"
+        :key="index"
+        class="bg-card cursor-pointer rounded-lg p-2 px-3 transition-all hover:bg-blue-50"
+        @click="handleClick(doc)"
+      >
+        <div class="mb-1 text-sm text-gray-600">
+          {{ doc.title }}
+          <span class="ml-1 text-xs text-gray-300">
+            （{{ doc.segments.length }} 条）
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <ElTooltip placement="top-start" trigger="click">
+    <div ref="documentRef"></div>
+    <template #content>
+      <div class="mb-3 text-base font-bold">{{ document?.title }}</div>
+      <div class="max-h-[60vh] overflow-y-auto">
+        <div
+          v-for="(segment, index) in document?.segments"
+          :key="index"
+          class="border-b-solid border-b-gray-200 p-3 last:border-b-0"
+        >
+          <div
+            class="mb-2 block w-fit rounded-sm px-2 py-1 text-xs text-gray-400"
+          >
+            分段 {{ segment.id }}
+          </div>
+          <div class="mt-2 text-sm leading-[1.6] text-gray-600">
+            {{ segment.content }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </ElTooltip>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/list-empty.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/list-empty.vue
new file mode 100644
index 000000000..b8ac0a3e4
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/list-empty.vue
@@ -0,0 +1,39 @@
+<!-- 消息列表为空时，展示 prompt 列表 -->
+<script setup lang="ts">
+const emits = defineEmits(['onPrompt']);
+
+const promptList = [
+  {
+    prompt: '今天气怎么样?',
+  },
+  {
+    prompt: '写一首好听的诗歌?',
+  },
+]; // prompt 列表
+
+/** 选中 prompt 点击 */
+async function handlerPromptClick(prompt: any) {
+  emits('onPrompt', prompt.prompt);
+}
+</script>
+<template>
+  <div class="relative flex h-full w-full flex-row justify-center">
+    <!-- center-container -->
+    <div class="flex flex-col justify-center">
+      <!-- title -->
+      <div class="text-center text-3xl font-bold">芋道 AI</div>
+
+      <!-- role-list -->
+      <div class="mt-5 flex w-96 flex-wrap items-center justify-center">
+        <div
+          v-for="prompt in promptList"
+          :key="prompt.prompt"
+          @click="handlerPromptClick(prompt)"
+          class="m-2.5 flex w-44 cursor-pointer justify-center rounded-lg border border-gray-200 leading-10 hover:bg-gray-100"
+        >
+          {{ prompt.prompt }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/list.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/list.vue
new file mode 100644
index 000000000..fdaf36459
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/list.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+import type { AiChatMessageApi } from '#/api/ai/chat/message';
+
+import { computed, nextTick, onMounted, ref, toRefs } from 'vue';
+
+import { IconifyIcon, SvgGptIcon } from '@vben/icons';
+import { preferences } from '@vben/preferences';
+import { useUserStore } from '@vben/stores';
+import { formatDateTime } from '@vben/utils';
+
+import { useClipboard } from '@vueuse/core';
+import { ElAvatar, ElButton, ElMessage } from 'element-plus';
+
+import { deleteChatMessage } from '#/api/ai/chat/message';
+import { MarkdownView } from '#/components/markdown-view';
+
+import MessageFiles from './files.vue';
+import MessageKnowledge from './knowledge.vue';
+import MessageReasoning from './reasoning.vue';
+import MessageWebSearch from './web-search.vue';
+
+const props = defineProps({
+  conversation: {
+    type: Object as PropType<AiChatConversationApi.ChatConversation>,
+    required: true,
+  },
+  list: {
+    type: Array as PropType<AiChatMessageApi.ChatMessage[]>,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']);
+const { copy } = useClipboard(); // 初始化 copy 到粘贴板
+const userStore = useUserStore();
+
+// 判断"消息列表"滚动的位置(用于判断是否需要滚动到消息最下方)
+const messageContainer: any = ref(null);
+const isScrolling = ref(false); // 用于判断用户是否在滚动
+
+const userAvatar = computed(
+  () => userStore.userInfo?.avatar || preferences.app.defaultAvatar,
+);
+
+const { list } = toRefs(props); // 定义 emits
+
+// ============ 处理对话滚动 ==============
+
+/** 滚动到底部 */
+async function scrollToBottom(isIgnore?: boolean) {
+  // 注意要使用 nextTick 以免获取不到 dom
+  await nextTick();
+  if (isIgnore || !isScrolling.value) {
+    messageContainer.value.scrollTop =
+      messageContainer.value.scrollHeight - messageContainer.value.offsetHeight;
+  }
+}
+
+function handleScroll() {
+  const scrollContainer = messageContainer.value;
+  const scrollTop = scrollContainer.scrollTop;
+  const scrollHeight = scrollContainer.scrollHeight;
+  const offsetHeight = scrollContainer.offsetHeight;
+  isScrolling.value = scrollTop + offsetHeight < scrollHeight - 100;
+}
+
+/** 回到底部 */
+async function handleGoBottom() {
+  const scrollContainer = messageContainer.value;
+  scrollContainer.scrollTop = scrollContainer.scrollHeight;
+}
+
+/** 回到顶部 */
+async function handlerGoTop() {
+  const scrollContainer = messageContainer.value;
+  scrollContainer.scrollTop = 0;
+}
+
+defineExpose({ scrollToBottom, handlerGoTop }); // 提供方法给 parent 调用
+
+// ============ 处理消息操作 ==============
+
+/** 复制 */
+async function copyContent(content: string) {
+  await copy(content);
+  ElMessage.success('复制成功！');
+}
+/** 删除 */
+async function handleDelete(id: number) {
+  // 删除 message
+  await deleteChatMessage(id);
+  ElMessage.success('删除成功！');
+  // 回调
+  emits('onDeleteSuccess');
+}
+
+/** 刷新 */
+async function handleRefresh(message: AiChatMessageApi.ChatMessage) {
+  emits('onRefresh', message);
+}
+
+/** 编辑 */
+async function handleEdit(message: AiChatMessageApi.ChatMessage) {
+  emits('onEdit', message);
+}
+
+/** 初始化 */
+onMounted(async () => {
+  messageContainer.value.addEventListener('scroll', handleScroll);
+});
+</script>
+<template>
+  <div ref="messageContainer" class="relative h-full overflow-y-auto">
+    <div
+      v-for="(item, index) in list"
+      :key="index"
+      class="mt-12 flex flex-col overflow-y-hidden px-5"
+    >
+      <!-- 左侧消息：system、assistant -->
+      <div v-if="item.type !== 'user'" class="flex flex-row">
+        <div class="avatar">
+          <ElAvatar
+            v-if="conversation.roleAvatar"
+            :src="conversation.roleAvatar"
+            :size="28"
+          />
+          <SvgGptIcon v-else class="size-7" />
+        </div>
+        <div class="mx-4 flex flex-col text-left">
+          <div class="text-left leading-10">
+            {{ formatDateTime(item.createTime) }}
+          </div>
+          <div
+            class="relative flex flex-col break-words rounded-lg bg-gray-100 p-2.5 pb-1 pt-2.5 shadow-sm"
+          >
+            <MessageReasoning
+              :reasoning-content="item.reasoningContent || ''"
+              :content="item.content || ''"
+            />
+            <MarkdownView
+              class="text-sm text-gray-600"
+              :content="item.content"
+            />
+            <MessageFiles :attachment-urls="item.attachmentUrls" />
+            <MessageKnowledge v-if="item.segments" :segments="item.segments" />
+            <MessageWebSearch
+              v-if="item.webSearchPages"
+              :web-search-pages="item.webSearchPages"
+            />
+          </div>
+          <div class="mt-2 flex flex-row">
+            <ElButton
+              class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+              text
+              @click="copyContent(item.content)"
+            >
+              <IconifyIcon icon="lucide:copy" />
+            </ElButton>
+            <ElButton
+              v-if="item.id > 0"
+              class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+              text
+              @click="handleDelete(item.id)"
+            >
+              <IconifyIcon icon="lucide:trash" />
+            </ElButton>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧消息：user -->
+      <div v-else class="flex flex-row-reverse justify-start">
+        <div class="avatar">
+          <ElAvatar :src="userAvatar" :size="28" />
+        </div>
+        <div class="mx-4 flex flex-col text-left">
+          <div class="text-left leading-8">
+            {{ formatDateTime(item.createTime) }}
+          </div>
+          <div
+            v-if="item.attachmentUrls && item.attachmentUrls.length > 0"
+            class="mb-2 flex flex-row-reverse"
+          >
+            <MessageFiles :attachment-urls="item.attachmentUrls" />
+          </div>
+          <div class="flex flex-row-reverse">
+            <div
+              v-if="item.content && item.content.trim()"
+              class="inline w-auto whitespace-pre-wrap break-words rounded-lg bg-blue-500 p-2.5 text-sm text-white shadow-sm"
+            >
+              {{ item.content }}
+            </div>
+          </div>
+          <div class="mt-2 flex flex-row-reverse">
+            <ElButton
+              class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+              text
+              @click="copyContent(item.content)"
+            >
+              <IconifyIcon icon="lucide:copy" />
+            </ElButton>
+            <ElButton
+              class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+              text
+              @click="handleDelete(item.id)"
+            >
+              <IconifyIcon icon="lucide:trash" />
+            </ElButton>
+            <ElButton
+              class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+              text
+              @click="handleRefresh(item)"
+            >
+              <IconifyIcon icon="lucide:refresh-cw" />
+            </ElButton>
+            <ElButton
+              class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
+              text
+              @click="handleEdit(item)"
+            >
+              <IconifyIcon icon="lucide:edit" />
+            </ElButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 回到底部按钮 -->
+  <div
+    v-if="isScrolling"
+    class="z-1000 absolute bottom-0 right-1/2"
+    @click="handleGoBottom"
+  >
+    <ElButton circle>
+      <IconifyIcon icon="lucide:chevron-down" />
+    </ElButton>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/loading.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/loading.vue
new file mode 100644
index 000000000..a5e076532
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/loading.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ElSkeleton } from 'element-plus';
+</script>
+
+<template>
+  <div class="p-8">
+    <ElSkeleton :rows="5" animated />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/new-conversation.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/new-conversation.vue
new file mode 100644
index 000000000..339af1704
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/new-conversation.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ElButton } from 'element-plus';
+
+const emits = defineEmits(['onNewConversation']);
+
+/** 新建 conversation 聊天对话 */
+function handlerNewChat() {
+  emits('onNewConversation');
+}
+</script>
+
+<template>
+  <div class="flex h-full w-full flex-row justify-center">
+    <div class="flex flex-col justify-center">
+      <div class="text-center text-sm text-gray-400">
+        点击下方按钮，开始你的对话吧
+      </div>
+      <div class="mt-5 flex flex-row justify-center">
+        <ElButton type="primary" round @click="handlerNewChat">
+          新建对话
+        </ElButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/reasoning.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/reasoning.vue
new file mode 100644
index 000000000..99390fbfc
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/reasoning.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { MarkdownView } from '#/components/markdown-view';
+
+const props = defineProps<{
+  content?: string;
+  reasoningContent?: string;
+}>();
+
+const isExpanded = ref(true); // 默认展开
+
+/** 判断是否应该显示组件 */
+const shouldShowComponent = computed(() => {
+  return props.reasoningContent && props.reasoningContent.trim() !== '';
+});
+
+/** 标题文本 */
+const titleText = computed(() => {
+  const hasReasoningContent =
+    props.reasoningContent && props.reasoningContent.trim() !== '';
+  const hasContent = props.content && props.content.trim() !== '';
+  if (hasReasoningContent && !hasContent) {
+    return '深度思考中';
+  }
+  return '已深度思考';
+});
+
+/** 切换展开/收起 */
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value;
+}
+</script>
+
+<template>
+  <div v-if="shouldShowComponent" class="mt-2.5">
+    <!-- 标题栏 -->
+    <div
+      class="flex cursor-pointer items-center justify-between rounded-t-lg border border-b-0 border-gray-200/60 bg-gradient-to-r from-blue-50 to-purple-50 p-2 transition-all duration-200 hover:from-blue-100 hover:to-purple-100"
+      @click="toggleExpanded"
+    >
+      <div class="flex items-center gap-1.5 text-sm font-medium text-gray-700">
+        <IconifyIcon icon="lucide:brain" class="text-blue-600" :size="16" />
+        <span>{{ titleText }}</span>
+      </div>
+      <IconifyIcon
+        icon="lucide:chevron-down"
+        class="text-gray-500 transition-transform duration-200"
+        :class="{ 'rotate-180': isExpanded }"
+        :size="14"
+      />
+    </div>
+    <!-- 内容区 -->
+    <div
+      v-show="isExpanded"
+      class="scrollbar-thin max-h-[300px] overflow-y-auto rounded-b-lg border border-t-0 border-gray-200/60 bg-white/70 p-3 shadow-sm backdrop-blur-sm"
+    >
+      <MarkdownView
+        v-if="props.reasoningContent"
+        class="text-sm leading-relaxed text-gray-700"
+        :content="props.reasoningContent"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义滚动条 */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply rounded-sm bg-gray-400/40;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-400/60;
+}
+</style>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/message/web-search.vue b/apps/web-ele/src/views/ai/chat/index/modules/message/web-search.vue
new file mode 100644
index 000000000..d48a94c24
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/message/web-search.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { AiChatMessageApi } from '#/api/ai/chat/message';
+
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+defineProps<{
+  webSearchPages?: AiChatMessageApi.WebSearchPage[];
+}>();
+
+const isExpanded = ref(false); // 默认收起
+const selectedResult = ref<AiChatMessageApi.WebSearchPage | null>(null); // 选中的搜索结果
+const iconLoadError = ref<Record<number, boolean>>({}); // 记录图标加载失败
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: '联网搜索详情',
+  closable: true,
+  footer: true,
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    if (selectedResult.value?.url) {
+      window.open(selectedResult.value.url, '_blank');
+    }
+    drawerApi.close();
+  },
+});
+
+/** 切换展开/收起 */
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value;
+}
+
+/** 点击搜索结果 */
+function handleClick(result: AiChatMessageApi.WebSearchPage) {
+  selectedResult.value = result;
+  drawerApi.open();
+}
+
+/** 图标加载失败处理 */
+function handleIconError(index: number) {
+  iconLoadError.value[index] = true;
+}
+</script>
+
+<template>
+  <div v-if="webSearchPages && webSearchPages.length > 0" class="mt-2.5">
+    <!-- 标题栏：可点击展开/收起 -->
+    <div
+      class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray-600 transition-colors hover:text-blue-500"
+      @click="toggleExpanded"
+    >
+      <div class="flex items-center gap-1.5">
+        <IconifyIcon icon="lucide:search" :size="14" />
+        <span>联网搜索结果 ({{ webSearchPages.length }} 条)</span>
+      </div>
+      <IconifyIcon
+        :icon="isExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+        class="text-xs transition-transform duration-200"
+        :size="12"
+      />
+    </div>
+
+    <!-- 可展开的搜索结果列表 -->
+    <div
+      v-show="isExpanded"
+      class="flex flex-col gap-2 transition-all duration-200 ease-in-out"
+    >
+      <div
+        v-for="(page, index) in webSearchPages"
+        :key="index"
+        class="cursor-pointer rounded-md bg-white p-2.5 transition-all hover:bg-blue-50"
+        @click="handleClick(page)"
+      >
+        <div class="flex items-start gap-2">
+          <!-- 网站图标 -->
+          <div class="mt-0.5 h-4 w-4 flex-shrink-0">
+            <img
+              v-if="page.icon && !iconLoadError[index]"
+              :src="page.icon"
+              :alt="page.name"
+              class="h-full w-full rounded-sm object-contain"
+              @error="handleIconError(index)"
+            />
+            <IconifyIcon
+              v-else
+              icon="lucide:link"
+              class="h-full w-full text-gray-600"
+            />
+          </div>
+          <!-- 内容区域 -->
+          <div class="min-w-0 flex-1">
+            <!-- 网站名称 -->
+            <div class="mb-1 truncate text-xs text-gray-400">
+              {{ page.name }}
+            </div>
+            <!-- 主标题 -->
+            <div
+              class="mb-1 line-clamp-2 text-sm font-medium leading-snug text-blue-600"
+            >
+              {{ page.title }}
+            </div>
+            <!-- 描述 -->
+            <div class="mb-1 line-clamp-2 text-xs leading-snug text-gray-600">
+              {{ page.snippet }}
+            </div>
+            <!-- URL -->
+            <div class="truncate text-xs text-green-700">
+              {{ page.url }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 联网搜索详情 Drawer -->
+    <Drawer class="w-[600px]" cancel-text="关闭" confirm-text="访问原文">
+      <div v-if="selectedResult">
+        <!-- 标题区域 -->
+        <div class="mb-4 flex items-start gap-3">
+          <div class="mt-0.5 h-6 w-6 flex-shrink-0">
+            <img
+              v-if="selectedResult.icon"
+              :src="selectedResult.icon"
+              :alt="selectedResult.name"
+              class="h-full w-full rounded-sm object-contain"
+            />
+            <IconifyIcon
+              v-else
+              icon="lucide:link"
+              class="h-full w-full text-gray-600"
+            />
+          </div>
+          <div class="min-w-0 flex-1">
+            <div class="mb-2 text-lg font-bold text-gray-900">
+              {{ selectedResult.title }}
+            </div>
+            <div class="mb-1 text-sm text-gray-500">
+              {{ selectedResult.name }}
+            </div>
+            <div class="break-all text-sm text-green-700">
+              {{ selectedResult.url }}
+            </div>
+          </div>
+        </div>
+        <!-- 内容区域 -->
+        <div class="space-y-4">
+          <!-- 简短描述 -->
+          <div>
+            <div class="mb-2 text-sm font-semibold text-gray-900">简短描述</div>
+            <div
+              class="rounded-lg bg-gray-50 p-3 text-sm leading-relaxed text-gray-700"
+            >
+              {{ selectedResult.snippet }}
+            </div>
+          </div>
+          <!-- 内容摘要 -->
+          <div v-if="selectedResult.summary">
+            <div class="mb-2 text-sm font-semibold text-gray-900">内容摘要</div>
+            <div
+              class="max-h-[50vh] overflow-y-auto whitespace-pre-wrap rounded-lg bg-gray-50 p-3 text-sm leading-relaxed text-gray-900"
+            >
+              {{ selectedResult.summary }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/role/category-list.vue b/apps/web-ele/src/views/ai/chat/index/modules/role/category-list.vue
new file mode 100644
index 000000000..fa5ece41a
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/role/category-list.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import { ElButton } from 'element-plus';
+
+defineProps({
+  categoryList: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+  active: {
+    type: String,
+    required: false,
+    default: '全部',
+  },
+});
+
+const emits = defineEmits(['onCategoryClick']); // 定义回调
+
+/** 处理分类点击事件 */
+async function handleCategoryClick(category: string) {
+  emits('onCategoryClick', category);
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center">
+    <div
+      class="mr-2 flex flex-row"
+      v-for="category in categoryList"
+      :key="category"
+    >
+      <ElButton
+        size="small"
+        round
+        :type="category === active ? 'primary' : 'default'"
+        @click="handleCategoryClick(category)"
+      >
+        {{ category }}
+      </ElButton>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/role/list.vue b/apps/web-ele/src/views/ai/chat/index/modules/role/list.vue
new file mode 100644
index 000000000..eccceb04f
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/role/list.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElAvatar,
+  ElButton,
+  ElCard,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+} from 'element-plus';
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    required: true,
+  },
+  roleList: {
+    type: Array as PropType<AiModelChatRoleApi.ChatRole[]>,
+    required: true,
+  },
+  showMore: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const emits = defineEmits(['onDelete', 'onEdit', 'onUse', 'onPage']);
+
+const tabsRef = ref<any>();
+
+/** 操作：编辑、删除 */
+async function handleMoreClick(type: string, role: any) {
+  if (type === 'delete') {
+    emits('onDelete', role);
+  } else {
+    emits('onEdit', role);
+  }
+}
+
+/** 选中 */
+function handleUseClick(role: any) {
+  emits('onUse', role);
+}
+
+/** 滚动 */
+async function handleTabsScroll() {
+  if (tabsRef.value) {
+    const { scrollTop, scrollHeight, clientHeight } = tabsRef.value;
+    if (scrollTop + clientHeight >= scrollHeight - 20 && !props.loading) {
+      emits('onPage');
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative flex h-full flex-wrap content-start items-start overflow-auto px-6 pb-36"
+    ref="tabsRef"
+    @scroll="handleTabsScroll"
+  >
+    <div class="mb-5 mr-5 inline-block" v-for="role in roleList" :key="role.id">
+      <ElCard
+        class="relative rounded-lg"
+        body-style="position: relative; display: flex; flex-direction: row; justify-content: flex-start; width: 240px; max-width: 240px; padding: 15px 15px 10px;"
+      >
+        <!-- 更多操作 -->
+        <div v-if="showMore" class="absolute right-2 top-0">
+          <ElDropdown>
+            <ElButton link>
+              <IconifyIcon icon="lucide:ellipsis-vertical" />
+            </ElButton>
+            <template #dropdown>
+              <ElDropdownMenu>
+                <ElDropdownItem @click="handleMoreClick('edit', role)">
+                  <div class="flex items-center">
+                    <IconifyIcon icon="lucide:edit" color="#787878" />
+                    <span class="text-primary">编辑</span>
+                  </div>
+                </ElDropdownItem>
+                <ElDropdownItem @click="handleMoreClick('delete', role)">
+                  <div class="flex items-center">
+                    <IconifyIcon icon="lucide:trash" color="red" />
+                    <span class="text-red-500">删除</span>
+                  </div>
+                </ElDropdownItem>
+              </ElDropdownMenu>
+            </template>
+          </ElDropdown>
+        </div>
+
+        <!-- 角色信息 -->
+        <div>
+          <ElAvatar :src="role.avatar" class="h-10 w-10 overflow-hidden" />
+        </div>
+
+        <div class="ml-2 w-4/5">
+          <div class="h-20">
+            <div class="max-w-32 text-lg font-bold">
+              {{ role.name }}
+            </div>
+            <div class="mt-2 text-sm">
+              {{ role.description }}
+            </div>
+          </div>
+          <div class="mt-1 flex flex-row-reverse">
+            <ElButton type="primary" size="small" @click="handleUseClick(role)">
+              使用
+            </ElButton>
+          </div>
+        </div>
+      </ElCard>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/index/modules/role/repository.vue b/apps/web-ele/src/views/ai/chat/index/modules/role/repository.vue
new file mode 100644
index 000000000..818cc51d8
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/index/modules/role/repository.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
+
+import { onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElContainer,
+  ElInput,
+  ElMain,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { createChatConversationMy } from '#/api/ai/chat/conversation';
+import { deleteMy, getCategoryList, getMyPage } from '#/api/ai/model/chatRole';
+
+import Form from '../../../../model/chatRole/modules/form.vue';
+import RoleCategoryList from './category-list.vue';
+import RoleList from './list.vue';
+
+const router = useRouter();
+
+const [Drawer] = useVbenDrawer({
+  title: '角色管理',
+  footer: false,
+  class: 'w-2/5',
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const loading = ref<boolean>(false); // 加载中
+const activeTab = ref<string>('my-role'); // 选中的角色 Tab
+const search = ref<string>(''); // 加载中
+const myRoleParams = reactive({
+  pageNo: 1,
+  pageSize: 50,
+});
+const myRoleList = ref<AiModelChatRoleApi.ChatRole[]>([]); // my 分页大小
+const publicRoleParams = reactive({
+  pageNo: 1,
+  pageSize: 50,
+});
+const publicRoleList = ref<AiModelChatRoleApi.ChatRole[]>([]); // public 分页大小
+const activeCategory = ref<string>('全部'); // 选择中的分类
+const categoryList = ref<string[]>([]); // 角色分类类别
+
+/** tabs 点击 */
+async function handleTabsClick(tab: any) {
+  // 设置切换状态
+  activeTab.value = tab;
+  // 切换的时候重新加载数据
+  await getActiveTabsRole();
+}
+
+/** 获取 my role 我的角色 */
+async function getMyRole(append?: boolean) {
+  const params: AiModelChatRoleApi.ChatRolePageReqVO = {
+    ...myRoleParams,
+    name: search.value,
+    publicStatus: false,
+  };
+  const { list } = await getMyPage(params);
+  if (append) {
+    myRoleList.value.push(...list);
+  } else {
+    myRoleList.value = list;
+  }
+}
+
+/** 获取 public role 公共角色 */
+async function getPublicRole(append?: boolean) {
+  const params: AiModelChatRoleApi.ChatRolePageReqVO = {
+    ...publicRoleParams,
+    category: activeCategory.value === '全部' ? '' : activeCategory.value,
+    name: search.value,
+    publicStatus: true,
+  };
+  const { list } = await getMyPage(params);
+  if (append) {
+    publicRoleList.value.push(...list);
+  } else {
+    publicRoleList.value = list;
+  }
+}
+
+/** 获取选中的 tabs 角色 */
+async function getActiveTabsRole() {
+  if (activeTab.value === 'my-role') {
+    myRoleParams.pageNo = 1;
+    await getMyRole();
+  } else {
+    publicRoleParams.pageNo = 1;
+    await getPublicRole();
+  }
+}
+
+/** 获取角色分类列表 */
+async function getRoleCategoryList() {
+  categoryList.value = ['全部', ...(await getCategoryList())];
+}
+
+/** 处理分类点击 */
+async function handlerCategoryClick(category: string) {
+  // 切换选择的分类
+  activeCategory.value = category;
+  // 筛选
+  await getActiveTabsRole();
+}
+
+async function handlerAddRole() {
+  formModalApi.setData({ formType: 'my-create' }).open();
+}
+/** 编辑角色 */
+async function handlerCardEdit(role: any) {
+  formModalApi.setData({ formType: 'my-update', id: role.id }).open();
+}
+
+/** 添加角色成功 */
+async function handlerAddRoleSuccess() {
+  // 刷新数据
+  await getActiveTabsRole();
+}
+
+/** 删除角色 */
+async function handlerCardDelete(role: any) {
+  await deleteMy(role.id);
+  // 刷新数据
+  await getActiveTabsRole();
+}
+
+/** 角色分页：获取下一页 */
+async function handlerCardPage(type: string) {
+  try {
+    loading.value = true;
+    if (type === 'public') {
+      publicRoleParams.pageNo++;
+      await getPublicRole(true);
+    } else {
+      myRoleParams.pageNo++;
+      await getMyRole(true);
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 选择 card 角色：新建聊天对话 */
+async function handlerCardUse(role: any) {
+  // 1. 创建对话
+  const data: AiChatConversationApi.ChatConversation = {
+    roleId: role.id,
+  } as unknown as AiChatConversationApi.ChatConversation;
+  const conversationId = await createChatConversationMy(data);
+
+  // 2. 跳转页面
+  await router.push({
+    path: '/ai/chat',
+    query: {
+      conversationId,
+    },
+  });
+}
+
+/** 初始化 */
+onMounted(async () => {
+  // 获取分类
+  await getRoleCategoryList();
+  // 获取 role 数据
+  await getActiveTabsRole();
+});
+</script>
+
+<template>
+  <Drawer>
+    <ElContainer
+      class="bg-card absolute inset-0 flex h-full w-full flex-col overflow-hidden"
+    >
+      <FormModal @success="handlerAddRoleSuccess" />
+
+      <ElMain class="relative m-0 flex-1 overflow-hidden p-0">
+        <div class="z-100 absolute right-0 top--1 mr-5 mt-5">
+          <!-- 搜索输入框 -->
+          <ElInput
+            v-model="search"
+            class="w-60"
+            placeholder="请输入搜索的内容"
+            @keyup.enter="getActiveTabsRole"
+          >
+            <template #suffix>
+              <IconifyIcon icon="lucide:search" />
+            </template>
+          </ElInput>
+          <ElButton
+            v-if="activeTab === 'my-role'"
+            type="primary"
+            @click="handlerAddRole"
+            class="ml-5"
+          >
+            <IconifyIcon icon="lucide:user" class="mr-1.5" />
+            添加角色
+          </ElButton>
+        </div>
+
+        <!-- 标签页内容 -->
+        <ElTabs
+          v-model="activeTab"
+          class="relative h-full p-4"
+          @tab-click="handleTabsClick"
+        >
+          <ElTabPane
+            name="my-role"
+            class="flex h-full flex-col overflow-y-auto"
+            label="我的角色"
+          >
+            <RoleList
+              :loading="loading"
+              :role-list="myRoleList"
+              :show-more="true"
+              @on-delete="handlerCardDelete"
+              @on-edit="handlerCardEdit"
+              @on-use="handlerCardUse"
+              @on-page="handlerCardPage('my')"
+              class="mt-5"
+            />
+          </ElTabPane>
+
+          <ElTabPane
+            name="public-role"
+            class="flex h-full flex-col overflow-y-auto"
+            label="公共角色"
+          >
+            <RoleCategoryList
+              :category-list="categoryList"
+              :active="activeCategory"
+              @on-category-click="handlerCategoryClick"
+              class="mx-6"
+            />
+            <RoleList
+              :role-list="publicRoleList"
+              @on-delete="handlerCardDelete"
+              @on-edit="handlerCardEdit"
+              @on-use="handlerCardUse"
+              @on-page="handlerCardPage('public')"
+              class="mt-5"
+              loading
+            />
+          </ElTabPane>
+        </ElTabs>
+      </ElMain>
+    </ElContainer>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/crm/followup/data.ts b/apps/web-ele/src/views/crm/followup/data.ts
new file mode 100644
index 000000000..aa0b83e5c
--- /dev/null
+++ b/apps/web-ele/src/views/crm/followup/data.ts
@@ -0,0 +1,194 @@
+import type { Ref } from 'vue';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { getBusinessPageByCustomer } from '#/api/crm/business';
+import { getContactPageByCustomer } from '#/api/crm/contact';
+import { BizTypeEnum } from '#/api/crm/permission';
+
+/** 新增/修改的表单 */
+export function useFormSchema(
+  bizId: Ref<number | undefined>,
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'bizId',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'bizType',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '跟进类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'nextTime',
+      label: '下次联系时间',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '跟进内容',
+      component: 'Textarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrls',
+      label: '图片',
+      component: 'ImageUpload',
+    },
+    {
+      fieldName: 'fileUrls',
+      label: '附件',
+      component: 'FileUpload',
+    },
+    {
+      fieldName: 'contactIds',
+      label: '关联联系人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          if (!bizId.value) {
+            return [];
+          }
+          const res = await getContactPageByCustomer({
+            pageNo: 1,
+            pageSize: 100,
+            customerId: bizId.value,
+          });
+          return res.list;
+        },
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+      },
+    },
+    {
+      fieldName: 'businessIds',
+      label: '关联商机',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          if (!bizId.value) {
+            return [];
+          }
+          const res = await getBusinessPageByCustomer({
+            pageNo: 1,
+            pageSize: 100,
+            customerId: bizId.value,
+          });
+          return res.list;
+        },
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  bizType: number,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    { field: 'creatorName', title: '跟进人' },
+    {
+      field: 'type',
+      title: '跟进类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_FOLLOW_UP_TYPE },
+      },
+    },
+    { field: 'content', title: '跟进内容' },
+    {
+      field: 'nextTime',
+      title: '下次联系时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'contacts',
+      title: '关联联系人',
+      visible: bizType === BizTypeEnum.CRM_CUSTOMER,
+      slots: { default: 'contacts' },
+    },
+    {
+      field: 'businesses',
+      title: '关联商机',
+      visible: bizType === BizTypeEnum.CRM_CUSTOMER,
+      slots: { default: 'businesses' },
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的系统字段 */
+export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+    {
+      field: 'contactLastContent',
+      label: '最后跟进记录',
+    },
+    {
+      field: 'contactLastTime',
+      label: '最后跟进时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/crm/followup/index.ts b/apps/web-ele/src/views/crm/followup/index.ts
new file mode 100644
index 000000000..911cbed51
--- /dev/null
+++ b/apps/web-ele/src/views/crm/followup/index.ts
@@ -0,0 +1 @@
+export { default as FollowUp } from './index.vue';
diff --git a/apps/web-ele/src/views/crm/followup/index.vue b/apps/web-ele/src/views/crm/followup/index.vue
new file mode 100644
index 000000000..03fea5534
--- /dev/null
+++ b/apps/web-ele/src/views/crm/followup/index.vue
@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmFollowUpApi } from '#/api/crm/followup';
+
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteFollowUpRecord,
+  getFollowUpRecordPage,
+} from '#/api/crm/followup';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import FollowUpRecordForm from './modules/form.vue';
+
+/** 跟进记录列表 */
+defineOptions({ name: 'FollowUpRecord' });
+
+const props = defineProps<{
+  bizId: number;
+  bizType: number;
+}>();
+
+const { push } = useRouter();
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 添加跟进记录 */
+function handleCreate() {
+  formModalApi.setData({ bizId: props.bizId, bizType: props.bizType }).open();
+}
+
+/** 删除跟进记录 */
+async function handleDelete(row: CrmFollowUpApi.FollowUpRecord) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteFollowUpRecord(row.id);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 打开联系人详情 */
+function openContactDetail(id: number) {
+  push({ name: 'CrmContactDetail', params: { id } });
+}
+
+/** 打开商机详情 */
+function openBusinessDetail(id: number) {
+  push({ name: 'CrmBusinessDetail', params: { id } });
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FollowUpRecordForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(props.bizType),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getFollowUpRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bizType: props.bizType,
+            bizId: props.bizId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<CrmFollowUpApi.FollowUpRecord>,
+});
+
+/** 监听业务 ID 变化 */
+watch(
+  () => props.bizId,
+  () => {
+    gridApi.query();
+  },
+);
+</script>
+
+<template>
+  <div>
+    <FormModal @success="handleRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '写跟进',
+              type: 'primary',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #contacts="{ row }">
+        <ElButton
+          v-for="contact in row.contacts || []"
+          :key="`contact-${contact.id}`"
+          type="primary"
+          link
+          class="ml-2"
+          @click="openContactDetail(contact.id)"
+        >
+          {{ contact.name }}
+        </ElButton>
+      </template>
+      <template #businesses="{ row }">
+        <ElButton
+          v-for="business in row.businesses || []"
+          :key="`business-${business.id}`"
+          type="primary"
+          link
+          class="ml-2"
+          @click="openBusinessDetail(business.id)"
+        >
+          {{ business.name }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/crm/followup/modules/form.vue b/apps/web-ele/src/views/crm/followup/modules/form.vue
new file mode 100644
index 000000000..51df040a9
--- /dev/null
+++ b/apps/web-ele/src/views/crm/followup/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { CrmFollowUpApi } from '#/api/crm/followup';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createFollowUpRecord } from '#/api/crm/followup';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const bizId = ref<number>();
+const bizType = ref<number>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(bizId),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmFollowUpApi.FollowUpRecord;
+    try {
+      await createFollowUpRecord(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<CrmFollowUpApi.FollowUpRecord>();
+    if (!data) {
+      return;
+    }
+    if (data.bizId && data.bizType) {
+      bizId.value = data.bizId;
+      bizType.value = data.bizType;
+    }
+    modalApi.lock();
+    try {
+      // 设置到 values
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="添加跟进记录" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/crm/permission/index.ts b/apps/web-ele/src/views/crm/permission/index.ts
new file mode 100644
index 000000000..2988df4dd
--- /dev/null
+++ b/apps/web-ele/src/views/crm/permission/index.ts
@@ -0,0 +1,2 @@
+export { default as PermissionList } from './modules/list.vue';
+export { default as TransferForm } from './modules/transfer-form.vue';
diff --git a/apps/web-ele/src/views/crm/permission/modules/data.ts b/apps/web-ele/src/views/crm/permission/modules/data.ts
new file mode 100644
index 000000000..fdbe9bcbd
--- /dev/null
+++ b/apps/web-ele/src/views/crm/permission/modules/data.ts
@@ -0,0 +1,233 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { BizTypeEnum, PermissionLevelEnum } from '#/api/crm/permission';
+import { getSimpleUserList } from '#/api/system/user';
+
+/** 新增/修改的表单 */
+export function useTransferFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'newOwnerUserId',
+      label: '选择新负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'oldOwnerHandler',
+      label: '老负责人',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '加入团队',
+            value: true,
+          },
+          {
+            label: '移除',
+            value: false,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'oldOwnerPermissionLevel',
+      label: '老负责人权限级别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.CRM_PERMISSION_LEVEL,
+          'number',
+        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
+      },
+      dependencies: {
+        triggerFields: ['oldOwnerHandler'],
+        show: (values) => values.oldOwnerHandler,
+        trigger(values) {
+          if (!values.oldOwnerHandler) {
+            values.oldOwnerPermissionLevel = undefined;
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'toBizTypes',
+      label: '同时转移',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+    },
+  ];
+}
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'bizId',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'ids',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'userId',
+      label: '选择人员',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['ids'],
+        show: (values) => {
+          return values.ids === undefined;
+        },
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '权限级别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.CRM_PERMISSION_LEVEL,
+          'number',
+        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'bizType',
+      label: 'Crm 类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'toBizTypes',
+      label: '同时添加至',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+      dependencies: {
+        triggerFields: ['ids', 'bizType'],
+        show: (values) => {
+          return (
+            values.ids === undefined &&
+            values.bizType === BizTypeEnum.CRM_CUSTOMER
+          );
+        },
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+    },
+    {
+      field: 'nickname',
+      title: '姓名',
+    },
+    {
+      field: 'deptName',
+      title: '部门',
+    },
+    {
+      field: 'postNames',
+      title: '岗位',
+    },
+    {
+      field: 'level',
+      title: '权限级别',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PERMISSION_LEVEL },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '加入时间',
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/crm/permission/modules/form.vue b/apps/web-ele/src/views/crm/permission/modules/form.vue
new file mode 100644
index 000000000..949a77f6d
--- /dev/null
+++ b/apps/web-ele/src/views/crm/permission/modules/form.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createPermission, updatePermission } from '#/api/crm/permission';
+import { $t } from '#/locales';
+
+import { useFormSchema } from './data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmPermissionApi.Permission>();
+const getTitle = computed(() => {
+  return formData.value?.ids
+    ? $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 CrmPermissionApi.Permission;
+    try {
+      await (formData.value?.ids
+        ? updatePermission(data)
+        : createPermission(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();
+    if (!data || !data.bizType || !data.bizId) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = {
+        ids: data.ids ?? (data.id ? [data.id] : undefined),
+        userId: undefined,
+        bizType: data.bizType,
+        bizId: data.bizId,
+        level: data.level,
+      };
+      // 设置到 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/crm/permission/modules/list.vue b/apps/web-ele/src/views/crm/permission/modules/list.vue
new file mode 100644
index 000000000..957f0dd8b
--- /dev/null
+++ b/apps/web-ele/src/views/crm/permission/modules/list.vue
@@ -0,0 +1,265 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
+
+import { ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePermissionBatch,
+  deleteSelfPermission,
+  getPermissionList,
+  PermissionLevelEnum,
+} from '#/api/crm/permission';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './form.vue';
+
+const props = defineProps<{
+  bizId: number; // 模块数据编号
+  bizType: number; // 模块类型
+  showAction: boolean; // 是否展示操作按钮
+}>();
+
+const emits = defineEmits<{
+  (e: 'quitTeam'): void;
+}>();
+
+const gridData = ref<CrmPermissionApi.Permission[]>([]);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const userStore = useUserStore();
+
+const validateOwnerUser = ref(false); // 负责人权限
+const validateWrite = ref(false); // 编辑权限
+const isPool = ref(false); // 是否是公海
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+const checkedRows = ref<CrmPermissionApi.Permission[]>([]);
+function setCheckedRows({
+  records,
+}: {
+  records: CrmPermissionApi.Permission[];
+}) {
+  if (records.some((item) => item.level === PermissionLevelEnum.OWNER)) {
+    ElMessage.warning('不能选择负责人！');
+    gridApi.grid.setAllCheckboxRow(false);
+    return;
+  }
+  checkedRows.value = records;
+}
+
+/** 新建团队成员 */
+function handleCreate() {
+  formModalApi
+    .setData({
+      bizType: props.bizType,
+      bizId: props.bizId,
+    })
+    .open();
+}
+
+/** 编辑团队成员 */
+function handleEdit() {
+  if (checkedRows.value.length === 0) {
+    ElMessage.error('请先选择团队成员后操作！');
+    return;
+  }
+  if (checkedRows.value.length > 1) {
+    ElMessage.error('只能选择一个团队成员进行编辑！');
+    return;
+  }
+  formModalApi
+    .setData({
+      bizType: props.bizType,
+      bizId: props.bizId,
+      id: checkedRows.value[0]?.id,
+      level: checkedRows.value[0]?.level,
+    })
+    .open();
+}
+
+/** 删除团队成员 */
+function handleDelete() {
+  if (checkedRows.value.length === 0) {
+    ElMessage.error('请先选择团队成员后操作！');
+    return;
+  }
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${checkedRows.value.map((item) => item.nickname).join(',')}移出团队吗？`,
+    })
+      .then(async () => {
+        const res = await deletePermissionBatch(
+          checkedRows.value.map((item) => item.id!),
+        );
+        if (res) {
+          // 提示并返回成功
+          ElMessage.success($t('ui.actionMessage.operationSuccess'));
+          handleRefresh();
+          resolve(true);
+        } else {
+          reject(new Error('移出失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 退出团队 */
+async function handleQuit() {
+  const permission = gridApi.grid
+    .getData()
+    .find(
+      (item) =>
+        item.id === userStore.userInfo?.id &&
+        item.level === PermissionLevelEnum.OWNER,
+    );
+  if (permission) {
+    ElMessage.warning('负责人不能退出团队！');
+    return;
+  }
+
+  const userPermission = gridApi.grid
+    .getData()
+    .find((item) => item.id === userStore.userInfo?.id);
+  if (!userPermission) {
+    ElMessage.warning('你不是团队成员！');
+    return;
+  }
+  await deleteSelfPermission(userPermission.id!);
+  ElMessage.success('退出团队成员成功！');
+  emits('quitTeam');
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          const res = await getPermissionList({
+            bizId: props.bizId,
+            bizType: props.bizType,
+          });
+          gridData.value = res;
+          return res;
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmPermissionApi.Permission>,
+  gridEvents: {
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
+  },
+});
+
+defineExpose({
+  openForm: handleCreate,
+  validateOwnerUser,
+  validateWrite,
+  isPool,
+});
+
+watch(
+  () => gridData.value,
+  (data) => {
+    isPool.value = false;
+    if (data.length > 0) {
+      isPool.value = data.some(
+        (item) => item.level === PermissionLevelEnum.OWNER,
+      );
+      validateOwnerUser.value = false;
+      validateWrite.value = false;
+      const userId = userStore.userInfo?.id;
+      gridData.value
+        .filter((item) => item.userId === userId)
+        .forEach((item) => {
+          if (item.level === PermissionLevelEnum.OWNER) {
+            validateOwnerUser.value = true;
+            validateWrite.value = true;
+          } else if (item.level === PermissionLevelEnum.WRITE) {
+            validateWrite.value = true;
+          }
+        });
+    } else {
+      // 特殊：没有成员的情况下，说明没有负责人，是公海
+      isPool.value = true;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div>
+    <FormModal @success="handleRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.create'),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              ifShow: validateOwnerUser,
+              onClick: handleCreate,
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              icon: ACTION_ICON.EDIT,
+              ifShow: validateOwnerUser,
+              onClick: handleEdit,
+              disabled: checkedRows.length === 0,
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              ifShow: validateOwnerUser,
+              onClick: handleDelete,
+              disabled: checkedRows.length === 0,
+            },
+            {
+              label: '退出团队',
+              type: 'danger',
+              ifShow: !validateOwnerUser,
+              onClick: handleQuit,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/crm/permission/modules/transfer-form.vue b/apps/web-ele/src/views/crm/permission/modules/transfer-form.vue
new file mode 100644
index 000000000..e823d4893
--- /dev/null
+++ b/apps/web-ele/src/views/crm/permission/modules/transfer-form.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { computed } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { transferBusiness } from '#/api/crm/business';
+import { transferClue } from '#/api/crm/clue';
+import { transferContact } from '#/api/crm/contact';
+import { transferContract } from '#/api/crm/contract';
+import { transferCustomer } from '#/api/crm/customer';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { $t } from '#/locales';
+
+import { useTransferFormSchema } from './data';
+
+const emit = defineEmits(['success']);
+
+const bizType = defineModel<number>('bizType');
+
+const getTitle = computed(() => {
+  switch (bizType.value) {
+    case BizTypeEnum.CRM_BUSINESS: {
+      return '商机转移';
+    }
+    case BizTypeEnum.CRM_CLUE: {
+      return '线索转移';
+    }
+    case BizTypeEnum.CRM_CONTACT: {
+      return '联系人转移';
+    }
+    case BizTypeEnum.CRM_CONTRACT: {
+      return '合同转移';
+    }
+    case BizTypeEnum.CRM_CUSTOMER: {
+      return '客户转移';
+    }
+    default: {
+      return '转移';
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useTransferFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
+    try {
+      switch (bizType.value) {
+        case BizTypeEnum.CRM_BUSINESS: {
+          return await transferBusiness(data);
+        }
+        case BizTypeEnum.CRM_CLUE: {
+          return await transferClue(data);
+        }
+        case BizTypeEnum.CRM_CONTACT: {
+          return await transferContact(data);
+        }
+        case BizTypeEnum.CRM_CONTRACT: {
+          return await transferContract(data);
+        }
+        case BizTypeEnum.CRM_CUSTOMER: {
+          return await transferCustomer(data);
+        }
+        default: {
+          ElMessage.error('【转移失败】没有转移接口');
+          throw new Error('【转移失败】没有转移接口');
+        }
+      }
+    } finally {
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      await formApi.resetForm();
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ bizType: number }>();
+    if (!data || !data.bizType) {
+      return;
+    }
+    bizType.value = data.bizType;
+    await formApi.setFieldValue('id', data.bizType);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/crm/product/category/data.ts b/apps/web-ele/src/views/crm/product/category/data.ts
new file mode 100644
index 000000000..4fa90e0f3
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/category/data.ts
@@ -0,0 +1,95 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
+
+import { handleTree } from '@vben/utils';
+
+import { getProductCategoryList } from '#/api/crm/product/category';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        clearable: true,
+        api: async () => {
+          const data = await getProductCategoryList();
+          data.unshift({
+            id: 0,
+            name: '顶级分类',
+          } as CrmProductCategoryApi.ProductCategory);
+          return handleTree(data);
+        },
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择上级分类',
+        showSearch: true,
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入分类名称',
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions<CrmProductCategoryApi.ProductCategory>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      treeNode: true,
+    },
+    {
+      field: 'id',
+      title: '分类编号',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: {
+        default: 'actions',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/crm/product/category/index.vue b/apps/web-ele/src/views/crm/product/category/index.vue
new file mode 100644
index 000000000..3aa4c03c3
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/category/index.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProductCategory,
+  getProductCategoryList,
+} from '#/api/crm/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,
+});
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: CrmProductCategoryApi.ProductCategory) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: CrmProductCategoryApi.ProductCategory) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: CrmProductCategoryApi.ProductCategory) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProductCategory(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getProductCategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<CrmProductCategoryApi.ProductCategory>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【产品】产品管理、产品分类"
+        url="https://doc.iocoder.cn/crm/product/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product-category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product-category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:product-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm: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/crm/product/category/modules/form.vue b/apps/web-ele/src/views/crm/product/category/modules/form.vue
new file mode 100644
index 000000000..c8d0c868f
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/category/modules/form.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProductCategory,
+  getProductCategory,
+  updateProductCategory,
+} from '#/api/crm/product/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmProductCategoryApi.ProductCategory>();
+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 CrmProductCategoryApi.ProductCategory;
+    try {
+      await (formData.value?.id
+        ? updateProductCategory(data)
+        : createProductCategory(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<CrmProductCategoryApi.ProductCategory>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      if (data.id) {
+        data = await getProductCategory(data.id);
+      }
+      // 设置到 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/crm/product/components/data.ts b/apps/web-ele/src/views/crm/product/components/data.ts
new file mode 100644
index 000000000..266a91291
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/components/data.ts
@@ -0,0 +1,111 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 产品详情列表的列定义 */
+export function useDetailListColumns(
+  showBusinessPrice: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productName',
+      title: '产品名称',
+    },
+    {
+      field: 'productNo',
+      title: '产品条码',
+    },
+    {
+      field: 'productUnit',
+      title: '产品单位',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'productPrice',
+      title: '产品价格（元）',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'businessPrice',
+      title: '商机价格（元）',
+      formatter: 'formatAmount2',
+      visible: showBusinessPrice,
+    },
+    {
+      field: 'contractPrice',
+      title: '合同价格（元）',
+      formatter: 'formatAmount2',
+      visible: !showBusinessPrice,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'totalPrice',
+      title: '合计金额（元）',
+      formatter: 'formatAmount2',
+    },
+  ];
+}
+
+/** 产品编辑表格的列定义 */
+export function useProductEditTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50 },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 100,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'productNo',
+      title: '条码',
+      minWidth: 150,
+    },
+    {
+      field: 'productUnit',
+      title: '单位',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'productPrice',
+      title: '价格（元）',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'sellingPrice',
+      title: '售价（元）',
+      minWidth: 100,
+      slots: { default: 'sellingPrice' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 100,
+      slots: { default: 'count' },
+    },
+    {
+      field: 'totalPrice',
+      title: '合计',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/crm/product/components/detail-list.vue b/apps/web-ele/src/views/crm/product/components/detail-list.vue
new file mode 100644
index 000000000..5ce23bc0d
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/components/detail-list.vue
@@ -0,0 +1,79 @@
+<!-- 产品列表：用于【商机】【合同】详情中，展示它们关联的产品列表 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { ref } from 'vue';
+
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBusiness } from '#/api/crm/business';
+import { getContract } from '#/api/crm/contract';
+import { BizTypeEnum } from '#/api/crm/permission';
+
+import { useDetailListColumns } from './data';
+
+/** 组件入参 */
+const props = defineProps<{
+  bizId: number;
+  bizType: BizTypeEnum;
+}>();
+
+/** 整单折扣 */
+const discountPercent = ref(0);
+/** 产品总金额 */
+const totalProductPrice = ref(0);
+
+/** 构建产品列表表格 */
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(props.bizType === BizTypeEnum.CRM_BUSINESS),
+    height: 600,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          const data =
+            props.bizType === BizTypeEnum.CRM_BUSINESS
+              ? await getBusiness(props.bizId)
+              : await getContract(props.bizId);
+          discountPercent.value = data.discountPercent;
+          totalProductPrice.value = data.totalProductPrice;
+          return data.products;
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<CrmProductApi.Product>,
+});
+</script>
+
+<template>
+  <div>
+    <Grid />
+    <div class="flex flex-col items-end justify-end">
+      <span class="ml-4 font-bold text-red-500">
+        {{ `产品总金额：${erpPriceInputFormatter(totalProductPrice)}元` }}
+      </span>
+      <span class="font-bold text-red-500">
+        {{ `整单折扣：${erpPriceInputFormatter(discountPercent)}%` }}
+      </span>
+      <span class="font-bold text-red-500">
+        {{
+          `实际金额：${erpPriceInputFormatter(totalProductPrice * (1 - discountPercent / 100))}元`
+        }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/crm/product/components/edit-table.vue b/apps/web-ele/src/views/crm/product/components/edit-table.vue
new file mode 100644
index 000000000..bbbab489f
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/components/edit-table.vue
@@ -0,0 +1,203 @@
+<script lang="ts" setup>
+import type { CrmBusinessApi } from '#/api/crm/business';
+import type { CrmContractApi } from '#/api/crm/contract';
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { erpPriceMultiply } from '@vben/utils';
+
+import { ElInputNumber, ElOption, ElSelect } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getProductSimpleList } from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useProductEditTableColumns } from './data';
+
+const props = defineProps<{
+  bizType: BizTypeEnum;
+  products?:
+    | CrmBusinessApi.BusinessProduct[]
+    | CrmContractApi.ContractProduct[];
+}>();
+
+const emit = defineEmits(['update:products']);
+
+/** 表格内部数据 */
+const tableData = ref<any[]>([]);
+
+/** 添加产品行 */
+function handleAdd() {
+  gridApi.grid.insertAt(null, -1);
+}
+
+/** 删除产品行 */
+function handleDelete(row: CrmProductApi.Product) {
+  gridApi.grid.remove(row);
+}
+
+/** 切换产品时同步基础信息 */
+function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+  row.productUnit = product.unit;
+  row.productNo = product.no;
+  row.productPrice = product.price;
+  row.sellingPrice = product.price;
+  row.count = 0;
+  row.totalPrice = 0;
+  handleUpdateValue(row);
+}
+
+/** 金额变动时重新计算合计 */
+function handlePriceChange(row: any) {
+  row.totalPrice = erpPriceMultiply(row.sellingPrice, row.count) ?? 0;
+  handleUpdateValue(row);
+}
+
+/** 将最新数据写回并通知父组件 */
+function handleUpdateValue(row: any) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
+    row.businessPrice = row.sellingPrice;
+  } else if (props.bizType === BizTypeEnum.CRM_CONTRACT) {
+    row.contractPrice = row.sellingPrice;
+  }
+  if (index === -1) {
+    row.id = tableData.value.length + 1;
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:products', [...tableData.value]);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    editConfig: {
+      trigger: 'click',
+      mode: 'cell',
+    },
+    columns: useProductEditTableColumns(),
+    data: tableData.value,
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.products,
+  async (products) => {
+    if (!products) {
+      return;
+    }
+    await nextTick();
+    tableData.value = products;
+    if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
+      tableData.value.forEach((item) => {
+        item.sellingPrice = item.businessPrice;
+      });
+    } else if (props.bizType === BizTypeEnum.CRM_CONTRACT) {
+      tableData.value.forEach((item) => {
+        item.sellingPrice = item.contractPrice;
+      });
+    }
+    await gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 产品下拉选项 */
+const productOptions = ref<CrmProductApi.Product[]>([]);
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        :field-names="{ label: 'name', value: 'id' }"
+        class="w-full"
+        @change="handleProductChange($event, row)"
+      >
+        <ElOption
+          v-for="option in productOptions"
+          :key="option.id"
+          :label="option.name"
+          :value="option.id"
+        />
+      </ElSelect>
+    </template>
+    <template #sellingPrice="{ row }">
+      <ElInputNumber
+        v-model="row.sellingPrice"
+        :min="0.001"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handlePriceChange(row)"
+      />
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-model="row.count"
+        :min="0.001"
+        :precision="3"
+        controls-position="right"
+        class="!w-full"
+        @change="handlePriceChange(row)"
+      />
+    </template>
+    <template #bottom>
+      <TableAction
+        class="mt-4 flex justify-center"
+        :actions="[
+          {
+            label: '添加产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.delete'),
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/crm/product/components/index.ts b/apps/web-ele/src/views/crm/product/components/index.ts
new file mode 100644
index 000000000..dc527926a
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/components/index.ts
@@ -0,0 +1,2 @@
+export { default as ProductDetailsList } from './detail-list.vue';
+export { default as ProductEditTable } from './edit-table.vue';
diff --git a/apps/web-ele/src/views/crm/product/data.ts b/apps/web-ele/src/views/crm/product/data.ts
new file mode 100644
index 000000000..ef6efe9fe
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/data.ts
@@ -0,0 +1,231 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { useUserStore } from '@vben/stores';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getProductCategoryList } from '#/api/crm/product/category';
+import { getSimpleUserList } from '#/api/system/user';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  const userStore = useUserStore();
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '产品名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入产品名称',
+        clearable: true,
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择负责人',
+        clearable: true,
+      },
+      defaultValue: userStore.userInfo?.id,
+    },
+    {
+      component: 'Input',
+      fieldName: 'no',
+      label: '产品编码',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入产品编码',
+        clearable: true,
+      },
+    },
+    {
+      component: 'ApiTreeSelect',
+      fieldName: 'categoryId',
+      label: '产品类型',
+      rules: 'required',
+      componentProps: {
+        api: async () => {
+          const data = await getProductCategoryList();
+          return handleTree(data);
+        },
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择产品类型',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'unit',
+      label: '产品单位',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT, 'number'),
+        placeholder: '请选择产品单位',
+        clearable: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'price',
+      label: '价格（元）',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.1,
+        placeholder: '请输入产品价格',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '产品描述',
+      componentProps: {
+        placeholder: '请输入产品描述',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '上架状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '产品名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入产品名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '上架状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        placeholder: '请选择上架状态',
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '产品编号',
+      visible: false,
+    },
+    {
+      field: 'name',
+      title: '产品名称',
+      minWidth: 240,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'categoryName',
+      title: '产品类型',
+      minWidth: 120,
+    },
+    {
+      field: 'unit',
+      title: '产品单位',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'no',
+      title: '产品编码',
+      minWidth: 120,
+    },
+    {
+      field: 'price',
+      title: '价格（元）',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'description',
+      title: '产品描述',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '上架状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_STATUS },
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+      minWidth: 120,
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/crm/product/detail/data.ts b/apps/web-ele/src/views/crm/product/detail/data.ts
new file mode 100644
index 000000000..0adf792cb
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/detail/data.ts
@@ -0,0 +1,72 @@
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'categoryName',
+      label: '产品类别',
+    },
+    {
+      field: 'unit',
+      label: '产品单位',
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: val }),
+    },
+    {
+      field: 'price',
+      label: '产品价格（元）',
+      render: (val) => erpPriceInputFormatter(val),
+    },
+    {
+      field: 'no',
+      label: '产品编码',
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '产品名称',
+    },
+    {
+      field: 'no',
+      label: '产品编码',
+    },
+    {
+      field: 'price',
+      label: '价格（元）',
+      render: (val) => erpPriceInputFormatter(val),
+    },
+    {
+      field: 'description',
+      label: '产品描述',
+    },
+    {
+      field: 'categoryName',
+      label: '产品类型',
+    },
+    {
+      field: 'status',
+      label: '是否上下架',
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_STATUS, value: val }),
+    },
+    {
+      field: 'unit',
+      label: '产品单位',
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: val }),
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/crm/product/detail/index.vue b/apps/web-ele/src/views/crm/product/detail/index.vue
new file mode 100644
index 000000000..1c16c4a87
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/detail/index.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { CrmProductApi } from '#/api/crm/product';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { ElButton, ElCard, ElTabPane, ElTabs } from 'element-plus';
+
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getProduct } from '#/api/crm/product';
+import { useDescription } from '#/components/description';
+import { OperateLog } from '#/components/operate-log';
+
+import { useDetailSchema } from './data';
+import Info from './modules/info.vue';
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const loading = ref(false); // 加载中
+const productId = ref(0); // 产品编号
+const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product); // 产品详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
+
+const [Descriptions] = useDescription({
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
+  schema: useDetailSchema(),
+});
+
+/** 加载详情 */
+async function getProductDetail() {
+  loading.value = true;
+  try {
+    product.value = await getProduct(productId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_PRODUCT,
+      bizId: productId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push({ name: 'CrmProduct' });
+}
+
+/** 加载数据 */
+onMounted(() => {
+  productId.value = Number(route.params.id);
+  getProductDetail();
+});
+</script>
+
+<template>
+  <Page auto-content-height :title="product?.name" :loading="loading">
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <ElButton @click="handleBack"> 返回 </ElButton>
+      </div>
+    </template>
+    <ElCard class="min-h-[10%]">
+      <Descriptions :data="product" />
+    </ElCard>
+    <ElCard class="mt-4 min-h-[60%]">
+      <ElTabs>
+        <ElTabPane label="详细资料" name="1">
+          <Info :product="product" />
+        </ElTabPane>
+        <ElTabPane label="操作日志" name="2">
+          <OperateLog :log-list="logList" />
+        </ElTabPane>
+      </ElTabs>
+    </ElCard>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/crm/product/detail/modules/info.vue b/apps/web-ele/src/views/crm/product/detail/modules/info.vue
new file mode 100644
index 000000000..9fce6976a
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/detail/modules/info.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailBaseSchema } from '../data';
+
+defineProps<{
+  product: CrmProductApi.Product; // 产品信息
+}>();
+
+const [ProductDescriptions] = useDescription({
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
+  schema: useDetailBaseSchema(),
+});
+</script>
+
+<template>
+  <div class="p-4">
+    <ProductDescriptions :data="product" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/crm/product/index.vue b/apps/web-ele/src/views/crm/product/index.vue
new file mode 100644
index 000000000..07ad1caef
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/index.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProduct,
+  exportProduct,
+  getProductPage,
+} from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportProduct(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品.xls', source: data });
+}
+
+/** 打开详情 */
+function handleDetail(row: CrmProductApi.Product) {
+  push({ name: 'CrmProductDetail', params: { id: row.id } });
+}
+
+/** 创建产品 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑产品 */
+function handleEdit(row: CrmProductApi.Product) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除产品 */
+async function handleDelete(row: CrmProductApi.Product) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProduct(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } 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 getProductPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmProductApi.Product>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="产品列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['产品']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:product:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <ElButton type="primary" link @click="handleDetail(row)">
+          {{ row.name }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:product:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:product: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/crm/product/modules/form.vue b/apps/web-ele/src/views/crm/product/modules/form.vue
new file mode 100644
index 000000000..ef022e6a2
--- /dev/null
+++ b/apps/web-ele/src/views/crm/product/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createProduct, getProduct, updateProduct } from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmProductApi.Product>();
+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 CrmProductApi.Product;
+    try {
+      await (formData.value?.id ? updateProduct(data) : createProduct(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<CrmProductApi.Product>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProduct(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/account/data.ts b/apps/web-ele/src/views/erp/finance/account/data.ts
new file mode 100644
index 000000000..497d4e310
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/account/data.ts
@@ -0,0 +1,188 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpAccountApi } from '#/api/erp/finance/account';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        precision: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'defaultStatus',
+      label: '是否默认',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '是',
+            value: true,
+          },
+          {
+            label: '否',
+            value: false,
+          },
+        ],
+      },
+      rules: z.boolean().default(false).optional(),
+    },
+    {
+      fieldName: 'no',
+      label: '编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入编码',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入编码',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onDefaultStatusChange?: (
+    newStatus: boolean,
+    row: ErpAccountApi.Account,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '名称',
+      minWidth: 150,
+    },
+    {
+      field: 'no',
+      title: '编码',
+      minWidth: 120,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      minWidth: 80,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'defaultStatus',
+      title: '是否默认',
+      minWidth: 100,
+      cellRender: {
+        attrs: { beforeChange: onDefaultStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: true,
+          inactiveValue: false,
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/finance/account/index.vue b/apps/web-ele/src/views/erp/finance/account/index.vue
new file mode 100644
index 000000000..1f5493980
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/account/index.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpAccountApi } from '#/api/erp/finance/account';
+
+import { confirm, DocAlert, 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 {
+  deleteAccount,
+  exportAccount,
+  getAccountPage,
+  updateAccountDefaultStatus,
+} from '#/api/erp/finance/account';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportAccount(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '结算账户信息.xls', source: data });
+}
+
+/** 创建结算账户 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑结算账户 */
+function handleEdit(row: ErpAccountApi.Account) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除结算账户 */
+async function handleDelete(row: ErpAccountApi.Account) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteAccount(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 修改默认状态 */
+async function handleDefaultStatusChange(
+  newStatus: boolean,
+  row: ErpAccountApi.Account,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newStatus ? '设置' : '取消';
+    confirm({
+      content: `确认要${text}"${row.name}"默认吗?`,
+    })
+      .then(async () => {
+        // 更新默认状态
+        await updateAccountDefaultStatus(row.id!, newStatus);
+        // 提示并返回成功
+        ElMessage.success(`${text}默认成功`);
+        handleRefresh();
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleDefaultStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAccountPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpAccountApi.Account>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【财务】采购付款、销售收款"
+        url="https://doc.iocoder.cn/sale/finance-payment-receipt/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="结算账户列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['结算账户']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:account:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:account:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:account:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:account: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/erp/finance/account/modules/form.vue b/apps/web-ele/src/views/erp/finance/account/modules/form.vue
new file mode 100644
index 000000000..eced899a4
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/account/modules/form.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { ErpAccountApi } from '#/api/erp/finance/account';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createAccount,
+  getAccount,
+  updateAccount,
+} from '#/api/erp/finance/account';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpAccountApi.Account>();
+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 ErpAccountApi.Account;
+    try {
+      await (formData.value?.id ? updateAccount(data) : createAccount(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<ErpAccountApi.Account>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getAccount(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/payment/data.ts b/apps/web-ele/src/views/erp/finance/payment/data.ts
new file mode 100644
index 000000000..116172128
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/payment/data.ts
@@ -0,0 +1,592 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '付款单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'paymentTime',
+      label: '付款时间',
+      component: 'DatePicker',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '选择付款时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '请选择供应商',
+        clearable: true,
+        filterable: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'financeUserId',
+      label: '财务人员',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择财务人员',
+        clearable: true,
+        filterable: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autosize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '采购入库、退货单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'accountId',
+      label: '付款账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择付款账户',
+        clearable: true,
+        filterable: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '合计付款',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '合计付款',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'discountPrice',
+      label: '优惠金额',
+      component: 'InputNumber',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '请输入优惠金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'paymentPrice',
+      label: '实际付款',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '实际付款',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['totalPrice', 'discountPrice'],
+        componentProps: (values) => {
+          const totalPrice = values.totalPrice || 0;
+          const discountPrice = values.discountPrice || 0;
+          values.paymentPrice = totalPrice - discountPrice;
+          return {};
+        },
+      },
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'bizNo',
+      title: '采购单据编号',
+      minWidth: 200,
+    },
+    {
+      field: 'totalPrice',
+      title: '应付金额',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'paidPrice',
+      title: '已付金额',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'paymentPrice',
+      title: '本次付款',
+      minWidth: 115,
+      fixed: 'right',
+      slots: { default: 'paymentPrice' },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '付款单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入付款单号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'paymentTime',
+      label: '付款时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        clearable: true,
+        filterable: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        clearable: true,
+        filterable: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'financeUserId',
+      label: '财务人员',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择财务人员',
+        clearable: true,
+        filterable: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '付款账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择付款账户',
+        clearable: true,
+        filterable: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'bizNo',
+      label: '采购单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入采购单号',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '付款单号',
+      width: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'paymentTime',
+      title: '付款时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'financeUserName',
+      title: '财务人员',
+      minWidth: 120,
+    },
+    {
+      field: 'accountName',
+      title: '付款账户',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '合计付款',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'discountPrice',
+      title: '优惠金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'paymentPrice',
+      title: '实际付款',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 90,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 采购入库单选择表单的配置项 */
+export function usePurchaseInGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '入库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        placeholder: '已自动选择供应商',
+      },
+    },
+    {
+      fieldName: 'paymentStatus',
+      label: '付款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未付款', value: 0 },
+          { label: '部分付款', value: 1 },
+          { label: '全部付款', value: 2 },
+        ],
+        placeholder: '请选择付款状态',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 采购入库单选择列表的字段 */
+export function usePurchaseInGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '入库单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'inTime',
+      title: '入库时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'totalPrice',
+      title: '应付金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'paymentPrice',
+      title: '已付金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unPaymentPrice',
+      title: '未付金额',
+      formatter: ({ row }) => {
+        return erpPriceInputFormatter(row.totalPrice - row.paymentPrice || 0);
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+  ];
+}
+
+/** 采购退货单选择表单的配置项 */
+export function useSaleReturnGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '退货单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入退货单号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        placeholder: '已自动选择供应商',
+      },
+    },
+    {
+      fieldName: 'refundStatus',
+      label: '退款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未退款', value: 0 },
+          { label: '部分退款', value: 1 },
+          { label: '全部退款', value: 2 },
+        ],
+        placeholder: '请选择退款状态',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 采购退货单选择列表的字段 */
+export function useSaleReturnGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '退货单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'returnTime',
+      title: '退货时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'totalPrice',
+      title: '应退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'refundPrice',
+      title: '已退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unRefundPrice',
+      title: '未退金额',
+      formatter: ({ row }) => {
+        return erpPriceInputFormatter(row.totalPrice - row.refundPrice || 0);
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/finance/payment/index.vue b/apps/web-ele/src/views/erp/finance/payment/index.vue
new file mode 100644
index 000000000..5c6750bf2
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/payment/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpFinancePaymentApi } from '#/api/erp/finance/payment';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteFinancePayment,
+  exportFinancePayment,
+  getFinancePaymentPage,
+  updateFinancePaymentStatus,
+} from '#/api/erp/finance/payment';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 付款单列表 */
+defineOptions({ name: 'ErpFinancePayment' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportFinancePayment(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '付款单.xls', source: data });
+}
+
+/** 新增付款单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑付款单 */
+function handleEdit(row: ErpFinancePaymentApi.FinancePayment) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除付款单 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteFinancePayment(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpFinancePaymentApi.FinancePayment,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该付款单吗？`,
+  });
+  try {
+    await updateFinancePaymentStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpFinancePaymentApi.FinancePayment[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpFinancePaymentApi.FinancePayment) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFinancePaymentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpFinancePaymentApi.FinancePayment>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【财务】采购付款、销售收款"
+        url="https://doc.iocoder.cn/sale/finance-payment-receipt/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="付款单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['付款单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:finance-payment:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:finance-payment:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:finance-payment:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:finance-payment:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:finance-payment:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:finance-payment:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:finance-payment:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/payment/modules/form.vue b/apps/web-ele/src/views/erp/finance/payment/modules/form.vue
new file mode 100644
index 000000000..fe8796e12
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/payment/modules/form.vue
@@ -0,0 +1,195 @@
+<script lang="ts" setup>
+import type { ErpFinancePaymentApi } from '#/api/erp/finance/payment';
+
+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 { getAccountSimpleList } from '#/api/erp/finance/account';
+import {
+  createFinancePayment,
+  getFinancePayment,
+  updateFinancePayment,
+} from '#/api/erp/finance/payment';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<
+  ErpFinancePaymentApi.FinancePayment & {
+    fileUrl?: string;
+  }
+>({
+  id: undefined,
+  no: '',
+  supplierId: undefined,
+  accountId: undefined,
+  financeUserId: undefined,
+  paymentTime: undefined,
+  remark: '',
+  fileUrl: undefined,
+  totalPrice: 0,
+  discountPrice: 0,
+  paymentPrice: 0,
+  items: [],
+  status: 0,
+});
+
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['付款单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['付款单']);
+  } else {
+    return '付款单详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    if (formData.value) {
+      if (changedFields.includes('supplierId')) {
+        formData.value.supplierId = values.supplierId;
+      }
+      // 目的：同步到 item-form 组件，触发整体的价格计算
+      if (changedFields.includes('discountPrice')) {
+        formData.value.discountPrice = values.discountPrice;
+        formData.value.paymentPrice =
+          formData.value.totalPrice - values.discountPrice;
+        formApi.setValues({
+          paymentPrice: formData.value.paymentPrice,
+        });
+      }
+    }
+  },
+});
+
+/** 更新付款项 */
+function handleUpdateItems(items: ErpFinancePaymentApi.FinancePaymentItem[]) {
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 更新总金额 */
+function handleUpdateTotalPrice(totalPrice: number) {
+  formData.value.totalPrice = totalPrice;
+  formApi.setValues({
+    totalPrice: formData.value.totalPrice,
+  });
+}
+
+/** 更新付款金额 */
+function handleUpdatePaymentPrice(paymentPrice: number) {
+  formData.value.paymentPrice = paymentPrice;
+  formApi.setValues({
+    paymentPrice: formData.value.paymentPrice,
+  });
+}
+
+/** 创建或更新付款单 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as ErpFinancePaymentApi.FinancePayment;
+    try {
+      await (formType.value === 'create'
+        ? createFinancePayment(data)
+        : updateFinancePayment(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {} as ErpFinancePaymentApi.FinancePayment;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getFinancePayment(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value, false);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :supplier-id="formData?.supplierId"
+          :disabled="formType === 'detail'"
+          :discount-price="formData?.discountPrice ?? 0"
+          @update:items="handleUpdateItems"
+          @update:total-price="handleUpdateTotalPrice"
+          @update:payment-price="handleUpdatePaymentPrice"
+          class="w-full"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/payment/modules/item-form.vue b/apps/web-ele/src/views/erp/finance/payment/modules/item-form.vue
new file mode 100644
index 000000000..dcd93d79b
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/payment/modules/item-form.vue
@@ -0,0 +1,301 @@
+<script lang="ts" setup>
+import type { ErpFinancePaymentApi } from '#/api/erp/finance/payment';
+import type { ErpPurchaseInApi } from '#/api/erp/purchase/in';
+import type { ErpPurchaseReturnApi } from '#/api/erp/purchase/return';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { ErpBizType } from '@vben/constants';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElMessage } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { useFormItemColumns } from '../data';
+import PurchaseInSelect from './purchase-in-select.vue';
+import SaleReturnSelect from './sale-return-select.vue';
+
+interface Props {
+  items?: ErpFinancePaymentApi.FinancePaymentItem[];
+  supplierId?: number;
+  disabled?: boolean;
+  discountPrice?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  supplierId: undefined,
+  disabled: false,
+  discountPrice: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:total-price',
+  'update:payment-price',
+]);
+
+const tableData = ref<ErpFinancePaymentApi.FinancePaymentItem[]>([]); // 表格数据
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+    paidPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.paidPrice || 0),
+      0,
+    ),
+    paymentPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.paymentPrice || 0),
+      0,
+    ),
+  };
+});
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 计算 totalPrice、paymentPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPrice],
+  () => {
+    if (!tableData.value || tableData.value.length === 0) {
+      return;
+    }
+    const totalPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.totalPrice || 0),
+      0,
+    );
+    const paymentPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.paymentPrice || 0),
+      0,
+    );
+    const finalPaymentPrice = paymentPrice - (props.discountPrice || 0);
+    // 通知父组件更新
+    emit('update:total-price', totalPrice);
+    emit('update:payment-price', finalPaymentPrice);
+  },
+  { deep: true },
+);
+
+/** 添加采购入库单 */
+const purchaseInSelectRef = ref();
+const handleOpenPurchaseIn = () => {
+  if (!props.supplierId) {
+    ElMessage.error('请选择供应商');
+    return;
+  }
+  purchaseInSelectRef.value?.open(props.supplierId);
+};
+
+const handleAddPurchaseIn = (rows: ErpPurchaseInApi.PurchaseIn[]) => {
+  rows.forEach((row) => {
+    const newItem: ErpFinancePaymentApi.FinancePaymentItem = {
+      bizId: row.id,
+      bizType: ErpBizType.PURCHASE_IN,
+      bizNo: row.no,
+      totalPrice: row.totalPrice,
+      paidPrice: row.paymentPrice,
+      paymentPrice: row.totalPrice - row.paymentPrice,
+      remark: undefined,
+    };
+    tableData.value.push(newItem);
+  });
+  emit('update:items', [...tableData.value]);
+};
+
+/** 添加采购退货单 */
+const saleReturnSelectRef = ref();
+const handleOpenSaleReturn = () => {
+  if (!props.supplierId) {
+    ElMessage.error('请选择供应商');
+    return;
+  }
+  saleReturnSelectRef.value?.open(props.supplierId);
+};
+
+const handleAddSaleReturn = (rows: ErpPurchaseReturnApi.PurchaseReturn[]) => {
+  rows.forEach((row) => {
+    const newItem: ErpFinancePaymentApi.FinancePaymentItem = {
+      bizId: row.id,
+      bizType: ErpBizType.PURCHASE_RETURN,
+      bizNo: row.no,
+      totalPrice: -row.totalPrice,
+      paidPrice: -row.refundPrice,
+      paymentPrice: -row.totalPrice + row.refundPrice,
+      remark: undefined,
+    };
+    tableData.value.push(newItem);
+  });
+  emit('update:items', [...tableData.value]);
+};
+
+/** 删除行 */
+const handleDelete = async (row: any) => {
+  const index = tableData.value.findIndex(
+    (item) => item.bizId === row.bizId && item.bizType === row.bizType,
+  );
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+};
+
+/** 处理行数据变更 */
+const handleRowChange = (row: any) => {
+  const index = tableData.value.findIndex(
+    (item) => item.bizId === row.bizId && item.bizType === row.bizType,
+  );
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+};
+
+/** 表单校验 */
+const validate = () => {
+  // 检查是否有明细
+  if (tableData.value.length === 0) {
+    throw new Error('请添加付款明细');
+  }
+  // 检查每行的付款金额
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (!item.paymentPrice || item.paymentPrice <= 0) {
+      throw new Error(`第 ${i + 1} 行：本次付款必须大于0`);
+    }
+  }
+};
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <div>
+    <Grid class="w-full">
+      <template #paymentPrice="{ row }">
+        <ElInputNumber
+          v-model="row.paymentPrice"
+          :precision="2"
+          :disabled="disabled"
+          :formatter="erpPriceInputFormatter"
+          placeholder="请输入本次付款"
+          controls-position="right"
+          class="!w-full"
+          @change="handleRowChange(row)"
+        />
+      </template>
+      <template #remark="{ row }">
+        <ElInput
+          v-model="row.remark"
+          :disabled="disabled"
+          placeholder="请输入备注"
+          @change="handleRowChange(row)"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              popConfirm: {
+                title: '确认删除该付款明细吗？',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </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>
+                合计付款：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+              </span>
+              <span>
+                已付金额：{{ erpPriceInputFormatter(summaries.paidPrice) }}
+              </span>
+              <span>
+                本次付款：
+                {{ erpPriceInputFormatter(summaries.paymentPrice) }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <TableAction
+          v-if="!disabled"
+          class="mt-2 flex justify-center"
+          :actions="[
+            {
+              label: '添加采购入库单',
+              type: 'default',
+              onClick: handleOpenPurchaseIn,
+            },
+            {
+              label: '添加采购退货单',
+              type: 'default',
+              onClick: handleOpenSaleReturn,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 采购入库单选择组件 -->
+    <PurchaseInSelect
+      ref="purchaseInSelectRef"
+      @success="handleAddPurchaseIn"
+    />
+    <!-- 采购退货单选择组件 -->
+    <SaleReturnSelect
+      ref="saleReturnSelectRef"
+      @success="handleAddSaleReturn"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/payment/modules/purchase-in-select.vue b/apps/web-ele/src/views/erp/finance/payment/modules/purchase-in-select.vue
new file mode 100644
index 000000000..8169157d7
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/payment/modules/purchase-in-select.vue
@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseInApi } from '#/api/erp/purchase/in';
+
+import { ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPurchaseInPage } from '#/api/erp/purchase/in';
+
+import { usePurchaseInGridColumns, usePurchaseInGridFormSchema } from '../data';
+
+const emit = defineEmits<{
+  success: [rows: ErpPurchaseInApi.PurchaseIn[]];
+}>();
+
+const supplierId = ref<number>(); // 供应商 ID
+const open = ref<boolean>(false); // 弹窗是否打开
+const selectedRows = ref<ErpPurchaseInApi.PurchaseIn[]>([]); // 选中的行
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: usePurchaseInGridFormSchema(),
+  },
+  gridOptions: {
+    columns: usePurchaseInGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPurchaseInPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            supplierId: supplierId.value,
+            paymentEnable: true, // 只查询可付款的
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseInApi.PurchaseIn>,
+  gridEvents: {
+    checkboxChange: ({
+      records,
+    }: {
+      records: ErpPurchaseInApi.PurchaseIn[];
+    }) => {
+      selectedRows.value = records;
+    },
+    checkboxAll: ({ records }: { records: ErpPurchaseInApi.PurchaseIn[] }) => {
+      selectedRows.value = records;
+    },
+  },
+});
+
+/** 打开弹窗 */
+function openModal(id: number) {
+  // 重置数据
+  supplierId.value = id;
+  open.value = true;
+  selectedRows.value = [];
+  // 查询列表
+  gridApi.formApi?.resetForm();
+  gridApi.formApi?.setValues({ supplierId: id });
+  gridApi.query();
+}
+
+/** 确认选择采购入库单 */
+function handleOk() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请选择要添加的采购入库单');
+    return;
+  }
+  emit('success', selectedRows.value);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    class="!w-[50vw]"
+    v-model="open"
+    title="选择采购入库单"
+    @confirm="handleOk"
+    :append-to-body="true"
+  >
+    <Grid
+      class="max-h-[600px]"
+      table-title="采购入库单列表(仅展示可付款的单据)"
+    />
+    <template #footer>
+      <ElButton @click="open = false">取消</ElButton>
+      <ElButton type="primary" @click="handleOk">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/payment/modules/sale-return-select.vue b/apps/web-ele/src/views/erp/finance/payment/modules/sale-return-select.vue
new file mode 100644
index 000000000..ec57fd5cc
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/payment/modules/sale-return-select.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseReturnApi } from '#/api/erp/purchase/return';
+
+import { ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPurchaseReturnPage } from '#/api/erp/purchase/return';
+
+import { useSaleReturnGridColumns, useSaleReturnGridFormSchema } from '../data';
+
+const emit = defineEmits<{
+  success: [rows: ErpPurchaseReturnApi.PurchaseReturn[]];
+}>();
+
+const supplierId = ref<number>(); // 供应商 ID
+const open = ref<boolean>(false); // 弹窗是否打开
+const selectedRows = ref<ErpPurchaseReturnApi.PurchaseReturn[]>([]); // 选中的行
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSaleReturnGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSaleReturnGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPurchaseReturnPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            supplierId: supplierId.value,
+            refundEnable: true, // 只查询可退款的
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseReturnApi.PurchaseReturn>,
+  gridEvents: {
+    checkboxChange: ({
+      records,
+    }: {
+      records: ErpPurchaseReturnApi.PurchaseReturn[];
+    }) => {
+      selectedRows.value = records;
+    },
+    checkboxAll: ({
+      records,
+    }: {
+      records: ErpPurchaseReturnApi.PurchaseReturn[];
+    }) => {
+      selectedRows.value = records;
+    },
+  },
+});
+
+/** 打开弹窗 */
+function openModal(id: number) {
+  // 重置数据
+  supplierId.value = id;
+  open.value = true;
+  selectedRows.value = [];
+  // 查询列表
+  gridApi.formApi?.resetForm();
+  gridApi.formApi?.setValues({ supplierId: id });
+  gridApi.query();
+}
+
+/** 确认选择 */
+function handleOk() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请选择要添加的采购退货单');
+    return;
+  }
+  emit('success', selectedRows.value);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    class="!w-[50vw]"
+    v-model="open"
+    title="选择采购退货单"
+    @confirm="handleOk"
+    :append-to-body="true"
+  >
+    <Grid
+      class="max-h-[600px]"
+      table-title="采购退货单列表(仅展示需退款的单据)"
+    />
+    <template #footer>
+      <ElButton @click="open = false">取消</ElButton>
+      <ElButton type="primary" @click="handleOk">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/receipt/data.ts b/apps/web-ele/src/views/erp/finance/receipt/data.ts
new file mode 100644
index 000000000..19e463c38
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/receipt/data.ts
@@ -0,0 +1,592 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import { getCustomerSimpleList } from '#/api/erp/sale/customer';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '收款单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'receiptTime',
+      label: '收款时间',
+      component: 'DatePicker',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '选择收款时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'financeUserId',
+      label: '财务人员',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择财务人员',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '销售出库、退货单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'accountId',
+      label: '收款账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择收款账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '合计收款',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '合计收款',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'discountPrice',
+      label: '优惠金额',
+      component: 'InputNumber',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '请输入优惠金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'receiptPrice',
+      label: '实际收款',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '实际收款',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['totalPrice', 'discountPrice'],
+        componentProps: (values) => {
+          const totalPrice = values.totalPrice || 0;
+          const discountPrice = values.discountPrice || 0;
+          values.receiptPrice = totalPrice - discountPrice;
+          return {};
+        },
+      },
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'bizNo',
+      title: '销售单据编号',
+      minWidth: 200,
+    },
+    {
+      field: 'totalPrice',
+      title: '应收金额',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'receiptedPrice',
+      title: '已收金额',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'receiptPrice',
+      title: '本次收款',
+      minWidth: 115,
+      fixed: 'right',
+      slots: { default: 'receiptPrice' },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '收款单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收款单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'receiptTime',
+      label: '收款时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'financeUserId',
+      label: '财务人员',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择财务人员',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '收款账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择收款账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'bizNo',
+      label: '销售单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入销售单号',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '收款单号',
+      width: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'receiptTime',
+      title: '收款时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'financeUserName',
+      title: '财务人员',
+      minWidth: 120,
+    },
+    {
+      field: 'accountName',
+      title: '收款账户',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '合计收款',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'discountPrice',
+      title: '优惠金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'receiptPrice',
+      title: '实际收款',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 90,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 销售出库单选择表单的配置项 */
+export function useSaleOutGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '出库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入出库单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        placeholder: '已自动选择客户',
+      },
+    },
+    {
+      fieldName: 'receiptStatus',
+      label: '收款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未收款', value: 0 },
+          { label: '部分收款', value: 1 },
+          { label: '全部收款', value: 2 },
+        ],
+        placeholder: '请选择收款状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 销售出库单选择列表的字段 */
+export function useSaleOutGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '出库单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'outTime',
+      title: '出库时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'totalPrice',
+      title: '应收金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'receiptPrice',
+      title: '已收金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unReceiptPrice',
+      title: '未收金额',
+      formatter: ({ row }) => {
+        return erpPriceInputFormatter(row.totalPrice - row.receiptPrice || 0);
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+  ];
+}
+
+/** 销售退货单选择表单的配置项 */
+export function useSaleReturnGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '退货单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入退货单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        placeholder: '已自动选择客户',
+      },
+    },
+    {
+      fieldName: 'refundStatus',
+      label: '退款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未退款', value: 0 },
+          { label: '部分退款', value: 1 },
+          { label: '全部退款', value: 2 },
+        ],
+        placeholder: '请选择退款状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 销售退货单选择列表的字段 */
+export function useSaleReturnGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '退货单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'returnTime',
+      title: '退货时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'totalPrice',
+      title: '应退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'refundPrice',
+      title: '已退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unRefundPrice',
+      title: '未退金额',
+      formatter: ({ row }) => {
+        return erpPriceInputFormatter(row.totalPrice - row.refundPrice || 0);
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/finance/receipt/index.vue b/apps/web-ele/src/views/erp/finance/receipt/index.vue
new file mode 100644
index 000000000..53a84eecf
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/receipt/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpFinanceReceiptApi } from '#/api/erp/finance/receipt';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteFinanceReceipt,
+  exportFinanceReceipt,
+  getFinanceReceiptPage,
+  updateFinanceReceiptStatus,
+} from '#/api/erp/finance/receipt';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 收款单列表 */
+defineOptions({ name: 'ErpFinanceReceipt' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportFinanceReceipt(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '收款单.xls', source: data });
+}
+
+/** 新增收款单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑收款单 */
+function handleEdit(row: ErpFinanceReceiptApi.FinanceReceipt) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除收款单 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteFinanceReceipt(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpFinanceReceiptApi.FinanceReceipt,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该收款单吗？`,
+  });
+  try {
+    await updateFinanceReceiptStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpFinanceReceiptApi.FinanceReceipt[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpFinanceReceiptApi.FinanceReceipt) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFinanceReceiptPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpFinanceReceiptApi.FinanceReceipt>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【财务】采购付款、销售收款"
+        url="https://doc.iocoder.cn/sale/finance-payment-receipt/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="收款单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['收款单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:finance-receipt:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:finance-receipt:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:finance-receipt:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:finance-receipt:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:finance-receipt:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:finance-receipt:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:finance-receipt:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/receipt/modules/form.vue b/apps/web-ele/src/views/erp/finance/receipt/modules/form.vue
new file mode 100644
index 000000000..8464cceb4
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/receipt/modules/form.vue
@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { ErpFinanceReceiptApi } from '#/api/erp/finance/receipt';
+
+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 { getAccountSimpleList } from '#/api/erp/finance/account';
+import {
+  createFinanceReceipt,
+  getFinanceReceipt,
+  updateFinanceReceipt,
+} from '#/api/erp/finance/receipt';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<
+  ErpFinanceReceiptApi.FinanceReceipt & {
+    fileUrl?: string;
+  }
+>({
+  id: undefined,
+  no: '',
+  customerId: 0,
+  accountId: 0,
+  financeUserId: 0,
+  receiptTime: new Date(),
+  remark: '',
+  fileUrl: undefined,
+  totalPrice: 0,
+  discountPrice: 0,
+  receiptPrice: 0,
+  items: [],
+  status: 0,
+});
+
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['收款单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['收款单']);
+  } else {
+    return '收款单详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    if (formData.value) {
+      if (changedFields.includes('customerId')) {
+        formData.value.customerId = values.customerId;
+      }
+      // 目的：同步到 item-form 组件，触发整体的价格计算
+      if (changedFields.includes('discountPrice')) {
+        formData.value.discountPrice = values.discountPrice;
+        formData.value.receiptPrice =
+          formData.value.totalPrice - values.discountPrice;
+        formApi.setValues({
+          receiptPrice: formData.value.receiptPrice,
+        });
+      }
+    }
+  },
+});
+
+/** 更新收款项 */
+function handleUpdateItems(items: ErpFinanceReceiptApi.FinanceReceiptItem[]) {
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 更新总金额 */
+function handleUpdateTotalPrice(totalPrice: number) {
+  formData.value.totalPrice = totalPrice;
+  formApi.setValues({
+    totalPrice: formData.value.totalPrice,
+  });
+}
+
+/** 更新收款金额 */
+function handleUpdateReceiptPrice(receiptPrice: number) {
+  formData.value.receiptPrice = receiptPrice;
+  formApi.setValues({
+    receiptPrice: formData.value.receiptPrice,
+  });
+}
+
+/** 创建或更新收款单 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as ErpFinanceReceiptApi.FinanceReceipt;
+    try {
+      await (formType.value === 'create'
+        ? createFinanceReceipt(data)
+        : updateFinanceReceipt(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {
+        id: undefined,
+        no: '',
+        customerId: 0,
+        accountId: 0,
+        financeUserId: 0,
+        receiptTime: new Date(),
+        remark: '',
+        totalPrice: 0,
+        discountPrice: 0,
+        receiptPrice: 0,
+        status: 0,
+        items: [],
+        bizNo: '',
+      };
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getFinanceReceipt(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value, false);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :customer-id="formData?.customerId"
+          :disabled="formType === 'detail'"
+          :discount-price="formData?.discountPrice ?? 0"
+          @update:items="handleUpdateItems"
+          @update:total-price="handleUpdateTotalPrice"
+          @update:receipt-price="handleUpdateReceiptPrice"
+          class="w-full"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/receipt/modules/item-form.vue b/apps/web-ele/src/views/erp/finance/receipt/modules/item-form.vue
new file mode 100644
index 000000000..311e1c576
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/receipt/modules/item-form.vue
@@ -0,0 +1,298 @@
+<script lang="ts" setup>
+import type { ErpFinanceReceiptApi } from '#/api/erp/finance/receipt';
+import type { ErpSaleOutApi } from '#/api/erp/sale/out';
+import type { ErpSaleReturnApi } from '#/api/erp/sale/return';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { ErpBizType } from '@vben/constants';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElMessage } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { useFormItemColumns } from '../data';
+import SaleOutSelect from './sale-out-select.vue';
+import SaleReturnSelect from './sale-return-select.vue';
+
+interface Props {
+  items?: ErpFinanceReceiptApi.FinanceReceiptItem[];
+  customerId?: number;
+  disabled?: boolean;
+  discountPrice?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  customerId: undefined,
+  disabled: false,
+  discountPrice: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:total-price',
+  'update:receipt-price',
+]);
+
+const tableData = ref<ErpFinanceReceiptApi.FinanceReceiptItem[]>([]); // 表格数据
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+    receiptedPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.receiptedPrice || 0),
+      0,
+    ),
+    receiptPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.receiptPrice || 0),
+      0,
+    ),
+  };
+});
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 计算 totalPrice、receiptPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPrice],
+  () => {
+    if (!tableData.value || tableData.value.length === 0) {
+      return;
+    }
+    const totalPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.totalPrice || 0),
+      0,
+    );
+    const receiptPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.receiptPrice || 0),
+      0,
+    );
+    const finalReceiptPrice = receiptPrice - (props.discountPrice || 0);
+    // 通知父组件更新
+    emit('update:total-price', totalPrice);
+    emit('update:receipt-price', finalReceiptPrice);
+  },
+  { deep: true },
+);
+
+/** 添加销售出库单 */
+const saleOutSelectRef = ref();
+function handleOpenSaleOut() {
+  if (!props.customerId) {
+    ElMessage.error('请选择客户');
+    return;
+  }
+  saleOutSelectRef.value?.open(props.customerId);
+}
+
+function handleAddSaleOut(rows: ErpSaleOutApi.SaleOut[]) {
+  rows.forEach((row) => {
+    const newItem: ErpFinanceReceiptApi.FinanceReceiptItem = {
+      bizId: row.id,
+      bizType: ErpBizType.SALE_OUT,
+      bizNo: row.no,
+      totalPrice: row.totalPrice,
+      receiptedPrice: row.receiptPrice,
+      receiptPrice: row.totalPrice - row.receiptPrice,
+      remark: undefined,
+    };
+    tableData.value.push(newItem);
+  });
+  emit('update:items', [...tableData.value]);
+}
+
+/** 添加销售退货单 */
+const saleReturnSelectRef = ref();
+function handleOpenSaleReturn() {
+  if (!props.customerId) {
+    ElMessage.error('请选择客户');
+    return;
+  }
+  saleReturnSelectRef.value?.open(props.customerId);
+}
+
+function handleAddSaleReturn(rows: ErpSaleReturnApi.SaleReturn[]) {
+  rows.forEach((row) => {
+    const newItem: ErpFinanceReceiptApi.FinanceReceiptItem = {
+      bizId: row.id,
+      bizType: ErpBizType.SALE_RETURN,
+      bizNo: row.no,
+      totalPrice: -row.totalPrice,
+      receiptedPrice: -row.refundPrice,
+      receiptPrice: -row.totalPrice + row.refundPrice,
+      remark: undefined,
+    };
+    tableData.value.push(newItem);
+  });
+  emit('update:items', [...tableData.value]);
+}
+
+/** 删除行 */
+function handleDelete(row: any) {
+  const index = tableData.value.findIndex(
+    (item) => item.bizId === row.bizId && item.bizType === row.bizType,
+  );
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex(
+    (item) => item.bizId === row.bizId && item.bizType === row.bizType,
+  );
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 表单校验 */
+function validate() {
+  // 检查是否有明细
+  if (tableData.value.length === 0) {
+    throw new Error('请添加收款明细');
+  }
+  // 检查每行的收款金额
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (!item.receiptPrice || item.receiptPrice <= 0) {
+      throw new Error(`第 ${i + 1} 行：本次收款必须大于0`);
+    }
+  }
+}
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <div>
+    <Grid class="w-full">
+      <template #receiptPrice="{ row }">
+        <ElInputNumber
+          v-model="row.receiptPrice"
+          :precision="2"
+          :disabled="disabled"
+          :formatter="erpPriceInputFormatter"
+          placeholder="请输入本次收款"
+          controls-position="right"
+          class="!w-full"
+          @change="handleRowChange(row)"
+        />
+      </template>
+      <template #remark="{ row }">
+        <ElInput
+          v-model="row.remark"
+          :disabled="disabled"
+          placeholder="请输入备注"
+          @change="handleRowChange(row)"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              popConfirm: {
+                title: '确认删除该收款明细吗？',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </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>
+                合计收款：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+              </span>
+              <span>
+                已收金额：{{ erpPriceInputFormatter(summaries.receiptedPrice) }}
+              </span>
+              <span>
+                本次收款：
+                {{ erpPriceInputFormatter(summaries.receiptPrice) }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <TableAction
+          v-if="!disabled"
+          class="mt-2 flex justify-center"
+          :actions="[
+            {
+              label: '添加销售出库单',
+              type: 'default',
+              onClick: handleOpenSaleOut,
+            },
+            {
+              label: '添加销售退货单',
+              type: 'default',
+              onClick: handleOpenSaleReturn,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 销售出库单选择组件 -->
+    <SaleOutSelect ref="saleOutSelectRef" @success="handleAddSaleOut" />
+    <!-- 销售退货单选择组件 -->
+    <SaleReturnSelect
+      ref="saleReturnSelectRef"
+      @success="handleAddSaleReturn"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/receipt/modules/sale-out-select.vue b/apps/web-ele/src/views/erp/finance/receipt/modules/sale-out-select.vue
new file mode 100644
index 000000000..b5d2def59
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/receipt/modules/sale-out-select.vue
@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSaleOutApi } from '#/api/erp/sale/out';
+
+import { ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSaleOutPage } from '#/api/erp/sale/out';
+
+import { useSaleOutGridColumns, useSaleOutGridFormSchema } from '../data';
+
+const emit = defineEmits<{
+  success: [rows: ErpSaleOutApi.SaleOut[]];
+}>();
+
+const customerId = ref<number>(); // 客户ID
+const open = ref<boolean>(false); // 弹窗是否打开
+const selectedRows = ref<ErpSaleOutApi.SaleOut[]>([]); // 选中的行
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSaleOutGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSaleOutGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSaleOutPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            customerId: customerId.value,
+            receiptEnable: true, // 只查询可收款的
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSaleOutApi.SaleOut>,
+  gridEvents: {
+    checkboxChange: ({ records }: { records: ErpSaleOutApi.SaleOut[] }) => {
+      selectedRows.value = records;
+    },
+    checkboxAll: ({ records }: { records: ErpSaleOutApi.SaleOut[] }) => {
+      selectedRows.value = records;
+    },
+  },
+});
+
+/** 打开弹窗 */
+function openModal(id: number) {
+  // 重置数据
+  customerId.value = id;
+  open.value = true;
+  selectedRows.value = [];
+  // 查询列表
+  gridApi.formApi?.resetForm();
+  gridApi.formApi?.setValues({ customerId: id });
+  gridApi.query();
+}
+
+/** 确认选择销售出库单 */
+function handleOk() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请选择要添加的销售出库单');
+    return;
+  }
+  emit('success', selectedRows.value);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    class="!w-[50vw]"
+    title="选择销售出库单"
+    @confirm="handleOk"
+  >
+    <Grid
+      class="max-h-[600px]"
+      table-title="销售出库单列表(仅展示可收款的单据)"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <ElButton @click="open = false">取消</ElButton>
+        <ElButton type="primary" @click="handleOk">确定</ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/erp/finance/receipt/modules/sale-return-select.vue b/apps/web-ele/src/views/erp/finance/receipt/modules/sale-return-select.vue
new file mode 100644
index 000000000..8bef7177d
--- /dev/null
+++ b/apps/web-ele/src/views/erp/finance/receipt/modules/sale-return-select.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSaleReturnApi } from '#/api/erp/sale/return';
+
+import { ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSaleReturnPage } from '#/api/erp/sale/return';
+
+import { useSaleReturnGridColumns, useSaleReturnGridFormSchema } from '../data';
+
+const emit = defineEmits<{
+  success: [rows: ErpSaleReturnApi.SaleReturn[]];
+}>();
+
+const customerId = ref<number>(); // 客户ID
+const open = ref<boolean>(false); // 弹窗是否打开
+const selectedRows = ref<ErpSaleReturnApi.SaleReturn[]>([]); // 选中的行
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSaleReturnGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSaleReturnGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSaleReturnPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            customerId: customerId.value,
+            refundEnable: true, // 只查询可退款的
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSaleReturnApi.SaleReturn>,
+  gridEvents: {
+    checkboxChange: ({
+      records,
+    }: {
+      records: ErpSaleReturnApi.SaleReturn[];
+    }) => {
+      selectedRows.value = records;
+    },
+    checkboxAll: ({ records }: { records: ErpSaleReturnApi.SaleReturn[] }) => {
+      selectedRows.value = records;
+    },
+  },
+});
+
+/** 打开弹窗 */
+function openModal(id: number) {
+  // 重置数据
+  customerId.value = id;
+  open.value = true;
+  selectedRows.value = [];
+  // 查询列表
+  gridApi.formApi?.resetForm();
+  gridApi.formApi?.setValues({ customerId: id });
+  gridApi.query();
+}
+
+/** 确认选择销售退货单 */
+function handleOk() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请选择要添加的销售退货单');
+    return;
+  }
+  emit('success', selectedRows.value);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    class="!w-[50vw]"
+    title="选择销售退货单"
+    @confirm="handleOk"
+  >
+    <Grid
+      class="max-h-[600px]"
+      table-title="销售退货单列表(仅展示可退款的单据)"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <ElButton @click="open = false">取消</ElButton>
+        <ElButton type="primary" @click="handleOk">确定</ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/erp/home/index.vue b/apps/web-ele/src/views/erp/home/index.vue
new file mode 100644
index 000000000..9f6f2ea14
--- /dev/null
+++ b/apps/web-ele/src/views/erp/home/index.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElCol, ElRow } from 'element-plus';
+
+import SummaryCard from './modules/summary-card.vue';
+import TimeSummaryChart from './modules/time-summary-chart.vue';
+
+/** ERP 首页 */
+defineOptions({ name: 'ErpHome' });
+
+const loading = ref(false); // 加载中
+
+/** 图表组件引用 */
+const saleChartRef = ref();
+const purchaseChartRef = ref();
+</script>
+
+<template>
+  <Page>
+    <template #doc>
+      <DocAlert
+        title="ERP 手册（功能开启）"
+        url="https://doc.iocoder.cn/erp/build/"
+      />
+    </template>
+
+    <div v-loading="loading" class="flex flex-col gap-4">
+      <!-- 销售/采购的全局统计 -->
+      <SummaryCard />
+
+      <!-- 销售/采购的时段统计 -->
+      <ElRow :gutter="16">
+        <!-- 销售统计 -->
+        <ElCol :md="12" :sm="12" :xs="24">
+          <TimeSummaryChart ref="saleChartRef" title="销售统计" type="sale" />
+        </ElCol>
+        <!-- 采购统计 -->
+        <ElCol :md="12" :sm="12" :xs="24">
+          <TimeSummaryChart
+            ref="purchaseChartRef"
+            title="采购统计"
+            type="purchase"
+          />
+        </ElCol>
+      </ElRow>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/home/modules/summary-card.vue b/apps/web-ele/src/views/erp/home/modules/summary-card.vue
new file mode 100644
index 000000000..ff98e556a
--- /dev/null
+++ b/apps/web-ele/src/views/erp/home/modules/summary-card.vue
@@ -0,0 +1,69 @@
+<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: () => ({}),
+});
+
+/** 概览数据 */
+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-ele/src/views/erp/home/modules/time-summary-chart.vue b/apps/web-ele/src/views/erp/home/modules/time-summary-chart.vue
new file mode 100644
index 000000000..fe164eb29
--- /dev/null
+++ b/apps/web-ele/src/views/erp/home/modules/time-summary-chart.vue
@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+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 { ElCard } from 'element-plus';
+
+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.SaleSummaryRespVO>(); // 销售概况统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(); // 销售时段统计
+const getSaleStatistics = async () => {
+  saleSummary.value = await getSaleSummary();
+  saleTimeSummaryList.value = await getSaleTimeSummary();
+};
+
+/** 采购统计数据 */
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(); // 采购概况统计
+const purchaseTimeSummaryList =
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]>(); // 采购时段统计
+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: echarts.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 as any)[0],
+          data: seriesData,
+        },
+      ],
+    };
+    renderEcharts(options);
+  },
+  { immediate: true },
+);
+
+/** 组件挂载时初始化数据 */
+onMounted(() => {
+  initData();
+});
+</script>
+
+<template>
+  <ElCard>
+    <template #header>
+      <span>{{ title }}</span>
+    </template>
+    <!-- 折线图 -->
+    <EchartsUI ref="chartRef" />
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/erp/product/category/data.ts b/apps/web-ele/src/views/erp/product/category/data.ts
new file mode 100644
index 000000000..e6b13c900
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/category/data.ts
@@ -0,0 +1,149 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpProductCategoryApi } from '#/api/erp/product/category';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getProductCategoryList } from '#/api/erp/product/category';
+
+/** 新增/修改的表单 */
+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 getProductCategoryList();
+          data.unshift({
+            id: 0,
+            name: '顶级分类',
+          });
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级分类',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '分类编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入显示顺序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 查询表单 */
+export function useQueryFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '分类名称',
+      componentProps: {
+        placeholder: '请输入分类名称',
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '开启状态',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择开启状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<ErpProductCategoryApi.ProductCategory>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      align: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'code',
+      title: '分类编码',
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+    },
+    {
+      field: 'status',
+      title: '分类状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/product/category/index.vue b/apps/web-ele/src/views/erp/product/category/index.vue
new file mode 100644
index 000000000..19c20d37b
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/category/index.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpProductCategoryApi } from '#/api/erp/product/category';
+
+import { ref } from 'vue';
+
+import { DocAlert, 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 {
+  deleteProductCategory,
+  exportProductCategory,
+  getProductCategoryList,
+} from '#/api/erp/product/category';
+import { $t } from '#/locales';
+
+import { useGridColumns, useQueryFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportProductCategory(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品分类.xls', source: data });
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: ErpProductCategoryApi.ProductCategory) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: ErpProductCategoryApi.ProductCategory) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: ErpProductCategoryApi.ProductCategory) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProductCategory(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useQueryFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getProductCategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<ErpProductCategoryApi.ProductCategory>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【产品】产品信息、分类、单位"
+        url="https://doc.iocoder.cn/erp/product/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="产品分类列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['产品分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:product-category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:product-category:export'],
+              onClick: handleExport,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:product-category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:product-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:product-category:delete'],
+              disabled: row.children && row.children.length > 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/erp/product/category/modules/form.vue b/apps/web-ele/src/views/erp/product/category/modules/form.vue
new file mode 100644
index 000000000..981feb5cd
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/category/modules/form.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { ErpProductCategoryApi } from '#/api/erp/product/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProductCategory,
+  getProductCategory,
+  updateProductCategory,
+} from '#/api/erp/product/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpProductCategoryApi.ProductCategory>();
+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 ErpProductCategoryApi.ProductCategory;
+    try {
+      await (formData.value?.id
+        ? updateProductCategory(data)
+        : createProductCategory(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<ErpProductCategoryApi.ProductCategory>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProductCategory(data.id);
+      // 设置到 values
+      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/erp/product/product/data.ts b/apps/web-ele/src/views/erp/product/product/data.ts
new file mode 100644
index 000000000..8bfa9ebfe
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/product/data.ts
@@ -0,0 +1,258 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getProductCategorySimpleList } from '#/api/erp/product/category';
+import { getProductUnitSimpleList } from '#/api/erp/product/unit';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+    },
+    {
+      fieldName: 'barCode',
+      label: '条码',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入条码',
+      },
+    },
+    {
+      fieldName: 'categoryId',
+      label: '分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getProductCategorySimpleList();
+          return handleTree(data);
+        },
+
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择分类',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'unitId',
+      label: '单位',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getProductUnitSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择单位',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'standard',
+      label: '规格',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规格',
+      },
+    },
+    {
+      fieldName: 'expiryDay',
+      label: '保质期天数',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入保质期天数',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'weight',
+      label: '重量（kg）',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入重量（kg）',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'purchasePrice',
+      label: '采购价格',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入采购价格，单位：元',
+        precision: 2,
+        min: 0,
+        step: 0.01,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'salePrice',
+      label: '销售价格',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入销售价格，单位：元',
+        precision: 2,
+        min: 0,
+        step: 0.01,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'minPrice',
+      label: '最低价格',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入最低价格，单位：元',
+        precision: 2,
+        min: 0,
+        step: 0.01,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'categoryId',
+      label: '分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getProductCategorySimpleList();
+          return handleTree(data);
+        },
+
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择分类',
+        treeDefaultExpandAll: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'barCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名称',
+      minWidth: 200,
+    },
+    {
+      field: 'standard',
+      title: '规格',
+      minWidth: 100,
+    },
+    {
+      field: 'categoryName',
+      title: '分类',
+      minWidth: 120,
+    },
+    {
+      field: 'unitName',
+      title: '单位',
+      minWidth: 100,
+    },
+    {
+      field: 'purchasePrice',
+      title: '采购价格',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'salePrice',
+      title: '销售价格',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'minPrice',
+      title: '最低价格',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/product/product/index.vue b/apps/web-ele/src/views/erp/product/product/index.vue
new file mode 100644
index 000000000..f6bce71be
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/product/index.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpProductApi } from '#/api/erp/product/product';
+
+import { DocAlert, 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 {
+  deleteProduct,
+  exportProduct,
+  getProductPage,
+} from '#/api/erp/product/product';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportProduct(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品信息.xls', source: data });
+}
+
+/** 创建产品 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑产品 */
+function handleEdit(row: ErpProductApi.Product) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除产品 */
+async function handleDelete(row: ErpProductApi.Product) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProduct(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } 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 getProductPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpProductApi.Product>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【产品】产品信息、分类、单位"
+        url="https://doc.iocoder.cn/erp/product/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="产品列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['产品']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:product:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:product:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:product:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:product: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/erp/product/product/modules/form.vue b/apps/web-ele/src/views/erp/product/product/modules/form.vue
new file mode 100644
index 000000000..baed5a71e
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/product/modules/form.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { ErpProductApi } from '#/api/erp/product/product';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProduct,
+  getProduct,
+  updateProduct,
+} from '#/api/erp/product/product';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpProductApi.Product>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品'])
+    : $t('ui.actionTitle.create', ['产品']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  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 ErpProductApi.Product;
+    try {
+      await (formData.value?.id ? updateProduct(data) : createProduct(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<ErpProductApi.Product>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProduct(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/product/unit/data.ts b/apps/web-ele/src/views/erp/product/unit/data.ts
new file mode 100644
index 000000000..0914528aa
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/unit/data.ts
@@ -0,0 +1,101 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '单位名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入单位名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '单位状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+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(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '单位编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '单位名称',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '单位状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/product/unit/index.vue b/apps/web-ele/src/views/erp/product/unit/index.vue
new file mode 100644
index 000000000..19972401c
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/unit/index.vue
@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpProductUnitApi } from '#/api/erp/product/unit';
+
+import { DocAlert, 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 {
+  deleteProductUnit,
+  exportProductUnit,
+  getProductUnitPage,
+} from '#/api/erp/product/unit';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportProductUnit(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品单位.xls', source: data });
+}
+
+/** 创建产品单位 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑产品单位 */
+function handleEdit(row: ErpProductUnitApi.ProductUnit) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除产品单位 */
+async function handleDelete(row: ErpProductUnitApi.ProductUnit) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProductUnit(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } 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 getProductUnitPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpProductUnitApi.ProductUnit>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【产品】产品信息、分类、单位"
+        url="https://doc.iocoder.cn/erp/product/"
+      />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="产品单位列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['产品单位']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:product-unit:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:product-unit:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:product-unit:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:product-unit: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/erp/product/unit/modules/form.vue b/apps/web-ele/src/views/erp/product/unit/modules/form.vue
new file mode 100644
index 000000000..70b3a9821
--- /dev/null
+++ b/apps/web-ele/src/views/erp/product/unit/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { ErpProductUnitApi } from '#/api/erp/product/unit';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProductUnit,
+  getProductUnit,
+  updateProductUnit,
+} from '#/api/erp/product/unit';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpProductUnitApi.ProductUnit>();
+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 ErpProductUnitApi.ProductUnit;
+    try {
+      await (formData.value?.id
+        ? updateProductUnit(data)
+        : createProductUnit(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<ErpProductUnitApi.ProductUnit>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProductUnit(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/in/data.ts b/apps/web-ele/src/views/erp/purchase/in/data.ts
new file mode 100644
index 000000000..4b4233c68
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/in/data.ts
@@ -0,0 +1,624 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpNumberFormatter, 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 { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '入库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'inTime',
+      label: '入库时间',
+      component: 'DatePicker',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '选择入库时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'orderNo',
+      label: '关联订单',
+      component: 'Input',
+      formItemClass: 'col-span-1',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择关联订单',
+        disabled: formType === 'detail',
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        disabled: true,
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '入库产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+    {
+      fieldName: 'discountPrice',
+      label: '付款优惠',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '付款优惠',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'discountedPrice',
+      label: '优惠后金额',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['totalPrice', 'otherPrice'],
+        componentProps: (values) => {
+          const totalPrice = values.totalPrice || 0;
+          const otherPrice = values.otherPrice || 0;
+          values.discountedPrice = totalPrice - otherPrice;
+          return {};
+        },
+      },
+    },
+    {
+      fieldName: 'otherPrice',
+      label: '其他费用',
+      component: 'InputNumber',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '请输入其他费用',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '结算账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '应付金额',
+      component: 'InputNumber',
+      componentProps: {
+        precision: 2,
+        min: 0,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  formData?: any[],
+  disabled?: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 200,
+      slots: { default: 'warehouseId' },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'totalCount',
+      title: '原数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+      fixed: 'right',
+      visible: formData && formData[0]?.inCount !== undefined,
+    },
+    {
+      field: 'inCount',
+      title: '已入库',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+      fixed: 'right',
+      visible: formData && formData[0]?.returnCount !== undefined,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      fixed: 'right',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      fixed: 'right',
+      title: '产品金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      fixed: 'right',
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 105,
+      slots: { default: 'taxPercent' },
+    },
+    {
+      fixed: 'right',
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      fixed: 'right',
+      title: '合计金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '入库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'inTime',
+      label: '入库时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderNo',
+      label: '关联订单',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入关联订单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '结算账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'paymentStatus',
+      label: '付款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未付款', value: 0 },
+          { label: '部分付款', value: 1 },
+          { label: '全部付款', value: 2 },
+        ],
+        placeholder: '请选择付款状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '审批状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择审批状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        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: 'inTime',
+      title: '入库时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '应付金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'paymentPrice',
+      title: '已付金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unPaymentPrice',
+      title: '未付金额',
+      formatter: ({ row }) => {
+        return `${erpNumberFormatter(row.totalPrice - row.paymentPrice, 2)}元`;
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useOrderGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useOrderGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'radio',
+      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: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'inCount',
+      title: '入库数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/purchase/in/index.vue b/apps/web-ele/src/views/erp/purchase/in/index.vue
new file mode 100644
index 000000000..2b5c1cbd6
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/in/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseInApi } from '#/api/erp/purchase/in';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePurchaseIn,
+  exportPurchaseIn,
+  getPurchaseInPage,
+  updatePurchaseInStatus,
+} from '#/api/erp/purchase/in';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 采购入库列表 */
+defineOptions({ name: 'ErpPurchaseIn' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportPurchaseIn(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '采购入库.xls', source: data });
+}
+
+/** 新增采购入库 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑采购入库 */
+function handleEdit(row: ErpPurchaseInApi.PurchaseIn) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除采购入库 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deletePurchaseIn(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpPurchaseInApi.PurchaseIn,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+  });
+  try {
+    await updatePurchaseInStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpPurchaseInApi.PurchaseIn[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpPurchaseInApi.PurchaseIn) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPurchaseInPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseInApi.PurchaseIn>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【采购】采购订单、入库、退货"
+        url="https://doc.iocoder.cn/erp/purchase/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="采购入库列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['采购入库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:purchase-in:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:purchase-in:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-in:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:purchase-in:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:purchase-in:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:purchase-in:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-in:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/in/modules/form.vue b/apps/web-ele/src/views/erp/purchase/in/modules/form.vue
new file mode 100644
index 000000000..21cfadfae
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/in/modules/form.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { ErpPurchaseInApi } from '#/api/erp/purchase/in';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+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 { getAccountSimpleList } from '#/api/erp/finance/account';
+import {
+  createPurchaseIn,
+  getPurchaseIn,
+  updatePurchaseIn,
+} from '#/api/erp/purchase/in';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+import PurchaseOrderSelect from './purchase-order-select.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<
+  ErpPurchaseInApi.PurchaseIn & {
+    accountId?: number;
+    customerId?: number;
+    discountPercent?: number;
+    fileUrl?: string;
+    order?: ErpPurchaseOrderApi.PurchaseOrder;
+    orderId?: number;
+    orderNo?: string;
+  }
+>({
+  id: undefined,
+  no: undefined,
+  accountId: undefined,
+  inTime: undefined,
+  remark: undefined,
+  fileUrl: undefined,
+  discountPercent: 0,
+  supplierId: undefined,
+  discountPrice: 0,
+  totalPrice: 0,
+  otherPrice: 0,
+  items: [],
+});
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['采购入库']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['采购入库']);
+  } else {
+    return '采购入库详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    // 目的：同步到 item-form 组件，触发整体的价格计算
+    if (formData.value) {
+      if (changedFields.includes('otherPrice')) {
+        formData.value.otherPrice = values.otherPrice;
+      }
+      if (changedFields.includes('discountPercent')) {
+        formData.value.discountPercent = values.discountPercent;
+      }
+    }
+  },
+});
+
+/** 更新采购入库项 */
+const handleUpdateItems = (items: ErpPurchaseInApi.PurchaseInItem[]) => {
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+};
+
+/** 更新其他费用 */
+const handleUpdateOtherPrice = (otherPrice: number) => {
+  formApi.setValues({
+    otherPrice,
+  });
+};
+
+/** 更新优惠金额 */
+const handleUpdateDiscountPrice = (discountPrice: number) => {
+  formApi.setValues({
+    discountPrice,
+  });
+};
+
+/** 更新总金额 */
+const handleUpdateTotalPrice = (totalPrice: number) => {
+  formApi.setValues({
+    totalPrice,
+  });
+};
+
+/** 选择采购订单 */
+const handleUpdateOrder = (order: ErpPurchaseOrderApi.PurchaseOrder) => {
+  formData.value = {
+    ...formData.value,
+    orderId: order.id,
+    orderNo: order.no!,
+    supplierId: order.supplierId!,
+    accountId: order.accountId!,
+    remark: order.remark!,
+    discountPercent: order.discountPercent!,
+    fileUrl: order.fileUrl!,
+  };
+  // 将订单项设置到入库单项
+  order.items!.forEach((item: any) => {
+    item.totalCount = item.count;
+    item.count = item.totalCount - item.inCount;
+    item.orderItemId = item.id;
+    item.id = undefined;
+  });
+  formData.value.items = order.items!.filter(
+    (item) => item.count && item.count > 0,
+  ) as ErpPurchaseInApi.PurchaseInItem[];
+  formApi.setValues(formData.value, false);
+};
+
+/** 创建或更新采购入库 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpPurchaseInApi.PurchaseIn;
+    try {
+      await (formType.value === 'create'
+        ? createPurchaseIn(data)
+        : updatePurchaseIn(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {} as ErpPurchaseInApi.PurchaseIn;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPurchaseIn(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value, false);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          :discount-percent="formData?.discountPercent ?? 0"
+          :other-price="formData?.otherPrice ?? 0"
+          @update:items="handleUpdateItems"
+          @update:discount-price="handleUpdateDiscountPrice"
+          @update:other-price="handleUpdateOtherPrice"
+          @update:total-price="handleUpdateTotalPrice"
+        />
+      </template>
+      <template #orderNo>
+        <PurchaseOrderSelect
+          :order-no="formData?.orderNo"
+          @update:order="handleUpdateOrder"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/in/modules/item-form.vue b/apps/web-ele/src/views/erp/purchase/in/modules/item-form.vue
new file mode 100644
index 000000000..492618675
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/in/modules/item-form.vue
@@ -0,0 +1,309 @@
+<script lang="ts" setup>
+import type { ErpPurchaseInApi } from '#/api/erp/purchase/in';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseStockCount } from '#/api/erp/stock/stock';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+import { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpPurchaseInApi.PurchaseInItem[];
+  disabled?: boolean;
+  discountPercent?: number;
+  otherPrice?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+  discountPercent: 0,
+  otherPrice: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:other-price',
+  'update:total-price',
+]);
+
+const tableData = ref<ErpPurchaseInApi.PurchaseInItem[]>([]); // 表格数据
+const productOptions = ref<any[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    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 [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(tableData.value, props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+    // 更新表格列配置（目的：原数量、已入库动态列）
+    const columns = useFormItemColumns(tableData.value, props.disabled);
+    await gridApi.grid.reloadColumn(columns || []);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 计算 discountPrice、otherPrice、totalPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPercent, props.otherPrice],
+  () => {
+    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);
+    const discountedPrice = totalPrice - discountPrice!;
+    const finalTotalPrice = discountedPrice + (props.otherPrice || 0);
+
+    // 通知父组件更新
+    emit('update:discount-price', discountPrice);
+    emit('update:other-price', props.otherPrice || 0);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
+/** 处理删除 */
+function handleDelete(row: ErpPurchaseInApi.PurchaseInItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理仓库变更 */
+async function handleWarehouseChange(row: ErpPurchaseInApi.PurchaseInItem) {
+  const stockCount = await getWarehouseStockCount({
+    productId: row.productId!,
+    warehouseId: row.warehouseId!,
+  });
+  row.stockCount = stockCount || 0;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpPurchaseInApi.PurchaseInItem) {
+  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;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.warehouseId) {
+        throw new Error(`第 ${i + 1} 行：仓库不能为空`);
+      }
+      if (!item.count || item.count <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #warehouseId="{ row }">
+      <ElSelect
+        v-model="row.warehouseId"
+        :disabled="disabled"
+        placeholder="请选择仓库"
+        filterable
+        class="w-full"
+        @change="handleWarehouseChange(row)"
+      >
+        <el-option
+          v-for="item in warehouseOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </ElSelect>
+    </template>
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        disabled
+        placeholder="请选择产品"
+        filterable
+        class="w-full"
+      >
+        <el-option
+          v-for="item in productOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </ElSelect>
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #taxPercent="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalProductPrice) }}
+            </span>
+            <span>税额：{{ erpPriceInputFormatter(summaries.taxPrice) }}</span>
+            <span>
+              税额合计：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/in/modules/purchase-order-select.vue b/apps/web-ele/src/views/erp/purchase/in/modules/purchase-order-select.vue
new file mode 100644
index 000000000..0f1815fe5
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/in/modules/purchase-order-select.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElDialog, ElInput, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPurchaseOrderPage } from '#/api/erp/purchase/order';
+
+import { useOrderGridColumns, useOrderGridFormSchema } from '../data';
+
+defineProps({
+  orderNo: {
+    type: String,
+    default: () => undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  'update:order': [order: ErpPurchaseOrderApi.PurchaseOrder];
+}>();
+
+const order = ref<ErpPurchaseOrderApi.PurchaseOrder>(); // 选择的采购订单
+const open = ref<boolean>(false); // 选择采购订单弹窗是否打开
+
+/** 表格配置 */
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useOrderGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useOrderGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPurchaseOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            inEnable: true,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    radioConfig: {
+      trigger: 'row',
+      highlight: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
+  gridEvents: {
+    radioChange: ({ row }: { row: ErpPurchaseOrderApi.PurchaseOrder }) => {
+      handleSelectOrder(row);
+    },
+  },
+});
+
+/** 选择采购订单 */
+function handleSelectOrder(selectOrder: ErpPurchaseOrderApi.PurchaseOrder) {
+  order.value = selectOrder;
+}
+
+/** 确认选择采购订单 */
+function handleOk() {
+  if (!order.value) {
+    ElMessage.warning('请选择一个采购订单');
+    return;
+  }
+  emit('update:order', order.value);
+  open.value = false;
+}
+</script>
+
+<template>
+  <div>
+    <ElInput
+      readonly
+      :model-value="orderNo"
+      :disabled="disabled"
+      @click="() => !disabled && (open = true)"
+    >
+      <template #append>
+        <div>
+          <IconifyIcon
+            class="h-full w-6 cursor-pointer"
+            icon="ant-design:setting-outlined"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="() => !disabled && (open = true)"
+          />
+        </div>
+      </template>
+    </ElInput>
+    <ElDialog
+      v-model="open"
+      title="选择关联订单"
+      width="50%"
+      @close="open = false"
+      :append-to-body="true"
+    >
+      <Grid class="max-h-[600px]" table-title="采购订单列表(仅展示可退货)" />
+      <template #footer>
+        <ElButton @click="open = false">取消</ElButton>
+        <ElButton type="primary" @click="handleOk">确定</ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/order/data.ts b/apps/web-ele/src/views/erp/purchase/order/data.ts
new file mode 100644
index 000000000..489af22cc
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/order/data.ts
@@ -0,0 +1,454 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+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 { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择订单时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      label: '供应商',
+      fieldName: 'supplierId',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '采购产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+    {
+      fieldName: 'discountPrice',
+      label: '付款优惠',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '付款优惠',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '优惠后金额',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '结算账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入支付订金',
+        precision: 2,
+        min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      fieldName: 'depositPrice',
+      label: '支付订金',
+      rules: z.number().min(0).optional(),
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  disabled: boolean,
+): 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: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 105,
+      fixed: 'right',
+      slots: { default: 'taxPercent' },
+    },
+    {
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      title: '税额合计',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'inStatus',
+      label: '入库状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未入库', value: 0 },
+          { label: '部分入库', value: 1 },
+          { label: '全部入库', value: 2 },
+        ],
+        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: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'inCount',
+      title: '入库数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'returnCount',
+      title: '退货数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'depositPrice',
+      title: '支付订金',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/purchase/order/index.vue b/apps/web-ele/src/views/erp/purchase/order/index.vue
new file mode 100644
index 000000000..024e3c2a5
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/order/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePurchaseOrder,
+  exportPurchaseOrder,
+  getPurchaseOrderPage,
+  updatePurchaseOrderStatus,
+} from '#/api/erp/purchase/order';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 采购订单列表 */
+defineOptions({ name: 'ErpPurchaseOrder' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportPurchaseOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '采购订单.xls', source: data });
+}
+
+/** 新增采购订单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑采购订单 */
+function handleEdit(row: ErpPurchaseOrderApi.PurchaseOrder) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除采购订单 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deletePurchaseOrder(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpPurchaseOrderApi.PurchaseOrder,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+  });
+  try {
+    await updatePurchaseOrderStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+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();
+}
+
+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 auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【采购】采购订单、入库、退货"
+        url="https://doc.iocoder.cn/erp/purchase/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <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: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-order:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:purchase-order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:purchase-order:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              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: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/order/modules/form.vue b/apps/web-ele/src/views/erp/purchase/order/modules/form.vue
new file mode 100644
index 000000000..03e9129c3
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/order/modules/form.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import {
+  createPurchaseOrder,
+  getPurchaseOrder,
+  updatePurchaseOrder,
+} from '#/api/erp/purchase/order';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import PurchaseOrderItemForm from './item-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpPurchaseOrderApi.PurchaseOrder>();
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof PurchaseOrderItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['采购订单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['采购订单']);
+  } else {
+    return '采购订单详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    // 目的：同步到 item-form 组件，触发整体的价格计算
+    if (formData.value && changedFields.includes('discountPercent')) {
+      formData.value.discountPercent = values.discountPercent;
+    }
+  },
+});
+
+/** 更新采购订单项 */
+function handleUpdateItems(items: ErpPurchaseOrderApi.PurchaseOrderItem[]) {
+  formData.value = modalApi.getData<ErpPurchaseOrderApi.PurchaseOrder>();
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 更新优惠金额 */
+function handleUpdateDiscountPrice(discountPrice: number) {
+  formApi.setValues({
+    discountPrice,
+  });
+}
+
+/** 更新总金额 */
+function handleUpdateTotalPrice(totalPrice: number) {
+  formApi.setValues({
+    totalPrice,
+  });
+}
+
+/** 创建或更新采购订单 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as ErpPurchaseOrderApi.PurchaseOrder;
+    data.items = formData.value?.items?.map((item) => ({
+      ...item,
+      // 解决新增采购订单报错
+      id: undefined,
+    }));
+    // 将文件数组转换为字符串
+    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');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPurchaseOrder(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <PurchaseOrderItemForm
+          ref="itemFormRef"
+          :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-ele/src/views/erp/purchase/order/modules/item-form.vue b/apps/web-ele/src/views/erp/purchase/order/modules/item-form.vue
new file mode 100644
index 000000000..d32daafae
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/order/modules/item-form.vue
@@ -0,0 +1,327 @@
+<script lang="ts" setup>
+import type { ErpProductApi } from '#/api/erp/product/product';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getStockCount } from '#/api/erp/stock/stock';
+
+import { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpPurchaseOrderApi.PurchaseOrderItem[];
+  disabled?: boolean;
+  discountPercent?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+  discountPercent: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:total-price',
+]);
+
+const tableData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]); // 表格数据
+const productOptions = ref<ErpProductApi.Product[]>([]); // 产品下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    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 [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    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);
+    const finalTotalPrice = totalPrice - discountPrice!;
+    // 通知父组件更新
+    emit('update:discount-price', discountPrice);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
+/** 处理新增 */
+function handleAdd() {
+  const newRow = {
+    id: undefined,
+    productId: undefined,
+    productUnitName: undefined, // 产品单位
+    productBarCode: undefined, // 产品条码
+    productPrice: undefined,
+    stockCount: undefined,
+    count: 1,
+    totalProductPrice: undefined,
+    taxPercent: 0,
+    taxPrice: undefined,
+    totalPrice: undefined,
+    remark: undefined,
+  };
+  tableData.value.push(newRow);
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理删除 */
+function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  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;
+  }
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = (await getStockCount(productId)) || 0;
+  row.productPrice = product.purchasePrice || 0;
+  row.count = row.count || 1;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
+  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;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  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} 行：产品单价不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  // 目的：新增时，默认添加一行
+  if (tableData.value.length === 0) {
+    handleAdd();
+  }
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        placeholder="请选择产品"
+        filterable
+        class="w-full"
+        @change="handleProductChange($event, row)"
+      >
+        <el-option
+          v-for="item in productOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </ElSelect>
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="3"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #taxPercent="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalProductPrice) }}
+            </span>
+            <span>税额：{{ erpPriceInputFormatter(summaries.taxPrice) }}</span>
+            <span>
+              税额合计：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <TableAction
+        v-if="!disabled"
+        class="mt-2 flex justify-center"
+        :actions="[
+          {
+            label: '添加采购产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/return/data.ts b/apps/web-ele/src/views/erp/purchase/return/data.ts
new file mode 100644
index 000000000..6a2686946
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/return/data.ts
@@ -0,0 +1,617 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpNumberFormatter, 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 { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '退货单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'returnTime',
+      label: '退货时间',
+      component: 'DatePicker',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '选择退货时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'orderNo',
+      label: '关联订单',
+      component: 'Input',
+      formItemClass: 'col-span-1',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择关联订单',
+        disabled: formType === 'detail',
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        disabled: true,
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '退货产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+    {
+      fieldName: 'discountPrice',
+      label: '退款优惠',
+      component: 'InputNumber',
+      componentProps: {
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'discountedPrice',
+      label: '优惠后金额',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['totalPrice', 'otherPrice'],
+        componentProps: (values) => {
+          const totalPrice = values.totalPrice || 0;
+          const otherPrice = values.otherPrice || 0;
+          values.discountedPrice = totalPrice - otherPrice;
+          return {};
+        },
+      },
+    },
+    {
+      fieldName: 'otherPrice',
+      label: '其他费用',
+      component: 'InputNumber',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '请输入其他费用',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '结算账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '应退金额',
+      component: 'InputNumber',
+      componentProps: {
+        precision: 2,
+        min: 0,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  formData?: any[],
+  disabled?: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 200,
+      slots: { default: 'warehouseId' },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'inCount',
+      title: '已入库',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+      fixed: 'right',
+      visible: formData && formData[0]?.inCount !== undefined,
+    },
+    {
+      field: 'returnCount',
+      title: '已退货',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+      fixed: 'right',
+      visible: formData && formData[0]?.returnCount !== undefined,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      fixed: 'right',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      fixed: 'right',
+      title: '产品金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      fixed: 'right',
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 105,
+      slots: { default: 'taxPercent' },
+    },
+    {
+      fixed: 'right',
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      fixed: 'right',
+      title: '合计金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '退货单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入退货单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'returnTime',
+      label: '退货时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderNo',
+      label: '关联订单',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入关联订单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'refundStatus',
+      label: '退款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未退款', value: 0 },
+          { label: '部分退款', value: 1 },
+          { label: '全部退款', value: 2 },
+        ],
+        placeholder: '请选择退款状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '审批状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择审批状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        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: 'returnTime',
+      title: '退货时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '应退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'refundPrice',
+      title: '已退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unRefundPrice',
+      title: '未退金额',
+      formatter: ({ row }) => {
+        return `${erpNumberFormatter(row.totalPrice - row.refundPrice, 2)}元`;
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useOrderGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useOrderGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'radio',
+      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: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'inCount',
+      title: '已入库数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'returnCount',
+      title: '已退货数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/purchase/return/index.vue b/apps/web-ele/src/views/erp/purchase/return/index.vue
new file mode 100644
index 000000000..91c9cfbfc
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/return/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseReturnApi } from '#/api/erp/purchase/return';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePurchaseReturn,
+  exportPurchaseReturn,
+  getPurchaseReturnPage,
+  updatePurchaseReturnStatus,
+} from '#/api/erp/purchase/return';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 采购退货列表 */
+defineOptions({ name: 'ErpPurchaseReturn' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpPurchaseReturnApi.PurchaseReturn[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 新增采购退货 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑采购退货 */
+function handleEdit(row: ErpPurchaseReturnApi.PurchaseReturn) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpPurchaseReturnApi.PurchaseReturn) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+/** 删除采购退货 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deletePurchaseReturn(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpPurchaseReturnApi.PurchaseReturn,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+  });
+  try {
+    await updatePurchaseReturnStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportPurchaseReturn(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 getPurchaseReturnPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseReturnApi.PurchaseReturn>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【采购】采购订单、入库、退货"
+        url="https://doc.iocoder.cn/erp/purchase/"
+      />
+    </template>
+    <FormModal @success="handleRefresh" />
+
+    <Grid table-title="采购退货列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['采购退货']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:purchase-return:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:purchase-return:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-return:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:purchase-return:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:purchase-return:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:purchase-return:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-return:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: () => handleDelete([row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/return/modules/form.vue b/apps/web-ele/src/views/erp/purchase/return/modules/form.vue
new file mode 100644
index 000000000..f496ae03e
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/return/modules/form.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+import type { ErpPurchaseReturnApi } from '#/api/erp/purchase/return';
+
+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 { getAccountSimpleList } from '#/api/erp/finance/account';
+import {
+  createPurchaseReturn,
+  getPurchaseReturn,
+  updatePurchaseReturn,
+} from '#/api/erp/purchase/return';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+import PurchaseOrderSelect from './purchase-order-select.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<
+  ErpPurchaseReturnApi.PurchaseReturn & {
+    accountId?: number;
+    discountPercent?: number;
+    fileUrl?: string;
+    order?: ErpPurchaseOrderApi.PurchaseOrder;
+    orderId?: number;
+    orderNo?: string;
+    supplierId?: number;
+  }
+>({
+  id: undefined,
+  no: undefined,
+  accountId: undefined,
+  returnTime: undefined,
+  remark: undefined,
+  fileUrl: undefined,
+  discountPercent: 0,
+  supplierId: undefined,
+  discountPrice: 0,
+  totalPrice: 0,
+  otherPrice: 0,
+  items: [],
+});
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+/* eslint-disable unicorn/no-nested-ternary */
+const getTitle = computed(() =>
+  formType.value === 'create'
+    ? $t('ui.actionTitle.create', ['采购退货'])
+    : formType.value === 'edit'
+      ? $t('ui.actionTitle.edit', ['采购退货'])
+      : '采购退货详情',
+);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    // 目的：同步到 item-form 组件，触发整体的价格计算
+    if (formData.value) {
+      if (changedFields.includes('otherPrice')) {
+        formData.value.otherPrice = values.otherPrice;
+      }
+      if (changedFields.includes('discountPercent')) {
+        formData.value.discountPercent = values.discountPercent;
+      }
+    }
+  },
+});
+
+/** 更新采购退货项 */
+function handleUpdateItems(items: ErpPurchaseReturnApi.PurchaseReturnItem[]) {
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 更新其他费用 */
+function handleUpdateOtherPrice(otherPrice: number) {
+  formApi.setValues({
+    otherPrice,
+  });
+}
+
+/** 更新优惠金额 */
+function handleUpdateDiscountPrice(discountPrice: number) {
+  formApi.setValues({
+    discountPrice,
+  });
+}
+
+/** 更新总金额 */
+function handleUpdateTotalPrice(totalPrice: number) {
+  formApi.setValues({
+    totalPrice,
+  });
+}
+
+/** 选择采购订单 */
+function handleUpdateOrder(order: ErpPurchaseOrderApi.PurchaseOrder) {
+  formData.value = {
+    ...formData.value,
+    orderId: order.id,
+    orderNo: order.no!,
+    supplierId: order.supplierId!,
+    accountId: order.accountId!,
+    remark: order.remark!,
+    discountPercent: order.discountPercent!,
+    fileUrl: order.fileUrl!,
+  };
+  // 将订单项设置到退货单项
+  order.items!.forEach((item: any) => {
+    item.totalCount = item.count;
+    item.count = item.inCount - item.returnCount;
+    item.orderItemId = item.id;
+    item.id = undefined;
+  });
+  formData.value.items = order.items!.filter(
+    (item) => item.count && item.count > 0,
+  ) as ErpPurchaseReturnApi.PurchaseReturnItem[];
+  formApi.setValues(formData.value, false);
+}
+
+/** 创建或更新采购退货 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as ErpPurchaseReturnApi.PurchaseReturn;
+    try {
+      await (formType.value === 'create'
+        ? createPurchaseReturn(data)
+        : updatePurchaseReturn(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {} as ErpPurchaseReturnApi.PurchaseReturn;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPurchaseReturn(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value, false);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          :discount-percent="formData?.discountPercent ?? 0"
+          :other-price="formData?.otherPrice ?? 0"
+          @update:items="handleUpdateItems"
+          @update:discount-price="handleUpdateDiscountPrice"
+          @update:other-price="handleUpdateOtherPrice"
+          @update:total-price="handleUpdateTotalPrice"
+        />
+      </template>
+      <template #orderNo>
+        <PurchaseOrderSelect
+          :order-no="formData?.orderNo"
+          @update:order="handleUpdateOrder"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/return/modules/item-form.vue b/apps/web-ele/src/views/erp/purchase/return/modules/item-form.vue
new file mode 100644
index 000000000..2010c5cb0
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/return/modules/item-form.vue
@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import type { ErpPurchaseReturnApi } from '#/api/erp/purchase/return';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseStockCount } from '#/api/erp/stock/stock';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+import { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpPurchaseReturnApi.PurchaseReturnItem[];
+  disabled?: boolean;
+  discountPercent?: number;
+  otherPrice?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+  discountPercent: 0,
+  otherPrice: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:other-price',
+  'update:total-price',
+]);
+
+const tableData = ref<ErpPurchaseReturnApi.PurchaseReturnItem[]>([]); // 表格数据
+const productOptions = ref<any[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    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 [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(tableData.value, props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+    // 更新表格列配置（目的：已入库、已退货动态列）
+    const columns = useFormItemColumns(tableData.value, props.disabled);
+    await gridApi.grid.reloadColumn(columns || []);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 计算 discountPrice、otherPrice、totalPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPercent, props.otherPrice],
+  () => {
+    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);
+    const discountedPrice = totalPrice - discountPrice!;
+    const finalTotalPrice = discountedPrice + (props.otherPrice || 0);
+
+    // 通知父组件更新
+    emit('update:discount-price', discountPrice);
+    emit('update:other-price', props.otherPrice || 0);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
+/** 处理删除 */
+function handleDelete(row: ErpPurchaseReturnApi.PurchaseReturnItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理仓库变更 */
+async function handleWarehouseChange(
+  row: ErpPurchaseReturnApi.PurchaseReturnItem,
+) {
+  const stockCount = await getWarehouseStockCount({
+    productId: row.productId!,
+    warehouseId: row.warehouseId!,
+  });
+  row.stockCount = stockCount || 0;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpPurchaseReturnApi.PurchaseReturnItem) {
+  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;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.warehouseId) {
+        throw new Error(`第 ${i + 1} 行：仓库不能为空`);
+      }
+      if (!item.count || item.count <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #warehouseId="{ row }">
+      <ElSelect
+        v-model="row.warehouseId"
+        :disabled="disabled"
+        placeholder="请选择仓库"
+        filterable
+        class="w-full"
+        @change="handleWarehouseChange(row)"
+      >
+        <el-option
+          v-for="item in warehouseOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </ElSelect>
+    </template>
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        disabled
+        placeholder="请选择产品"
+        filterable
+        class="w-full"
+      >
+        <el-option
+          v-for="item in productOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </ElSelect>
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #taxPercent="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalProductPrice) }}
+            </span>
+            <span>税额：{{ erpPriceInputFormatter(summaries.taxPrice) }}</span>
+            <span>
+              税额合计：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/return/modules/purchase-order-select.vue b/apps/web-ele/src/views/erp/purchase/return/modules/purchase-order-select.vue
new file mode 100644
index 000000000..8b6ae1072
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/return/modules/purchase-order-select.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElDialog, ElInput, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPurchaseOrderPage } from '#/api/erp/purchase/order';
+
+import { useOrderGridColumns, useOrderGridFormSchema } from '../data';
+
+defineProps({
+  orderNo: {
+    type: String,
+    default: () => undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  'update:order': [order: ErpPurchaseOrderApi.PurchaseOrder];
+}>();
+
+const order = ref<ErpPurchaseOrderApi.PurchaseOrder>(); // 选择的采购订单
+const open = ref<boolean>(false); // 选择采购订单弹窗是否打开
+
+/** 表格配置 */
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useOrderGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useOrderGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPurchaseOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            returnEnable: true,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    radioConfig: {
+      trigger: 'row',
+      highlight: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
+  gridEvents: {
+    radioChange: ({ row }: { row: ErpPurchaseOrderApi.PurchaseOrder }) => {
+      handleSelectOrder(row);
+    },
+  },
+});
+
+/** 选择采购订单 */
+function handleSelectOrder(selectOrder: ErpPurchaseOrderApi.PurchaseOrder) {
+  order.value = selectOrder;
+}
+
+/** 确认选择采购订单 */
+function handleOk() {
+  if (!order.value) {
+    ElMessage.warning('请选择一个采购订单');
+    return;
+  }
+  emit('update:order', order.value);
+  open.value = false;
+}
+</script>
+
+<template>
+  <div>
+    <ElInput
+      readonly
+      :model-value="orderNo"
+      :disabled="disabled"
+      @click="() => !disabled && (open = true)"
+    >
+      <template #append>
+        <div>
+          <IconifyIcon
+            class="h-full w-6 cursor-pointer"
+            icon="ant-design:setting-outlined"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="() => !disabled && (open = true)"
+          />
+        </div>
+      </template>
+    </ElInput>
+    <ElDialog
+      v-model="open"
+      title="选择关联订单"
+      width="50%"
+      @close="open = false"
+      :append-to-body="true"
+    >
+      <Grid class="max-h-[600px]" table-title="采购订单列表(仅展示可退货)" />
+      <template #footer>
+        <ElButton @click="open = false">取消</ElButton>
+        <ElButton type="primary" @click="handleOk">确定</ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/erp/purchase/supplier/data.ts b/apps/web-ele/src/views/erp/purchase/supplier/data.ts
new file mode 100644
index 000000000..d433c09d5
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/supplier/data.ts
@@ -0,0 +1,234 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入供应商名称',
+      },
+    },
+    {
+      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: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'taxNo',
+      label: '纳税人识别号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入纳税人识别号',
+      },
+    },
+    {
+      fieldName: 'taxPercent',
+      label: '税率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入税率',
+        min: 0,
+        precision: 2,
+        controlsPosition: 'right',
+        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: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      showOverflow: 'tooltip',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/purchase/supplier/index.vue b/apps/web-ele/src/views/erp/purchase/supplier/index.vue
new file mode 100644
index 000000000..915adb7bb
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/supplier/index.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
+
+import { DocAlert, 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 {
+  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 handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建供应商 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑供应商 */
+function handleEdit(row: ErpSupplierApi.Supplier) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除供应商 */
+async function handleDelete(row: ErpSupplierApi.Supplier) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteSupplier(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出供应商 */
+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',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSupplierApi.Supplier>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【采购】采购订单、入库、退货"
+        url="https://doc.iocoder.cn/erp/purchase/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <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: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:supplier:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: 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-ele/src/views/erp/purchase/supplier/modules/form.vue b/apps/web-ele/src/views/erp/purchase/supplier/modules/form.vue
new file mode 100644
index 000000000..653dd5cb9
--- /dev/null
+++ b/apps/web-ele/src/views/erp/purchase/supplier/modules/form.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+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 formData = ref<ErpSupplierApi.Supplier>();
+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 ErpSupplierApi.Supplier;
+    try {
+      await (formData.value?.id ? updateSupplier(data) : createSupplier(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<ErpSupplierApi.Supplier>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSupplier(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+defineExpose({
+  modalApi,
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/customer/data.ts b/apps/web-ele/src/views/erp/sale/customer/data.ts
new file mode 100644
index 000000000..adfdd5675
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/customer/data.ts
@@ -0,0 +1,241 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '客户名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入客户名称',
+      },
+    },
+    {
+      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: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        precision: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'taxNo',
+      label: '纳税人识别号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入纳税人识别号',
+      },
+    },
+    {
+      fieldName: 'taxPercent',
+      label: '税率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入税率',
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).max(100).optional(),
+    },
+    {
+      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: 'email',
+      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: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/sale/customer/index.vue b/apps/web-ele/src/views/erp/sale/customer/index.vue
new file mode 100644
index 000000000..c2e3bc90a
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/customer/index.vue
@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpCustomerApi } from '#/api/erp/sale/customer';
+
+import { DocAlert, 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 {
+  deleteCustomer,
+  exportCustomer,
+  getCustomerPage,
+} from '#/api/erp/sale/customer';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportCustomer(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '客户信息.xls', source: data });
+}
+
+/** 创建客户 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑客户 */
+function handleEdit(row: ErpCustomerApi.Customer) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除客户 */
+async function handleDelete(row: ErpCustomerApi.Customer) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteCustomer(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } 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 getCustomerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpCustomerApi.Customer>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【销售】销售订单、出库、退货"
+        url="https://doc.iocoder.cn/erp/sale/"
+      />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="客户列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['客户']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:customer:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:customer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:customer:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:customer: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/erp/sale/customer/modules/form.vue b/apps/web-ele/src/views/erp/sale/customer/modules/form.vue
new file mode 100644
index 000000000..d7445569d
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/customer/modules/form.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { ErpCustomerApi } from '#/api/erp/sale/customer';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCustomer,
+  getCustomer,
+  updateCustomer,
+} from '#/api/erp/sale/customer';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpCustomerApi.Customer>();
+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: 90,
+  },
+  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 ErpCustomerApi.Customer;
+    try {
+      await (formData.value?.id ? updateCustomer(data) : createCustomer(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<ErpCustomerApi.Customer>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getCustomer(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/2" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/order/data.ts b/apps/web-ele/src/views/erp/sale/order/data.ts
new file mode 100644
index 000000000..b1537508c
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/order/data.ts
@@ -0,0 +1,467 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+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 { getCustomerSimpleList } from '#/api/erp/sale/customer';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择订单时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      label: '客户',
+      fieldName: 'customerId',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'saleUserId',
+      label: '销售人员',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择销售人员',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '销售产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+    {
+      fieldName: 'discountPrice',
+      label: '付款优惠',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '收款优惠',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '优惠后金额',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '结算账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入收取订金',
+        precision: 2,
+        min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      fieldName: 'depositPrice',
+      label: '收取订金',
+      rules: z.number().min(0).optional(),
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 105,
+      fixed: 'right',
+      slots: { default: 'taxPercent' },
+    },
+    {
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      title: '税额合计',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'outStatus',
+      label: '出库状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未出库', value: 0 },
+          { label: '部分出库', value: 1 },
+          { label: '全部出库', value: 2 },
+        ],
+        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: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'orderTime',
+      title: '订单时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'outCount',
+      title: '出库数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'returnCount',
+      title: '退货数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'depositPrice',
+      title: '收取订金',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/sale/order/index.vue b/apps/web-ele/src/views/erp/sale/order/index.vue
new file mode 100644
index 000000000..e681b8696
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/order/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSaleOrder,
+  exportSaleOrder,
+  getSaleOrderPage,
+  updateSaleOrderStatus,
+} from '#/api/erp/sale/order';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 销售订单列表 */
+defineOptions({ name: 'ErpSaleOrder' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSaleOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '销售订单.xls', source: data });
+}
+
+/** 新增销售订单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑销售订单 */
+function handleEdit(row: ErpSaleOrderApi.SaleOrder) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除销售订单 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteSaleOrder(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpSaleOrderApi.SaleOrder,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+  });
+  try {
+    await updateSaleOrderStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpSaleOrderApi.SaleOrder[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpSaleOrderApi.SaleOrder) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSaleOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSaleOrderApi.SaleOrder>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【销售】销售订单、出库、退货"
+        url="https://doc.iocoder.cn/erp/sale/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="销售订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['销售订单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:sale-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:sale-order:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:sale-order:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:sale-order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:sale-order:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:sale-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: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:sale-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/order/modules/form.vue b/apps/web-ele/src/views/erp/sale/order/modules/form.vue
new file mode 100644
index 000000000..53dd591fe
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/order/modules/form.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import {
+  createSaleOrder,
+  getSaleOrder,
+  updateSaleOrder,
+} from '#/api/erp/sale/order';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpSaleOrderApi.SaleOrder>();
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['销售订单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['销售订单']);
+  } else {
+    return '销售订单详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    // 目的：同步到 item-form 组件，触发整体的价格计算
+    if (formData.value && changedFields.includes('discountPercent')) {
+      formData.value.discountPercent = values.discountPercent;
+    }
+  },
+});
+
+/** 更新销售订单项 */
+function handleUpdateItems(items: ErpSaleOrderApi.SaleOrderItem[]) {
+  formData.value = modalApi.getData<ErpSaleOrderApi.SaleOrder>();
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 更新优惠金额 */
+function handleUpdateDiscountPrice(discountPrice: number) {
+  formApi.setValues({
+    discountPrice,
+  });
+}
+
+/** 更新总金额 */
+function handleUpdateTotalPrice(totalPrice: number) {
+  formApi.setValues({
+    totalPrice,
+  });
+}
+
+/** 创建或更新销售订单 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpSaleOrderApi.SaleOrder;
+    try {
+      await (formType.value === 'create'
+        ? createSaleOrder(data)
+        : updateSaleOrder(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<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSaleOrder(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :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-ele/src/views/erp/sale/order/modules/item-form.vue b/apps/web-ele/src/views/erp/sale/order/modules/item-form.vue
new file mode 100644
index 000000000..84a698cf9
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/order/modules/item-form.vue
@@ -0,0 +1,327 @@
+<script lang="ts" setup>
+import type { ErpProductApi } from '#/api/erp/product/product';
+import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getStockCount } from '#/api/erp/stock/stock';
+
+import { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpSaleOrderApi.SaleOrderItem[];
+  disabled?: boolean;
+  discountPercent?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+  discountPercent: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:total-price',
+]);
+
+const tableData = ref<ErpSaleOrderApi.SaleOrderItem[]>([]); // 表格数据
+const productOptions = ref<ErpProductApi.Product[]>([]); // 产品下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    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 [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    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);
+    const finalTotalPrice = totalPrice - discountPrice!;
+    // 通知父组件更新
+    emit('update:discount-price', discountPrice);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
+/** 处理新增 */
+function handleAdd() {
+  const newRow = {
+    id: undefined,
+    productId: undefined,
+    productUnitName: undefined, // 产品单位
+    productBarCode: undefined, // 产品条码
+    productPrice: undefined,
+    stockCount: undefined,
+    count: 1,
+    totalProductPrice: undefined,
+    taxPercent: 0,
+    taxPrice: undefined,
+    totalPrice: undefined,
+    remark: undefined,
+  };
+  tableData.value.push(newRow);
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理删除 */
+function handleDelete(row: ErpSaleOrderApi.SaleOrderItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  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;
+  }
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = (await getStockCount(productId)) || 0;
+  row.productPrice = product.salePrice || 0;
+  row.count = row.count || 1;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpSaleOrderApi.SaleOrderItem) {
+  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;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  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} 行：产品单价不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  // 目的：新增时，默认添加一行
+  if (tableData.value.length === 0) {
+    handleAdd();
+  }
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        placeholder="请选择产品"
+        filterable
+        class="w-full"
+        @change="handleProductChange($event, row)"
+      >
+        <el-option
+          v-for="product in productOptions"
+          :key="product.id"
+          :label="product.name"
+          :value="product.id"
+        />
+      </ElSelect>
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="3"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #taxPercent="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalProductPrice) }}
+            </span>
+            <span>税额：{{ erpPriceInputFormatter(summaries.taxPrice) }}</span>
+            <span>
+              税额合计：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <TableAction
+        v-if="!disabled"
+        class="mt-2 flex justify-center"
+        :actions="[
+          {
+            label: '添加销售产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/out/data.ts b/apps/web-ele/src/views/erp/sale/out/data.ts
new file mode 100644
index 000000000..76f8e2288
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/out/data.ts
@@ -0,0 +1,637 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpNumberFormatter, erpPriceInputFormatter } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getCustomerSimpleList } from '#/api/erp/sale/customer';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '出库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'outTime',
+      label: '出库时间',
+      component: 'DatePicker',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '选择出库时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'orderNo',
+      label: '关联订单',
+      component: 'Input',
+      formItemClass: 'col-span-1',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择关联订单',
+        disabled: formType === 'detail',
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        disabled: true,
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'saleUserId',
+      label: '销售人员',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择销售人员',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '出库产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+    {
+      fieldName: 'discountPrice',
+      label: '收款优惠',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '付款优惠',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'discountedPrice',
+      label: '优惠后金额',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['totalPrice', 'otherPrice'],
+        componentProps: (values) => {
+          const totalPrice = values.totalPrice || 0;
+          const otherPrice = values.otherPrice || 0;
+          values.discountedPrice = totalPrice - otherPrice;
+          return {};
+        },
+      },
+    },
+    {
+      fieldName: 'otherPrice',
+      label: '其他费用',
+      component: 'InputNumber',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '请输入其他费用',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '结算账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        disabled: true,
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '应收金额',
+      component: 'InputNumber',
+      componentProps: {
+        precision: 2,
+        min: 0,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  formData?: any[],
+  disabled?: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 200,
+      slots: { default: 'warehouseId' },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'totalCount',
+      title: '原数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+      fixed: 'right',
+      visible: formData && formData[0]?.outCount !== undefined,
+    },
+    {
+      field: 'outCount',
+      title: '已出库',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+      fixed: 'right',
+      visible: formData && formData[0]?.returnCount !== undefined,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      fixed: 'right',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      fixed: 'right',
+      title: '产品金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      fixed: 'right',
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 105,
+      slots: { default: 'taxPercent' },
+    },
+    {
+      fixed: 'right',
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      fixed: 'right',
+      title: '合计金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '出库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入出库单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'outTime',
+      label: '出库时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'orderNo',
+      label: '关联订单',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入关联订单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'receiptStatus',
+      label: '收款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未收款', value: 0 },
+          { label: '部分收款', value: 1 },
+          { label: '全部收款', value: 2 },
+        ],
+        placeholder: '请选择收款状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '审批状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择审批状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        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: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'outTime',
+      title: '出库时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '应收金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'receiptPrice',
+      title: '已收金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unReceiptPrice',
+      title: '未收金额',
+      formatter: ({ row }) => {
+        return `${erpNumberFormatter(row.totalPrice - row.receiptPrice, 2)}元`;
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useOrderGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useOrderGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'radio',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '订单单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'productNames',
+      title: '产品信息',
+      showOverflow: 'tooltip',
+      minWidth: 120,
+    },
+    {
+      field: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'orderTime',
+      title: '订单时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'outCount',
+      title: '出库数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/sale/out/index.vue b/apps/web-ele/src/views/erp/sale/out/index.vue
new file mode 100644
index 000000000..528e7f5b3
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/out/index.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSaleOutApi } from '#/api/erp/sale/out';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSaleOut,
+  exportSaleOut,
+  getSaleOutPage,
+  updateSaleOutStatus,
+} from '#/api/erp/sale/out';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 销售出库列表 */
+defineOptions({ name: 'ErpSaleOut' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSaleOut(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '销售出库.xls', source: data });
+}
+
+/** 新增销售出库 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑销售出库 */
+function handleEdit(row: ErpSaleOutApi.SaleOut) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除销售出库 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteSaleOut(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(row: ErpSaleOutApi.SaleOut, status: number) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+  });
+  try {
+    await updateSaleOutStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpSaleOutApi.SaleOut[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpSaleOutApi.SaleOut) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSaleOutPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSaleOutApi.SaleOut>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【销售】销售订单、出库、退货"
+        url="https://doc.iocoder.cn/erp/sale/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="销售出库列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['销售出库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:sale-out:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:sale-out:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:sale-out:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:sale-out:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:sale-out:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:sale-out:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:sale-out:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/out/modules/form.vue b/apps/web-ele/src/views/erp/sale/out/modules/form.vue
new file mode 100644
index 000000000..123f2f38b
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/out/modules/form.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
+import type { ErpSaleOutApi } from '#/api/erp/sale/out';
+
+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 { getAccountSimpleList } from '#/api/erp/finance/account';
+import { createSaleOut, getSaleOut, updateSaleOut } from '#/api/erp/sale/out';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+import SaleOrderSelect from './sale-order-select.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<
+  ErpSaleOutApi.SaleOut & {
+    accountId?: number;
+    customerId?: number;
+    discountPercent?: number;
+    fileUrl?: string;
+    order?: ErpSaleOrderApi.SaleOrder;
+    orderId?: number;
+    orderNo?: string;
+  }
+>({
+  id: undefined,
+  no: undefined,
+  accountId: undefined,
+  outTime: undefined,
+  remark: undefined,
+  fileUrl: undefined,
+  discountPercent: 0,
+  customerId: undefined,
+  discountPrice: 0,
+  totalPrice: 0,
+  otherPrice: 0,
+  items: [],
+});
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+/* eslint-disable unicorn/no-nested-ternary */
+const getTitle = computed(() =>
+  formType.value === 'create'
+    ? $t('ui.actionTitle.create', ['销售出库'])
+    : formType.value === 'edit'
+      ? $t('ui.actionTitle.edit', ['销售出库'])
+      : '销售出库详情',
+);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    // 目的：同步到 item-form 组件，触发整体的价格计算
+    if (formData.value) {
+      if (changedFields.includes('otherPrice')) {
+        formData.value.otherPrice = values.otherPrice;
+      }
+      if (changedFields.includes('discountPercent')) {
+        formData.value.discountPercent = values.discountPercent;
+      }
+    }
+  },
+});
+
+/** 更新销售出库项 */
+function handleUpdateItems(items: ErpSaleOutApi.SaleOutItem[]) {
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 更新其他费用 */
+function handleUpdateOtherPrice(otherPrice: number) {
+  formApi.setValues({
+    otherPrice,
+  });
+}
+
+/** 更新优惠金额 */
+function handleUpdateDiscountPrice(discountPrice: number) {
+  formApi.setValues({
+    discountPrice,
+  });
+}
+
+/** 更新总金额 */
+function handleUpdateTotalPrice(totalPrice: number) {
+  formApi.setValues({
+    totalPrice,
+  });
+}
+
+/** 选择销售订单 */
+function handleUpdateOrder(order: ErpSaleOrderApi.SaleOrder) {
+  formData.value = {
+    ...formData.value,
+    orderId: order.id,
+    orderNo: order.no!,
+    customerId: order.customerId!,
+    accountId: order.accountId!,
+    remark: order.remark!,
+    discountPercent: order.discountPercent!,
+    fileUrl: order.fileUrl!,
+  };
+  // 将订单项设置到出库单项
+  order.items!.forEach((item: any) => {
+    item.totalCount = item.count;
+    item.count = item.totalCount - item.outCount;
+    item.orderItemId = item.id;
+    item.id = undefined;
+  });
+  formData.value.items = order.items!.filter(
+    (item) => item.count && item.count > 0,
+  ) as ErpSaleOutApi.SaleOutItem[];
+  formApi.setValues(formData.value, false);
+}
+
+/** 创建或更新销售出库 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpSaleOutApi.SaleOut;
+    try {
+      await (formType.value === 'create'
+        ? createSaleOut(data)
+        : updateSaleOut(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {} as ErpSaleOutApi.SaleOut;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSaleOut(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value, false);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          :discount-percent="formData?.discountPercent ?? 0"
+          :other-price="formData?.otherPrice ?? 0"
+          @update:items="handleUpdateItems"
+          @update:discount-price="handleUpdateDiscountPrice"
+          @update:other-price="handleUpdateOtherPrice"
+          @update:total-price="handleUpdateTotalPrice"
+        />
+      </template>
+      <template #orderNo>
+        <SaleOrderSelect
+          :order-no="formData?.orderNo"
+          @update:order="handleUpdateOrder"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/out/modules/item-form.vue b/apps/web-ele/src/views/erp/sale/out/modules/item-form.vue
new file mode 100644
index 000000000..85122ebe0
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/out/modules/item-form.vue
@@ -0,0 +1,309 @@
+<script lang="ts" setup>
+import type { ErpSaleOutApi } from '#/api/erp/sale/out';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseStockCount } from '#/api/erp/stock/stock';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+import { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpSaleOutApi.SaleOutItem[];
+  disabled?: boolean;
+  discountPercent?: number;
+  otherPrice?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+  discountPercent: 0,
+  otherPrice: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:other-price',
+  'update:total-price',
+]);
+
+const tableData = ref<ErpSaleOutApi.SaleOutItem[]>([]); // 表格数据
+const productOptions = ref<any[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    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 [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(tableData.value, props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+    // 更新表格列配置（目的：原数量、已出库动态列）
+    const columns = useFormItemColumns(tableData.value, props.disabled);
+    await gridApi.grid.reloadColumn(columns || []);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 计算 discountPrice、otherPrice、totalPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPercent, props.otherPrice],
+  () => {
+    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);
+    const discountedPrice = totalPrice - discountPrice!;
+    const finalTotalPrice = discountedPrice + (props.otherPrice || 0);
+
+    // 通知父组件更新
+    emit('update:discount-price', discountPrice);
+    emit('update:other-price', props.otherPrice || 0);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
+/** 处理删除 */
+function handleDelete(row: ErpSaleOutApi.SaleOutItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理仓库变更 */
+async function handleWarehouseChange(row: ErpSaleOutApi.SaleOutItem) {
+  const stockCount = await getWarehouseStockCount({
+    productId: row.productId!,
+    warehouseId: row.warehouseId!,
+  });
+  row.stockCount = stockCount || 0;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpSaleOutApi.SaleOutItem) {
+  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;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.warehouseId) {
+        throw new Error(`第 ${i + 1} 行：仓库不能为空`);
+      }
+      if (!item.count || item.count <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #warehouseId="{ row }">
+      <ElSelect
+        v-model="row.warehouseId"
+        placeholder="请选择仓库"
+        :disabled="disabled"
+        filterable
+        class="w-full"
+        @change="handleWarehouseChange(row)"
+      >
+        <el-option
+          v-for="warehouse in warehouseOptions"
+          :key="warehouse.id"
+          :label="warehouse.name"
+          :value="warehouse.id"
+        />
+      </ElSelect>
+    </template>
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        disabled
+        placeholder="请选择产品"
+        filterable
+        class="w-full"
+      >
+        <el-option
+          v-for="product in productOptions"
+          :key="product.id"
+          :label="product.name"
+          :value="product.id"
+        />
+      </ElSelect>
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #taxPercent="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalProductPrice) }}
+            </span>
+            <span>税额：{{ erpPriceInputFormatter(summaries.taxPrice) }}</span>
+            <span>
+              税额合计：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/out/modules/sale-order-select.vue b/apps/web-ele/src/views/erp/sale/out/modules/sale-order-select.vue
new file mode 100644
index 000000000..de1912674
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/out/modules/sale-order-select.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElDialog, ElInput, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSaleOrderPage } from '#/api/erp/sale/order';
+
+import { useOrderGridColumns, useOrderGridFormSchema } from '../data';
+
+defineProps({
+  orderNo: {
+    type: String,
+    default: () => undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  'update:order': [order: ErpSaleOrderApi.SaleOrder];
+}>();
+
+const order = ref<ErpSaleOrderApi.SaleOrder>(); // 选择的采购订单
+const open = ref<boolean>(false); // 选择采购订单弹窗是否打开
+
+/** 表格配置 */
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useOrderGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useOrderGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSaleOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            outEnable: true,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    radioConfig: {
+      trigger: 'row',
+      highlight: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSaleOrderApi.SaleOrder>,
+  gridEvents: {
+    radioChange: ({ row }: { row: ErpSaleOrderApi.SaleOrder }) => {
+      handleSelectOrder(row);
+    },
+  },
+});
+
+/** 选择销售订单 */
+function handleSelectOrder(selectOrder: ErpSaleOrderApi.SaleOrder) {
+  order.value = selectOrder;
+}
+
+/** 确认选择销售订单 */
+function handleOk() {
+  if (!order.value) {
+    ElMessage.warning('请选择一个销售订单');
+    return;
+  }
+  emit('update:order', order.value);
+  open.value = false;
+}
+</script>
+
+<template>
+  <div>
+    <ElInput
+      readonly
+      :model-value="orderNo"
+      :disabled="disabled"
+      @click="() => !disabled && (open = true)"
+    >
+      <template #append>
+        <div>
+          <IconifyIcon
+            class="h-full w-6 cursor-pointer"
+            icon="ant-design:setting-outlined"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="() => !disabled && (open = true)"
+          />
+        </div>
+      </template>
+    </ElInput>
+    <ElDialog
+      v-model="open"
+      title="选择关联订单"
+      width="50%"
+      @confirm="handleOk"
+      :append-to-body="true"
+    >
+      <Grid class="max-h-[600px]" table-title="销售订单列表(仅展示可出库)" />
+      <template #footer>
+        <ElButton @click="open = false">取消</ElButton>
+        <ElButton type="primary" @click="handleOk">确定</ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/return/data.ts b/apps/web-ele/src/views/erp/sale/return/data.ts
new file mode 100644
index 000000000..9138f35a6
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/return/data.ts
@@ -0,0 +1,624 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpNumberFormatter, erpPriceInputFormatter } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getCustomerSimpleList } from '#/api/erp/sale/customer';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '退货单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'returnTime',
+      label: '退货时间',
+      component: 'DatePicker',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '选择退货时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'orderNo',
+      label: '关联订单',
+      component: 'Input',
+      formItemClass: 'col-span-1',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择关联订单',
+        disabled: formType === 'detail',
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        disabled: true,
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'saleUserId',
+      label: '销售人员',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择销售人员',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '退货产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+    {
+      fieldName: 'discountPrice',
+      label: '退款优惠',
+      component: 'InputNumber',
+      componentProps: {
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'discountedPrice',
+      label: '优惠后金额',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['totalPrice', 'otherPrice'],
+        componentProps: (values) => {
+          const totalPrice = values.totalPrice || 0;
+          const otherPrice = values.otherPrice || 0;
+          values.discountedPrice = totalPrice - otherPrice;
+          return {};
+        },
+      },
+    },
+    {
+      fieldName: 'otherPrice',
+      label: '其他费用',
+      component: 'InputNumber',
+      componentProps: {
+        disabled: formType === 'detail',
+        placeholder: '请输入其他费用',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '结算账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        disabled: true,
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '应收金额',
+      component: 'InputNumber',
+      componentProps: {
+        precision: 2,
+        min: 0,
+        disabled: true,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: z.number().min(0).optional(),
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  formData?: any[],
+  disabled?: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 200,
+      slots: { default: 'warehouseId' },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'totalCount',
+      title: '已出库',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+      fixed: 'right',
+      visible: formData && formData[0]?.outCount !== undefined,
+    },
+    {
+      field: 'returnCount',
+      title: '已退货',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+      fixed: 'right',
+      visible: formData && formData[0]?.returnCount !== undefined,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      fixed: 'right',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      fixed: 'right',
+      title: '产品金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      fixed: 'right',
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 105,
+      slots: { default: 'taxPercent' },
+    },
+    {
+      fixed: 'right',
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      fixed: 'right',
+      title: '合计金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '退货单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入退货单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'returnTime',
+      label: '退货时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderNo',
+      label: '关联订单',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入关联订单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'refundStatus',
+      label: '退款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未退款', value: 0 },
+          { label: '部分退款', value: 1 },
+          { label: '全部退款', value: 2 },
+        ],
+        placeholder: '请选择退款状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '审批状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择审批状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        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: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'returnTime',
+      title: '退货时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '应收金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'refundPrice',
+      title: '已退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unRefundPrice',
+      title: '未退金额',
+      formatter: ({ row }) => {
+        return `${erpNumberFormatter(row.totalPrice - row.refundPrice, 2)}元`;
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useOrderGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useOrderGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'radio',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '订单单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'productNames',
+      title: '产品信息',
+      showOverflow: 'tooltip',
+      minWidth: 120,
+    },
+    {
+      field: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'orderTime',
+      title: '订单时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'returnCount',
+      title: '已退货数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/sale/return/index.vue b/apps/web-ele/src/views/erp/sale/return/index.vue
new file mode 100644
index 000000000..5a76a96b3
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/return/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSaleReturnApi } from '#/api/erp/sale/return';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSaleReturn,
+  exportSaleReturn,
+  getSaleReturnPage,
+  updateSaleReturnStatus,
+} from '#/api/erp/sale/return';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 销售退货列表 */
+defineOptions({ name: 'ErpSaleReturn' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSaleReturn(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '销售退货.xls', source: data });
+}
+
+/** 新增销售退货 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑销售退货 */
+function handleEdit(row: ErpSaleReturnApi.SaleReturn) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除销售退货 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteSaleReturn(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpSaleReturnApi.SaleReturn,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+  });
+  try {
+    await updateSaleReturnStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpSaleReturnApi.SaleReturn[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpSaleReturnApi.SaleReturn) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSaleReturnPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSaleReturnApi.SaleReturn>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【销售】销售订单、出库、退货"
+        url="https://doc.iocoder.cn/erp/sale/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="销售退货列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['销售退货']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:sale-return:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:sale-return:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:sale-return:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:sale-return:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:sale-return:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:sale-return:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:sale-return:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/return/modules/form.vue b/apps/web-ele/src/views/erp/sale/return/modules/form.vue
new file mode 100644
index 000000000..35f59a95d
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/return/modules/form.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
+import type { ErpSaleReturnApi } from '#/api/erp/sale/return';
+
+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 { getAccountSimpleList } from '#/api/erp/finance/account';
+import {
+  createSaleReturn,
+  getSaleReturn,
+  updateSaleReturn,
+} from '#/api/erp/sale/return';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+import SaleOrderSelect from './sale-order-select.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<
+  ErpSaleReturnApi.SaleReturn & {
+    accountId?: number;
+    customerId?: number;
+    discountPercent?: number;
+    fileUrl?: string;
+    order?: ErpSaleOrderApi.SaleOrder;
+    orderId?: number;
+    orderNo?: string;
+  }
+>({
+  id: undefined,
+  no: undefined,
+  accountId: undefined,
+  returnTime: undefined,
+  remark: undefined,
+  fileUrl: undefined,
+  discountPercent: 0,
+  customerId: undefined,
+  discountPrice: 0,
+  totalPrice: 0,
+  otherPrice: 0,
+  items: [],
+});
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['销售退货']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['销售退货']);
+  } else {
+    return '销售退货详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    // 目的：同步到 item-form 组件，触发整体的价格计算
+    if (formData.value) {
+      if (changedFields.includes('otherPrice')) {
+        formData.value.otherPrice = values.otherPrice;
+      }
+      if (changedFields.includes('discountPercent')) {
+        formData.value.discountPercent = values.discountPercent;
+      }
+    }
+  },
+});
+
+/** 更新销售退货项 */
+function handleUpdateItems(items: ErpSaleReturnApi.SaleReturnItem[]) {
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 更新其他费用 */
+function handleUpdateOtherPrice(otherPrice: number) {
+  formApi.setValues({
+    otherPrice,
+  });
+}
+
+/** 更新优惠金额 */
+function handleUpdateDiscountPrice(discountPrice: number) {
+  formApi.setValues({
+    discountPrice,
+  });
+}
+
+/** 更新总金额 */
+function handleUpdateTotalPrice(totalPrice: number) {
+  formApi.setValues({
+    totalPrice,
+  });
+}
+
+/** 选择销售订单 */
+function handleUpdateOrder(order: ErpSaleOrderApi.SaleOrder) {
+  formData.value = {
+    ...formData.value,
+    orderId: order.id,
+    orderNo: order.no!,
+    customerId: order.customerId!,
+    accountId: order.accountId!,
+    remark: order.remark!,
+    discountPercent: order.discountPercent!,
+    fileUrl: order.fileUrl!,
+  };
+  // 将订单项设置到退货单项
+  order.items!.forEach((item: any) => {
+    item.totalCount = item.count;
+    item.count = item.totalCount - item.returnCount;
+    item.orderItemId = item.id;
+    item.id = undefined;
+  });
+  formData.value.items = order.items!.filter(
+    (item) => item.count && item.count > 0,
+  ) as ErpSaleReturnApi.SaleReturnItem[];
+  formApi.setValues(formData.value, false);
+}
+
+/** 创建或更新销售退货 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpSaleReturnApi.SaleReturn;
+    try {
+      await (formType.value === 'create'
+        ? createSaleReturn(data)
+        : updateSaleReturn(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {} as ErpSaleReturnApi.SaleReturn;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSaleReturn(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value, false);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          :discount-percent="formData?.discountPercent ?? 0"
+          :other-price="formData?.otherPrice ?? 0"
+          @update:items="handleUpdateItems"
+          @update:discount-price="handleUpdateDiscountPrice"
+          @update:other-price="handleUpdateOtherPrice"
+          @update:total-price="handleUpdateTotalPrice"
+        />
+      </template>
+      <template #orderNo>
+        <SaleOrderSelect
+          :order-no="formData?.orderNo"
+          @update:order="handleUpdateOrder"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/return/modules/item-form.vue b/apps/web-ele/src/views/erp/sale/return/modules/item-form.vue
new file mode 100644
index 000000000..442baf663
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/return/modules/item-form.vue
@@ -0,0 +1,309 @@
+<script lang="ts" setup>
+import type { ErpSaleReturnApi } from '#/api/erp/sale/return';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseStockCount } from '#/api/erp/stock/stock';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+import { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpSaleReturnApi.SaleReturnItem[];
+  disabled?: boolean;
+  discountPercent?: number;
+  otherPrice?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+  discountPercent: 0,
+  otherPrice: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:other-price',
+  'update:total-price',
+]);
+
+const tableData = ref<ErpSaleReturnApi.SaleReturnItem[]>([]); // 表格数据
+const productOptions = ref<any[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    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 [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(tableData.value, props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+    // 更新表格列配置（目的：已出库、已出库动态列）
+    const columns = useFormItemColumns(tableData.value, props.disabled);
+    await gridApi.grid.reloadColumn(columns || []);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 计算 discountPrice、otherPrice、totalPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPercent, props.otherPrice],
+  () => {
+    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);
+    const discountedPrice = totalPrice - discountPrice!;
+    const finalTotalPrice = discountedPrice + (props.otherPrice || 0);
+
+    // 通知父组件更新
+    emit('update:discount-price', discountPrice);
+    emit('update:other-price', props.otherPrice || 0);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
+/** 处理删除 */
+function handleDelete(row: ErpSaleReturnApi.SaleReturnItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理仓库变更 */
+async function handleWarehouseChange(row: ErpSaleReturnApi.SaleReturnItem) {
+  const stockCount = await getWarehouseStockCount({
+    productId: row.productId!,
+    warehouseId: row.warehouseId!,
+  });
+  row.stockCount = stockCount || 0;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpSaleReturnApi.SaleReturnItem) {
+  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;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.warehouseId) {
+        throw new Error(`第 ${i + 1} 行：仓库不能为空`);
+      }
+      if (!item.count || item.count <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #warehouseId="{ row }">
+      <ElSelect
+        v-model="row.warehouseId"
+        placeholder="请选择仓库"
+        :disabled="disabled"
+        filterable
+        class="w-full"
+        @change="handleWarehouseChange(row)"
+      >
+        <el-option
+          v-for="warehouse in warehouseOptions"
+          :key="warehouse.id"
+          :label="warehouse.name"
+          :value="warehouse.id"
+        />
+      </ElSelect>
+    </template>
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        disabled
+        placeholder="请选择产品"
+        filterable
+        class="w-full"
+      >
+        <el-option
+          v-for="product in productOptions"
+          :key="product.id"
+          :label="product.name"
+          :value="product.id"
+        />
+      </ElSelect>
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #taxPercent="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalProductPrice) }}
+            </span>
+            <span>税额：{{ erpPriceInputFormatter(summaries.taxPrice) }}</span>
+            <span>
+              税额合计：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/sale/return/modules/sale-order-select.vue b/apps/web-ele/src/views/erp/sale/return/modules/sale-order-select.vue
new file mode 100644
index 000000000..05d4746cd
--- /dev/null
+++ b/apps/web-ele/src/views/erp/sale/return/modules/sale-order-select.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElDialog, ElInput, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSaleOrderPage } from '#/api/erp/sale/order';
+
+import { useOrderGridColumns, useOrderGridFormSchema } from '../data';
+
+defineProps({
+  orderNo: {
+    type: String,
+    default: () => undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  'update:order': [order: ErpSaleOrderApi.SaleOrder];
+}>();
+
+const order = ref<ErpSaleOrderApi.SaleOrder>(); // 选择的销售订单
+const open = ref<boolean>(false); // 选择销售订单弹窗是否打开
+
+/** 表格配置 */
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useOrderGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useOrderGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSaleOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            returnEnable: true,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    radioConfig: {
+      trigger: 'row',
+      highlight: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSaleOrderApi.SaleOrder>,
+  gridEvents: {
+    radioChange: ({ row }: { row: ErpSaleOrderApi.SaleOrder }) => {
+      handleSelectOrder(row);
+    },
+  },
+});
+
+/** 选择销售订单 */
+function handleSelectOrder(selectOrder: ErpSaleOrderApi.SaleOrder) {
+  order.value = selectOrder;
+}
+
+/** 确认选择销售订单 */
+function handleOk() {
+  if (!order.value) {
+    ElMessage.warning('请选择一个销售订单');
+    return;
+  }
+  emit('update:order', order.value);
+  open.value = false;
+}
+</script>
+
+<template>
+  <div>
+    <ElInput
+      readonly
+      :model-value="orderNo"
+      :disabled="disabled"
+      @click="() => !disabled && (open = true)"
+    >
+      <template #append>
+        <div>
+          <IconifyIcon
+            class="h-full w-6 cursor-pointer"
+            icon="ant-design:setting-outlined"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="() => !disabled && (open = true)"
+          />
+        </div>
+      </template>
+    </ElInput>
+    <ElDialog
+      v-model="open"
+      title="选择关联订单"
+      width="50%"
+      @confirm="handleOk"
+      :append-to-body="true"
+    >
+      <Grid class="max-h-[600px]" table-title="销售订单列表(仅展示可退货)" />
+      <template #footer>
+        <ElButton @click="open = false">取消</ElButton>
+        <ElButton type="primary" @click="handleOk">确定</ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/check/data.ts b/apps/web-ele/src/views/erp/stock/check/data.ts
new file mode 100644
index 000000000..c4beb2c5c
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/check/data.ts
@@ -0,0 +1,307 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '盘点单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'checkTime',
+      label: '盘点时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择盘点时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 150,
+      slots: { default: 'warehouseId' },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '账面库存',
+      minWidth: 80,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'actualCount',
+      title: '实际库存',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'actualCount' },
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'count',
+      title: '盈亏数量',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalPrice',
+      title: '金额',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '盘点单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入盘点单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'checkTime',
+      label: '盘点时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        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: 'checkTime',
+      title: '盘点时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '总金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/stock/check/index.vue b/apps/web-ele/src/views/erp/stock/check/index.vue
new file mode 100644
index 000000000..144ab7619
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/check/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockCheckApi } from '#/api/erp/stock/check';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteStockCheck,
+  exportStockCheck,
+  getStockCheckPage,
+  updateStockCheckStatus,
+} from '#/api/erp/stock/check';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 库存盘点单列表 */
+defineOptions({ name: 'ErpStockCheck' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportStockCheck(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '库存盘点单.xls', source: data });
+}
+
+/** 新增库存盘点单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑库存盘点单 */
+function handleEdit(row: ErpStockCheckApi.StockCheck) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除库存盘点单 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteStockCheck(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpStockCheckApi.StockCheck,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该盘点单吗？`,
+  });
+  try {
+    await updateStockCheckStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpStockCheckApi.StockCheck[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpStockCheckApi.StockCheck) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockCheckPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockCheckApi.StockCheck>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】库存调拨、库存盘点"
+        url="https://doc.iocoder.cn/erp/stock-move-check/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="库存盘点单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['库存盘点单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:stock-check:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock-check:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-check:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:stock-check:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:stock-check:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:stock-check:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-check:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/check/modules/form.vue b/apps/web-ele/src/views/erp/stock/check/modules/form.vue
new file mode 100644
index 000000000..72e504a73
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/check/modules/form.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { ErpStockCheckApi } from '#/api/erp/stock/check';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createStockCheck,
+  getStockCheck,
+  updateStockCheck,
+} from '#/api/erp/stock/check';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpStockCheckApi.StockCheck>();
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['库存盘点单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['库存盘点单']);
+  } else {
+    return '库存盘点单详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+});
+
+/** 更新盘点单项 */
+function handleUpdateItems(items: ErpStockCheckApi.StockCheckItem[]) {
+  formData.value = modalApi.getData<ErpStockCheckApi.StockCheck>();
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 创建或更新库存盘点单 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpStockCheckApi.StockCheck;
+    try {
+      await (formType.value === 'create'
+        ? createStockCheck(data)
+        : updateStockCheck(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<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getStockCheck(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          @update:items="handleUpdateItems"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/check/modules/item-form.vue b/apps/web-ele/src/views/erp/stock/check/modules/item-form.vue
new file mode 100644
index 000000000..19f78cf7c
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/check/modules/item-form.vue
@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import type { ErpProductApi } from '#/api/erp/product/product';
+import type { ErpStockCheckApi } from '#/api/erp/stock/check';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+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 { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpStockCheckApi.StockCheckItem[];
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+});
+
+const emit = defineEmits(['update:items']);
+
+const tableData = ref<ErpStockCheckApi.StockCheckItem[]>([]); // 表格数据
+const productOptions = ref<ErpProductApi.Product[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+});
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 处理新增 */
+function handleAdd() {
+  const newRow = {
+    id: undefined,
+    warehouseId: undefined,
+    productId: undefined,
+    productUnitName: undefined, // 产品单位
+    productBarCode: undefined, // 产品条码
+    productPrice: undefined,
+    stockCount: undefined,
+    actualCount: undefined,
+    count: undefined,
+    totalPrice: undefined,
+    remark: undefined,
+  };
+  tableData.value.push(newRow);
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理删除 */
+function handleDelete(row: ErpStockCheckApi.StockCheckItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  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) {
+    row.stockCount = (await getStockCount(row.productId, warehouseId)) || 0;
+  }
+
+  handleRowChange(row);
+}
+
+/** 处理产品变更 */
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = row.warehouseId
+    ? (await getStockCount(productId, row.warehouseId)) || 0
+    : (await getStockCount(productId)) || 0;
+  row.actualCount = row.stockCount || 0;
+  row.productPrice = product.purchasePrice || 0;
+  row.count = row.actualCount - row.stockCount || 0;
+  handleRowChange(row);
+}
+
+/** 处理实际库存变更 */
+function handleActualCountChange(actualCount: any, row: any) {
+  row.actualCount = actualCount;
+  if (row.stockCount !== undefined && row.actualCount !== undefined) {
+    row.count = row.actualCount - row.stockCount;
+    if (row.productPrice && row.count) {
+      row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+    }
+  }
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpStockCheckApi.StockCheckItem) {
+  if (row.productPrice && row.count) {
+    row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.warehouseId) {
+        throw new Error(`第 ${i + 1} 行：仓库不能为空`);
+      }
+      if (!item.productId) {
+        throw new Error(`第 ${i + 1} 行：产品不能为空`);
+      }
+      if (!item.actualCount || item.actualCount <= 0) {
+        throw new Error(`第 ${i + 1} 行：实际库存不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+  // 目的：新增时，默认添加一行
+  if (tableData.value.length === 0) {
+    handleAdd();
+  }
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #warehouseId="{ row }">
+      <ElSelect
+        v-model="row.warehouseId"
+        :options="warehouseOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择仓库"
+        filterable
+        :disabled="disabled"
+        @change="handleWarehouseChange($event, row)"
+      />
+    </template>
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        :options="productOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择产品"
+        filterable
+        :disabled="disabled"
+        @change="handleProductChange($event, row)"
+      />
+    </template>
+    <template #actualCount="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.actualCount"
+        :min="0"
+        :precision="3"
+        controls-position="right"
+        class="!w-full"
+        @change="handleActualCountChange($event, row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.actualCount) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <TableAction
+        v-if="!disabled"
+        class="mt-2 flex justify-center"
+        :actions="[
+          {
+            label: '添加盘点产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/in/data.ts b/apps/web-ele/src/views/erp/stock/in/data.ts
new file mode 100644
index 000000000..9b59ce9cc
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/in/data.ts
@@ -0,0 +1,332 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '入库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'inTime',
+      label: '入库时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择入库时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      label: '供应商',
+      fieldName: 'supplierId',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '入库产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 150,
+      slots: { default: 'warehouseId' },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalPrice',
+      title: '金额',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '入库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'inTime',
+      label: '入库时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        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: 'inTime',
+      title: '入库时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '总金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/stock/in/index.vue b/apps/web-ele/src/views/erp/stock/in/index.vue
new file mode 100644
index 000000000..4f6e1da26
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/in/index.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockInApi } from '#/api/erp/stock/in';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+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 Form from './modules/form.vue';
+
+/** ERP 其它入库单列表 */
+defineOptions({ name: 'ErpStockIn' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportStockIn(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '其它入库单.xls', source: data });
+}
+
+/** 新增其它入库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑其它入库单 */
+function handleEdit(row: ErpStockInApi.StockIn) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除其它入库单 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteStockIn(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(row: ErpStockInApi.StockIn, status: number) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该入库单吗？`,
+  });
+  try {
+    await updateStockInStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpStockInApi.StockIn[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpStockInApi.StockIn) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+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',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockInApi.StockIn>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】其它入库、其它出库"
+        url="https://doc.iocoder.cn/erp/stock-in-out/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <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: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock-in:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-in:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:stock-in:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:stock-in:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:stock-in:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-in:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/in/modules/form.vue b/apps/web-ele/src/views/erp/stock/in/modules/form.vue
new file mode 100644
index 000000000..8d1e42091
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/in/modules/form.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { ErpStockInApi } from '#/api/erp/stock/in';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createStockIn, getStockIn, updateStockIn } from '#/api/erp/stock/in';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpStockInApi.StockIn>();
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['其它入库单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['其它入库单']);
+  } else {
+    return '其它入库单详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+});
+
+/** 更新入库单项 */
+function handleUpdateItems(items: ErpStockInApi.StockInItem[]) {
+  formData.value = modalApi.getData<ErpStockInApi.StockIn>();
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 创建或更新其它入库单 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpStockInApi.StockIn;
+    try {
+      await (formType.value === 'create'
+        ? createStockIn(data)
+        : updateStockIn(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<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getStockIn(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          @update:items="handleUpdateItems"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/in/modules/item-form.vue b/apps/web-ele/src/views/erp/stock/in/modules/item-form.vue
new file mode 100644
index 000000000..21145e370
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/in/modules/item-form.vue
@@ -0,0 +1,300 @@
+<script lang="ts" setup>
+import type { ErpProductApi } from '#/api/erp/product/product';
+import type { ErpStockInApi } from '#/api/erp/stock/in';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+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 { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpStockInApi.StockInItem[];
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+});
+
+const emit = defineEmits(['update:items']);
+
+const tableData = ref<ErpStockInApi.StockInItem[]>([]); // 表格数据
+const productOptions = ref<ErpProductApi.Product[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+});
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 处理新增 */
+function handleAdd() {
+  const newRow = {
+    id: undefined,
+    warehouseId: undefined,
+    productId: undefined,
+    productUnitName: undefined, // 产品单位
+    productBarCode: undefined, // 产品条码
+    productPrice: undefined,
+    stockCount: undefined,
+    count: 1,
+    totalPrice: undefined,
+    remark: undefined,
+  };
+  tableData.value.push(newRow);
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理删除 */
+function handleDelete(row: ErpStockInApi.StockInItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  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) {
+    row.stockCount = (await getStockCount(row.productId, warehouseId)) || 0;
+  }
+
+  handleRowChange(row);
+}
+
+/** 处理产品变更 */
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = row.warehouseId
+    ? (await getStockCount(productId, row.warehouseId)) || 0
+    : (await getStockCount(productId)) || 0;
+  row.productPrice = product.purchasePrice || 0;
+  row.count = row.count || 1;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpStockInApi.StockInItem) {
+  if (row.productPrice && row.count) {
+    row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.warehouseId) {
+        throw new Error(`第 ${i + 1} 行：仓库不能为空`);
+      }
+      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} 行：产品单价不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+  // 目的：新增时，默认添加一行
+  if (tableData.value.length === 0) {
+    handleAdd();
+  }
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #warehouseId="{ row }">
+      <ElSelect
+        v-model="row.warehouseId"
+        :options="warehouseOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择仓库"
+        filterable
+        :disabled="disabled"
+        @change="handleWarehouseChange($event, row)"
+      />
+    </template>
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        :options="productOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择产品"
+        filterable
+        :disabled="disabled"
+        @change="handleProductChange($event, row)"
+      />
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="3"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <TableAction
+        v-if="!disabled"
+        class="mt-2 flex justify-center"
+        :actions="[
+          {
+            label: '添加入库产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/move/data.ts b/apps/web-ele/src/views/erp/stock/move/data.ts
new file mode 100644
index 000000000..0b4ffea43
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/move/data.ts
@@ -0,0 +1,318 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '调度单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'moveTime',
+      label: '调度时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择调度时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'fromWarehouseId',
+      title: '调出仓库',
+      minWidth: 150,
+      slots: { default: 'fromWarehouseId' },
+    },
+    {
+      field: 'toWarehouseId',
+      title: '调入仓库',
+      minWidth: 150,
+      slots: { default: 'toWarehouseId' },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalPrice',
+      title: '金额',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '调度单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入调度单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'moveTime',
+      label: '调度时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'fromWarehouseId',
+      label: '调出仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择调出仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'toWarehouseId',
+      label: '调入仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择调入仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        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: 'moveTime',
+      title: '调度时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '总金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/stock/move/index.vue b/apps/web-ele/src/views/erp/stock/move/index.vue
new file mode 100644
index 000000000..c0a64812b
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/move/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockMoveApi } from '#/api/erp/stock/move';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteStockMove,
+  exportStockMove,
+  getStockMovePage,
+  updateStockMoveStatus,
+} from '#/api/erp/stock/move';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 库存调拨单列表 */
+defineOptions({ name: 'ErpStockMove' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportStockMove(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '库存调拨单.xls', source: data });
+}
+
+/** 新增库存调拨单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑库存调拨单 */
+function handleEdit(row: ErpStockMoveApi.StockMove) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除库存调拨单 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteStockMove(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpStockMoveApi.StockMove,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该调拨单吗？`,
+  });
+  try {
+    await updateStockMoveStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpStockMoveApi.StockMove[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpStockMoveApi.StockMove) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockMovePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockMoveApi.StockMove>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】库存调拨、库存盘点"
+        url="https://doc.iocoder.cn/erp/stock-move-check/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="库存调拨单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['库存调拨单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:stock-move:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock-move:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-move:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:stock-move:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:stock-move:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:stock-move:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-move:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/move/modules/form.vue b/apps/web-ele/src/views/erp/stock/move/modules/form.vue
new file mode 100644
index 000000000..94c879b99
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/move/modules/form.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { ErpStockMoveApi } from '#/api/erp/stock/move';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createStockMove,
+  getStockMove,
+  updateStockMove,
+} from '#/api/erp/stock/move';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpStockMoveApi.StockMove>();
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['库存调拨单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['库存调拨单']);
+  } else {
+    return '库存调拨单详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+});
+
+/** 更新调拨单项 */
+function handleUpdateItems(items: ErpStockMoveApi.StockMoveItem[]) {
+  formData.value = modalApi.getData<ErpStockMoveApi.StockMove>();
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 创建或更新库存调拨单 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpStockMoveApi.StockMove;
+    try {
+      await (formType.value === 'create'
+        ? createStockMove(data)
+        : updateStockMove(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<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getStockMove(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          @update:items="handleUpdateItems"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/move/modules/item-form.vue b/apps/web-ele/src/views/erp/stock/move/modules/item-form.vue
new file mode 100644
index 000000000..6e4393689
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/move/modules/item-form.vue
@@ -0,0 +1,321 @@
+<script lang="ts" setup>
+import type { ErpProductApi } from '#/api/erp/product/product';
+import type { ErpStockMoveApi } from '#/api/erp/stock/move';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+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 { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpStockMoveApi.StockMoveItem[];
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+});
+
+const emit = defineEmits(['update:items']);
+
+const tableData = ref<ErpStockMoveApi.StockMoveItem[]>([]); // 表格数据
+const productOptions = ref<ErpProductApi.Product[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+});
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 处理新增 */
+function handleAdd() {
+  const newRow = {
+    id: undefined,
+    fromWarehouseId: undefined,
+    toWarehouseId: undefined,
+    productId: undefined,
+    productUnitName: undefined, // 产品单位
+    productBarCode: undefined, // 产品条码
+    productPrice: undefined,
+    stockCount: undefined,
+    count: 1,
+    totalPrice: undefined,
+    remark: undefined,
+  };
+  tableData.value.push(newRow as any);
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理删除 */
+function handleDelete(row: ErpStockMoveApi.StockMoveItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理调出仓库变更 */
+async function handleFromWarehouseChange(warehouseId: any, row: any) {
+  const warehouse = warehouseOptions.value.find((w) => w.id === warehouseId);
+  if (!warehouse) {
+    return;
+  }
+  row.fromWarehouseId = warehouseId;
+  // 如果已选择产品，重新获取库存
+  if (row.productId) {
+    row.stockCount = (await getStockCount(row.productId, warehouseId)) || 0;
+  }
+  handleRowChange(row);
+}
+
+/** 处理调入仓库变更 */
+async function handleToWarehouseChange(warehouseId: any, row: any) {
+  const warehouse = warehouseOptions.value.find((w) => w.id === warehouseId);
+  if (!warehouse) {
+    return;
+  }
+  row.toWarehouseId = warehouseId;
+  handleRowChange(row);
+}
+
+/** 处理产品变更 */
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = row.fromWarehouseId
+    ? (await getStockCount(productId, row.fromWarehouseId)) || 0
+    : (await getStockCount(productId)) || 0;
+  row.productPrice = product.purchasePrice || 0;
+  row.count = row.count || 1;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpStockMoveApi.StockMoveItem) {
+  if (row.productPrice && row.count) {
+    row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.fromWarehouseId) {
+        throw new Error(`第 ${i + 1} 行：调出仓库不能为空`);
+      }
+      if (!item.toWarehouseId) {
+        throw new Error(`第 ${i + 1} 行：调入仓库不能为空`);
+      }
+      if (!item.productId) {
+        throw new Error(`第 ${i + 1} 行：产品不能为空`);
+      }
+      if (!item.count || item.count <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+  // 目的：新增时，默认添加一行
+  if (tableData.value.length === 0) {
+    handleAdd();
+  }
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #fromWarehouseId="{ row }">
+      <ElSelect
+        v-model="row.fromWarehouseId"
+        :options="warehouseOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择调出仓库"
+        filterable
+        :disabled="disabled"
+        @change="handleFromWarehouseChange($event, row)"
+      />
+    </template>
+    <template #toWarehouseId="{ row }">
+      <ElSelect
+        v-model="row.toWarehouseId"
+        :options="warehouseOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择调入仓库"
+        filterable
+        :disabled="disabled"
+        @change="handleToWarehouseChange($event, row)"
+      />
+    </template>
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        :options="productOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择产品"
+        filterable
+        :disabled="disabled"
+        @change="handleProductChange($event, row)"
+      />
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="3"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <TableAction
+        v-if="!disabled"
+        class="mt-2 flex justify-center"
+        :actions="[
+          {
+            label: '添加调拨产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/out/data.ts b/apps/web-ele/src/views/erp/stock/out/data.ts
new file mode 100644
index 000000000..eb11d6849
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/out/data.ts
@@ -0,0 +1,332 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getCustomerSimpleList } from '#/api/erp/sale/customer';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(formType: string): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '出库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'outTime',
+      label: '出库时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择出库时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      label: '客户',
+      fieldName: 'customerId',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 1, maxRows: 1 },
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'fileUrl',
+      label: '附件',
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'items',
+      label: '出库产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+  ];
+}
+
+/** 表单的明细表格列 */
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 150,
+      slots: { default: 'warehouseId' },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalPrice',
+      title: '金额',
+      minWidth: 120,
+      fixed: 'right',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+      visible: !disabled,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '出库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入出库单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'outTime',
+      label: '出库时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择客户',
+        allowClear: true,
+        showSearch: true,
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        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: 'customerName',
+      title: '客户',
+      minWidth: 120,
+    },
+    {
+      field: 'outTime',
+      title: '出库时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '总金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/stock/out/index.vue b/apps/web-ele/src/views/erp/stock/out/index.vue
new file mode 100644
index 000000000..96c244e09
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/out/index.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockOutApi } from '#/api/erp/stock/out';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteStockOut,
+  exportStockOut,
+  getStockOutPage,
+  updateStockOutStatus,
+} from '#/api/erp/stock/out';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+/** ERP 其它出库单列表 */
+defineOptions({ name: 'ErpStockOut' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportStockOut(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '其它出库单.xls', source: data });
+}
+
+/** 新增其它出库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑其它出库单 */
+function handleEdit(row: ErpStockOutApi.StockOut) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除其它出库单 */
+async function handleDelete(ids: number[]) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteStockOut(ids);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 审批/反审批操作 */
+async function handleUpdateStatus(
+  row: ErpStockOutApi.StockOut,
+  status: number,
+) {
+  const loadingInstance = ElLoading.service({
+    text: `确定${status === 20 ? '审批' : '反审批'}该出库单吗？`,
+  });
+  try {
+    await updateStockOutStatus(row.id!, status);
+    ElMessage.success(`${status === 20 ? '审批' : '反审批'}成功`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpStockOutApi.StockOut[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpStockOutApi.StockOut) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockOutPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockOutApi.StockOut>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】其它入库、其它出库"
+        url="https://doc.iocoder.cn/erp/stock-in-out/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="其它出库单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['其它出库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:stock-out:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock-out:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'danger',
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-out:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleDelete.bind(null, checkedIds),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:stock-out:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:stock-out:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.AUDIT,
+              auth: ['erp:stock-out:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-out:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, [row.id!]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/out/modules/form.vue b/apps/web-ele/src/views/erp/stock/out/modules/form.vue
new file mode 100644
index 000000000..4d84dd331
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/out/modules/form.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { ErpStockOutApi } from '#/api/erp/stock/out';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createStockOut,
+  getStockOut,
+  updateStockOut,
+} from '#/api/erp/stock/out';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import ItemForm from './item-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpStockOutApi.StockOut>();
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['其它出库单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['其它出库单']);
+  } else {
+    return '其它出库单详情';
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(formType.value),
+  showDefaultActions: false,
+});
+
+/** 更新出库单项 */
+function handleUpdateItems(items: ErpStockOutApi.StockOutItem[]) {
+  formData.value = modalApi.getData<ErpStockOutApi.StockOut>();
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
+}
+
+/** 创建或更新其它出库单 */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    try {
+      itemFormInstance.validate();
+    } catch (error: any) {
+      ElMessage.error(error.message || '子表单验证失败');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpStockOutApi.StockOut;
+    try {
+      await (formType.value === 'create'
+        ? createStockOut(data)
+        : updateStockOut(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<{ id?: number; type: string }>();
+    formType.value = data.type;
+    formApi.setDisabled(formType.value === 'detail');
+    formApi.updateSchema(useFormSchema(formType.value));
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getStockOut(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #items>
+        <ItemForm
+          ref="itemFormRef"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          @update:items="handleUpdateItems"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/out/modules/item-form.vue b/apps/web-ele/src/views/erp/stock/out/modules/item-form.vue
new file mode 100644
index 000000000..4a0610bf2
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/out/modules/item-form.vue
@@ -0,0 +1,298 @@
+<script lang="ts" setup>
+import type { ErpProductApi } from '#/api/erp/product/product';
+import type { ErpStockOutApi } from '#/api/erp/stock/out';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { ElInput, ElInputNumber, ElSelect } from 'element-plus';
+
+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 { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpStockOutApi.StockOutItem[];
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+});
+
+const emit = defineEmits(['update:items']);
+
+const tableData = ref<ErpStockOutApi.StockOutItem[]>([]); // 表格数据
+const productOptions = ref<ErpProductApi.Product[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+});
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(props.disabled),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 处理新增 */
+function handleAdd() {
+  const newRow = {
+    id: undefined,
+    warehouseId: undefined,
+    productId: undefined,
+    productUnitName: undefined, // 产品单位
+    productBarCode: undefined, // 产品条码
+    productPrice: undefined,
+    stockCount: undefined,
+    count: 1,
+    totalPrice: undefined,
+    remark: undefined,
+  };
+  tableData.value.push(newRow as any);
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理删除 */
+function handleDelete(row: ErpStockOutApi.StockOutItem) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  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) {
+    row.stockCount = (await getStockCount(row.productId, warehouseId)) || 0;
+  }
+  handleRowChange(row);
+}
+
+/** 处理产品变更 */
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = row.warehouseId
+    ? (await getStockCount(productId, row.warehouseId)) || 0
+    : (await getStockCount(productId)) || 0;
+  row.productPrice = product.purchasePrice || 0;
+  row.count = row.count || 1;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+function initRow(row: ErpStockOutApi.StockOutItem) {
+  if (row.productPrice && row.count) {
+    row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+  }
+}
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.warehouseId) {
+        throw new Error(`第 ${i + 1} 行：仓库不能为空`);
+      }
+      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} 行：产品单价不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+  // 目的：新增时，默认添加一行
+  if (tableData.value.length === 0) {
+    handleAdd();
+  }
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #warehouseId="{ row }">
+      <ElSelect
+        v-model="row.warehouseId"
+        :options="warehouseOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择仓库"
+        filterable
+        :disabled="disabled"
+        @change="handleWarehouseChange($event, row)"
+      />
+    </template>
+    <template #productId="{ row }">
+      <ElSelect
+        v-model="row.productId"
+        :options="productOptions"
+        :props="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择产品"
+        filterable
+        :disabled="disabled"
+        @change="handleProductChange($event, row)"
+      />
+    </template>
+    <template #count="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.count"
+        :min="0"
+        :precision="3"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpCountInputFormatter(row.count) || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <ElInputNumber
+        v-if="!disabled"
+        v-model="row.productPrice"
+        :min="0"
+        :precision="2"
+        controls-position="right"
+        class="!w-full"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ erpPriceInputFormatter(row.productPrice) || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <ElInput v-if="!disabled" v-model="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </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>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <TableAction
+        v-if="!disabled"
+        class="mt-2 flex justify-center"
+        :actions="[
+          {
+            label: '添加出库产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/erp/stock/record/data.ts b/apps/web-ele/src/views/erp/stock/record/data.ts
new file mode 100644
index 000000000..e4e3d0ecd
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/record/data.ts
@@ -0,0 +1,133 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      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: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+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,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'count',
+      title: '出入库数量',
+      width: 120,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'totalCount',
+      title: '库存量',
+      width: 100,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'creatorName',
+      title: '操作人',
+      width: 100,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/stock/record/index.vue b/apps/web-ele/src/views/erp/stock/record/index.vue
new file mode 100644
index 000000000..8c975031a
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/record/index.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockRecordApi } from '#/api/erp/stock/record';
+
+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',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockRecordApi.StockRecord>,
+});
+</script>
+
+<template>
+  <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-ele/src/views/erp/stock/stock/data.ts b/apps/web-ele/src/views/erp/stock/stock/data.ts
new file mode 100644
index 000000000..037bb9c45
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/stock/data.ts
@@ -0,0 +1,69 @@
+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',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+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,
+      formatter: 'formatAmount3',
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 120,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/stock/stock/index.vue b/apps/web-ele/src/views/erp/stock/stock/index.vue
new file mode 100644
index 000000000..2b20d7475
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/stock/index.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockApi } from '#/api/erp/stock/stock';
+
+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',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockApi.Stock>,
+});
+</script>
+
+<template>
+  <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-ele/src/views/erp/stock/warehouse/data.ts b/apps/web-ele/src/views/erp/stock/warehouse/data.ts
new file mode 100644
index 000000000..0f38019e0
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/warehouse/data.ts
@@ -0,0 +1,209 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+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: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'warehousePrice',
+      label: '仓储费(元)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入仓储费，单位：元/天/KG',
+        min: 0,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'truckagePrice',
+      label: '搬运费(元)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入搬运费，单位：元',
+        min: 0,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'principal',
+      label: '负责人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入负责人',
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        precision: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 搜索表单 */
+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(
+  onDefaultStatusChange?: (
+    newStatus: boolean,
+    row: ErpWarehouseApi.Warehouse,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '仓库名称',
+      minWidth: 150,
+    },
+    {
+      field: 'address',
+      title: '仓库地址',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'warehousePrice',
+      title: '仓储费',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'truckagePrice',
+      title: '搬运费',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'principal',
+      title: '负责人',
+      minWidth: 100,
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      minWidth: 80,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'defaultStatus',
+      title: '是否默认',
+      minWidth: 100,
+      cellRender: {
+        attrs: { beforeChange: onDefaultStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: true,
+          inactiveValue: false,
+        },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/erp/stock/warehouse/index.vue b/apps/web-ele/src/views/erp/stock/warehouse/index.vue
new file mode 100644
index 000000000..48669e1f8
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/warehouse/index.vue
@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
+
+import { confirm, DocAlert, 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 {
+  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 handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出仓库 */
+async function handleExport() {
+  const data = await exportWarehouse(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '仓库.xls', source: data });
+}
+
+/** 创建仓库 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑仓库 */
+function handleEdit(row: ErpWarehouseApi.Warehouse) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除仓库 */
+async function handleDelete(row: ErpWarehouseApi.Warehouse) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteWarehouse(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 修改默认状态 */
+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);
+        // 提示并返回成功
+        ElMessage.success(`${text}默认成功`);
+        handleRefresh();
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+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',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpWarehouseApi.Warehouse>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】产品库存、库存明细"
+        url="https://doc.iocoder.cn/erp/stock/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <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: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:warehouse:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: 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-ele/src/views/erp/stock/warehouse/modules/form.vue b/apps/web-ele/src/views/erp/stock/warehouse/modules/form.vue
new file mode 100644
index 000000000..5bd04fded
--- /dev/null
+++ b/apps/web-ele/src/views/erp/stock/warehouse/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+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 formData = ref<ErpWarehouseApi.Warehouse>();
+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 ErpWarehouseApi.Warehouse;
+    try {
+      await (formData.value?.id
+        ? updateWarehouse(data)
+        : createWarehouse(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<ErpWarehouseApi.Warehouse>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getWarehouse(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mp/autoReply/data.ts b/apps/web-ele/src/views/mp/autoReply/data.ts
index 541ad2cdc..4a9bf03ee 100644
--- a/apps/web-ele/src/views/mp/autoReply/data.ts
+++ b/apps/web-ele/src/views/mp/autoReply/data.ts
@@ -1,19 +1,33 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
 import { markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
+import { getDictObj, getDictOptions } from '@vben/hooks';
 
-import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+import { getSimpleAccountList } from '#/api/mp/account';
+import { ReplySelect } from '#/views/mp/components';
 
 import { MsgType } from './modules/types';
 
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+const RequestMessageTypes = new Set([
+  'image',
+  'link',
+  'location',
+  'shortvideo',
+  'text',
+  'video',
+  'voice',
+]); // 允许选择的请求消息类型
 /** 获取表格列配置 */
-export function useGridColumns(
-  msgType: MsgType,
-): VxeTableGridOptions['columns'] {
-  const columns: VxeTableGridOptions['columns'] = [];
+export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
+  const columns: VxeGridPropTypes.Columns = [];
   // 请求消息类型列（仅消息回复显示）
   if (msgType === MsgType.Message) {
     columns.push({
@@ -51,10 +65,8 @@ export function useGridColumns(
       field: 'responseMessageType',
       title: '回复消息类型',
       minWidth: 120,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
-      },
+      formatter: ({ cellValue }) =>
+        getDictObj(DICT_TYPE.MP_MESSAGE_TYPE, String(cellValue))?.label ?? '',
     },
     {
       field: 'responseContent',
@@ -78,13 +90,79 @@ export function useGridColumns(
   return columns;
 }
 
+/** 新增/修改的表单 */
+export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
+  const schema: VbenFormSchema[] = [];
+  // 消息类型（仅消息回复显示）
+  if (Number(msgType) === MsgType.Message) {
+    schema.push({
+      fieldName: 'requestMessageType',
+      label: '消息类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择',
+        options: getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter((d) =>
+          RequestMessageTypes.has(d.value as string),
+        ),
+      },
+    });
+  }
+
+  // 匹配类型（仅关键词回复显示）
+  if (Number(msgType) === MsgType.Keyword) {
+    schema.push({
+      fieldName: 'requestMatch',
+      label: '匹配类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择匹配类型',
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+          'number',
+        ),
+      },
+      rules: 'required',
+    });
+  }
+
+  // 关键词（仅关键词回复显示）
+  if (Number(msgType) === MsgType.Keyword) {
+    schema.push({
+      fieldName: 'requestKeyword',
+      label: '关键词',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入内容',
+        allowClear: true,
+      },
+      rules: 'required',
+    });
+  }
+  // 回复消息
+  schema.push({
+    fieldName: 'reply',
+    label: '回复消息',
+    component: markRaw(ReplySelect),
+  });
+  return schema;
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(WxAccountSelect),
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
     },
   ];
 }
diff --git a/apps/web-ele/src/views/mp/autoReply/index.vue b/apps/web-ele/src/views/mp/autoReply/index.vue
index 28f563e74..e548829ef 100644
--- a/apps/web-ele/src/views/mp/autoReply/index.vue
+++ b/apps/web-ele/src/views/mp/autoReply/index.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import type { TabPaneName } from 'element-plus';
-
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
-import { ContentWrap, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 
 import {
   ElLoading,
@@ -21,26 +20,27 @@ import * as MpAutoReplyApi from '#/api/mp/autoReply';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
+import Content from './modules/content.vue';
 import Form from './modules/form.vue';
-import ReplyContentCell from './modules/ReplyTable.vue';
 import { MsgType } from './modules/types';
 
 defineOptions({ name: 'MpAutoReply' });
 
-const msgType = ref<MsgType>(MsgType.Keyword); // 消息类型
-async function onTabChange(_tabName: TabPaneName) {
-  // 等待 msgType 更新完成
+const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+/** 切换回复类型 */
+async function onTabChange(tabName: string) {
+  msgType.value = tabName;
   await nextTick();
-  const columns = useGridColumns(msgType.value);
+  // 更新 columns
+  const columns = useGridColumns(Number(msgType.value) as MsgType);
   if (columns) {
     // 使用 setGridOptions 更新列配置
     gridApi.setGridOptions({ columns });
     // 等待列配置更新完成
     await nextTick();
   }
+  // 查询数据
   await gridApi.query();
-  // 查询完成后更新数据长度
-  updateTableDataLength();
 }
 
 /** 新增按钮操作 */
@@ -49,7 +49,6 @@ async function handleCreate() {
 
   formModalApi
     .setData({
-      isCreating: true,
       msgType: msgType.value,
       accountId: formValues.accountId,
     })
@@ -59,8 +58,13 @@ async function handleCreate() {
 /** 修改按钮操作 */
 async function handleEdit(row: any) {
   const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  const formValues = await gridApi.formApi.getValues();
   formModalApi
-    .setData({ isCreating: false, msgType: msgType.value, row: data })
+    .setData({
+      msgType: msgType.value,
+      row: data,
+      accountId: formValues.accountId,
+    })
     .open();
 }
 
@@ -73,9 +77,7 @@ async function handleDelete(row: any) {
   try {
     await MpAutoReplyApi.deleteAutoReply(row.id);
     ElMessage.success('删除成功');
-    await gridApi.query();
-    // 查询完成后更新数据长度
-    updateTableDataLength();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -93,9 +95,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     submitOnChange: true,
   },
   gridOptions: {
-    columns: useGridColumns(msgType.value),
-    height: 'calc(100vh - 300px)',
-    // height: '600px',
+    columns: useGridColumns(Number(msgType.value) as MsgType),
+    height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -103,13 +104,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await MpAutoReplyApi.getAutoReplyPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            type: msgType.value,
+            type: Number(msgType.value) as MsgType,
             ...formValues,
           });
         },
       },
-      // 禁用自动加载，等表单初始化完成后再加载
-      autoLoad: false,
     },
     rowConfig: {
       keyField: 'id',
@@ -122,44 +121,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<any>,
 });
 
-// 表格数据长度，用于判断是否显示新增按钮
-const tableDataLength = ref(0);
-
-// 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环）
-function updateTableDataLength() {
-  try {
-    if (!gridApi.grid) {
-      return;
-    }
-    const tableData = gridApi.grid.getTableData();
-    tableDataLength.value = tableData?.tableData?.length || 0;
-  } catch {
-    tableDataLength.value = 0;
-  }
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
 }
 
 // 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
 const showCreateButton = computed(() => {
-  if (msgType.value !== MsgType.Follow) {
+  if (Number(msgType.value) !== MsgType.Follow) {
     return true;
   }
-  return tableDataLength.value <= 0;
-});
-
-// 页面挂载后，等待表单初始化完成再加载数据
-onMounted(async () => {
-  // 等待 WxAccountSelect 组件加载并设置默认值
-  await nextTick();
-  if (gridApi.formApi) {
-    const formValues = await gridApi.formApi.getValues();
-    // 如果 accountId 有值，说明已经准备好了
-    if (formValues.accountId) {
-      // 设置为最新提交的值
-      gridApi.formApi.setLatestSubmissionValues(formValues);
-      // 触发首次查询
-      await gridApi.query();
-      updateTableDataLength();
-    }
+  try {
+    const tableData = gridApi.grid?.getTableData();
+    return (tableData?.tableData?.length || 0) <= 0;
+  } catch {
+    return true;
   }
 });
 </script>
@@ -170,86 +146,83 @@ onMounted(async () => {
       <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
     </template>
 
-    <!-- tab 切换 -->
-    <ContentWrap>
-      <ElTabs v-model="msgType" @tab-change="onTabChange">
-        <!-- tab 项 -->
-        <ElTabPane :name="MsgType.Follow">
-          <template #label>
-            <ElRow align="middle">
-              <Icon icon="ep:star" class="mr-2px" /> 关注时回复
-            </ElRow>
-          </template>
-        </ElTabPane>
-        <ElTabPane :name="MsgType.Message">
-          <template #label>
-            <ElRow align="middle">
-              <Icon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
-            </ElRow>
-          </template>
-        </ElTabPane>
-        <ElTabPane :name="MsgType.Keyword">
-          <template #label>
-            <ElRow align="middle">
-              <Icon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
-            </ElRow>
-          </template>
-        </ElTabPane>
-      </ElTabs>
-      <!-- 列表 -->
-      <FormModal
-        @success="
-          () => {
-            gridApi.query().then(() => {
-              updateTableDataLength();
-            });
-          }
-        "
-      />
-      <Grid table-title="自动回复列表">
-        <template #toolbar-tools>
-          <TableAction
-            v-if="showCreateButton"
-            :actions="[
-              {
-                label: $t('ui.actionTitle.create', ['自动回复']),
-                type: 'primary',
-                icon: ACTION_ICON.ADD,
-                auth: ['mp:auto-reply:create'],
-                onClick: handleCreate,
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="自动回复列表">
+      <!-- 在工具栏上方放置 Tab 切换 -->
+      <template #toolbar-actions>
+        <ElTabs
+          v-model="msgType"
+          class="w-full"
+          @tab-change="(activeName) => onTabChange(activeName as string)"
+        >
+          <ElTabPane :name="String(MsgType.Follow)">
+            <template #label>
+              <ElRow align="middle">
+                <IconifyIcon icon="ep:star" class="mr-[2px]" /> 关注时回复
+              </ElRow>
+            </template>
+          </ElTabPane>
+          <ElTabPane :name="String(MsgType.Message)">
+            <template #label>
+              <ElRow align="middle">
+                <IconifyIcon icon="ep:chat-line-round" class="mr-[2px]" />
+                消息回复
+              </ElRow>
+            </template>
+          </ElTabPane>
+          <ElTabPane :name="String(MsgType.Keyword)">
+            <template #label>
+              <ElRow align="middle">
+                <IconifyIcon icon="fa:newspaper-o" class="mr-[2px]" />
+                关键词回复
+              </ElRow>
+            </template>
+          </ElTabPane>
+        </ElTabs>
+      </template>
+      <!-- 工具栏按钮 -->
+      <template #toolbar-tools>
+        <TableAction
+          v-if="showCreateButton"
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['自动回复']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:auto-reply:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #replyContent="{ row }">
+        <Content :row="row" />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:auto-reply:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:auto-reply:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
               },
-            ]"
-          />
-        </template>
-        <template #replyContent="{ row }">
-          <ReplyContentCell :row="row" />
-        </template>
-        <template #actions="{ row }">
-          <TableAction
-            :actions="[
-              {
-                label: $t('common.edit'),
-                type: 'primary',
-                link: true,
-                icon: ACTION_ICON.EDIT,
-                auth: ['mp:auto-reply:update'],
-                onClick: handleEdit.bind(null, row),
-              },
-              {
-                label: $t('common.delete'),
-                type: 'danger',
-                link: true,
-                icon: ACTION_ICON.DELETE,
-                auth: ['mp:auto-reply:delete'],
-                popConfirm: {
-                  title: '是否确认删除此数据?',
-                  confirm: handleDelete.bind(null, row),
-                },
-              },
-            ]"
-          />
-        </template>
-      </Grid>
-    </ContentWrap>
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue b/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
deleted file mode 100644
index f55afc365..000000000
--- a/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts" setup>
-import type { FormInstance } from 'element-plus';
-
-import type { Reply } from '#/views/mp/modules/wx-reply';
-
-import { computed, ref } from 'vue';
-
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
-
-import WxReplySelect from '#/views/mp/modules/wx-reply';
-
-import { MsgType } from './types';
-
-defineOptions({ name: 'ReplyForm' });
-
-const props = defineProps<{
-  modelValue: any;
-  msgType: MsgType;
-  reply: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:reply', v: Reply): void;
-  (e: 'update:modelValue', v: any): void;
-}>();
-
-const reply = computed<Reply>({
-  get: () => props.reply,
-  set: (val) => emit('update:reply', val),
-});
-
-const replyForm = computed<any>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const formRef = ref<FormInstance | null>(null); // 表单 ref
-
-const RequestMessageTypes = [
-  'text',
-  'image',
-  'voice',
-  'video',
-  'shortvideo',
-  'location',
-  'link',
-]; // 允许选择的请求消息类型
-
-// 表单校验
-const rules = {
-  requestKeyword: [
-    { required: true, message: '请求的关键字不能为空', trigger: 'blur' },
-  ],
-  requestMatch: [
-    { required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
-  ],
-};
-
-defineExpose({
-  resetFields: () => formRef.value?.resetFields(),
-  validate: async () => formRef.value?.validate(),
-});
-</script>
-
-<template>
-  <div>
-    <ElForm ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
-      <ElFormItem
-        label="消息类型"
-        prop="requestMessageType"
-        v-if="msgType === MsgType.Message"
-      >
-        <ElSelect v-model="replyForm.requestMessageType" placeholder="请选择">
-          <template
-            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
-            :key="dict.value"
-          >
-            <ElOption
-              v-if="RequestMessageTypes.includes(dict.value as string)"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </template>
-        </ElSelect>
-      </ElFormItem>
-      <ElFormItem
-        label="匹配类型"
-        prop="requestMatch"
-        v-if="msgType === MsgType.Keyword"
-      >
-        <ElSelect
-          v-model="replyForm.requestMatch"
-          placeholder="请选择匹配类型"
-          clearable
-        >
-          <ElOption
-            v-for="dict in getDictOptions(
-              DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
-              'number',
-            )"
-            :key="String(dict.value)"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </ElSelect>
-      </ElFormItem>
-      <ElFormItem
-        label="关键词"
-        prop="requestKeyword"
-        v-if="msgType === MsgType.Keyword"
-      >
-        <ElInput
-          v-model="replyForm.requestKeyword"
-          placeholder="请输入内容"
-          clearable
-        />
-      </ElFormItem>
-      <ElFormItem label="回复消息">
-        <WxReplySelect v-model="reply" />
-      </ElFormItem>
-    </ElForm>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue b/apps/web-ele/src/views/mp/autoReply/modules/content.vue
similarity index 74%
rename from apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue
rename to apps/web-ele/src/views/mp/autoReply/modules/content.vue
index bdfb41ade..339be83ab 100644
--- a/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue
+++ b/apps/web-ele/src/views/mp/autoReply/modules/content.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import WxMusic from '#/views/mp/modules/wx-music';
-import WxNews from '#/views/mp/modules/wx-news';
-import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
-import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/components';
 
 defineOptions({ name: 'ReplyContentCell' });
 
@@ -17,14 +14,14 @@ const props = defineProps<{
       {{ props.row.responseContent }}
     </div>
     <div v-else-if="props.row.responseMessageType === 'voice'">
-      <WxVoicePlayer
+      <VoicePlayer
         v-if="props.row.responseMediaUrl"
         :url="props.row.responseMediaUrl"
       />
     </div>
     <div v-else-if="props.row.responseMessageType === 'image'">
       <a target="_blank" :href="props.row.responseMediaUrl">
-        <img :src="props.row.responseMediaUrl" style="width: 100px" />
+        <img :src="props.row.responseMediaUrl" class="w-[100px]" />
       </a>
     </div>
     <div
@@ -33,17 +30,17 @@ const props = defineProps<{
         props.row.responseMessageType === 'shortvideo'
       "
     >
-      <WxVideoPlayer
+      <VideoPlayer
         v-if="props.row.responseMediaUrl"
         :url="props.row.responseMediaUrl"
-        style="margin-top: 10px"
+        class="mt-[10px]"
       />
     </div>
     <div v-else-if="props.row.responseMessageType === 'news'">
-      <WxNews :articles="props.row.responseArticles" />
+      <News :articles="props.row.responseArticles" />
     </div>
     <div v-else-if="props.row.responseMessageType === 'music'">
-      <WxMusic
+      <Music
         :title="props.row.responseTitle"
         :description="props.row.responseDescription"
         :thumb-media-url="props.row.responseThumbMediaUrl"
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/form.vue b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
index b2502c2b9..cd0af6e58 100644
--- a/apps/web-ele/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
@@ -1,61 +1,88 @@
 <script lang="ts" setup>
-import type { Reply } from '#/views/mp/modules/wx-reply';
+import type { Reply } from '#/views/mp/components/reply/types';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { ElMessage } from 'element-plus';
 
-import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { useVbenForm } from '#/adapter/form';
+import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/modules/wx-reply/modules/types';
+import { ReplyType } from '#/views/mp/components/reply/types';
 
-import ReplyForm from './ReplyForm.vue';
+import { useFormSchema } from '../data';
 import { MsgType } from './types';
 
 const emit = defineEmits(['success']);
 
-const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
-
-const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
-const replyForm = ref<any>({});
-const reply = ref<Reply>({
-  type: ReplyType.Text,
-  accountId: -1,
-});
-
+const formData = ref<{
+  accountId?: number;
+  msgType: MsgType;
+  row?: any;
+}>();
 const getTitle = computed(() => {
-  return formData.value?.isCreating
-    ? $t('ui.actionTitle.create', ['自动回复'])
-    : $t('ui.actionTitle.edit', ['自动回复']);
+  return formData.value?.row?.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(Number(formData.value?.msgType) as MsgType),
+  showDefaultActions: false,
+});
+
+// 注意：schema 的更新现在在 onOpenChange 中手动处理，避免时序问题
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    await formRef.value?.validate();
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
 
     // 处理回复消息
-    const submitForm: any = { ...replyForm.value };
-    submitForm.responseMessageType = reply.value.type;
-    submitForm.responseContent = reply.value.content;
-    submitForm.responseMediaId = reply.value.mediaId;
-    submitForm.responseMediaUrl = reply.value.url;
-    submitForm.responseTitle = reply.value.title;
-    submitForm.responseDescription = reply.value.description;
-    submitForm.responseThumbMediaId = reply.value.thumbMediaId;
-    submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
-    submitForm.responseArticles = reply.value.articles;
-    submitForm.responseMusicUrl = reply.value.musicUrl;
-    submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
+    const submitForm: any = await formApi.getValues();
+    // 确保 type 字段使用当前选中的 tab 值
+    submitForm.type = formData.value?.msgType;
+    // 确保 accountId 字段存在
+    submitForm.accountId = formData.value?.accountId;
+    // 编辑模式下，确保 id 字段存在（从 row 中获取，因为表单 schema 中没有 id 字段）
+    if (formData.value?.row?.id && !submitForm.id) {
+      submitForm.id = formData.value.row.id;
+    }
+    const reply = submitForm.reply as Reply | undefined;
+    if (reply) {
+      submitForm.responseMessageType = reply.type;
+      submitForm.responseContent = reply.content;
+      submitForm.responseMediaId = reply.mediaId;
+      submitForm.responseMediaUrl = reply.url;
+      submitForm.responseTitle = reply.title;
+      submitForm.responseDescription = reply.description;
+      submitForm.responseThumbMediaId = reply.thumbMediaId;
+      submitForm.responseThumbMediaUrl = reply.thumbMediaUrl;
+      submitForm.responseArticles = reply.articles;
+      submitForm.responseMusicUrl = reply.musicUrl;
+      submitForm.responseHqMusicUrl = reply.hqMusicUrl;
+    }
+    delete submitForm.reply;
 
     modalApi.lock();
     try {
-      if (replyForm.value.id === undefined) {
-        await MpAutoReplyApi.createAutoReply(submitForm);
+      if (submitForm.id === undefined) {
+        await createAutoReply(submitForm);
         ElMessage.success('新增成功');
       } else {
-        await MpAutoReplyApi.updateAutoReply(submitForm);
+        await updateAutoReply(submitForm);
         ElMessage.success('修改成功');
       }
       await modalApi.close();
@@ -67,50 +94,28 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
-      replyForm.value = {};
-      reply.value = {
-        type: ReplyType.Text,
-        accountId: -1,
-      };
       return;
     }
     // 加载数据
     const data = modalApi.getData<{
       accountId?: number;
-      isCreating: boolean;
       msgType: MsgType;
       row?: any;
     }>();
     if (!data) {
       return;
     }
-    formData.value = data;
+    // 先更新 schema，确保表单字段正确
+    formApi.setState({ schema: useFormSchema(data.msgType) });
+    // 等待 schema 更新完成
+    await nextTick();
 
-    if (data.isCreating) {
-      // 新建：初始化表单
-      replyForm.value = {
-        id: undefined,
-        accountId: data.accountId || -1,
-        type: data.msgType,
-        requestKeyword: undefined,
-        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
-        requestMessageType: undefined,
-      };
-      reply.value = {
-        type: ReplyType.Text,
-        accountId: data.accountId || -1,
-      };
-    } else if (data.row) {
+    formData.value = data;
+    if (data.row?.id) {
       // 编辑：加载数据
       const rowData = data.row;
-      replyForm.value = { ...rowData };
-      delete replyForm.value.responseMessageType;
-      delete replyForm.value.responseContent;
-      delete replyForm.value.responseMediaId;
-      delete replyForm.value.responseMediaUrl;
-      delete replyForm.value.responseDescription;
-      delete replyForm.value.responseArticles;
-      reply.value = {
+      const formValues: any = { ...rowData };
+      formValues.reply = {
         type: rowData.responseMessageType,
         accountId: data.accountId || -1,
         content: rowData.responseContent,
@@ -124,6 +129,22 @@ const [Modal, modalApi] = useVbenModal({
         musicUrl: rowData.responseMusicUrl,
         hqMusicUrl: rowData.responseHqMusicUrl,
       };
+      await formApi.setValues(formValues);
+    } else {
+      // 新建：初始化表单
+      const initialValues: any = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+        reply: {
+          type: ReplyType.Text,
+          accountId: data.accountId || -1,
+        },
+      };
+      await formApi.setValues(initialValues);
     }
   },
 });
@@ -131,12 +152,6 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal :title="getTitle" class="w-4/5">
-    <ReplyForm
-      v-if="formData"
-      v-model="replyForm"
-      v-model:reply="reply"
-      :msg-type="formData.msgType"
-      ref="formRef"
-    />
+    <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue b/apps/web-ele/src/views/mp/components/account-select/account-select.vue
similarity index 95%
rename from apps/web-ele/src/views/mp/modules/wx-account-select/main.vue
rename to apps/web-ele/src/views/mp/components/account-select/account-select.vue
index c76b8c5d5..2dde13dae 100644
--- a/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue
+++ b/apps/web-ele/src/views/mp/components/account-select/account-select.vue
@@ -6,11 +6,11 @@ import { useRouter } from 'vue-router';
 
 import { useTabs } from '@vben/hooks';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElOption, ElSelect } from 'element-plus';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
-defineOptions({ name: 'WxAccountSelect' });
+defineOptions({ name: 'AccountSelect' });
 
 const props = defineProps<{
   modelValue?: number;
@@ -121,19 +121,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-select
+  <ElSelect
     v-model="currentId"
     placeholder="请选择公众号"
     class="!w-240px"
     @change="onChanged"
   >
-    <el-option
+    <ElOption
       v-for="item in accountList"
       :key="item.id"
       :label="item.name"
       :value="item.id"
     />
-  </el-select>
+  </ElSelect>
 </template>
 <style lang="scss" scoped>
 :deep(.el-select__wrapper) {
diff --git a/apps/web-ele/src/views/mp/components/account-select/index.ts b/apps/web-ele/src/views/mp/components/account-select/index.ts
new file mode 100644
index 000000000..be1b34727
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/account-select/index.ts
@@ -0,0 +1 @@
+export { default } from './account-select.vue';
diff --git a/apps/web-ele/src/views/mp/components/index.ts b/apps/web-ele/src/views/mp/components/index.ts
new file mode 100644
index 000000000..577881005
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/index.ts
@@ -0,0 +1,22 @@
+// 统一导出所有模块组件
+
+export { default as AccountSelect } from './account-select/account-select.vue';
+
+export { default as Location } from './location/location.vue';
+export { default as MaterialSelect } from './material-select/material-select.vue';
+
+export * from './material-select/types';
+
+export * from './msg/types';
+
+export { default as Music } from './music/music.vue';
+
+export { default as News } from './news/news.vue';
+
+export { default as ReplySelect } from './reply/reply.vue';
+
+export * from './reply/types';
+
+export { default as VideoPlayer } from './video-play/video-play.vue';
+
+export { default as VoicePlayer } from './voice-play/voice-play.vue';
diff --git a/apps/web-ele/src/views/mp/components/location/index.ts b/apps/web-ele/src/views/mp/components/location/index.ts
new file mode 100644
index 000000000..6ebacefb0
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/location/index.ts
@@ -0,0 +1 @@
+export { default } from './location.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-location/main.vue b/apps/web-ele/src/views/mp/components/location/location.vue
similarity index 79%
rename from apps/web-ele/src/views/mp/modules/wx-location/main.vue
rename to apps/web-ele/src/views/mp/components/location/location.vue
index 784b45553..1840518e6 100644
--- a/apps/web-ele/src/views/mp/modules/wx-location/main.vue
+++ b/apps/web-ele/src/views/mp/components/location/location.vue
@@ -2,7 +2,11 @@
   【微信消息 - 定位】TODO @Dhb52 目前未启用
 -->
 <script lang="ts" setup>
-defineOptions({ name: 'WxLocation' });
+import { IconifyIcon } from '@vben/icons';
+
+import { ElCol, ElLink, ElRow } from 'element-plus';
+
+defineOptions({ name: 'Location' });
 
 const props = defineProps({
   locationX: {
@@ -36,26 +40,26 @@ defineExpose({
 
 <template>
   <div>
-    <el-link
+    <ElLink
       type="primary"
       target="_blank"
       :href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
         locationY
       }&pointy=${locationX}&name=${label}&ref=yudao`"
     >
-      <el-col>
-        <el-row>
+      <ElCol>
+        <ElRow>
           <img
             :src="`https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${
               locationX
             },${locationY}&key=${qqMapKey}&size=250*180`"
           />
-        </el-row>
-        <el-row>
-          <Icon icon="ep:location" />
+        </ElRow>
+        <ElRow>
+          <IconifyIcon icon="ep:location" />
           {{ label }}
-        </el-row>
-      </el-col>
-    </el-link>
+        </ElRow>
+      </ElCol>
+    </ElLink>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-material-select/index.ts b/apps/web-ele/src/views/mp/components/material-select/index.ts
similarity index 51%
rename from apps/web-ele/src/views/mp/modules/wx-material-select/index.ts
rename to apps/web-ele/src/views/mp/components/material-select/index.ts
index f4fcea0ba..a3320e060 100644
--- a/apps/web-ele/src/views/mp/modules/wx-material-select/index.ts
+++ b/apps/web-ele/src/views/mp/components/material-select/index.ts
@@ -1,3 +1,3 @@
-export { default } from './main.vue';
+export { default } from './material-select.vue';
 
 export { MaterialType, NewsType } from './types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue b/apps/web-ele/src/views/mp/components/material-select/material-select.vue
similarity index 61%
rename from apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
rename to apps/web-ele/src/views/mp/components/material-select/material-select.vue
index 6d8c5033b..b637f3b4f 100644
--- a/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
+++ b/apps/web-ele/src/views/mp/components/material-select/material-select.vue
@@ -6,18 +6,27 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
 import { formatTime } from '@vben/utils';
 
+import {
+  ElButton,
+  ElPagination,
+  ElRow,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus';
+
 import * as MpDraftApi from '#/api/mp/draft';
 import * as MpFreePublishApi from '#/api/mp/freePublish';
 import * as MpMaterialApi from '#/api/mp/material';
-import WxNews from '#/views/mp/modules/wx-news';
-import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
-import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+import News from '#/views/mp/components/news/news.vue';
+import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
+import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
 
 import { NewsType } from './types';
 
-defineOptions({ name: 'WxMaterialSelect' });
+defineOptions({ name: 'MaterialSelect' });
 
 const props = withDefaults(
   defineProps<{
@@ -118,34 +127,37 @@ onMounted(async () => {
         <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
           <img class="material-img" :src="item.url" />
           <p class="item-name">{{ item.name }}</p>
-          <el-row class="ope-row">
-            <el-button type="success" @click="selectMaterialFun(item)">
+          <ElRow class="ope-row">
+            <ElButton type="success" @click="selectMaterialFun(item)">
               选择
-              <Icon icon="ep:circle-check" />
-            </el-button>
-          </el-row>
+              <IconifyIcon icon="ep:circle-check" />
+            </ElButton>
+          </ElRow>
         </div>
       </div>
       <!-- 分页组件 -->
-      <Pagination
+      <ElPagination
+        background
+        layout="prev, pager, next, sizes, total"
         :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getMaterialPageFun"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @current-change="getMaterialPageFun"
+        @size-change="getMaterialPageFun"
       />
     </div>
     <!-- 类型：voice -->
     <div v-else-if="props.type === 'voice'">
       <!-- 列表 -->
-      <el-table v-loading="loading" :data="list">
-        <el-table-column label="编号" align="center" prop="mediaId" />
-        <el-table-column label="文件名" align="center" prop="name" />
-        <el-table-column label="语音" align="center">
+      <ElTable v-loading="loading" :data="list">
+        <ElTableColumn label="编号" align="center" prop="mediaId" />
+        <ElTableColumn label="文件名" align="center" prop="name" />
+        <ElTableColumn label="语音" align="center">
           <template #default="scope">
-            <WxVoicePlayer :url="scope.row.url" />
+            <VoicePlayer :url="scope.row.url" />
           </template>
-        </el-table-column>
-        <el-table-column
+        </ElTableColumn>
+        <ElTableColumn
           label="上传时间"
           align="center"
           prop="createTime"
@@ -154,41 +166,40 @@ onMounted(async () => {
             (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
           "
         />
-        <el-table-column label="操作" align="center" fixed="right">
+        <ElTableColumn label="操作" align="center" fixed="right">
           <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              @click="selectMaterialFun(scope.row)"
-            >
+            <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
               选择
-              <Icon icon="ep:plus" />
-            </el-button>
+              <IconifyIcon icon="ep:plus" />
+            </ElButton>
           </template>
-        </el-table-column>
-      </el-table>
+        </ElTableColumn>
+      </ElTable>
       <!-- 分页组件 -->
-      <Pagination
+      <ElPagination
+        background
+        layout="prev, pager, next, sizes, total"
         :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getPage"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @current-change="getPage"
+        @size-change="getPage"
       />
     </div>
     <!-- 类型：video -->
     <div v-else-if="props.type === 'video'">
       <!-- 列表 -->
-      <el-table v-loading="loading" :data="list">
-        <el-table-column label="编号" align="center" prop="mediaId" />
-        <el-table-column label="文件名" align="center" prop="name" />
-        <el-table-column label="标题" align="center" prop="title" />
-        <el-table-column label="介绍" align="center" prop="introduction" />
-        <el-table-column label="视频" align="center">
+      <ElTable v-loading="loading" :data="list">
+        <ElTableColumn label="编号" align="center" prop="mediaId" />
+        <ElTableColumn label="文件名" align="center" prop="name" />
+        <ElTableColumn label="标题" align="center" prop="title" />
+        <ElTableColumn label="介绍" align="center" prop="introduction" />
+        <ElTableColumn label="视频" align="center">
           <template #default="scope">
-            <WxVideoPlayer :url="scope.row.url" />
+            <VideoPlayer :url="scope.row.url" />
           </template>
-        </el-table-column>
-        <el-table-column
+        </ElTableColumn>
+        <ElTableColumn
           label="上传时间"
           align="center"
           prop="createTime"
@@ -197,30 +208,29 @@ onMounted(async () => {
             (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
           "
         />
-        <el-table-column
+        <ElTableColumn
           label="操作"
           align="center"
           fixed="right"
           class-name="small-padding fixed-width"
         >
           <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              @click="selectMaterialFun(scope.row)"
-            >
+            <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
               选择
-              <Icon icon="akar-icons:circle-plus" />
-            </el-button>
+              <IconifyIcon icon="akar-icons:circle-plus" />
+            </ElButton>
           </template>
-        </el-table-column>
-      </el-table>
+        </ElTableColumn>
+      </ElTable>
       <!-- 分页组件 -->
-      <Pagination
+      <ElPagination
+        background
+        layout="prev, pager, next, sizes, total"
         :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getMaterialPageFun"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @current-change="getMaterialPageFun"
+        @size-change="getMaterialPageFun"
       />
     </div>
     <!-- 类型：news -->
@@ -228,22 +238,25 @@ onMounted(async () => {
       <div class="waterfall" v-loading="loading">
         <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
           <div v-if="item.content && item.content.newsItem">
-            <WxNews :articles="item.content.newsItem" />
-            <el-row class="ope-row">
-              <el-button type="success" @click="selectMaterialFun(item)">
+            <News :articles="item.content.newsItem" />
+            <ElRow class="ope-row">
+              <ElButton type="success" @click="selectMaterialFun(item)">
                 选择
-                <Icon icon="ep:circle-check" />
-              </el-button>
-            </el-row>
+                <IconifyIcon icon="ep:circle-check" />
+              </ElButton>
+            </ElRow>
           </div>
         </div>
       </div>
       <!-- 分页组件 -->
-      <Pagination
+      <ElPagination
+        background
+        layout="prev, pager, next, sizes, total"
         :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getMaterialPageFun"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @current-change="getMaterialPageFun"
+        @size-change="getMaterialPageFun"
       />
     </div>
   </div>
diff --git a/apps/web-ele/src/views/mp/modules/wx-material-select/types.ts b/apps/web-ele/src/views/mp/components/material-select/types.ts
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-material-select/types.ts
rename to apps/web-ele/src/views/mp/components/material-select/types.ts
diff --git a/apps/web-ele/src/views/mp/components/msg/card.scss b/apps/web-ele/src/views/mp/components/msg/card.scss
new file mode 100644
index 000000000..639f4ca8e
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/msg/card.scss
@@ -0,0 +1,116 @@
+.mp-card {
+  &__item {
+    box-sizing: border-box;
+    height: 200px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-feature-settings: 'tnum';
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    color: rgb(0 0 0 / 65%);
+    cursor: pointer;
+    list-style: none;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+
+    &:hover {
+      border-color: rgb(0 0 0 / 9%);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
+    }
+
+    &--add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      font-size: 16px;
+      color: rgb(0 0 0 / 45%);
+      background-color: #fff;
+      border: 1px dashed #000;
+      border-color: #d9d9d9;
+      border-radius: 2px;
+
+      i {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        color: #40a9ff;
+        background-color: #fff;
+        border-color: #40a9ff;
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    padding: 24px;
+  }
+
+  &__detail {
+    flex: 1;
+  }
+
+  &__avatar {
+    width: 48px;
+    height: 48px;
+    margin-right: 12px;
+    overflow: hidden;
+    border-radius: 48px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__title {
+    margin-bottom: 12px;
+    font-size: 16px;
+    color: rgb(0 0 0 / 85%);
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  &__info {
+    display: -webkit-box;
+    height: 64px;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    color: rgb(0 0 0 / 45%);
+    -webkit-box-orient: vertical;
+  }
+
+  &__menu {
+    display: flex;
+    justify-content: space-around;
+    height: 50px;
+    line-height: 50px;
+    color: rgb(0 0 0 / 45%);
+    text-align: center;
+    background: #f7f9fa;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+}
+
+/** joolun 额外加的 */
+.mp-comment__main {
+  flex: unset !important;
+  margin: 0 8px !important;
+  border-radius: 5px !important;
+}
+
+.mp-comment__header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.mp-comment__body {
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
diff --git a/apps/web-ele/src/views/mp/components/msg/comment.scss b/apps/web-ele/src/views/mp/components/msg/comment.scss
new file mode 100644
index 000000000..98e137d4b
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/msg/comment.scss
@@ -0,0 +1,109 @@
+/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
+.mp-comment {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+
+  &--reverse {
+    flex-direction: row-reverse;
+
+    .mp-comment__main {
+      &::before,
+      &::after {
+        right: -8px;
+        left: auto;
+        border-width: 8px 0 8px 8px;
+      }
+
+      &::before {
+        border-left-color: #dedede;
+      }
+
+      &::after {
+        margin-right: 1px;
+        margin-left: auto;
+        border-left-color: #f8f8f8;
+      }
+    }
+  }
+
+  &__avatar {
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: 50%;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 15px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+  }
+
+  &__author {
+    font-size: 14px;
+    font-weight: 700;
+    color: #999;
+  }
+
+  &__main {
+    position: relative;
+    flex: 1;
+    margin: 0 20px;
+    border: 1px solid #dedede;
+    border-radius: 2px;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 10px;
+      right: 100%;
+      left: -8px;
+      display: block;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      content: ' ';
+      border-color: transparent;
+      border-style: solid solid outset;
+      border-width: 8px 8px 8px 0;
+    }
+
+    &::before {
+      z-index: 1;
+      border-right-color: #dedede;
+    }
+
+    &::after {
+      z-index: 2;
+      margin-left: 1px;
+      border-right-color: #f8f8f8;
+    }
+  }
+
+  &__body {
+    padding: 15px;
+    overflow: hidden;
+    font-family:
+      'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
+      FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
+      'Hiragino Sans GB W3', FontAwesome, sans-serif;
+    font-size: 14px;
+    color: #333;
+    background: #fff;
+  }
+
+  blockquote {
+    padding: 1px 0 1px 15px;
+    margin: 0;
+    font-family:
+      Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
+      FontAwesome, serif;
+    border-left: 4px solid #ddd;
+  }
+}
diff --git a/apps/web-ele/src/views/mp/components/msg/index.ts b/apps/web-ele/src/views/mp/components/msg/index.ts
new file mode 100644
index 000000000..fd766220b
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/msg/index.ts
@@ -0,0 +1,3 @@
+export { default } from './msg.vue';
+
+export { MsgType } from './types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue b/apps/web-ele/src/views/mp/components/msg/msg-event.vue
similarity index 66%
rename from apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue
rename to apps/web-ele/src/views/mp/components/msg/msg-event.vue
index 70c193082..2773c0389 100644
--- a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue
+++ b/apps/web-ele/src/views/mp/components/msg/msg-event.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { ElTag } from 'element-plus';
+
 const props = defineProps<{
   item: any;
 }>();
@@ -11,44 +13,44 @@ const item = ref(props.item);
 <template>
   <div>
     <div v-if="item.event === 'subscribe'">
-      <el-tag type="success">关注</el-tag>
+      <ElTag type="success">关注</ElTag>
     </div>
     <div v-else-if="item.event === 'unsubscribe'">
-      <el-tag type="danger">取消关注</el-tag>
+      <ElTag type="danger">取消关注</ElTag>
     </div>
     <div v-else-if="item.event === 'CLICK'">
-      <el-tag>点击菜单</el-tag>
+      <ElTag>点击菜单</ElTag>
       【{{ item.eventKey }}】
     </div>
     <div v-else-if="item.event === 'VIEW'">
-      <el-tag>点击菜单链接</el-tag>
+      <ElTag>点击菜单链接</ElTag>
       【{{ item.eventKey }}】
     </div>
     <div v-else-if="item.event === 'scancode_waitmsg'">
-      <el-tag>扫码结果</el-tag>
+      <ElTag>扫码结果</ElTag>
       【{{ item.eventKey }}】
     </div>
     <div v-else-if="item.event === 'scancode_push'">
-      <el-tag>扫码结果</el-tag>
+      <ElTag>扫码结果</ElTag>
       【{{ item.eventKey }}】
     </div>
     <div v-else-if="item.event === 'pic_sysphoto'">
-      <el-tag>系统拍照发图</el-tag>
+      <ElTag>系统拍照发图</ElTag>
     </div>
     <div v-else-if="item.event === 'pic_photo_or_album'">
-      <el-tag>拍照或者相册</el-tag>
+      <ElTag>拍照或者相册</ElTag>
     </div>
     <div v-else-if="item.event === 'pic_weixin'">
-      <el-tag>微信相册</el-tag>
+      <ElTag>微信相册</ElTag>
     </div>
     <div v-else-if="item.event === 'location_select'">
-      <el-tag>选择地理位置</el-tag>
+      <ElTag>选择地理位置</ElTag>
     </div>
     <div v-else-if="item.event === 'SCAN'">
-      <el-tag>扫码</el-tag>
+      <ElTag>扫码</ElTag>
     </div>
     <div v-else>
-      <el-tag type="danger">未知事件类型</el-tag>
+      <ElTag type="danger">未知事件类型</ElTag>
     </div>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue b/apps/web-ele/src/views/mp/components/msg/msg-list.vue
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue
rename to apps/web-ele/src/views/mp/components/msg/msg-list.vue
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue b/apps/web-ele/src/views/mp/components/msg/msg.vue
similarity index 78%
rename from apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue
rename to apps/web-ele/src/views/mp/components/msg/msg.vue
index 27c5318e8..454fba175 100644
--- a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue
+++ b/apps/web-ele/src/views/mp/components/msg/msg.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import WxLocation from '#/views/mp/modules/wx-location';
-import WxMusic from '#/views/mp/modules/wx-music';
-import WxNews from '#/views/mp/modules/wx-news';
-import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
-import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+import Location from '#/views/mp/components/location/location.vue';
+import Music from '#/views/mp/components/music/music.vue';
+import News from '#/views/mp/components/news/news.vue';
+import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
+import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
 
 import { MsgType } from '../types';
 import MsgEvent from './msg-event.vue';
@@ -26,7 +26,7 @@ const item = ref<any>(props.item);
     <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
 
     <div v-else-if="item.type === MsgType.Voice">
-      <WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
+      <VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
     </div>
 
     <div v-else-if="item.type === MsgType.Image">
@@ -39,7 +39,7 @@ const item = ref<any>(props.item);
       v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
       class="text-center"
     >
-      <WxVideoPlayer :url="item.mediaUrl" />
+      <VideoPlayer :url="item.mediaUrl" />
     </div>
 
     <div v-else-if="item.type === MsgType.Link" class="flex-1">
@@ -64,7 +64,7 @@ const item = ref<any>(props.item);
     </div>
 
     <div v-else-if="item.type === MsgType.Location">
-      <WxLocation
+      <Location
         :label="item.label"
         :location-y="item.locationY"
         :location-x="item.locationX"
@@ -72,11 +72,11 @@ const item = ref<any>(props.item);
     </div>
 
     <div v-else-if="item.type === MsgType.News" class="w-[300px]">
-      <WxNews :articles="item.articles" />
+      <News :articles="item.articles" />
     </div>
 
     <div v-else-if="item.type === MsgType.Music">
-      <WxMusic
+      <Music
         :title="item.title"
         :description="item.description"
         :thumb-media-url="item.thumbMediaUrl"
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/types.ts b/apps/web-ele/src/views/mp/components/msg/types.ts
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-msg/types.ts
rename to apps/web-ele/src/views/mp/components/msg/types.ts
diff --git a/apps/web-ele/src/views/mp/components/music/index.ts b/apps/web-ele/src/views/mp/components/music/index.ts
new file mode 100644
index 000000000..e866909f2
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/music/index.ts
@@ -0,0 +1 @@
+export { default } from './music.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-music/main.vue b/apps/web-ele/src/views/mp/components/music/music.vue
similarity index 94%
rename from apps/web-ele/src/views/mp/modules/wx-music/main.vue
rename to apps/web-ele/src/views/mp/components/music/music.vue
index 28688d785..69d4ea43a 100644
--- a/apps/web-ele/src/views/mp/modules/wx-music/main.vue
+++ b/apps/web-ele/src/views/mp/components/music/music.vue
@@ -2,7 +2,7 @@
   【微信消息 - 音乐】
 -->
 <script lang="ts" setup>
-defineOptions({ name: 'WxMusic' });
+defineOptions({ name: 'Music' });
 
 const props = defineProps({
   title: {
@@ -63,5 +63,5 @@ defineExpose({
 
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../wx-msg/card.scss');
+@import url('../msg/card.scss');
 </style>
diff --git a/apps/web-ele/src/views/mp/components/news/index.ts b/apps/web-ele/src/views/mp/components/news/index.ts
new file mode 100644
index 000000000..9cc5d64a6
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/news/index.ts
@@ -0,0 +1 @@
+export { default } from './news.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-news/main.vue b/apps/web-ele/src/views/mp/components/news/news.vue
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-news/main.vue
rename to apps/web-ele/src/views/mp/components/news/news.vue
diff --git a/apps/web-ele/src/views/mp/components/reply/index.ts b/apps/web-ele/src/views/mp/components/reply/index.ts
new file mode 100644
index 000000000..d2910f71d
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/reply/index.ts
@@ -0,0 +1,3 @@
+export { default } from './reply.vue';
+
+export { createEmptyReply, type Reply, ReplyType } from './types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/main.vue b/apps/web-ele/src/views/mp/components/reply/reply.vue
similarity index 63%
rename from apps/web-ele/src/views/mp/modules/wx-reply/main.vue
rename to apps/web-ele/src/views/mp/components/reply/reply.vue
index 929176a6f..85011049e 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/main.vue
+++ b/apps/web-ele/src/views/mp/components/reply/reply.vue
@@ -8,27 +8,28 @@
   ④ 支持发送【视频】消息时，支持新建视频
 -->
 <script lang="ts" setup>
-import type { Reply } from './modules/types';
+import type { Reply } from './types';
 
-import { computed, ref, unref, watch } from 'vue';
+import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
 import { ElRow, ElTabPane, ElTabs } from 'element-plus';
 
-import TabImage from './modules/tab-image.vue';
-import TabMusic from './modules/tab-music.vue';
-import TabNews from './modules/tab-news.vue';
-import TabText from './modules/tab-text.vue';
-import TabVideo from './modules/tab-video.vue';
-import TabVoice from './modules/tab-voice.vue';
-import { createEmptyReply, NewsType, ReplyType } from './modules/types';
+import { NewsType } from '../material-select/types';
+import TabImage from './tab-image.vue';
+import TabMusic from './tab-music.vue';
+import TabNews from './tab-news.vue';
+import TabText from './tab-text.vue';
+import TabVideo from './tab-video.vue';
+import TabVoice from './tab-voice.vue';
+import { createEmptyReply, ReplyType } from './types';
 
-defineOptions({ name: 'WxReplySelect' });
+defineOptions({ name: 'ReplySelect' });
 
 const props = withDefaults(
   defineProps<{
-    modelValue: Reply;
+    modelValue: Reply | undefined;
     newsType?: NewsType;
   }>(),
   {
@@ -38,40 +39,16 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
+// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
+const defaultReply: Reply = {
+  accountId: -1,
+  type: ReplyType.Text,
+};
+
 const reply = computed<Reply>({
-  get: () => props.modelValue,
+  get: () => props.modelValue || defaultReply,
   set: (val) => emit('update:modelValue', val),
 });
-// 作为多个标签保存各自Reply的缓存
-const tabCache = new Map<ReplyType, Reply>();
-// 采用独立的ref来保存当前tab，避免在watch标签变化，对reply进行赋值会产生了循环调用
-const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text);
-
-watch(
-  currentTab,
-  (newTab, oldTab) => {
-    // 第一次进入：oldTab 为 undefined
-    // 判断 newTab 是因为 Reply 为 Partial
-    if (oldTab === undefined || newTab === undefined) {
-      return;
-    }
-
-    tabCache.set(oldTab, unref(reply));
-
-    // 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
-    const temp = tabCache.get(newTab);
-    if (temp) {
-      reply.value = temp;
-    } else {
-      const newData = createEmptyReply(reply);
-      newData.type = newTab;
-      reply.value = newData;
-    }
-  },
-  {
-    immediate: true,
-  },
-);
 
 /** 清除除了`type`, `accountId`的字段 */
 function clear() {
@@ -84,7 +61,7 @@ defineExpose({
 </script>
 
 <template>
-  <ElTabs type="border-card" v-model="currentTab">
+  <ElTabs type="border-card" v-model="reply.type" @tab-change="clear">
     <!-- 类型 1：文本 -->
     <ElTabPane :name="ReplyType.Text">
       <template #label>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue b/apps/web-ele/src/views/mp/components/reply/tab-image.vue
similarity index 97%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-image.vue
index 2cd0b7d96..3f57da17c 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-image.vue
@@ -18,7 +18,7 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -122,7 +122,7 @@ function selectMaterial(item: any) {
           append-to-body
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="image"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue b/apps/web-ele/src/views/mp/components/reply/tab-music.vue
similarity index 97%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-music.vue
index fa46da9fe..8c50a01c1 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-music.vue
@@ -20,7 +20,7 @@ import {
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 // import { getAccessToken } from '@/utils/auth'
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
 
 // 设置上传的请求头部
 
@@ -129,7 +129,7 @@ function selectMaterial(item: any) {
           append-to-body
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="image"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue b/apps/web-ele/src/views/mp/components/reply/tab-news.vue
similarity index 88%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-news.vue
index bbc976307..fd3bc11a9 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-news.vue
@@ -7,10 +7,10 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
 
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
-import WxNews from '#/views/mp/modules/wx-news';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import News from '#/views/mp/components/news/news.vue';
 
-import { NewsType } from './types';
+import { NewsType } from '../material-select/types';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -45,7 +45,7 @@ function onDelete() {
         class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
         v-if="reply.articles && reply.articles.length > 0"
       >
-        <WxNews :articles="reply.articles" />
+        <News :articles="reply.articles" />
         <ElCol class="pt-[10px] text-center">
           <ElButton type="danger" circle @click="onDelete">
             <IconifyIcon icon="ep:delete" />
@@ -74,7 +74,7 @@ function onDelete() {
         append-to-body
         destroy-on-close
       >
-        <WxMaterialSelect
+        <MaterialSelect
           type="news"
           :account-id="reply.accountId"
           :news-type="newsType"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-text.vue b/apps/web-ele/src/views/mp/components/reply/tab-text.vue
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-text.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-text.vue
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue b/apps/web-ele/src/views/mp/components/reply/tab-video.vue
similarity index 93%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-video.vue
index 65be7db2e..eb94044b5 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-video.vue
@@ -19,8 +19,8 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
-import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -97,7 +97,7 @@ function selectMaterial(item: any) {
         placeholder="请输入描述"
       />
       <ElRow class="w-full pt-[10px] text-center" justify="center">
-        <WxVideoPlayer v-if="reply.url" :url="reply.url" />
+        <VideoPlayer v-if="reply.url" :url="reply.url" />
       </ElRow>
       <ElCol>
         <ElRow class="text-center" align="middle">
@@ -113,7 +113,7 @@ function selectMaterial(item: any) {
               append-to-body
               destroy-on-close
             >
-              <WxMaterialSelect
+              <MaterialSelect
                 type="video"
                 :account-id="reply.accountId"
                 @select-material="selectMaterial"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue b/apps/web-ele/src/views/mp/components/reply/tab-voice.vue
similarity index 94%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-voice.vue
index 295828191..eb891dafc 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-voice.vue
@@ -18,8 +18,8 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
-import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
 
 // 设置上传的请求头部
 
@@ -99,7 +99,7 @@ function selectMaterial(item: Reply) {
         {{ reply.name }}
       </p>
       <ElRow class="w-full pt-[10px] text-center" justify="center">
-        <WxVoicePlayer :url="reply.url" />
+        <VoicePlayer :url="reply.url" />
       </ElRow>
       <ElRow class="w-full pt-[10px] text-center" justify="center">
         <ElButton type="danger" circle @click="onDelete">
@@ -123,7 +123,7 @@ function selectMaterial(item: Reply) {
           append-to-body
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="voice"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts b/apps/web-ele/src/views/mp/components/reply/types.ts
similarity index 90%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts
rename to apps/web-ele/src/views/mp/components/reply/types.ts
index 67571ef59..cecfba786 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts
+++ b/apps/web-ele/src/views/mp/components/reply/types.ts
@@ -30,11 +30,6 @@ interface _Reply {
 
 type Reply = _Reply; // Partial<_Reply>
 
-enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
 /** 利用旧的reply[accountId, type]初始化新的Reply */
 const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   return {
@@ -55,4 +50,4 @@ const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   };
 };
 
-export { createEmptyReply, NewsType, type Reply, ReplyType };
+export { createEmptyReply, type Reply, ReplyType };
diff --git a/apps/web-ele/src/views/mp/components/video-play/index.ts b/apps/web-ele/src/views/mp/components/video-play/index.ts
new file mode 100644
index 000000000..72f3c5b10
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/video-play/index.ts
@@ -0,0 +1 @@
+export { default } from './video-play.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue b/apps/web-ele/src/views/mp/components/video-play/video-play.vue
similarity index 85%
rename from apps/web-ele/src/views/mp/modules/wx-video-play/main.vue
rename to apps/web-ele/src/views/mp/components/video-play/video-play.vue
index 1b7260576..8132b47e0 100644
--- a/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue
+++ b/apps/web-ele/src/views/mp/components/video-play/video-play.vue
@@ -13,11 +13,14 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { VideoPlayer } from '@videojs-player/vue';
+import { ElDialog } from 'element-plus';
 
 import 'video.js/dist/video-js.css';
 
-defineOptions({ name: 'WxVideoPlayer' });
+defineOptions({ name: 'VideoPlayer' });
 
 const props = defineProps({
   url: {
@@ -40,13 +43,13 @@ const playVideo = () => {
 <template>
   <div @click="playVideo()">
     <!-- 提示 -->
-    <div>
-      <Icon icon="ep:video-play" :size="32" class="mr-5px" />
+    <div class="flex cursor-pointer flex-col items-center">
+      <IconifyIcon icon="ep:video-play" :size="32" class="mr-5px" />
       <p class="text-sm">点击播放视频</p>
     </div>
 
     <!-- 弹窗播放 -->
-    <el-dialog v-model="dialogVideo" title="视频播放" append-to-body>
+    <ElDialog v-model="dialogVideo" title="视频播放" append-to-body>
       <VideoPlayer
         v-if="dialogVideo"
         class="video-player vjs-big-play-centered"
@@ -70,6 +73,6 @@ const playVideo = () => {
       <!--        @canplay="handleEvent($event)"-->
       <!--        @canplaythrough="handleEvent($event)"-->
       <!--        @timeupdate="handleEvent(player?.currentTime())"-->
-    </el-dialog>
+    </ElDialog>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/components/voice-play/index.ts b/apps/web-ele/src/views/mp/components/voice-play/index.ts
new file mode 100644
index 000000000..6bd5e5712
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/voice-play/index.ts
@@ -0,0 +1 @@
+export { default } from './voice-play.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue b/apps/web-ele/src/views/mp/components/voice-play/voice-play.vue
similarity index 92%
rename from apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue
rename to apps/web-ele/src/views/mp/components/voice-play/voice-play.vue
index 23b721380..d41a2f0b5 100644
--- a/apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue
+++ b/apps/web-ele/src/views/mp/components/voice-play/voice-play.vue
@@ -12,10 +12,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import BenzAMRRecorder from 'benz-amr-recorder';
 
-defineOptions({ name: 'WxVoicePlayer' });
+defineOptions({ name: 'VoicePlayer' });
 
 const props = defineProps({
   url: {
@@ -79,8 +81,8 @@ const amrStop = () => {
 <template>
   <div class="wx-voice-div" @click="playVoice">
     <el-icon>
-      <Icon v-if="playing !== true" icon="ep:video-play" :size="32" />
-      <Icon v-else icon="ep:video-pause" :size="32" />
+      <IconifyIcon v-if="playing !== true" icon="ep:video-play" :size="32" />
+      <IconifyIcon v-else icon="ep:video-pause" :size="32" />
       <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
     </el-icon>
     <div v-if="content">
diff --git a/apps/web-ele/src/views/mp/draft/data.ts b/apps/web-ele/src/views/mp/draft/data.ts
index 89492f63e..de0f02730 100644
--- a/apps/web-ele/src/views/mp/draft/data.ts
+++ b/apps/web-ele/src/views/mp/draft/data.ts
@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { markRaw } from 'vue';
 
-import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+import AccountSelect from '#/views/mp/components/account-select/account-select.vue';
 
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
@@ -35,7 +35,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(WxAccountSelect),
+      component: markRaw(AccountSelect),
     },
   ];
 }
diff --git a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
index 29439f556..17f61b184 100644
--- a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
 import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
 
 // 设置上传的请求头部
 
@@ -130,7 +130,7 @@ function onUploadError(err: Error) {
         append-to-body
         destroy-on-close
       >
-        <WxMaterialSelect
+        <MaterialSelect
           type="image"
           :account-id="accountId!"
           @select-material="onMaterialSelected"
diff --git a/apps/web-ele/src/views/mp/draft/modules/draft-table.vue b/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
index 46f6e7440..8f13fa71c 100644
--- a/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Article } from './types';
 
-import WxNews from '#/views/mp/modules/wx-news';
+import News from '#/views/mp/components/news/news.vue';
 
 defineOptions({ name: 'DraftTableCell' });
 
@@ -13,7 +13,7 @@ const props = defineProps<{
 <template>
   <div class="draft-content">
     <div v-if="props.row.content && props.row.content.newsItem">
-      <WxNews :articles="props.row.content.newsItem" />
+      <News :articles="props.row.content.newsItem" />
     </div>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/menu/data.ts b/apps/web-ele/src/views/mp/menu/data.ts
index 2a22837ba..171d47b7e 100644
--- a/apps/web-ele/src/views/mp/menu/data.ts
+++ b/apps/web-ele/src/views/mp/menu/data.ts
@@ -1,3 +1,6 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { getSimpleAccountList } from '#/api/mp/account';
 /** 菜单未选中标识 */
 export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
 
@@ -7,3 +10,20 @@ export enum Level {
   Parent = '1',
   Undefined = '0',
 }
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleAccountList,
+        labelField: 'name',
+        valueField: 'id',
+        autoSelect: 'first',
+        placeholder: '请选择公众号',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/menu/index.vue b/apps/web-ele/src/views/mp/menu/index.vue
index bc725817d..ff9511646 100644
--- a/apps/web-ele/src/views/mp/menu/index.vue
+++ b/apps/web-ele/src/views/mp/menu/index.vue
@@ -1,24 +1,28 @@
 <script lang="ts" setup>
 import type { Menu, RawMenu } from './modules/types';
 
-import { ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 
 import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
 
-import {
-  ElButton,
-  ElForm,
-  ElFormItem,
-  ElLoading,
-  ElMessage,
-} from 'element-plus';
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
 
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleAccountList } from '#/api/mp/account';
 import * as MpMenuApi from '#/api/mp/menu';
 import * as UtilsTree from '#/utils/tree';
-import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
+import {
+  Level,
+  MENU_NOT_SELECTED,
+  useGridFormSchema,
+} from '#/views/mp/menu/data';
 import MenuEditor from '#/views/mp/menu/modules/menu-editor.vue';
 import MenuPreviewer from '#/views/mp/menu/modules/menu-previewer.vue';
-import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+// Assets for backgrounds
+import iphoneBackImg from './assets/iphone_backImg.png';
+import menuFootImg from './assets/menu_foot.png';
+import menuHeadImg from './assets/menu_head.png';
 
 defineOptions({ name: 'MpMenu' });
 
@@ -56,10 +60,32 @@ const tempSelfObj = ref<{
 });
 const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
 
+// 创建表单
+const [AccountForm, accountFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-[240px]',
+    },
+  },
+  layout: 'horizontal',
+  schema: useGridFormSchema(),
+  wrapperClass: 'grid-cols-1',
+  showDefaultActions: false,
+  handleValuesChange: async (values, changedFields) => {
+    // 当 accountId 字段变化时（包括 autoSelect 自动选择），同步更新 accountId
+    if (changedFields.includes('accountId') && values.accountId) {
+      await onAccountChanged(values);
+    }
+  },
+});
+
 /** 侦听公众号变化 */
-function onAccountChanged(id: number, name: string) {
-  accountId.value = id;
-  accountName.value = name;
+async function onAccountChanged(values: Record<string, any>) {
+  accountId.value = values.accountId;
+  // 从 API 获取公众号列表并查找对应的公众号名称
+  const accountList = await getSimpleAccountList();
+  const account = accountList.find((item) => item.id === values.accountId);
+  accountName.value = account?.name || '';
   getList();
 }
 
@@ -257,6 +283,27 @@ function menuToBackend(menu: any) {
 
   return result;
 }
+
+/** 初始化账号ID - 作为备用方案，防止 handleValuesChange 未触发 */
+async function initAccountId() {
+  // 等待表单初始化完成
+  await nextTick();
+  try {
+    const values = await accountFormApi.getValues();
+    if (values?.accountId && accountId.value === -1) {
+      // 如果表单有值但 accountId 还是初始值，则手动触发一次
+      await onAccountChanged(values);
+    }
+  } catch {
+    // 忽略错误
+  }
+}
+
+// 组件挂载时初始化账号ID
+onMounted(async () => {
+  await nextTick();
+  await initAccountId();
+});
 </script>
 
 <template>
@@ -267,21 +314,34 @@ function menuToBackend(menu: any) {
 
     <!-- 搜索工作栏 -->
     <!-- <ContentWrap> -->
-    <ElForm :inline="true" label-width="68px" class="-mb-15px w-240px">
-      <ElFormItem label="公众号" prop="accountId" class="w-240px">
-        <WxAccountSelect @change="onAccountChanged" />
-      </ElFormItem>
-    </ElForm>
+    <AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
+
     <!-- </ContentWrap> -->
 
     <ContentWrap>
-      <div class="clearfix public-account-management" v-loading="loading">
+      <div
+        class="public-account-management mx-auto flex w-full max-w-[1200px] flex-wrap items-start gap-[20px]"
+        v-loading="loading"
+      >
         <!--左边配置菜单-->
-        <div class="left">
-          <div class="weixin-hd">
-            <div class="weixin-title">{{ accountName }}</div>
+        <div
+          class="left relative box-border block h-[715px] w-[350px] flex-shrink-0 bg-[length:100%_auto] bg-no-repeat px-[25px] pb-[88px] pt-[518px]"
+          :style="{ backgroundImage: `url(${iphoneBackImg})` }"
+        >
+          <div
+            class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%_auto] bg-no-repeat text-center text-white"
+            :style="{ backgroundImage: `url(${menuHeadImg})` }"
+          >
+            <div
+              class="absolute left-0 top-[33px] w-full text-center text-[14px] text-white"
+            >
+              {{ accountName }}
+            </div>
           </div>
-          <div class="clearfix weixin-menu">
+          <div
+            class="weixin-menu h-[46px] bg-no-repeat pl-[43px] text-[12px]"
+            :style="{ backgroundImage: `url(${menuFootImg})` }"
+          >
             <MenuPreviewer
               v-model="menuList"
               :account-id="accountId"
@@ -291,9 +351,9 @@ function menuToBackend(menu: any) {
               @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
             />
           </div>
-          <div class="save-div">
+          <div class="mt-[15px] text-center">
             <ElButton
-              class="save-btn"
+              class="mx-2"
               type="success"
               @click="onSave"
               v-access:code="['mp:menu:save']"
@@ -301,7 +361,7 @@ function menuToBackend(menu: any) {
               保存并发布菜单
             </ElButton>
             <ElButton
-              class="save-btn"
+              class="mx-2"
               type="danger"
               @click="onClear"
               v-access:code="['mp:menu:delete']"
@@ -311,7 +371,10 @@ function menuToBackend(menu: any) {
           </div>
         </div>
         <!--右边配置-->
-        <div class="right" v-if="showRightPanel">
+        <div
+          class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
+          v-if="showRightPanel"
+        >
           <MenuEditor
             :account-id="accountId"
             :is-parent="isParent"
@@ -320,94 +383,13 @@ function menuToBackend(menu: any) {
           />
         </div>
         <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
-        <div v-else class="right">
-          <p>请选择菜单配置</p>
+        <div
+          v-else
+          class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
+        >
+          <p class="text-left">请选择菜单配置</p>
         </div>
       </div>
     </ContentWrap>
   </Page>
 </template>
-
-<style lang="scss" scoped>
-/* 公共颜色变量 */
-.clearfix {
-  *zoom: 1;
-}
-
-.clearfix::after {
-  clear: both;
-  display: table;
-  content: '';
-}
-
-div {
-  text-align: left;
-}
-
-.weixin-hd {
-  position: relative;
-  bottom: 426px;
-  left: 0;
-  width: 300px;
-  height: 64px;
-  color: #fff;
-  text-align: center;
-  background: transparent url('./assets/menu_head.png') no-repeat 0 0;
-  background-position: 0 0;
-  background-size: 100%;
-}
-
-.weixin-title {
-  position: absolute;
-  top: 33px;
-  left: 0;
-  width: 100%;
-  font-size: 14px;
-  color: #fff;
-  text-align: center;
-}
-
-.weixin-menu {
-  padding-left: 43px;
-  font-size: 12px;
-  background: transparent url('./assets/menu_foot.png') no-repeat 0 0;
-}
-
-.public-account-management {
-  width: 1200px;
-  // min-width: 1200px;
-  margin: 0 auto;
-
-  .left {
-    position: relative;
-    float: left;
-    box-sizing: border-box;
-    display: block;
-    width: 350px;
-    height: 715px;
-    padding: 518px 25px 88px;
-    background: url('./assets/iphone_backImg.png') no-repeat;
-    background-size: 100% auto;
-
-    .save-div {
-      margin-top: 15px;
-      text-align: center;
-
-      .save-btn {
-        bottom: 20px;
-        left: 100px;
-      }
-    }
-  }
-
-  /* 右边菜单内容 */
-  .right {
-    float: left;
-    box-sizing: border-box;
-    width: 63%;
-    padding: 20px;
-    margin-left: 20px;
-    background-color: #e8e7e7;
-  }
-}
-</style>
diff --git a/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue b/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
index 00193bcf2..00352d968 100644
--- a/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
@@ -14,9 +14,9 @@ import {
   ElSelect,
 } from 'element-plus';
 
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
-import WxNews from '#/views/mp/modules/wx-news';
-import WxReplySelect from '#/views/mp/modules/wx-reply';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import News from '#/views/mp/components/news/news.vue';
+import ReplySelect from '#/views/mp/components/reply/reply.vue';
 
 import menuOptions from './menuOptions';
 
@@ -82,199 +82,150 @@ function deleteMaterial() {
 </script>
 
 <template>
-  <div>
-    <div class="configure-page">
-      <div class="delete-btn">
-        <ElButton type="danger" @click="emit('delete')">
-          <IconifyIcon icon="ep:delete" />
-          删除当前菜单
-        </ElButton>
-      </div>
-      <div>
-        <span>菜单名称：</span>
+  <div class="space-y-5">
+    <div class="flex justify-end">
+      <ElButton type="danger" @click="emit('delete')">
+        <IconifyIcon icon="ep:delete" />
+        删除当前菜单
+      </ElButton>
+    </div>
+    <div class="flex items-center gap-3">
+      <span class="w-[100px] text-base">菜单名称：</span>
+      <ElInput
+        class="w-[40%] min-w-[220px]"
+        v-model="menu.name"
+        placeholder="请输入菜单名称"
+        :maxlength="isParent ? 4 : 7"
+        clearable
+      />
+    </div>
+    <div v-if="isLeave" class="space-y-5">
+      <div class="flex items-center gap-3">
+        <span class="w-[100px] text-base">菜单标识：</span>
         <ElInput
-          class="input-width"
-          v-model="menu.name"
-          placeholder="请输入菜单名称"
-          :maxlength="isParent ? 4 : 7"
+          class="w-[40%] min-w-[220px]"
+          v-model="menu.menuKey"
+          placeholder="请输入菜单 KEY"
           clearable
         />
       </div>
-      <div v-if="isLeave">
-        <div class="menu-content">
-          <span>菜单标识：</span>
-          <ElInput
-            class="input-width"
-            v-model="menu.menuKey"
-            placeholder="请输入菜单 KEY"
-            clearable
+      <div class="flex items-center gap-3">
+        <span class="w-[100px] text-base">菜单内容：</span>
+        <ElSelect
+          v-model="menu.type"
+          clearable
+          placeholder="请选择"
+          class="w-[40%] min-w-[220px]"
+        >
+          <ElOption
+            v-for="item in menuOptions"
+            :label="item.label"
+            :value="item.value"
+            :key="item.value"
           />
-        </div>
-        <div class="menu-content">
-          <span>菜单内容：</span>
-          <ElSelect
-            v-model="menu.type"
-            clearable
-            placeholder="请选择"
-            class="menu_option"
-          >
-            <ElOption
-              v-for="item in menuOptions"
-              :label="item.label"
-              :value="item.value"
-              :key="item.value"
-            />
-          </ElSelect>
-        </div>
-        <div class="configur-content" v-if="menu.type === 'view'">
-          <span>跳转链接：</span>
+        </ElSelect>
+      </div>
+      <div
+        class="rounded bg-white px-3 py-5 shadow-sm"
+        v-if="menu.type === 'view'"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-base">跳转链接：</span>
           <ElInput
-            class="input-width"
+            class="w-[40%] min-w-[220px]"
             v-model="menu.url"
             placeholder="请输入链接"
             clearable
           />
         </div>
-        <div class="configur-content" v-if="menu.type === 'miniprogram'">
-          <div class="applet">
-            <span>小程序的 appid ：</span>
-            <ElInput
-              class="input-width"
-              v-model="menu.miniProgramAppId"
-              placeholder="请输入小程序的appid"
-              clearable
-            />
-          </div>
-          <div class="applet">
-            <span>小程序的页面路径：</span>
-            <ElInput
-              class="input-width"
-              v-model="menu.miniProgramPagePath"
-              placeholder="请输入小程序的页面路径，如：pages/index"
-              clearable
-            />
-          </div>
-          <div class="applet">
-            <span>小程序的备用网页：</span>
-            <ElInput
-              class="input-width"
-              v-model="menu.url"
-              placeholder="不支持小程序的老版本客户端将打开本网页"
-              clearable
-            />
-          </div>
-          <p class="blue">
-            tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
-          </p>
+      </div>
+      <div
+        class="space-y-5 rounded bg-white px-3 py-5 shadow-sm"
+        v-if="menu.type === 'miniprogram'"
+      >
+        <div class="flex items-center gap-3">
+          <span class="inline-block w-[25%] min-w-[120px] text-base">
+            小程序的 appid ：
+          </span>
+          <ElInput
+            class="w-[40%] min-w-[220px]"
+            v-model="menu.miniProgramAppId"
+            placeholder="请输入小程序的appid"
+            clearable
+          />
         </div>
-        <div
-          class="configur-content"
-          v-if="menu.type === 'article_view_limited'"
-        >
-          <ElRow>
-            <div class="select-item" v-if="menu && menu.replyArticles">
-              <WxNews :articles="menu.replyArticles" />
-              <ElRow class="ope-row" justify="center" align="middle">
-                <ElButton type="danger" circle @click="deleteMaterial">
-                  <IconifyIcon icon="ep:delete" />
+        <div class="flex items-center gap-3">
+          <span class="inline-block w-[25%] min-w-[120px] text-base">
+            小程序的页面路径：
+          </span>
+          <ElInput
+            class="w-[40%] min-w-[220px]"
+            v-model="menu.miniProgramPagePath"
+            placeholder="请输入小程序的页面路径，如：pages/index"
+            clearable
+          />
+        </div>
+        <div class="flex items-center gap-3">
+          <span class="inline-block w-[25%] min-w-[120px] text-base">
+            小程序的备用网页：
+          </span>
+          <ElInput
+            class="w-[40%] min-w-[220px]"
+            v-model="menu.url"
+            placeholder="不支持小程序的老版本客户端将打开本网页"
+            clearable
+          />
+        </div>
+        <p class="text-sm text-[#29b6f6]">
+          tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
+        </p>
+      </div>
+      <div
+        class="rounded bg-white px-3 py-5 shadow-sm"
+        v-if="menu.type === 'article_view_limited'"
+      >
+        <ElRow>
+          <div
+            class="mx-auto mb-2.5 w-[280px] border border-[#eaeaea] p-2.5"
+            v-if="menu && menu.replyArticles"
+          >
+            <News :articles="menu.replyArticles" />
+            <ElRow class="pt-2.5 text-center" justify="center" align="middle">
+              <ElButton type="danger" circle @click="deleteMaterial">
+                <IconifyIcon icon="ep:delete" />
+              </ElButton>
+            </ElRow>
+          </div>
+          <div v-else class="w-full">
+            <ElRow justify="center">
+              <ElCol :span="24" class="text-center">
+                <ElButton type="success" @click="showNewsDialog = true">
+                  素材库选择
+                  <IconifyIcon icon="ep:circle-check" />
                 </ElButton>
-              </ElRow>
-            </div>
-            <div v-else>
-              <ElRow justify="center">
-                <ElCol :span="24" style="text-align: center">
-                  <ElButton type="success" @click="showNewsDialog = true">
-                    素材库选择
-                    <IconifyIcon icon="ep:circle-check" />
-                  </ElButton>
-                </ElCol>
-              </ElRow>
-            </div>
-            <ElDialog
-              title="选择图文"
-              v-model="showNewsDialog"
-              width="80%"
-              destroy-on-close
-            >
-              <WxMaterialSelect
-                type="news"
-                :account-id="props.accountId"
-                @select-material="selectMaterial"
-              />
-            </ElDialog>
-          </ElRow>
-        </div>
-        <div
-          class="configur-content"
-          v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
-        >
-          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
-        </div>
+              </ElCol>
+            </ElRow>
+          </div>
+          <ElDialog
+            title="选择图文"
+            v-model="showNewsDialog"
+            width="80%"
+            destroy-on-close
+          >
+            <MaterialSelect
+              type="news"
+              :account-id="props.accountId"
+              @select-material="selectMaterial"
+            />
+          </ElDialog>
+        </ElRow>
+      </div>
+      <div
+        class="rounded bg-white px-3 py-5 shadow-sm"
+        v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
+      >
+        <ReplySelect v-model="menu.reply" />
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.el-input {
-  width: 70%;
-  margin-right: 2%;
-}
-
-.configure-page {
-  .delete-btn {
-    margin-bottom: 15px;
-    text-align: right;
-  }
-
-  .menu-content {
-    margin-top: 20px;
-  }
-
-  .configur-content {
-    padding: 20px 10px;
-    margin-top: 20px;
-    background-color: #fff;
-    border-radius: 5px;
-
-    .select-item {
-      width: 280px;
-      padding: 10px;
-      margin: 0 auto 10px;
-      border: 1px solid #eaeaea;
-
-      .ope-row {
-        padding-top: 10px;
-        text-align: center;
-      }
-    }
-  }
-
-  .blue {
-    margin-top: 10px;
-    color: #29b6f6;
-  }
-
-  .applet {
-    margin-bottom: 20px;
-
-    span {
-      width: 20%;
-    }
-  }
-
-  .input-width {
-    width: 40%;
-  }
-
-  .material {
-    .input-width {
-      width: 30%;
-    }
-
-    .el-textarea {
-      width: 80%;
-    }
-  }
-}
-</style>
diff --git a/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue b/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
index ab1a37978..1b7c5a810 100644
--- a/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
@@ -127,17 +127,26 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
     @end="onParentDragEnd"
   >
     <template #item="{ element: parent, index: x }">
-      <div class="menu-bottom">
+      <div
+        class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
+      >
         <!-- 一级菜单 -->
         <div
+          class="flex h-11 w-full items-center justify-center border leading-[44px]"
+          :class="
+            props.activeIndex === `${x}`
+              ? 'border-[#2bb673]'
+              : 'border-transparent'
+          "
           @click="menuClicked(parent, x)"
-          class="menu-item"
-          :class="{ active: props.activeIndex === `${x}` }"
         >
           <IconifyIcon icon="ep:fold" color="black" />{{ parent.name }}
         </div>
         <!-- 以下为二级菜单-->
-        <div class="submenu" v-if="props.parentIndex === x && parent.children">
+        <div
+          class="absolute bottom-[45px] w-[85.5px]"
+          v-if="props.parentIndex === x && parent.children"
+        >
           <draggable
             v-model="parent.children"
             item-key="id"
@@ -146,11 +155,17 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
             @end="onChildDragEnd"
           >
             <template #item="{ element: child, index: y }">
-              <div class="menu-bottom subtitle">
+              <div
+                class="relative float-left box-border block w-[85.5px] border border-[#ebedee] bg-white text-center"
+              >
                 <div
-                  class="menu-sub-item"
+                  class="box-border h-11 border leading-[44px]"
+                  :class="
+                    props.activeIndex === `${x}-${y}`
+                      ? 'border-[#2bb673]'
+                      : 'border-transparent'
+                  "
                   v-if="parent.children"
-                  :class="{ active: props.activeIndex === `${x}-${y}` }"
                   @click="subMenuClicked(child, x, y)"
                 >
                   {{ child.name }}
@@ -160,11 +175,11 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
           </draggable>
           <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
           <div
-            class="menu-bottom menu-addicon"
+            class="relative float-left box-border flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center"
             v-if="!parent.children || parent.children.length < 5"
             @click="addSubMenu(x, parent)"
           >
-            <IconifyIcon icon="ep:plus" class="plus" />
+            <IconifyIcon icon="ep:plus" class="" />
           </div>
         </div>
       </div>
@@ -173,80 +188,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
 
   <!-- 一级菜单加号 -->
   <div
-    class="menu-bottom menu-addicon"
+    class="relative float-left box-border flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center"
     v-if="menuList.length < 3"
     @click="addMenu"
   >
-    <IconifyIcon icon="ep:plus" class="plus" />
+    <IconifyIcon icon="ep:plus" class="" />
   </div>
 </template>
-
 <style lang="scss" scoped>
-.menu-bottom {
-  position: relative;
-  float: left;
-  box-sizing: border-box;
-  display: block;
-  width: 85.5px;
-  text-align: center;
-  cursor: pointer;
-  background-color: #fff;
-  border: 1px solid #ebedee;
-
-  &.menu-addicon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 46px;
-    line-height: 46px;
-
-    .plus {
-      color: #2bb673;
-    }
-  }
-
-  .menu-item {
-    // text-align: center;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 44px;
-    line-height: 44px;
-
-    &.active {
-      border: 1px solid #2bb673;
-    }
-  }
-
-  .menu-sub-item {
-    box-sizing: border-box;
-    height: 44px;
-    line-height: 44px;
-    text-align: center;
-
-    &.active {
-      border: 1px solid #2bb673;
-    }
-  }
-}
-
-/* 第二级菜单 */
-.submenu {
-  position: absolute;
-  bottom: 45px;
-  width: 85.5px;
-
-  .subtitle {
-    box-sizing: border-box;
-    background-color: #fff;
-  }
-}
-
 .draggable-ghost {
-  background: #f7fafc;
-  border: 1px solid #4299e1;
-  opacity: 0.5;
+  @apply border border-[#4299e1] bg-[#f7fafc] opacity-50;
 }
 </style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts b/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts
deleted file mode 100644
index 374d993fe..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-location/index.ts b/apps/web-ele/src/views/mp/modules/wx-location/index.ts
deleted file mode 100644
index 374d993fe..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-location/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/index.ts b/apps/web-ele/src/views/mp/modules/wx-msg/index.ts
deleted file mode 100644
index 048afc95f..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-msg/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default } from './main.vue';
-
-export { MsgType } from './types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/main.vue b/apps/web-ele/src/views/mp/modules/wx-msg/main.vue
deleted file mode 100644
index 5d9ad4039..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-msg/main.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  芋道源码：
-  ① 移除暂时用不到的 websocket
-  ② 代码优化，补充注释，提升阅读性
--->
-<script lang="ts" setup>
-import type { User } from './types';
-
-import type { Reply } from '#/views/mp/modules/wx-reply';
-
-import { nextTick, onMounted, reactive, ref, unref } from 'vue';
-
-import { ElMessage } from 'element-plus';
-
-import { getMessagePage, sendMessage } from '#/api/mp/message';
-import { getUser } from '#/api/mp/user';
-import profile from '#/assets/imgs/profile.jpg';
-import WxReplySelect, { ReplyType } from '#/views/mp/modules/wx-reply';
-
-import MsgList from './modules/msg-list.vue';
-
-defineOptions({ name: 'WxMsg' });
-
-const props = defineProps({
-  userId: {
-    type: Number,
-    required: true,
-  },
-});
-
-const message = ElMessage; // 消息弹窗
-const accountId = ref(-1); // 公众号ID，需要通过userId初始化
-const loading = ref(false); // 消息列表是否正在加载中
-const hasMore = ref(true); // 是否可以加载更多
-const list = ref<any[]>([]); // 消息列表
-const queryParams = reactive({
-  pageNo: 1, // 当前页数
-  pageSize: 14, // 每页显示多少条
-  accountId,
-});
-
-// 由于微信不再提供昵称，直接使用"用户"展示
-const user: User = reactive({
-  nickname: '用户',
-  avatar: profile,
-  accountId, // 公众号账号编号
-});
-
-// ========= 消息发送 =========
-const sendLoading = ref(false); // 发送消息是否加载中
-// 微信发送消息
-const reply = ref<Reply>({
-  type: ReplyType.Text,
-  accountId: -1,
-  articles: [],
-});
-
-const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null); // WxReplySelect组件ref，用于消息发送成功后清除内容
-const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
-
-/** 完成加载 */
-onMounted(async () => {
-  const data = await getUser(props.userId);
-  user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname;
-  // API 返回的数据可能包含 headImageUrl，但类型定义中没有，使用类型断言
-  const userData = data as typeof data & { headImageUrl?: string };
-  user.avatar =
-    userData.headImageUrl && userData.headImageUrl.length > 0
-      ? userData.headImageUrl
-      : user.avatar;
-  accountId.value = data.accountId;
-  reply.value.accountId = data.accountId;
-
-  refreshChange();
-});
-
-/** 执行发送 */
-async function sendMsg() {
-  if (!unref(reply)) {
-    return;
-  }
-  // 公众号限制：客服消息，公众号只允许发送一条
-  if (
-    reply.value.type === ReplyType.News &&
-    reply.value.articles &&
-    reply.value.articles.length > 1
-  ) {
-    reply.value.articles = [reply.value.articles[0]];
-    message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
-  }
-
-  // 注意：sendMessage API 需要 openid，但这里传入的是 userId
-  // 这可能是后端 API 的特殊处理，使用类型断言绕过类型检查
-  const data = await sendMessage({
-    userId: props.userId,
-    ...reply.value,
-  } as any);
-  sendLoading.value = false;
-
-  list.value = [...list.value, data];
-  await scrollToBottom();
-
-  // 发送后清空数据
-  replySelectRef.value?.clear();
-}
-
-/** 加载更多 */
-function loadMore() {
-  queryParams.pageNo++;
-  getPage(queryParams, null);
-}
-
-/** 获取分页数据 */
-async function getPage(page: any, params: any = null) {
-  loading.value = true;
-  const dataTemp = await getMessagePage(
-    Object.assign(
-      {
-        pageNo: page.pageNo,
-        pageSize: page.pageSize,
-        userId: props.userId,
-        accountId: page.accountId,
-      },
-      params,
-    ),
-  );
-
-  const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
-  // 处理数据
-  const data = dataTemp.list.reverse();
-  list.value = [...data, ...list.value];
-  loading.value = false;
-  if (data.length < queryParams.pageSize || data.length === 0) {
-    hasMore.value = false;
-  }
-  queryParams.pageNo = page.pageNo;
-  queryParams.pageSize = page.pageSize;
-  // 滚动到原来的位置
-  if (queryParams.pageNo === 1) {
-    // 定位到消息底部
-    await scrollToBottom();
-  } else if (data.length > 0) {
-    // 定位滚动条
-    await nextTick();
-    if (scrollHeight !== 0 && msgDivRef.value) {
-      msgDivRef.value.scrollTop =
-        msgDivRef.value.scrollHeight - scrollHeight - 100;
-    }
-  }
-}
-
-/** 刷新消息 */
-function refreshChange() {
-  getPage(queryParams);
-}
-
-/** 定位到消息底部 */
-async function scrollToBottom() {
-  await nextTick();
-  if (msgDivRef.value) {
-    msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
-  }
-}
-</script>
-
-<template>
-  <ContentWrap>
-    <div
-      class="ml-[10px] mr-[10px] h-[50vh] overflow-auto bg-[#eaeaea]"
-      ref="msgDivRef"
-    >
-      <!-- 加载更多 -->
-      <div v-loading="loading"></div>
-      <div v-if="!loading">
-        <div
-          class="cursor-pointer py-5 text-center"
-          v-if="hasMore"
-          @click="loadMore"
-        >
-          <span class="text-[#999]">点击加载更多</span>
-        </div>
-        <div class="py-5 text-center" v-if="!hasMore">
-          <span class="text-[#999]">没有更多了</span>
-        </div>
-      </div>
-
-      <!-- 消息列表 -->
-      <MsgList :list="list" :account-id="accountId" :user="user" />
-    </div>
-
-    <div class="p-[10px]" v-loading="sendLoading">
-      <WxReplySelect ref="replySelectRef" v-model="reply" />
-      <el-button type="success" class="float-right mb-2 mt-2" @click="sendMsg">
-        发送(S)
-      </el-button>
-    </div>
-  </ContentWrap>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-music/index.ts b/apps/web-ele/src/views/mp/modules/wx-music/index.ts
deleted file mode 100644
index 374d993fe..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-music/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-news/index.ts b/apps/web-ele/src/views/mp/modules/wx-news/index.ts
deleted file mode 100644
index 374d993fe..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-news/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/index.ts b/apps/web-ele/src/views/mp/modules/wx-reply/index.ts
deleted file mode 100644
index 8696f5c53..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-reply/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { default } from './main.vue';
-
-export {
-  createEmptyReply,
-  NewsType,
-  type Reply,
-  ReplyType,
-} from './modules/types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts b/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts
deleted file mode 100644
index 374d993fe..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts b/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts
deleted file mode 100644
index 374d993fe..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/packages/constants/src/system-enum.ts b/packages/constants/src/system-enum.ts
index e07125c43..617afafd6 100644
--- a/packages/constants/src/system-enum.ts
+++ b/packages/constants/src/system-enum.ts
@@ -3,6 +3,7 @@
  *
  * 枚举类
  */
+// TODO @AI：后面拆分成 AI、ERP、OA 这种枚举
 
 /**
  * AI 平台的枚举