diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index f9a0862ed..fcc647708 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-antd/src/api/crm/business/index.ts b/apps/web-antd/src/api/crm/business/index.ts
index ec544b92d..a1ff09e6f 100644
--- a/apps/web-antd/src/api/crm/business/index.ts
+++ b/apps/web-antd/src/api/crm/business/index.ts
@@ -40,6 +40,7 @@ export namespace CrmBusinessApi {
     totalProductPrice: number;
     totalPrice: number;
     discountPercent: number;
+    status?: number;
     remark: string;
     creator: string; // 创建人
     creatorName?: string; // 创建人名称
@@ -47,6 +48,12 @@ export namespace CrmBusinessApi {
     updateTime: Date; // 更新时间
     products?: BusinessProduct[];
   }
+
+  export interface BusinessStatus {
+    id: number;
+    statusId: number | undefined;
+    endStatus: number | undefined;
+  }
 }
 
 /** 查询商机列表 */
@@ -90,7 +97,7 @@ export function updateBusiness(data: CrmBusinessApi.Business) {
 }
 
 /** 修改商机状态 */
-export function updateBusinessStatus(data: CrmBusinessApi.Business) {
+export function updateBusinessStatus(data: CrmBusinessApi.BusinessStatus) {
   return requestClient.put('/crm/business/update-status', data);
 }
 
diff --git a/apps/web-antd/src/api/crm/business/status/index.ts b/apps/web-antd/src/api/crm/business/status/index.ts
index e1c8cfea3..9445938fd 100644
--- a/apps/web-antd/src/api/crm/business/status/index.ts
+++ b/apps/web-antd/src/api/crm/business/status/index.ts
@@ -4,46 +4,50 @@ import { requestClient } from '#/api/request';
 
 export namespace CrmBusinessStatusApi {
   /** 商机状态信息 */
-  export interface BusinessStatus {
-    id: number;
-    name: string;
-    percent: number;
-  }
-
-  /** 商机状态组信息 */
   export interface BusinessStatusType {
     id: number;
     name: string;
-    deptIds: number[];
-    statuses?: BusinessStatus[];
+    percent: number;
+    sort: number;
   }
 
-  /** 默认商机状态 */
-  export const DEFAULT_STATUSES = [
-    {
-      endStatus: 1,
-      key: '结束',
-      name: '赢单',
-      percent: 100,
-    },
-    {
-      endStatus: 2,
-      key: '结束',
-      name: '输单',
-      percent: 0,
-    },
-    {
-      endStatus: 3,
-      key: '结束',
-      name: '无效',
-      percent: 0,
-    },
-  ] as const;
+  /** 商机状态组信息 */
+  export interface BusinessStatus {
+    id: number;
+    name: string;
+    deptIds: number[];
+    deptNames: string[];
+    creator: string;
+    createTime: Date;
+    statuses?: BusinessStatusType[];
+  }
 }
 
+/** 默认商机状态 */
+export const DEFAULT_STATUSES = [
+  {
+    endStatus: 1,
+    key: '结束',
+    name: '赢单',
+    percent: 100,
+  },
+  {
+    endStatus: 2,
+    key: '结束',
+    name: '输单',
+    percent: 0,
+  },
+  {
+    endStatus: 3,
+    key: '结束',
+    name: '无效',
+    percent: 0,
+  },
+];
+
 /** 查询商机状态组列表 */
 export function getBusinessStatusPage(params: PageParam) {
-  return requestClient.get<PageResult<CrmBusinessStatusApi.BusinessStatusType>>(
+  return requestClient.get<PageResult<CrmBusinessStatusApi.BusinessStatus>>(
     '/crm/business-status/page',
     { params },
   );
@@ -51,21 +55,21 @@ export function getBusinessStatusPage(params: PageParam) {
 
 /** 新增商机状态组 */
 export function createBusinessStatus(
-  data: CrmBusinessStatusApi.BusinessStatusType,
+  data: CrmBusinessStatusApi.BusinessStatus,
 ) {
   return requestClient.post('/crm/business-status/create', data);
 }
 
 /** 修改商机状态组 */
 export function updateBusinessStatus(
-  data: CrmBusinessStatusApi.BusinessStatusType,
+  data: CrmBusinessStatusApi.BusinessStatus,
 ) {
   return requestClient.put('/crm/business-status/update', data);
 }
 
 /** 查询商机状态类型详情 */
 export function getBusinessStatus(id: number) {
-  return requestClient.get<CrmBusinessStatusApi.BusinessStatusType>(
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatus>(
     `/crm/business-status/get?id=${id}`,
   );
 }
@@ -77,14 +81,14 @@ export function deleteBusinessStatus(id: number) {
 
 /** 获得商机状态组列表 */
 export function getBusinessStatusTypeSimpleList() {
-  return requestClient.get<CrmBusinessStatusApi.BusinessStatusType[]>(
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatus[]>(
     '/crm/business-status/type-simple-list',
   );
 }
 
 /** 获得商机阶段列表 */
 export function getBusinessStatusSimpleList(typeId: number) {
-  return requestClient.get<CrmBusinessStatusApi.BusinessStatus[]>(
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatusType[]>(
     '/crm/business-status/status-simple-list',
     { params: { typeId } },
   );
diff --git a/apps/web-antd/src/api/crm/clue/index.ts b/apps/web-antd/src/api/crm/clue/index.ts
index 9d3447b88..a3a378b67 100644
--- a/apps/web-antd/src/api/crm/clue/index.ts
+++ b/apps/web-antd/src/api/crm/clue/index.ts
@@ -77,7 +77,7 @@ export function transferClue(data: CrmPermissionApi.TransferReq) {
 
 /** 线索转化为客户 */
 export function transformClue(id: number) {
-  return requestClient.put('/crm/clue/transform', { id });
+  return requestClient.put(`/crm/clue/transform?id=${id}`);
 }
 
 /** 获得分配给我的、待跟进的线索数量 */
diff --git a/apps/web-antd/src/api/crm/customer/index.ts b/apps/web-antd/src/api/crm/customer/index.ts
index 3f7faaab5..611d56bc2 100644
--- a/apps/web-antd/src/api/crm/customer/index.ts
+++ b/apps/web-antd/src/api/crm/customer/index.ts
@@ -35,6 +35,11 @@ export namespace CrmCustomerApi {
     createTime: Date; // 创建时间
     updateTime: Date; // 更新时间
   }
+  export interface CustomerImport {
+    ownerUserId: number;
+    file: File;
+    updateSupport: boolean;
+  }
 }
 
 /** 查询客户列表 */
@@ -78,8 +83,8 @@ export function importCustomerTemplate() {
 }
 
 /** 导入客户 */
-export function importCustomer(file: File) {
-  return requestClient.upload('/crm/customer/import', { file });
+export function importCustomer(data: CrmCustomerApi.CustomerImport) {
+  return requestClient.upload('/crm/customer/import', data);
 }
 
 /** 获取客户精简信息列表 */
diff --git a/apps/web-antd/src/api/crm/receivable/index.ts b/apps/web-antd/src/api/crm/receivable/index.ts
index 96936c910..8a10c7390 100644
--- a/apps/web-antd/src/api/crm/receivable/index.ts
+++ b/apps/web-antd/src/api/crm/receivable/index.ts
@@ -34,10 +34,21 @@ export namespace CrmReceivableApi {
     createTime: Date; // 创建时间
     updateTime: Date; // 更新时间
   }
+
+  export interface ReceivablePageParam extends PageParam {
+    no?: string;
+    planId?: number;
+    customerId?: number;
+    contractId?: number;
+    sceneType?: number;
+    auditStatus?: number;
+  }
 }
 
 /** 查询回款列表 */
-export function getReceivablePage(params: PageParam) {
+export function getReceivablePage(
+  params: CrmReceivableApi.ReceivablePageParam,
+) {
   return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
     '/crm/receivable/page',
     { params },
@@ -45,7 +56,9 @@ export function getReceivablePage(params: PageParam) {
 }
 
 /** 查询回款列表，基于指定客户 */
-export function getReceivablePageByCustomer(params: PageParam) {
+export function getReceivablePageByCustomer(
+  params: CrmReceivableApi.ReceivablePageParam,
+) {
   return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
     '/crm/receivable/page-by-customer',
     { params },
diff --git a/apps/web-antd/src/api/crm/receivable/plan/index.ts b/apps/web-antd/src/api/crm/receivable/plan/index.ts
index d237c1ed9..63e00f271 100644
--- a/apps/web-antd/src/api/crm/receivable/plan/index.ts
+++ b/apps/web-antd/src/api/crm/receivable/plan/index.ts
@@ -29,10 +29,20 @@ export namespace CrmReceivablePlanApi {
       returnTime: Date;
     };
   }
+
+  export interface PlanPageParam extends PageParam {
+    customerId?: number;
+    contractId?: number;
+    contractNo?: string;
+    sceneType?: number;
+    remindType?: number;
+  }
 }
 
 /** 查询回款计划列表 */
-export function getReceivablePlanPage(params: PageParam) {
+export function getReceivablePlanPage(
+  params: CrmReceivablePlanApi.PlanPageParam,
+) {
   return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
     '/crm/receivable-plan/page',
     { params },
@@ -40,7 +50,9 @@ export function getReceivablePlanPage(params: PageParam) {
 }
 
 /** 查询回款计划列表(按客户) */
-export function getReceivablePlanPageByCustomer(params: PageParam) {
+export function getReceivablePlanPageByCustomer(
+  params: CrmReceivablePlanApi.PlanPageParam,
+) {
   return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
     '/crm/receivable-plan/page-by-customer',
     { params },
diff --git a/apps/web-antd/src/api/infra/codegen/index.ts b/apps/web-antd/src/api/infra/codegen/index.ts
index d8fea0453..1c2d97ba3 100644
--- a/apps/web-antd/src/api/infra/codegen/index.ts
+++ b/apps/web-antd/src/api/infra/codegen/index.ts
@@ -112,26 +112,19 @@ export function updateCodegenTable(data: InfraCodegenApi.CodegenUpdateReqVO) {
 
 /** 基于数据库的表结构，同步数据库的表和字段定义 */
 export function syncCodegenFromDB(tableId: number) {
-  return requestClient.put('/infra/codegen/sync-from-db', {
-    params: { tableId },
-  });
+  return requestClient.put(`/infra/codegen/sync-from-db?tableId=${tableId}`);
 }
 
 /** 预览生成代码 */
 export function previewCodegen(tableId: number) {
   return requestClient.get<InfraCodegenApi.CodegenPreview[]>(
-    '/infra/codegen/preview',
-    {
-      params: { tableId },
-    },
+    `/infra/codegen/preview?tableId=${tableId}`,
   );
 }
 
 /** 下载生成代码 */
 export function downloadCodegen(tableId: number) {
-  return requestClient.download('/infra/codegen/download', {
-    params: { tableId },
-  });
+  return requestClient.download(`/infra/codegen/download?tableId=${tableId}`);
 }
 
 /** 获得表定义 */
diff --git a/apps/web-antd/src/api/infra/job/index.ts b/apps/web-antd/src/api/infra/job/index.ts
index 3bd20fdb5..bacdbc4a1 100644
--- a/apps/web-antd/src/api/infra/job/index.ts
+++ b/apps/web-antd/src/api/infra/job/index.ts
@@ -57,7 +57,7 @@ export function updateJobStatus(id: number, status: number) {
     id,
     status,
   };
-  return requestClient.put('/infra/job/update-status', { params });
+  return requestClient.put('/infra/job/update-status', {}, { params });
 }
 
 /** 定时任务立即执行一次 */
diff --git a/apps/web-antd/src/components/table-action/table-action.vue b/apps/web-antd/src/components/table-action/table-action.vue
index 1ad69eb26..7595b87c1 100644
--- a/apps/web-antd/src/components/table-action/table-action.vue
+++ b/apps/web-antd/src/components/table-action/table-action.vue
@@ -204,7 +204,9 @@ function handleMenuClick(e: any) {
                   "
                 >
                   <IconifyIcon v-if="action.icon" :icon="action.icon" />
-                  <span class="ml-1">{{ action.text }}</span>
+                  <span :class="action.icon ? 'ml-1' : ''">
+                    {{ action.text }}
+                  </span>
                 </div>
               </Popconfirm>
             </template>
diff --git a/apps/web-antd/src/utils/formatNumber.ts b/apps/web-antd/src/utils/formatNumber.ts
index 13fdab6a7..f500183d0 100644
--- a/apps/web-antd/src/utils/formatNumber.ts
+++ b/apps/web-antd/src/utils/formatNumber.ts
@@ -80,3 +80,107 @@ export function calculateRelativeRate(
     ((100 * ((value || 0) - reference)) / reference).toFixed(0),
   );
 }
+
+// ========== ERP 专属方法 ==========
+
+const ERP_COUNT_DIGIT = 3;
+const ERP_PRICE_DIGIT = 2;
+
+/**
+ * 【ERP】格式化 Input 数字
+ *
+ * 例如说：库存数量
+ *
+ * @param num 数量
+ * @package
+ * @return 格式化后的数量
+ */
+export function erpNumberFormatter(
+  num: number | string | undefined,
+  digit: number,
+) {
+  if (num === null || num === undefined) {
+    return '';
+  }
+  if (typeof num === 'string') {
+    num = Number.parseFloat(num);
+  }
+  // 如果非 number，则直接返回空串
+  if (Number.isNaN(num)) {
+    return '';
+  }
+  return num.toFixed(digit);
+}
+
+/**
+ * 【ERP】格式化数量，保留三位小数
+ *
+ * 例如说：库存数量
+ *
+ * @param num 数量
+ * @return 格式化后的数量
+ */
+export function erpCountInputFormatter(num: number | string | undefined) {
+  return erpNumberFormatter(num, ERP_COUNT_DIGIT);
+}
+
+// noinspection JSCommentMatchesSignature
+/**
+ * 【ERP】格式化数量，保留三位小数
+ *
+ * @param cellValue 数量
+ * @return 格式化后的数量
+ */
+export function erpCountTableColumnFormatter(cellValue: any) {
+  return erpNumberFormatter(cellValue, ERP_COUNT_DIGIT);
+}
+
+/**
+ * 【ERP】格式化金额，保留二位小数
+ *
+ * 例如说：库存数量
+ *
+ * @param num 数量
+ * @return 格式化后的数量
+ */
+export function erpPriceInputFormatter(num: number | string | undefined) {
+  return erpNumberFormatter(num, ERP_PRICE_DIGIT);
+}
+
+// noinspection JSCommentMatchesSignature
+/**
+ * 【ERP】格式化金额，保留二位小数
+ *
+ * @param cellValue 数量
+ * @return 格式化后的数量
+ */
+export function erpPriceTableColumnFormatter(cellValue: any) {
+  return erpNumberFormatter(cellValue, ERP_PRICE_DIGIT);
+}
+
+/**
+ * 【ERP】价格计算，四舍五入保留两位小数
+ *
+ * @param price 价格
+ * @param count 数量
+ * @return 总价格。如果有任一为空，则返回 undefined
+ */
+export function erpPriceMultiply(price: number, count: number) {
+  if (price === null || count === null) {
+    return undefined;
+  }
+  return Number.parseFloat((price * count).toFixed(ERP_PRICE_DIGIT));
+}
+
+/**
+ * 【ERP】百分比计算，四舍五入保留两位小数
+ *
+ * 如果 total 为 0，则返回 0
+ *
+ * @param value 当前值
+ * @param total 总值
+ */
+export function erpCalculatePercentage(value: number, total: number) {
+  if (total === 0) return 0;
+  return ((value / total) * 100).toFixed(2);
+}
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 1173703e7..f1e45938f 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -21,8 +21,6 @@ import CustomerTodayContactList from './modules/customer-today-contact-list.vue'
 import ReceivableAuditList from './modules/receivable-audit-list.vue';
 import ReceivablePlanRemindList from './modules/receivable-plan-remind-list.vue';
 
-defineOptions({ name: 'CrmBacklog' });
-
 const leftMenu = ref('customerTodayContact');
 
 const clueFollowCount = ref(0);
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index bf65a743c..9505414f8 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -1,5 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { formatDateTime } from '@vben/utils';
+
+import { getBusinessStatusTypeSimpleList } from '#/api/crm/business/status';
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { getSimpleUserList } from '#/api/system/user';
+import { erpPriceInputFormatter, erpPriceMultiply } from '#/utils';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -19,18 +27,58 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
     },
     {
-      fieldName: 'customerId',
-      label: '客户',
-      component: 'Input',
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
       rules: 'required',
     },
     {
-      fieldName: 'totalPrice',
-      label: '商机金额',
-      component: 'InputNumber',
+      fieldName: 'customerId',
+      label: '客户名称',
+      component: 'ApiSelect',
       componentProps: {
-        min: 0,
-        placeholder: '请输入商机金额',
+        api: () => getCustomerSimpleList(),
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => !values.customerId,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'contactId',
+      label: '合同名称',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'statusTypeId',
+      label: '商机状态组',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getBusinessStatusTypeSimpleList(),
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
       },
       rules: 'required',
     },
@@ -46,9 +94,43 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
+      fieldName: 'totalProductPrice',
+      label: '产品总金额',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '整单折扣（%）',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '折扣后金额',
+      component: 'InputNumber',
+      dependencies: {
+        triggerFields: ['totalProductPrice', 'discountPercent'],
+        disabled: () => true,
+        trigger(values, form) {
+          const discountPrice =
+            erpPriceMultiply(
+              values.totalProductPrice,
+              values.discountPercent / 100,
+            ) ?? 0;
+          form.setFieldValue(
+            'totalPrice',
+            values.totalProductPrice - discountPrice,
+          );
+        },
+      },
     },
   ];
 }
@@ -143,3 +225,123 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'totalPrice',
+      label: '商机金额（元）',
+      content: (data) => erpPriceInputFormatter(data.totalPrice),
+    },
+    {
+      field: 'statusTypeName',
+      label: '商机组',
+    },
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '商机名称',
+    },
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'totalPrice',
+      label: '商机金额（元）',
+      content: (data) => erpPriceInputFormatter(data.totalPrice),
+    },
+    {
+      field: 'dealTime',
+      label: '预计成交日期',
+      content: (data) => formatDateTime(data?.dealTime) as string,
+    },
+    {
+      field: 'contactNextTime',
+      label: '下次联系时间',
+      content: (data) => formatDateTime(data?.contactNextTime) as string,
+    },
+    {
+      field: 'statusTypeName',
+      label: '商机状态组',
+    },
+    {
+      field: 'statusName',
+      label: '商机阶段',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '商机名称',
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      field: 'customerName',
+      title: '客户名称',
+      fixed: 'left',
+      slots: { default: 'customerName' },
+    },
+    {
+      field: 'totalPrice',
+      title: '商机金额（元）',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'dealTime',
+      title: '预计成交日期',
+      formatter: 'formatDate',
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+    },
+    {
+      field: 'statusTypeName',
+      title: '商机状态组',
+      fixed: 'right',
+    },
+    {
+      field: 'statusName',
+      title: '商机阶段',
+      fixed: 'right',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-info.vue b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
index da6c78661..2728d32c3 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmBusinessApi } from '#/api/crm/business';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from '../data';
+
+defineProps<{
+  business: CrmBusinessApi.Business; // 商机信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>businessInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="business" />
+    <Divider />
+    <SystemDescription :data="business" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue b/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
new file mode 100644
index 000000000..61f21b893
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmBusinessApi } from '#/api/crm/business';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBusinessPageByCustomer } from '#/api/crm/business';
+import { $t } from '#/locales';
+
+import { useDetailListColumns } from '../data';
+import Form from './form.vue';
+
+const props = defineProps<{
+  customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
+}>();
+
+const emit = defineEmits(['success']);
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const checkedRows = ref<CrmBusinessApi.Business[]>([]);
+function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
+  checkedRows.value = records;
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建商机 */
+function handleCreate() {
+  formModalApi.setData({ customerId: props.customerId }).open();
+}
+
+/** 查看商机详情 */
+function handleDetail(row: CrmBusinessApi.Business) {
+  push({ name: 'CrmBusinessDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmBusinessApi.Business) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (checkedRows.value.length === 0) {
+      message.error('请先选择商机后操作！');
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    try {
+      const businessIds = checkedRows.value.map((item) => item.id);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success', businessIds, checkedRows.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<any>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 设置到 values
+      // await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'name',
+        label: '商机名称',
+        component: 'Input',
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBusinessPageByCustomer({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            customerId: props.customerId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmBusinessApi.Business>,
+  gridEvents: {
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
+  },
+});
+</script>
+
+<template>
+  <Modal title="关联商机" class="w-[40%]">
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['商机']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:business:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list.vue b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
index b6466c322..c4f41745d 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
@@ -1,4 +1,206 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmBusinessApi } from '#/api/crm/business';
+import type { CrmContactApi } from '#/api/crm/contact';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getBusinessPageByContact,
+  getBusinessPageByCustomer,
+} from '#/api/crm/business';
+import { createContactBusinessList } from '#/api/crm/contact';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { $t } from '#/locales';
+
+import { useDetailListColumns } from '../data';
+import ListModal from './detail-list-modal.vue';
+import Form from './form.vue';
+
+const props = defineProps<{
+  bizId: number; // 业务编号
+  bizType: number; // 业务类型
+  contactId?: number; // 特殊：联系人编号；在【联系人】详情中，可以传递联系人编号，默认新建的商机关联到该联系人
+  customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
+}>();
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [DetailListModal, detailListModalApi] = useVbenModal({
+  connectedComponent: ListModal,
+  destroyOnClose: true,
+});
+
+const checkedRows = ref<CrmBusinessApi.Business[]>([]);
+function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
+  checkedRows.value = records;
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建商机 */
+function handleCreate() {
+  formModalApi
+    .setData({ customerId: props.customerId, contactId: props.contactId })
+    .open();
+}
+
+function handleCreateBusiness() {
+  detailListModalApi.setData({ customerId: props.customerId }).open();
+}
+
+async function handleDeleteContactBusinessList() {
+  if (checkedRows.value.length === 0) {
+    message.error('请先选择商机后操作！');
+    return;
+  }
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确定要将${checkedRows.value.map((item) => item.name).join(',')}解除关联吗？`,
+    })
+      .then(async () => {
+        const res = await createContactBusinessList({
+          contactId: props.bizId,
+          businessIds: checkedRows.value.map((item) => item.id),
+        });
+        if (res) {
+          // 提示并返回成功
+          message.success($t('ui.actionMessage.operationSuccess'));
+          onRefresh();
+          resolve(true);
+        } else {
+          reject(new Error($t('ui.actionMessage.operationFailed')));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 查看商机详情 */
+function handleDetail(row: CrmBusinessApi.Business) {
+  push({ name: 'CrmBusinessDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmBusinessApi.Business) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+async function handleCreateContactBusinessList(businessIds: number[]) {
+  const data = {
+    contactId: props.bizId,
+    businessIds,
+  } as CrmContactApi.ContactBusinessReq;
+  await createContactBusinessList(data);
+  onRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
+            return await getBusinessPageByCustomer({
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              customerId: props.customerId,
+              ...formValues,
+            });
+          } else if (props.bizType === BizTypeEnum.CRM_CONTACT) {
+            return await getBusinessPageByContact({
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              contactId: props.contactId,
+              ...formValues,
+            });
+          } else {
+            return [];
+          }
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmBusinessApi.Business>,
+  gridEvents: {
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
+  },
+});
+</script>
+
 <template>
-  <div>businessList</div>
+  <div>
+    <FormModal @success="onRefresh" />
+    <DetailListModal
+      :customer-id="customerId"
+      @success="handleCreateContactBusinessList"
+    />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['商机']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:business:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: '关联',
+              icon: ACTION_ICON.ADD,
+              type: 'default',
+              auth: ['crm:contact:create-business'],
+              ifShow: () => !!contactId,
+              onClick: handleCreateBusiness,
+            },
+            {
+              label: '解除关联',
+              icon: ACTION_ICON.ADD,
+              type: 'default',
+              auth: ['crm:contact:create-business'],
+              ifShow: () => !!contactId,
+              onClick: handleDeleteContactBusinessList,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+    </Grid>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/business/modules/detail.vue b/apps/web-antd/src/views/crm/business/modules/detail.vue
index 99ad6b6f9..aa91e7c76 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail.vue
@@ -1,7 +1,211 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmBusinessApi } from '#/api/crm/business';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getBusiness } from '#/api/crm/business';
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const BusinessDetailsInfo = defineAsyncComponent(
+  () => import('./detail-info.vue'),
+);
+
+const ContactDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/contact/modules/detail-list.vue'),
+);
+
+const ContractDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/contract/modules/detail-list.vue'),
+);
+
+const FollowUp = defineAsyncComponent(
+  () => import('#/views/crm/followup/index.vue'),
+);
+
+const ProductDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/product/modules/detail-list.vue'),
+);
+
+const PermissionList = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/permission-list.vue'),
+);
+
+const TransferForm = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/transfer-form.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
+const BusinessForm = defineAsyncComponent(
+  () => import('#/views/crm/business/modules/form.vue'),
+);
+
+const UpStatusForm = defineAsyncComponent(
+  () => import('#/views/crm/business/modules/up-status-form.vue'),
+);
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const businessId = ref(0);
+
+const business = ref<CrmBusinessApi.Business>({} as CrmBusinessApi.Business);
+const businessLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: BusinessForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+const [UpStatusModal, upStatusModalApi] = useVbenModal({
+  connectedComponent: UpStatusForm,
+  destroyOnClose: true,
+});
+
+/** 加载详情 */
+async function loadBusinessDetail() {
+  loading.value = true;
+  const data = await getBusiness(businessId.value);
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_BUSINESS,
+    bizId: businessId.value,
+  });
+  businessLogList.value = logList.list;
+  business.value = data;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/business');
+}
+
+/** 编辑 */
+function handleEdit() {
+  formModalApi.setData({ id: businessId.value }).open();
+}
+
+/** 转移线索 */
+function handleTransfer() {
+  transferModalApi.setData({ bizType: BizTypeEnum.CRM_BUSINESS }).open();
+}
+
+/** 更新商机状态操作 */
+async function handleUpdateStatus() {
+  upStatusModalApi.setData(business.value).open();
+}
+
+// 加载数据
+onMounted(() => {
+  businessId.value = Number(route.params.id);
+  loadBusinessDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="business?.name" :loading="loading">
+    <FormModal @success="loadBusinessDetail" />
+    <TransferModal @success="loadBusinessDetail" />
+    <UpStatusModal @success="loadBusinessDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          type="primary"
+          @click="handleEdit"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          @click="handleUpdateStatus"
+        >
+          变更商机状态
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateOwnerUser"
+          @click="handleTransfer"
+        >
+          转移
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="business" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <BusinessDetailsInfo :business="business" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+          <FollowUp :biz-id="businessId" :biz-type="BizTypeEnum.CRM_BUSINESS" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="联系人" key="3" :force-render="true">
+          <ContactDetailsList
+            :biz-id="businessId"
+            :biz-type="BizTypeEnum.CRM_BUSINESS"
+            :business-id="businessId"
+            :customer-id="business.customerId"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="产品" key="4" :force-render="true">
+          <ProductDetailsList
+            :biz-type="BizTypeEnum.CRM_BUSINESS"
+            :business="business"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="合同" key="5" :force-render="true">
+          <ContractDetailsList
+            :biz-id="businessId"
+            :biz-type="BizTypeEnum.CRM_BUSINESS"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="6" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="businessId"
+            :biz-type="BizTypeEnum.CRM_BUSINESS"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="7" :force-render="true">
+          <OperateLog :log-list="businessLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/business/modules/form.vue b/apps/web-antd/src/views/crm/business/modules/form.vue
index dd8dbd61b..8d3b0d553 100644
--- a/apps/web-antd/src/views/crm/business/modules/form.vue
+++ b/apps/web-antd/src/views/crm/business/modules/form.vue
@@ -64,12 +64,12 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<CrmBusinessApi.Business>();
-    if (!data || !data.id) {
+    if (!data) {
       return;
     }
     modalApi.lock();
     try {
-      formData.value = await getBusiness(data.id as number);
+      formData.value = data.id ? await getBusiness(data.id as number) : data;
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
diff --git a/apps/web-antd/src/views/crm/business/modules/up-status-form.vue b/apps/web-antd/src/views/crm/business/modules/up-status-form.vue
new file mode 100644
index 000000000..c8ea4300f
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/modules/up-status-form.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import type { CrmBusinessApi } from '#/api/crm/business';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateBusinessStatus } from '#/api/crm/business';
+import {
+  DEFAULT_STATUSES,
+  getBusinessStatusSimpleList,
+} from '#/api/crm/business/status';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<CrmBusinessApi.Business>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'statusId',
+      label: '商机状态',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'endStatus',
+      label: '商机状态',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '商机阶段',
+      component: 'Select',
+      dependencies: {
+        triggerFields: [''],
+        async componentProps() {
+          const statusList = await getBusinessStatusSimpleList(
+            formData.value?.statusTypeId ?? 0,
+          );
+          const statusOptions = statusList.map((item) => ({
+            label: `${item.name}(赢单率：${item.percent}%)`,
+            value: item.id,
+          }));
+          const options = DEFAULT_STATUSES.map((item) => ({
+            label: `${`${item.name}(赢单率：${item.percent}`}%)`,
+            value: item.endStatus,
+          }));
+          statusOptions.push(...options);
+          return {
+            options: statusOptions,
+          };
+        },
+      },
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmBusinessApi.Business;
+    try {
+      if (!data.status) {
+        return;
+      }
+      await updateBusinessStatus({
+        id: data.id,
+        statusId: data.status > 0 ? data.status : undefined,
+        endStatus: data.status < 0 ? -data.status : undefined,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmBusinessApi.Business>();
+    if (!data || !data.id) {
+      return;
+    }
+    data.status = data.endStatus === null ? data.statusId : -data.endStatus;
+    formData.value = data;
+    modalApi.lock();
+    try {
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="变更商机状态" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/business/status/modules/form.vue b/apps/web-antd/src/views/crm/business/status/modules/form.vue
index aeb211723..0097e1693 100644
--- a/apps/web-antd/src/views/crm/business/status/modules/form.vue
+++ b/apps/web-antd/src/views/crm/business/status/modules/form.vue
@@ -18,7 +18,7 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<CrmBusinessStatusApi.BusinessStatusType>();
+const formData = ref<CrmBusinessStatusApi.BusinessStatus>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['商机状态'])
@@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data =
-      (await formApi.getValues()) as CrmBusinessStatusApi.BusinessStatusType;
+      (await formApi.getValues()) as CrmBusinessStatusApi.BusinessStatus;
     try {
       await (formData.value?.id
         ? updateBusinessStatus(data)
@@ -66,7 +66,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<CrmBusinessStatusApi.BusinessStatusType>();
+    const data = modalApi.getData<CrmBusinessStatusApi.BusinessStatus>();
     if (!data || !data.id) {
       return;
     }
diff --git a/apps/web-antd/src/views/crm/clue/data.ts b/apps/web-antd/src/views/crm/clue/data.ts
index abc05ed4e..bd2924aad 100644
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -7,6 +7,7 @@ import { h } from 'vue';
 import { formatDateTime } from '@vben/utils';
 
 import { getAreaTree } from '#/api/system/area';
+import { getSimpleUserList } from '#/api/system/user';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
@@ -32,7 +33,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户来源',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE),
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
       },
       rules: 'required',
     },
@@ -44,9 +45,12 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'ownerUserId',
       label: '负责人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        api: 'getSimpleUserList',
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        allowClear: true,
       },
       rules: 'required',
     },
@@ -75,7 +79,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户行业',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY),
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
       },
     },
     {
@@ -83,7 +87,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户级别',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL),
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
       },
     },
     {
@@ -299,10 +303,6 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
       field: 'mobile',
       label: '手机',
     },
-    {
-      field: 'ownerUserName',
-      label: '负责人',
-    },
     {
       field: 'telephone',
       label: '电话',
@@ -312,13 +312,18 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
       label: '邮箱',
     },
     {
-      field: 'wechat',
-      label: '微信',
+      field: 'areaName',
+      label: '地址',
+      content: (data) => data?.areaName + data?.detailAddress,
     },
     {
       field: 'qq',
       label: 'QQ',
     },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
     {
       field: 'industryId',
       label: '客户行业',
@@ -337,14 +342,6 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
           value: data?.level,
         }),
     },
-    {
-      field: 'areaId',
-      label: '地址',
-    },
-    {
-      field: 'detailAddress',
-      label: '详细地址',
-    },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
@@ -356,36 +353,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     },
   ];
 }
-
-/** 详情系统信息的配置 */
-export function useDetailSystemSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'ownerUserName',
-      label: '负责人',
-    },
-    {
-      field: 'contactLastContent',
-      label: '最后跟进记录',
-    },
-    {
-      field: 'contactLastContent',
-      label: '最后跟进时间',
-      content: (data) => formatDateTime(data?.contactLastContent) as string,
-    },
-    {
-      field: 'creatorName',
-      label: '创建人',
-    },
-    {
-      field: 'createTime',
-      label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
-    },
-    {
-      field: 'updateTime',
-      label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail-info.vue b/apps/web-antd/src/views/crm/clue/modules/detail-info.vue
index 36784a1df..2e9c68c00 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/detail-info.vue
@@ -4,12 +4,11 @@ import type { CrmClueApi } from '#/api/crm/clue';
 import { Divider } from 'ant-design-vue';
 
 import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema, useDetailSystemSchema } from '../data';
+import { useDetailBaseSchema } from '../data';
 
-defineOptions({ name: 'CrmClueDetailsInfo' });
-
-const { clue } = defineProps<{
+defineProps<{
   clue: CrmClueApi.Clue; // 线索信息
 }>();
 
@@ -21,7 +20,6 @@ const [BaseDescription] = useDescription({
     class: 'mx-4',
   },
   schema: useDetailBaseSchema(),
-  data: clue,
 });
 
 const [SystemDescription] = useDescription({
@@ -31,15 +29,14 @@ const [SystemDescription] = useDescription({
     column: 3,
     class: 'mx-4',
   },
-  schema: useDetailSystemSchema(),
-  data: clue,
+  schema: useFollowUpDetailSchema(),
 });
 </script>
 
 <template>
   <div class="p-4">
-    <BaseDescription />
+    <BaseDescription :data="clue" />
     <Divider />
-    <SystemDescription />
+    <SystemDescription :data="clue" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail.vue b/apps/web-antd/src/views/crm/clue/modules/detail.vue
index 7c9d29b2a..012c97254 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/detail.vue
@@ -1,23 +1,40 @@
 <script setup lang="ts">
 import type { CrmClueApi } from '#/api/crm/clue';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 import { ArrowLeft } from '@vben/icons';
 
-import { Button, Card, Modal, Tabs } from 'ant-design-vue';
+import { Button, Card, message, Tabs } from 'ant-design-vue';
 
 import { getClue, transformClue } from '#/api/crm/clue';
+import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { PermissionList, TransferForm } from '#/views/crm/permission';
 
 import { useDetailSchema } from '../data';
 import ClueForm from './form.vue';
 
+const FollowUp = defineAsyncComponent(
+  () => import('#/views/crm/followup/index.vue'),
+);
+
+const PermissionList = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/permission-list.vue'),
+);
+
+const TransferForm = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/transfer-form.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
 const ClueDetailsInfo = defineAsyncComponent(() => import('./detail-info.vue'));
 
 const loading = ref(false);
@@ -29,7 +46,14 @@ const tabs = useTabs();
 const clueId = ref(0);
 
 const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue);
-const permissionListRef = ref(); // 团队成员列表 Ref
+const clueLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+// 校验负责人权限和编辑权限
+const validateOwnerUser = computed(
+  () => permissionListRef.value?.validateOwnerUser,
+);
+const validateWrite = computed(() => permissionListRef.value?.validateWrite);
 
 const [Description] = useDescription({
   componentProps: {
@@ -53,9 +77,14 @@ const [TransferModal, transferModalApi] = useVbenModal({
 /** 加载线索详情 */
 async function loadClueDetail() {
   loading.value = true;
-  clueId.value = Number(route.params.id);
   const data = await getClue(clueId.value);
   clue.value = data;
+  // 操作日志
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CLUE,
+    bizId: clueId.value,
+  });
+  clueLogList.value = logList.list;
   loading.value = false;
 }
 
@@ -67,7 +96,7 @@ function handleBack() {
 
 /** 编辑线索 */
 function handleEdit() {
-  formModalApi.setData({ id: clueId }).open();
+  formModalApi.setData({ id: clueId.value }).open();
 }
 
 /** 转移线索 */
@@ -76,31 +105,38 @@ function handleTransfer() {
 }
 
 /** 转化为客户 */
-async function handleTransform() {
-  try {
-    await Modal.confirm({
-      title: '提示',
+async function handleTransform(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
       content: '确定将该线索转化为客户吗？',
-    });
-    await transformClue(clueId.value);
-    Modal.success({
-      title: '成功',
-      content: '转化客户成功',
-    });
-    await loadClueDetail();
-  } catch {
-    // 用户取消操作
-  }
+    })
+      .then(async () => {
+        const res = await transformClue(clueId.value);
+        if (res) {
+          // 提示并返回成功
+          message.success('转化客户成功');
+          resolve(true);
+        } else {
+          reject(new Error('转化失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
 }
 
 // 加载数据
-onMounted(async () => {
-  await loadClueDetail();
+onMounted(() => {
+  clueId.value = Number(route.params.id);
+  loadClueDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="clue?.name" :loading="loading">
+    <FormModal @success="loadClueDetail" />
+    <TransferModal @success="loadClueDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
         <Button @click="handleBack">
@@ -108,58 +144,49 @@ onMounted(async () => {
           返回
         </Button>
         <Button
-          v-if="permissionListRef?.validateWrite"
+          v-if="validateWrite"
           type="primary"
           @click="handleEdit"
           v-access:code="['crm:clue:update']"
         >
           {{ $t('ui.actionTitle.edit') }}
         </Button>
-        <Button
-          v-if="permissionListRef?.validateOwnerUser"
-          type="primary"
-          @click="handleTransfer"
-          v-access:code="['crm:clue:update']"
-        >
+        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
           转移
         </Button>
         <Button
-          v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
+          v-if="validateOwnerUser && !clue?.transformStatus"
           type="primary"
           @click="handleTransform"
-          v-access:code="['crm:clue:update']"
         >
           转化为客户
         </Button>
       </div>
     </template>
-    <Card>
+    <Card class="min-h-[10%]">
       <Description :data="clue" />
     </Card>
-    <Card class="mt-4">
+    <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="线索跟进" key="1">
-          <div>线索跟进</div>
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="基本信息" key="2">
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
           <ClueDetailsInfo :clue="clue" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="3">
+        <Tabs.TabPane tab="线索跟进" key="2" :force-render="true">
+          <FollowUp :biz-id="clueId" :biz-type="BizTypeEnum.CRM_CLUE" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
           <PermissionList
             ref="permissionListRef"
-            :biz-id="clue.id!"
+            :biz-id="clueId"
             :biz-type="BizTypeEnum.CRM_CLUE"
             :show-action="true"
             @quit-team="handleBack"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="4">
-          <div>操作日志</div>
+        <Tabs.TabPane tab="操作日志" key="4" :force-render="true">
+          <OperateLog :log-list="clueLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
-
-    <FormModal @success="loadClueDetail" />
-    <TransferModal @success="loadClueDetail" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/contact/data.ts b/apps/web-antd/src/views/crm/contact/data.ts
index 956f32333..d6d9eaec8 100644
--- a/apps/web-antd/src/views/crm/contact/data.ts
+++ b/apps/web-antd/src/views/crm/contact/data.ts
@@ -279,9 +279,27 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
-/** 详情页的字段 */
+/** 详情页的基础字段 */
 export function useDetailSchema(): DescriptionItemSchema[] {
-  return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
+  return [
+    {
+      field: 'name',
+      label: '客户名称',
+    },
+    {
+      field: 'post',
+      label: '职务',
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'createTime',
+      label: '下次联系时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+  ];
 }
 
 /** 详情页的基础字段 */
@@ -289,16 +307,11 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
   return [
     {
       field: 'name',
-      label: '客户名称',
+      label: '姓名',
     },
     {
-      field: 'source',
-      label: '客户来源',
-      content: (data) =>
-        h(DictTag, {
-          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
-        }),
+      field: 'customerName',
+      label: '客户名称',
     },
     {
       field: 'mobile',
@@ -312,28 +325,13 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
       field: 'email',
       label: '邮箱',
     },
-    {
-      field: 'wechat',
-      label: '微信',
-    },
     {
       field: 'qq',
       label: 'QQ',
     },
     {
-      field: 'industryId',
-      label: '客户行业',
-      content: (data) =>
-        h(DictTag, {
-          type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-          value: data?.industryId,
-        }),
-    },
-    {
-      field: 'level',
-      label: '客户级别',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
+      field: 'wechat',
+      label: '微信',
     },
     {
       field: 'areaName',
@@ -343,6 +341,29 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
       field: 'detailAddress',
       label: '详细地址',
     },
+    {
+      field: 'post',
+      label: '职务',
+    },
+    {
+      field: 'parentName',
+      label: '直属上级',
+    },
+    {
+      field: 'master',
+      label: '关键决策人',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.INFRA_BOOLEAN_STRING,
+          value: data?.master,
+        }),
+    },
+    {
+      field: 'sex',
+      label: '性别',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: data?.sex }),
+    },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
@@ -355,31 +376,61 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
   ];
 }
 
-/** 详情页的系统字段 */
-export function useDetailSystemSchema(): DescriptionItemSchema[] {
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'ownerUserName',
-      label: '负责人',
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
     },
     {
-      field: 'ownerUserDeptName',
-      label: '所属部门',
+      field: 'name',
+      title: '姓名',
+      fixed: 'left',
+      slots: { default: 'name' },
     },
     {
-      field: 'contactLastTime',
-      label: '最后跟进时间',
-      content: (data) => formatDateTime(data?.contactLastTime) as string,
+      field: 'customerName',
+      title: '客户名称',
+      fixed: 'left',
+      slots: { default: 'customerName' },
     },
     {
-      field: 'createTime',
-      label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      field: 'sex',
+      title: '性别',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
     },
     {
-      field: 'updateTime',
-      label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
+      field: 'mobile',
+      title: '手机',
+    },
+    {
+      field: 'telephone',
+      title: '电话',
+    },
+    {
+      field: 'email',
+      title: '邮箱',
+    },
+    {
+      field: 'post',
+      title: '职位',
+    },
+    {
+      field: 'detailAddress',
+      title: '地址',
+    },
+    {
+      field: 'master',
+      title: '关键决策人',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-info.vue b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
index a9a8f4cb1..9ca08aaa7 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmContactApi } from '#/api/crm/contact';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from '../data';
+
+defineProps<{
+  contact: CrmContactApi.Contact; // 联系人信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>contactInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="contact" />
+    <Divider />
+    <SystemDescription :data="contact" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue b/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue
new file mode 100644
index 000000000..f816d64a4
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContactApi } from '#/api/crm/contact';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getContactPageByCustomer } from '#/api/crm/contact';
+import { $t } from '#/locales';
+
+import { useDetailListColumns } from '../data';
+import Form from './form.vue';
+
+const props = defineProps<{
+  customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
+}>();
+
+const emit = defineEmits(['success']);
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const checkedRows = ref<CrmContactApi.Contact[]>([]);
+function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
+  checkedRows.value = records;
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建商机 */
+function handleCreate() {
+  formModalApi.setData({ customerId: props.customerId }).open();
+}
+
+/** 查看商机详情 */
+function handleDetail(row: CrmContactApi.Contact) {
+  push({ name: 'CrmContactDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmContactApi.Contact) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (checkedRows.value.length === 0) {
+      message.error('请先选择联系人后操作！');
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    try {
+      const contactIds = checkedRows.value.map((item) => item.id);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success', contactIds, checkedRows.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<any>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 设置到 values
+      // await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'name',
+        label: '联系人名称',
+        component: 'Input',
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContactPageByCustomer({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            customerId: props.customerId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmContactApi.Contact>,
+  gridEvents: {
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
+  },
+});
+</script>
+
+<template>
+  <Modal title="关联联系人" class="w-[40%]">
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['联系人']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:contact:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
index 1f5fe358f..a68a7129d 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
@@ -1,4 +1,205 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContactApi } from '#/api/crm/contact';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createBusinessContactList,
+  deleteBusinessContactList,
+  getContactPageByBusiness,
+  getContactPageByCustomer,
+} from '#/api/crm/contact';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { $t } from '#/locales';
+
+import { useDetailListColumns } from '../data';
+import ListModal from './detail-list-modal.vue';
+import Form from './form.vue';
+
+const props = defineProps<{
+  bizId: number; // 业务编号
+  bizType: number; // 业务类型
+  businessId?: number; // 特殊：商机编号；在【商机】详情中，可以传递商机编号，默认新建的联系人关联到该商机
+  customerId?: number; // 特殊：客户编号；在【商机】详情中，可以传递客户编号，默认新建的联系人关联到该客户
+}>();
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [DetailListModal, detailListModalApi] = useVbenModal({
+  connectedComponent: ListModal,
+  destroyOnClose: true,
+});
+
+const checkedRows = ref<CrmContactApi.Contact[]>([]);
+function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
+  checkedRows.value = records;
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建联系人 */
+function handleCreate() {
+  formModalApi
+    .setData({ customerId: props.customerId, businessId: props.businessId })
+    .open();
+}
+
+function handleCreateContact() {
+  detailListModalApi.setData({ customerId: props.customerId }).open();
+}
+
+async function handleDeleteContactBusinessList() {
+  if (checkedRows.value.length === 0) {
+    message.error('请先选择联系人后操作！');
+    return;
+  }
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确定要将${checkedRows.value.map((item) => item.name).join(',')}解除关联吗？`,
+    })
+      .then(async () => {
+        const res = await deleteBusinessContactList({
+          businessId: props.bizId,
+          contactIds: checkedRows.value.map((item) => item.id),
+        });
+        if (res) {
+          // 提示并返回成功
+          message.success($t('ui.actionMessage.operationSuccess'));
+          onRefresh();
+          resolve(true);
+        } else {
+          reject(new Error($t('ui.actionMessage.operationFailed')));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 查看联系人详情 */
+function handleDetail(row: CrmContactApi.Contact) {
+  push({ name: 'CrmContactDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmContactApi.Contact) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+async function handleCreateBusinessContactList(contactIds: number[]) {
+  const data = {
+    businessId: props.bizId,
+    contactIds,
+  } as CrmContactApi.BusinessContactReq;
+  await createBusinessContactList(data);
+  onRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
+            return await getContactPageByCustomer({
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              customerId: props.bizId,
+              ...formValues,
+            });
+          } else if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
+            return await getContactPageByBusiness({
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              businessId: props.bizId,
+              ...formValues,
+            });
+          } else {
+            return [];
+          }
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmContactApi.Contact>,
+  gridEvents: {
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
+  },
+});
+</script>
+
 <template>
-  <div>contactList</div>
+  <div>
+    <FormModal @success="onRefresh" />
+    <DetailListModal
+      :customer-id="customerId"
+      @success="handleCreateBusinessContactList"
+    />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['联系人']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+            {
+              label: '关联',
+              icon: ACTION_ICON.ADD,
+              type: 'default',
+              auth: ['crm:contact:create-business'],
+              ifShow: () => !!businessId,
+              onClick: handleCreateContact,
+            },
+            {
+              label: '解除关联',
+              icon: ACTION_ICON.ADD,
+              type: 'default',
+              auth: ['crm:contact:create-business'],
+              ifShow: () => !!businessId,
+              onClick: handleDeleteContactBusinessList,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+    </Grid>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail.vue b/apps/web-antd/src/views/crm/contact/modules/detail.vue
index 99ad6b6f9..b7c6e0498 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/contact/modules/detail.vue
@@ -1,7 +1,172 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmContactApi } from '#/api/crm/contact';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getContact } from '#/api/crm/contact';
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const ContactDetailsInfo = defineAsyncComponent(
+  () => import('./detail-info.vue'),
+);
+
+const ContactForm = defineAsyncComponent(
+  () => import('#/views/crm/contact/modules/form.vue'),
+);
+
+const BusinessList = defineAsyncComponent(
+  () => import('#/views/crm/business/modules/detail-list.vue'),
+);
+
+const FollowUp = defineAsyncComponent(
+  () => import('#/views/crm/followup/index.vue'),
+);
+
+const PermissionList = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/permission-list.vue'),
+);
+
+const TransferForm = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/transfer-form.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const contactId = ref(0);
+
+const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact);
+const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ContactForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+/** 加载详情 */
+async function loadContactDetail() {
+  loading.value = true;
+  contactId.value = Number(route.params.id);
+  const data = await getContact(contactId.value);
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CONTACT,
+    bizId: contactId.value,
+  });
+  contactLogList.value = logList.list;
+  contact.value = data;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/contact');
+}
+
+/** 编辑 */
+function handleEdit() {
+  formModalApi.setData({ id: contactId.value }).open();
+}
+
+/** 转移线索 */
+function handleTransfer() {
+  transferModalApi.setData({ id: contactId.value }).open();
+}
+
+// 加载数据
+onMounted(() => {
+  contactId.value = Number(route.params.id);
+  loadContactDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="contact?.name" :loading="loading">
+    <FormModal @success="loadContactDetail" />
+    <TransferModal @success="loadContactDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          type="primary"
+          @click="handleEdit"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateOwnerUser"
+          type="primary"
+          @click="handleTransfer"
+        >
+          转移
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="contact" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ContactDetailsInfo :contact="contact" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+          <FollowUp :biz-id="contactId" :biz-type="BizTypeEnum.CRM_CONTACT" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="contactId"
+            :biz-type="BizTypeEnum.CRM_CONTACT"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="商机" key="4" :force-render="true">
+          <BusinessList
+            :biz-id="contactId"
+            :biz-type="BizTypeEnum.CRM_CONTACT"
+            :contact-id="contactId"
+            :customer-id="contact.customerId"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="5" :force-render="true">
+          <OperateLog :log-list="contactLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
index 79118dd3f..626ae073e 100644
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -1,10 +1,16 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
 
 import { getSimpleBusinessList } from '#/api/crm/business';
 import { getSimpleContactList } from '#/api/crm/contact';
 import { getCustomerSimpleList } from '#/api/crm/customer';
-import { floatToFixed2 } from '#/utils';
+import { DictTag } from '#/components/dict-tag';
+import { erpPriceInputFormatter, floatToFixed2 } from '#/utils';
 import { DICT_TYPE } from '#/utils/dict';
 
 /** 新增/修改的表单 */
@@ -274,3 +280,182 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 详情头部的配置 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'totalPrice',
+      label: '合同金额（元）',
+      content: (data) => erpPriceInputFormatter(data?.totalPrice) as string,
+    },
+    {
+      field: 'orderDate',
+      label: '下单时间',
+      content: (data) => formatDateTime(data?.orderDate) as string,
+    },
+    {
+      field: 'totalReceivablePrice',
+      label: '回款金额（元）',
+      content: (data) =>
+        erpPriceInputFormatter(data?.totalReceivablePrice) as string,
+    },
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+  ];
+}
+
+/** 详情基本信息的配置 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '合同编号',
+    },
+    {
+      field: 'name',
+      label: '合同名称',
+    },
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'businessName',
+      label: '商机名称',
+    },
+    {
+      field: 'totalPrice',
+      label: '合同金额（元）',
+      content: (data) => erpPriceInputFormatter(data?.totalPrice) as string,
+    },
+    {
+      field: 'orderDate',
+      label: '下单时间',
+      content: (data) => formatDateTime(data?.orderDate) as string,
+    },
+    {
+      field: 'startTime',
+      label: '合同开始时间',
+      content: (data) => formatDateTime(data?.startTime) as string,
+    },
+    {
+      field: 'endTime',
+      label: '合同结束时间',
+      content: (data) => formatDateTime(data?.endTime) as string,
+    },
+    {
+      field: 'signContactName',
+      label: '客户签约人',
+    },
+    {
+      field: 'signUserName',
+      label: '公司签约人',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+    {
+      field: 'auditStatus',
+      label: '合同状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_AUDIT_STATUS,
+          value: data?.auditStatus,
+        }),
+    },
+  ];
+}
+
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '合同编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '合同名称',
+      field: 'name',
+      minWidth: 150,
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      title: '合同金额（元）',
+      field: 'totalPrice',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '合同开始时间',
+      field: 'startTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '合同结束时间',
+      field: 'endTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '已回款金额（元）',
+      field: 'totalReceivablePrice',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '未回款金额（元）',
+      field: 'unpaidPrice',
+      minWidth: 150,
+      formatter: ({ row }) => {
+        return floatToFixed2(row.totalPrice - row.totalReceivablePrice);
+      },
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '所属部门',
+      field: 'ownerUserDeptName',
+      minWidth: 150,
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '合同状态',
+      field: 'auditStatus',
+      fixed: 'right',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-info.vue b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
index f952e7f2f..f3b879888 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmContractApi } from '#/api/crm/contract';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from '../data';
+
+defineProps<{
+  contract: CrmContractApi.Contract; // 合同信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>contractInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="contract" />
+    <Divider />
+    <SystemDescription :data="contract" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
index 3114fe4bc..ee8637eb5 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
@@ -1,4 +1,123 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmBusinessApi } from '#/api/crm/business';
+import type { CrmContractApi } from '#/api/crm/contract';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getContractPageByBusiness,
+  getContractPageByCustomer,
+} from '#/api/crm/contract';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { $t } from '#/locales';
+
+import { useDetailListColumns } from '../data';
+import Form from './form.vue';
+
+const props = defineProps<{
+  bizId: number; // 业务编号
+  bizType: number; // 业务类型
+}>();
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const checkedRows = ref<CrmContractApi.Contract[]>([]);
+function setCheckedRows({ records }: { records: CrmContractApi.Contract[] }) {
+  checkedRows.value = records;
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建合同 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 查看合同详情 */
+function handleDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContractDetail', params: { id: row.id } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
+            return await getContractPageByCustomer({
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              customerId: props.bizId,
+              ...formValues,
+            });
+          } else if (props.bizType === BizTypeEnum.CRM_CONTACT) {
+            return await getContractPageByBusiness({
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              businessId: props.bizId,
+              ...formValues,
+            });
+          } else {
+            return [];
+          }
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmBusinessApi.Business>,
+  gridEvents: {
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
+  },
+});
+</script>
+
 <template>
-  <div>contractList</div>
+  <div>
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['合同']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:contract:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+    </Grid>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail.vue b/apps/web-antd/src/views/crm/contract/modules/detail.vue
index 99ad6b6f9..bf49f9a0c 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/detail.vue
@@ -1,7 +1,193 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmContractApi } from '#/api/crm/contract';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { ArrowLeft } from '@vben/icons';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getContract } from '#/api/crm/contract';
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+import ClueForm from './form.vue';
+
+const FollowUp = defineAsyncComponent(
+  () => import('#/views/crm/followup/index.vue'),
+);
+
+const ProductDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/product/modules/detail-list.vue'),
+);
+
+const PermissionList = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/permission-list.vue'),
+);
+
+const TransferForm = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/transfer-form.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
+const ContractDetailsInfo = defineAsyncComponent(
+  () => import('./detail-info.vue'),
+);
+
+const ReceivableDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/receivable/modules/detail-list.vue'),
+);
+
+const ReceivablePlanDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/receivable/plan/modules/detail-list.vue'),
+);
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const contractId = ref(0);
+
+const contract = ref<CrmContractApi.Contract>({} as CrmContractApi.Contract);
+const contractLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+// 校验负责人权限和编辑权限
+const validateOwnerUser = computed(
+  () => permissionListRef.value?.validateOwnerUser,
+);
+const validateWrite = computed(() => permissionListRef.value?.validateWrite);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ClueForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+/** 加载线索详情 */
+async function loadContractDetail() {
+  loading.value = true;
+  const data = await getContract(contractId.value);
+  contract.value = data;
+  // 操作日志
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CLUE,
+    bizId: contractId.value,
+  });
+  contractLogList.value = logList.list;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/contract');
+}
+
+/** 编辑 */
+function handleEdit() {
+  formModalApi.setData({ id: contractId.value }).open();
+}
+
+/** 转移 */
+function handleTransfer() {
+  transferModalApi.setData({ bizType: BizTypeEnum.CRM_CONTRACT }).open();
+}
+
+// 加载数据
+onMounted(() => {
+  contractId.value = Number(route.params.id);
+  loadContractDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="contract?.name" :loading="loading">
+    <FormModal @success="loadContractDetail" />
+    <TransferModal @success="loadContractDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="handleBack">
+          <ArrowLeft class="size-5" />
+          返回
+        </Button>
+        <Button
+          v-if="validateWrite"
+          type="primary"
+          @click="handleEdit"
+          v-access:code="['crm:contract:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
+          转移
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="contract" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ContractDetailsInfo :contract="contract" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="合同跟进" key="2" :force-render="true">
+          <FollowUp :biz-id="contractId" :biz-type="BizTypeEnum.CRM_CONTRACT" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="产品" key="3" :force-render="true">
+          <ProductDetailsList
+            :biz-type="BizTypeEnum.CRM_CONTRACT"
+            :contract="contract"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="回款" key="4" :force-render="true">
+          <ReceivablePlanDetailsList
+            :contract-id="contractId"
+            :customer-id="contract.customerId"
+          />
+          <ReceivableDetailsList
+            :contract-id="contractId"
+            :customer-id="contract.customerId"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="5" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="contractId"
+            :biz-type="BizTypeEnum.CRM_CONTRACT"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="6" :force-render="true">
+          <OperateLog :log-list="contractLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/data.ts b/apps/web-antd/src/views/crm/customer/data.ts
index 551569da0..840d56636 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -243,7 +243,24 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 
 /** 详情页的字段 */
 export function useDetailSchema(): DescriptionItemSchema[] {
-  return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
+  return [
+    {
+      field: 'level',
+      label: '客户级别',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
+    },
+    {
+      field: 'dealStatus',
+      label: '成交状态',
+      content: (data) => (data.dealStatus ? '已成交' : '未成交'),
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+  ];
 }
 
 /** 详情页的基础字段 */
@@ -275,13 +292,21 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
       label: '邮箱',
     },
     {
-      field: 'wechat',
-      label: '微信',
+      field: 'areaName',
+      label: '地址',
+    },
+    {
+      field: 'detailAddress',
+      label: '详细地址',
     },
     {
       field: 'qq',
       label: 'QQ',
     },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
     {
       field: 'industryId',
       label: '客户行业',
@@ -297,14 +322,6 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
       content: (data) =>
         h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
     },
-    {
-      field: 'areaName',
-      label: '地址',
-    },
-    {
-      field: 'detailAddress',
-      label: '详细地址',
-    },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
@@ -316,32 +333,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     },
   ];
 }
-
-/** 详情页的系统字段 */
-export function useDetailSystemSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'ownerUserName',
-      label: '负责人',
-    },
-    {
-      field: 'ownerUserDeptName',
-      label: '所属部门',
-    },
-    {
-      field: 'contactLastTime',
-      label: '最后跟进时间',
-      content: (data) => formatDateTime(data?.contactLastTime) as string,
-    },
-    {
-      field: 'createTime',
-      label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
-    },
-    {
-      field: 'updateTime',
-      label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index 5795fdb0c..1e4f6b3bb 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -21,6 +21,7 @@ import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
 
 const { push } = useRouter();
 const sceneType = ref('1');
@@ -35,6 +36,16 @@ function onRefresh() {
   gridApi.query();
 }
 
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 导入客户 */
+function handleImport() {
+  importModalApi.open();
+}
+
 /** 导出表格 */
 async function handleExport() {
   const data = await exportCustomer(await gridApi.formApi.getValues());
@@ -124,6 +135,7 @@ function onChangeSceneType(key: number | string) {
     </template>
 
     <FormModal @success="onRefresh" />
+    <ImportModal @success="onRefresh" />
     <Grid>
       <template #top>
         <Tabs class="border-none" @change="onChangeSceneType">
@@ -142,6 +154,13 @@ function onChangeSceneType(key: number | string) {
               auth: ['crm:customer:create'],
               onClick: handleCreate,
             },
+            {
+              label: $t('ui.actionTitle.import'),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['crm:customer:import'],
+              onClick: handleImport,
+            },
             {
               label: $t('ui.actionTitle.export'),
               type: 'primary',
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-info.vue b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
index c651e23e0..23fa189dc 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
@@ -1,5 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from '../data';
+
+defineProps<{
+  customer: CrmCustomerApi.Customer; // 客户信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
 
 <template>
-  <div>detail-info</div>
+  <div class="p-4">
+    <BaseDescription :data="customer" />
+    <Divider />
+    <SystemDescription :data="customer" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail.vue b/apps/web-antd/src/views/crm/customer/modules/detail.vue
index 19c2b2695..1ee9c00db 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail.vue
@@ -5,31 +5,77 @@ import type { SystemOperateLogApi } from '#/api/system/operate-log';
 import { defineAsyncComponent, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { Page } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
 
-import { Button, Card, Modal, Tabs } from 'ant-design-vue';
+import { Button, Card, message, Tabs } from 'ant-design-vue';
 
 import { getCustomer, updateCustomerDealStatus } from '#/api/crm/customer';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { OperateLog } from '#/components/operate-log';
 
 import { useDetailSchema } from '../data';
 
+const BusinessList = defineAsyncComponent(
+  () => import('#/views/crm/business/modules/detail-list.vue'),
+);
+
 const CustomerDetailsInfo = defineAsyncComponent(
   () => import('./detail-info.vue'),
 );
 
+const ContactDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/contact/modules/detail-list.vue'),
+);
+
+const ContractDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/contract/modules/detail-list.vue'),
+);
+
+const CustomerForm = defineAsyncComponent(
+  () => import('#/views/crm/customer/modules/form.vue'),
+);
+
+const DistributeForm = defineAsyncComponent(
+  () => import('#/views/crm/customer/poolConfig/distribute-form.vue'),
+);
+
+const FollowUp = defineAsyncComponent(
+  () => import('#/views/crm/followup/index.vue'),
+);
+
+const PermissionList = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/permission-list.vue'),
+);
+
+const TransferForm = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/transfer-form.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
+const ReceivableDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/receivable/modules/detail-list.vue'),
+);
+
+const ReceivablePlanDetailsList = defineAsyncComponent(
+  () => import('#/views/crm/receivable/plan/modules/detail-list.vue'),
+);
+
 const loading = ref(false);
 
 const route = useRoute();
 const router = useRouter();
+const tabs = useTabs();
 
 const customerId = ref(0);
 
 const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer);
-const permissionListRef = ref(); // 团队成员列表 Ref
+const customerLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Description] = useDescription({
   componentProps: {
@@ -40,91 +86,113 @@ const [Description] = useDescription({
   schema: useDetailSchema(),
 });
 
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: CustomerForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+const [DistributeModal, distributeModalApi] = useVbenModal({
+  connectedComponent: DistributeForm,
+  destroyOnClose: true,
+});
+
 /** 加载详情 */
 async function loadCustomerDetail() {
   loading.value = true;
   customerId.value = Number(route.params.id);
   const data = await getCustomer(customerId.value);
-  await getOperateLog();
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CUSTOMER,
+    bizId: customerId.value,
+  });
+  customerLogList.value = logList.list;
   customer.value = data;
   loading.value = false;
 }
 
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/customer');
+}
+
 /** 编辑 */
 function handleEdit() {
-  // formModalApi.setData({ id: clueId }).open();
+  formModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 转移线索 */
 function handleTransfer() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 锁定客户 */
 function handleLock() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 解锁客户 */
 function handleUnlock() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 领取客户 */
 function handleReceive() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 分配客户 */
 function handleDistributeForm() {
-  // transferModalApi.setData({ id: clueId }).open();
+  distributeModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 客户放入公海 */
 function handlePutPool() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 更新成交状态操作 */
-async function handleUpdateDealStatus() {
-  const dealStatus = !customer.value.dealStatus;
-  try {
-    await Modal.confirm({
-      title: '提示',
+async function handleUpdateDealStatus(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const dealStatus = !customer.value.dealStatus;
+    confirm({
       content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
-    });
-    await updateCustomerDealStatus(customerId.value, dealStatus);
-    Modal.success({
-      title: '成功',
-      content: '更新成交状态成功',
-    });
-    await loadCustomerDetail();
-  } catch {
-    // 用户取消操作
-  }
-}
-
-/** 获取操作日志 */
-const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志列表
-async function getOperateLog() {
-  if (!customerId.value) {
-    return;
-  }
-  const data = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CUSTOMER,
-    bizId: customerId.value,
+    })
+      .then(async () => {
+        const res = await updateCustomerDealStatus(
+          customerId.value,
+          dealStatus,
+        );
+        if (res) {
+          message.success('更新成交状态成功');
+          resolve(true);
+        } else {
+          reject(new Error('更新成交状态失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
   });
-  logList.value = data.list;
 }
 
 // 加载数据
-onMounted(async () => {
-  await loadCustomerDetail();
+onMounted(() => {
+  customerId.value = Number(route.params.id);
+  loadCustomerDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="customer?.name" :loading="loading">
+    <FormModal @success="loadCustomerDetail" />
+    <TransferModal @success="loadCustomerDetail" />
+    <DistributeModal @success="loadCustomerDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
         <Button
@@ -160,10 +228,18 @@ onMounted(async () => {
         >
           锁定
         </Button>
-        <Button v-if="!customer.ownerUserId" @click="handleReceive">
+        <Button
+          v-if="!customer.ownerUserId"
+          type="primary"
+          @click="handleReceive"
+        >
           领取
         </Button>
-        <Button v-if="!customer.ownerUserId" @click="handleDistributeForm">
+        <Button
+          v-if="!customer.ownerUserId"
+          type="primary"
+          @click="handleDistributeForm"
+        >
           分配
         </Button>
         <Button
@@ -174,34 +250,52 @@ onMounted(async () => {
         </Button>
       </div>
     </template>
-    <Card>
+    <Card class="min-h-[10%]">
       <Description :data="customer" />
     </Card>
-    <Card class="mt-4">
+    <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="跟进记录" key="1">
-          <div>跟进记录</div>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <CustomerDetailsInfo :customer="customer" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="基本信息" key="2">
-          <CustomerDetailsInfo />
+        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+          <FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="联系人" key="3">
-          <div>联系人</div>
+        <Tabs.TabPane tab="联系人" key="3" :force-render="true">
+          <ContactDetailsList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :customer-id="customerId"
+          />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="4">
-          <div>团队成员</div>
+        <Tabs.TabPane tab="团队成员" key="4" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="商机" key="5">
-          <div>商机</div>
+        <Tabs.TabPane tab="商机" key="5" :force-render="true">
+          <BusinessList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :customer-id="customerId"
+          />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="合同" key="6">
-          <div>合同</div>
+        <Tabs.TabPane tab="合同" key="6" :force-render="true">
+          <ContractDetailsList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+          />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="回款" key="7">
-          <div>回款</div>
+        <Tabs.TabPane tab="回款" key="7" :force-render="true">
+          <ReceivablePlanDetailsList :customer-id="customerId" />
+          <ReceivableDetailsList :customer-id="customerId" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="8">
-          <OperateLog :log-list="logList" />
+        <Tabs.TabPane tab="操作日志" key="8" :force-render="true">
+          <OperateLog :log-list="customerLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/customer/modules/import-form.vue b/apps/web-antd/src/views/crm/customer/modules/import-form.vue
new file mode 100644
index 000000000..2db456eff
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/modules/import-form.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importCustomer, importCustomerTemplate } from '#/api/crm/customer';
+import { getSimpleUserList } from '#/api/system/user';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'file',
+      label: '用户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的用户数据',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await importCustomer({
+        ownerUserId: data.ownerUserId,
+        file: data.file,
+        updateSupport: data.updateSupport,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importCustomerTemplate();
+  downloadFileFromBlobPart({ fileName: '客户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal title="客户导入" class="w-[30%]">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+          >
+            <Button type="primary"> 选择 Excel 文件 </Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload"> 下载导入模板 </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/clue/modules/transfer.vue b/apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
similarity index 63%
rename from apps/web-antd/src/views/crm/clue/modules/transfer.vue
rename to apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
index d076ec4e6..bc1d51fdb 100644
--- a/apps/web-antd/src/views/crm/clue/modules/transfer.vue
+++ b/apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
@@ -1,18 +1,14 @@
 <script lang="ts" setup>
-import type { CrmPermissionApi } from '#/api/crm/permission';
-
-import { ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import { transferClue } from '#/api/crm/clue';
+import { distributeCustomer } from '#/api/crm/customer';
+import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 const emit = defineEmits(['success']);
-const formData = ref<{ id: number }>();
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -24,12 +20,24 @@ const [Form, formApi] = useVbenForm({
   },
   layout: 'horizontal',
   schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
     {
       fieldName: 'ownerUserId',
       label: '负责人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        api: 'getSimpleUserList',
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
       },
       rules: 'required',
     },
@@ -45,9 +53,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
+    const data = await formApi.getValues();
     try {
-      await transferClue(data);
+      await distributeCustomer([data.id], data.ownerUserId);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -58,21 +66,25 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
       return;
     }
     // 加载数据
-    const data = modalApi.getData<{ id: number }>();
+    const data = modalApi.getData();
     if (!data || !data.id) {
       return;
     }
-    formData.value = data;
+    modalApi.lock();
+    try {
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
   },
 });
 </script>
 
 <template>
-  <Modal :title="$t('ui.actionTitle.transfer')" class="w-[40%]">
+  <Modal title="分配客户" class="w-[40%]">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/crm/followup/data.ts b/apps/web-antd/src/views/crm/followup/data.ts
new file mode 100644
index 000000000..6c7f8b148
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/data.ts
@@ -0,0 +1,36 @@
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { formatDateTime } from '@vben/utils';
+
+/** 详情页的系统字段 */
+export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+    {
+      field: 'contactLastContent',
+      label: '最后跟进记录',
+    },
+    {
+      field: 'contactLastTime',
+      label: '最后跟进时间',
+      content: (data) => formatDateTime(data?.contactLastTime) as string,
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data) => formatDateTime(data?.updateTime) as string,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/followup/index.vue b/apps/web-antd/src/views/crm/followup/index.vue
index 410e10c13..6f0e42f36 100644
--- a/apps/web-antd/src/views/crm/followup/index.vue
+++ b/apps/web-antd/src/views/crm/followup/index.vue
@@ -1,18 +1,22 @@
 <script lang="ts" setup>
-import type { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup';
-
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmFollowUpApi } from '#/api/crm/followup';
 
+import { watch } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 
-import { BizTypeEnum } from '@/api/crm/permission';
-import { DICT_TYPE } from '@/utils/dict';
 import { Button, message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteFollowUpRecord,
+  getFollowUpRecordPage,
+} from '#/api/crm/followup';
+import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
+import { DICT_TYPE } from '#/utils';
 
 import FollowUpRecordForm from './modules/form.vue';
 
@@ -33,17 +37,17 @@ function onRefresh() {
 
 /** 添加跟进记录 */
 function handleCreate() {
-  formModalApi.setData(null).open();
+  formModalApi.setData({ bizId: props.bizId, bizType: props.bizType }).open();
 }
 
 /** 删除跟进记录 */
-async function handleDelete(row: FollowUpRecordVO) {
+async function handleDelete(row: CrmFollowUpApi.FollowUpRecord) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     key: 'action_key_msg',
   });
   try {
-    await FollowUpRecordApi.deleteFollowUpRecord(row.id);
+    await deleteFollowUpRecord(row.id);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_key_msg',
@@ -75,7 +79,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       {
         field: 'createTime',
         title: '创建时间',
-        width: 180,
         formatter: 'formatDateTime',
       },
       { field: 'creatorName', title: '跟进人' },
@@ -91,58 +94,32 @@ const [Grid, gridApi] = useVbenVxeGrid({
       {
         field: 'nextTime',
         title: '下次联系时间',
-        width: 180,
         formatter: 'formatDateTime',
       },
       {
         field: 'contacts',
         title: '关联联系人',
         visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
-        slots: {
-          default: ({ row }) =>
-            row.contacts?.map((contact) =>
-              h(
-                Button,
-                {
-                  type: 'link',
-                  onClick: () => openContactDetail(contact.id),
-                },
-                () => contact.name,
-              ),
-            ),
-        },
+        slots: { default: 'contacts' },
       },
       {
         field: 'businesses',
         title: '关联商机',
         visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
-        slots: {
-          default: ({ row }) =>
-            row.businesses?.map((business) =>
-              h(
-                Button,
-                {
-                  type: 'link',
-                  onClick: () => openBusinessDetail(business.id),
-                },
-                () => business.name,
-              ),
-            ),
-        },
+        slots: { default: 'businesses' },
       },
       {
         field: 'actions',
         title: '操作',
-        width: 100,
         slots: { default: 'actions' },
       },
     ],
-    height: 'auto',
+    height: 600,
     keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }) => {
-          return await FollowUpRecordApi.getFollowUpRecordPage({
+          return await getFollowUpRecordPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             bizType: props.bizType,
@@ -157,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: { code: 'query' },
     },
-  } as VxeTableGridOptions<FollowUpRecordVO>,
+  } as VxeTableGridOptions<CrmFollowUpApi.FollowUpRecord>,
 });
 
 watch(
@@ -169,8 +146,9 @@ watch(
 </script>
 
 <template>
-  <Page auto-content-height>
-    <Grid table-title="跟进记录列表">
+  <div>
+    <FormModal @success="onRefresh" />
+    <Grid>
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -183,6 +161,16 @@ watch(
           ]"
         />
       </template>
+      <template #contacts="{ row }">
+        <Button type="link" @click="openContactDetail(row.id)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #businesses="{ row }">
+        <Button type="link" @click="openBusinessDetail(row.id)">
+          {{ row.name }}
+        </Button>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -200,6 +188,5 @@ watch(
         />
       </template>
     </Grid>
-    <FormModal @success="onRefresh" />
-  </Page>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/followup/modules/form.vue b/apps/web-antd/src/views/crm/followup/modules/form.vue
index 40cddb4cd..9eeb5ebd3 100644
--- a/apps/web-antd/src/views/crm/followup/modules/form.vue
+++ b/apps/web-antd/src/views/crm/followup/modules/form.vue
@@ -1,27 +1,23 @@
 <script lang="ts" setup>
-import type { CrmFollowUpRecordApi } from '#/api/crm/followup';
+import type { CrmFollowUpApi } from '#/api/crm/followup';
 
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import {
-  createFollowUpRecord,
-  getFollowUpRecord,
-  updateFollowUpRecord,
-} from '#/api/crm/followup';
+import { getBusinessPageByCustomer } from '#/api/crm/business';
+import { getContactPageByCustomer } from '#/api/crm/contact';
+import { createFollowUpRecord } from '#/api/crm/followup';
 import { $t } from '#/locales';
+import { DICT_TYPE, getDictOptions } from '#/utils';
 
 const emit = defineEmits(['success']);
-const formData = ref<CrmFollowUpRecordApi.FollowUpRecord>();
-const getTitle = computed(() => {
-  return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['跟进记录'])
-    : $t('ui.actionTitle.create', ['跟进记录']);
-});
+
+const bizId = ref<number>();
+const bizType = ref<number>();
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -32,7 +28,94 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [],
+  schema: [
+    {
+      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: false,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+      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 () => {
+          const res = await getContactPageByCustomer({
+            pageNo: 1,
+            pageSize: 100,
+            customerId: bizId.value,
+          });
+          return res.list;
+        },
+        mode: 'multiple',
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+    {
+      fieldName: 'businessIds',
+      label: '关联商机',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          const res = await getBusinessPageByCustomer({
+            pageNo: 1,
+            pageSize: 100,
+            customerId: bizId.value,
+          });
+          return res.list;
+        },
+        mode: 'multiple',
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+  ],
   showDefaultActions: false,
 });
 
@@ -44,12 +127,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
-      (await formApi.getValues()) as CrmFollowUpRecordApi.FollowUpRecord;
+    const data = (await formApi.getValues()) as CrmFollowUpApi.FollowUpRecord;
     try {
-      await (formData.value?.id
-        ? updateFollowUpRecord(data)
-        : createFollowUpRecord(data));
+      await createFollowUpRecord(data);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -60,19 +140,20 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
       return;
     }
     // 加载数据
-    const data = modalApi.getData<CrmFollowUpRecordApi.FollowUpRecord>();
-    if (!data || !data.id) {
+    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 {
-      formData.value = await getFollowUpRecord(data.id as number);
-      // 设置到 values
-      await formApi.setValues(formData.value);
+      await formApi.setValues(data);
     } finally {
       modalApi.unlock();
     }
@@ -81,7 +162,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[40%]">
+  <Modal title="添加跟进记录" class="w-[40%]">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/crm/permission/modules/data.ts b/apps/web-antd/src/views/crm/permission/modules/data.ts
new file mode 100644
index 000000000..2ef822aa2
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/modules/data.ts
@@ -0,0 +1,231 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { BizTypeEnum, PermissionLevelEnum } from '#/api/crm/permission';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+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-antd/src/views/crm/permission/modules/permission-form.vue b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
index e6e8fa462..c2c5df01a 100644
--- a/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
@@ -8,15 +8,10 @@ import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import {
-  BizTypeEnum,
-  createPermission,
-  PermissionLevelEnum,
-  updatePermission,
-} from '#/api/crm/permission';
-import { getSimpleUserList } from '#/api/system/user';
+import { createPermission, updatePermission } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { DICT_TYPE, getDictOptions } from '#/utils';
+
+import { useFormSchema } from './data';
 
 const emit = defineEmits(['success']);
 const formData = ref<CrmPermissionApi.Permission>();
@@ -35,74 +30,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 80,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      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: '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 &&
-            formData.value?.bizType === BizTypeEnum.CRM_CUSTOMER
-          );
-        },
-      },
-    },
-  ],
+  schema: useFormSchema(),
   showDefaultActions: false,
 });
 
@@ -114,8 +42,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    let data = (await formApi.getValues()) as CrmPermissionApi.Permission;
-    data = Object.assign(data, formData.value);
+    const data = (await formApi.getValues()) as CrmPermissionApi.Permission;
     try {
       await (formData.value?.ids
         ? updatePermission(data)
@@ -141,7 +68,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = {
-        ids: data.ids || [data.id] || undefined,
+        ids: data.ids ?? (data.id ? [data.id] : undefined),
         userId: undefined,
         bizType: data.bizType,
         bizId: data.bizId,
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
index 65b202261..68181af94 100644
--- a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
@@ -17,12 +17,10 @@ import {
   PermissionLevelEnum,
 } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { DICT_TYPE } from '#/utils';
 
+import { useGridColumns } from './data';
 import Form from './permission-form.vue';
 
-defineOptions({ name: 'CrmPermissionList' });
-
 const props = defineProps<{
   bizId: number; // 模块数据编号
   bizType: number; // 模块类型
@@ -50,13 +48,18 @@ function onRefresh() {
   gridApi.query();
 }
 
-const checkedIds = ref<CrmPermissionApi.Permission[]>([]);
-function setCheckedIds({
+const checkedRows = ref<CrmPermissionApi.Permission[]>([]);
+function setCheckedRows({
   records,
 }: {
   records: CrmPermissionApi.Permission[];
 }) {
-  checkedIds.value = records;
+  if (records.some((item) => item.level === PermissionLevelEnum.OWNER)) {
+    message.warning('不能选择负责人！');
+    gridApi.grid.setAllCheckboxRow(false);
+    return;
+  }
+  checkedRows.value = records;
 }
 
 function handleCreate() {
@@ -69,11 +72,11 @@ function handleCreate() {
 }
 
 function handleEdit() {
-  if (checkedIds.value.length === 0) {
+  if (checkedRows.value.length === 0) {
     message.error('请先选择团队成员后操作！');
     return;
   }
-  if (checkedIds.value.length > 1) {
+  if (checkedRows.value.length > 1) {
     message.error('只能选择一个团队成员进行编辑！');
     return;
   }
@@ -81,29 +84,29 @@ function handleEdit() {
     .setData({
       bizType: props.bizType,
       bizId: props.bizId,
-      id: checkedIds.value[0]?.id,
-      level: checkedIds.value[0]?.level,
+      id: checkedRows.value[0]?.id,
+      level: checkedRows.value[0]?.level,
     })
     .open();
 }
 
 function handleDelete() {
-  if (checkedIds.value.length === 0) {
+  if (checkedRows.value.length === 0) {
     message.error('请先选择团队成员后操作！');
     return;
   }
   return new Promise((resolve, reject) => {
     confirm({
-      content: `你要将${checkedIds.value.map((item) => item.nickname).join(',')}移出团队吗？`,
+      content: `你要将${checkedRows.value.map((item) => item.nickname).join(',')}移出团队吗？`,
     })
       .then(async () => {
-        // 更新用户状态
         const res = await deletePermissionBatch(
-          checkedIds.value.map((item) => item.id as number),
+          checkedRows.value.map((item) => item.id as number),
         );
         if (res) {
           // 提示并返回成功
           message.success($t('ui.actionMessage.operationSuccess'));
+          onRefresh();
           resolve(true);
         } else {
           reject(new Error('移出失败'));
@@ -144,37 +147,7 @@ async function handleQuit() {
 
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: [
-      {
-        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',
-      },
-    ],
+    columns: useGridColumns(),
     height: 'auto',
     pagerConfig: {
       enabled: false,
@@ -201,8 +174,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmPermissionApi.Permission>,
   gridEvents: {
-    checkboxAll: setCheckedIds,
-    checkboxChange: setCheckedIds,
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
   },
 });
 
diff --git a/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
index f849cdfc9..9249fc62d 100644
--- a/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
@@ -13,12 +13,10 @@ 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, PermissionLevelEnum } from '#/api/crm/permission';
-import { getSimpleUserList } from '#/api/system/user';
+import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { DICT_TYPE, getDictOptions } from '#/utils';
 
-defineOptions({ name: 'CrmTransferForm' });
+import { useTransferFormSchema } from './data';
 
 const emit = defineEmits(['success']);
 
@@ -56,87 +54,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'ownerUserId',
-      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) {
-            formApi.setFieldValue('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,
-          },
-        ],
-      },
-    },
-  ],
+  schema: useTransferFormSchema(),
   showDefaultActions: false,
 });
 
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
index 348afb372..ff5b0903d 100644
--- a/apps/web-antd/src/views/crm/product/data.ts
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -1,11 +1,20 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
 
 import { handleTree } from '@vben/utils';
 
 import { z } from '#/adapter/form';
 import { getProductCategoryList } from '#/api/crm/product/category';
-import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+import { DictTag } from '#/components/dict-tag';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  erpPriceInputFormatter,
+  getDictOptions,
+} from '#/utils';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -174,3 +183,112 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'categoryName',
+      label: '产品类别',
+    },
+    {
+      field: 'unit',
+      label: '产品单位',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
+    },
+    {
+      field: 'price',
+      label: '产品价格',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'no',
+      label: '产品编码',
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '产品名称',
+    },
+    {
+      field: 'no',
+      label: '产品编码',
+    },
+    {
+      field: 'price',
+      label: '价格（元）',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'description',
+      label: '产品描述',
+    },
+    {
+      field: 'categoryName',
+      label: '产品类型',
+    },
+    {
+      field: 'status',
+      label: '是否上下架',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_STATUS, value: data?.status }),
+    },
+    {
+      field: 'unit',
+      label: '产品单位',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export function useDetailListColumns(
+  showBussinePrice: 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: 'formatNumber',
+    },
+    {
+      field: 'businessPrice',
+      title: '商机价格（元）',
+      formatter: 'formatNumber',
+      visible: showBussinePrice,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'totalPrice',
+      title: '合计金额（元）',
+      formatter: 'formatNumber',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-info.vue b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
index c6bcbfbcd..2d902c41f 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
@@ -1,4 +1,27 @@
-<script lang="ts" setup></script>
+<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 [ProductDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+</script>
+
 <template>
-  <div>productInfo</div>
+  <div class="p-4">
+    <ProductDescription :data="product" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-list.vue b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
index 4a0fbfd34..96e3d09f6 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
@@ -1,4 +1,59 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmBusinessApi } from '#/api/crm/business';
+import type { CrmContractApi } from '#/api/crm/contract';
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { erpPriceInputFormatter } from '#/utils';
+
+import { useDetailListColumns } from '../data';
+
+const props = defineProps<{
+  bizType: BizTypeEnum;
+  business?: CrmBusinessApi.Business; // 商机
+  contract?: CrmContractApi.Contract; // 合同
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(props.bizType === BizTypeEnum.CRM_BUSINESS),
+    data:
+      props.bizType === BizTypeEnum.CRM_BUSINESS
+        ? props.business?.products
+        : props.contract?.products,
+    height: 600,
+    pagerConfig: {
+      enabled: false,
+    },
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+  } as VxeTableGridOptions<CrmProductApi.Product>,
+});
+</script>
+
 <template>
-  <div>productList</div>
+  <div>
+    <Grid />
+    <div class="flex justify-end">
+      <span class="font-bold text-red-500">
+        整单折扣：{{
+          erpPriceInputFormatter(
+            business ? business.discountPercent : contract?.discountPercent,
+          )
+        }}%
+      </span>
+      <span class="ml-4 font-bold text-red-500">
+        产品总金额：{{
+          erpPriceInputFormatter(
+            business ? business.totalProductPrice : contract?.totalProductPrice,
+          )
+        }}
+        元
+      </span>
+    </div>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail.vue b/apps/web-antd/src/views/crm/product/modules/detail.vue
index 99ad6b6f9..ffe2f79e9 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/product/modules/detail.vue
@@ -1,7 +1,95 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmProductApi } from '#/api/crm/product';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getProduct } from '#/api/crm/product';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const ProductDetailsInfo = defineAsyncComponent(
+  () => import('./detail-info.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const productId = ref(0);
+
+const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product);
+const productLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+/** 加载详情 */
+async function loadProductDetail() {
+  loading.value = true;
+  const data = await getProduct(productId.value);
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_PRODUCT,
+    bizId: productId.value,
+  });
+  productLogList.value = logList.list;
+  product.value = data;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/product');
+}
+
+// 加载数据
+onMounted(() => {
+  productId.value = Number(route.params.id);
+  loadProductDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="product?.name" :loading="loading">
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="handleBack"> 返回 </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="product" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ProductDetailsInfo :product="product" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="2" :force-render="true">
+          <OperateLog :log-list="productLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
index 1c33d1aec..5db99a20b 100644
--- a/apps/web-antd/src/views/crm/receivable/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -1,10 +1,17 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
 
 import { getContractSimpleList } from '#/api/crm/contract';
 import { getCustomerSimpleList } from '#/api/crm/customer';
 import { getReceivablePlanSimpleList } from '#/api/crm/receivable/plan';
 import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { erpPriceInputFormatter } from '#/utils';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
 /** 新增/修改的表单 */
@@ -267,3 +274,150 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'totalPrice',
+      label: '合同金额',
+      content: (data) => erpPriceInputFormatter(data.totalPrice),
+    },
+    {
+      field: 'returnTime',
+      label: '回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '回款编号',
+    },
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'contract',
+      label: '合同编号',
+      content: (data) => data?.contract?.no,
+    },
+    {
+      field: 'returnTime',
+      label: '回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'returnType',
+      label: '回款方式',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
+          value: data?.returnType,
+        }),
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '回款编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+    },
+    {
+      title: '合同编号',
+      field: 'contract',
+      minWidth: 150,
+    },
+    {
+      title: '回款日期',
+      field: 'returnTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款金额（元）',
+      field: 'price',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      minWidth: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '合同金额（元）',
+      field: 'contract.totalPrice',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '回款状态',
+      field: 'auditStatus',
+      minWidth: 100,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
index bac747f62..b22365cbc 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from '../data';
+
+defineProps<{
+  receivable: CrmReceivableApi.Receivable; // 收款信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>receivableInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="receivable" />
+    <Divider />
+    <SystemDescription :data="receivable" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
index d9444469c..b994775d8 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
@@ -1,4 +1,156 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteReceivable,
+  getReceivablePageByCustomer,
+} from '#/api/crm/receivable';
+import { $t } from '#/locales';
+
+import { useDetailListColumns } from '../data';
+import Form from './form.vue';
+
+const props = defineProps<{
+  contractId?: number; // 合同编号
+  customerId?: number; // 客户编号
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const checkedRows = ref<CrmReceivableApi.Receivable[]>([]);
+function setCheckedRows({
+  records,
+}: {
+  records: CrmReceivableApi.Receivable[];
+}) {
+  checkedRows.value = records;
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建回款 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑回款 */
+function handleEdit(row: CrmReceivableApi.Receivable) {
+  formModalApi.setData({ receivable: row }).open();
+}
+
+/** 删除回款 */
+async function handleDelete(row: CrmReceivableApi.Receivable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.no]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteReceivable(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const queryParams: CrmReceivableApi.ReceivablePageParam = {
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          };
+          if (props.customerId && !props.contractId) {
+            queryParams.customerId = props.customerId;
+          } else if (props.customerId && props.contractId) {
+            // 如果是合同的话客户编号也需要带上因为权限基于客户
+            queryParams.customerId = props.customerId;
+            queryParams.contractId = props.contractId;
+          }
+          return await getReceivablePageByCustomer(queryParams);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
+  gridEvents: {
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
+  },
+});
+</script>
+
 <template>
-  <div>receivableList</div>
+  <div>
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:receivable:update'],
+              onClick: handleEdit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:receivable:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail.vue b/apps/web-antd/src/views/crm/receivable/modules/detail.vue
index 99ad6b6f9..24f95b16e 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail.vue
@@ -1,7 +1,139 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { ArrowLeft } from '@vben/icons';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getReceivable } from '#/api/crm/receivable';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+import ReceivableForm from './form.vue';
+
+const PermissionList = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/permission-list.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
+const ReceivableDetailsInfo = defineAsyncComponent(
+  () => import('./detail-info.vue'),
+);
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const receivableId = ref(0);
+
+const receivable = ref<CrmReceivableApi.Receivable>(
+  {} as CrmReceivableApi.Receivable,
+);
+const receivableLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+// 校验编辑权限
+const validateWrite = computed(() => permissionListRef.value?.validateWrite);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ReceivableForm,
+  destroyOnClose: true,
+});
+
+/** 加载线索详情 */
+async function loadReceivableDetail() {
+  loading.value = true;
+  const data = await getReceivable(receivableId.value);
+  receivable.value = data;
+  // 操作日志
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_RECEIVABLE,
+    bizId: receivableId.value,
+  });
+  receivableLogList.value = logList.list;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/receivable');
+}
+
+/** 编辑收款 */
+function handleEdit() {
+  formModalApi.setData({ id: receivableId.value }).open();
+}
+
+// 加载数据
+onMounted(() => {
+  receivableId.value = Number(route.params.id);
+  loadReceivableDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="receivable?.no" :loading="loading">
+    <FormModal @success="loadReceivableDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="handleBack">
+          <ArrowLeft class="size-5" />
+          返回
+        </Button>
+        <Button
+          v-if="validateWrite"
+          type="primary"
+          @click="handleEdit"
+          v-access:code="['crm:receivable:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="receivable" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ReceivableDetailsInfo :receivable="receivable" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="2" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="receivableId"
+            :biz-type="BizTypeEnum.CRM_RECEIVABLE"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
+          <OperateLog :log-list="receivableLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/data.ts b/apps/web-antd/src/views/crm/receivable/plan/data.ts
index 519c41f13..6d57a4e7a 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -1,7 +1,14 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
 
 import { getCustomerSimpleList } from '#/api/crm/customer';
+import { DictTag } from '#/components/dict-tag';
+import { erpPriceInputFormatter } from '#/utils';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
 /** 新增/修改的表单 */
@@ -228,3 +235,150 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'totalPrice',
+      label: '合同金额',
+      content: (data) => erpPriceInputFormatter(data.totalPrice),
+    },
+    {
+      field: 'returnTime',
+      label: '回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '回款编号',
+    },
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'contract',
+      label: '合同编号',
+      content: (data) => data?.contract?.no,
+    },
+    {
+      field: 'returnTime',
+      label: '回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'returnType',
+      label: '回款方式',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
+          value: data?.returnType,
+        }),
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '回款编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+    },
+    {
+      title: '合同编号',
+      field: 'contract',
+      minWidth: 150,
+    },
+    {
+      title: '回款日期',
+      field: 'returnTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款金额（元）',
+      field: 'price',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      minWidth: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '合同金额（元）',
+      field: 'contract.totalPrice',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '回款状态',
+      field: 'auditStatus',
+      minWidth: 100,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/plan/index.vue b/apps/web-antd/src/views/crm/receivable/plan/index.vue
index 1f4c479cb..137af3946 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -53,12 +53,12 @@ function handleCreate() {
 }
 
 /** 编辑回款计划 */
-function handleEdit(row: CrmReceivablePlanApi.ReceivablePlan) {
+function handleEdit(row: CrmReceivablePlanApi.Plan) {
   formModalApi.setData(row).open();
 }
 
 /** 删除回款计划 */
-async function handleDelete(row: CrmReceivablePlanApi.ReceivablePlan) {
+async function handleDelete(row: CrmReceivablePlanApi.Plan) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.period]),
     key: 'action_key_msg',
@@ -76,17 +76,17 @@ async function handleDelete(row: CrmReceivablePlanApi.ReceivablePlan) {
 }
 
 /** 创建回款 */
-function handleCreateReceivable(row: CrmReceivablePlanApi.ReceivablePlan) {
+function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
   receivableFormModalApi.setData({ plan: row }).open();
 }
 
 /** 查看回款计划详情 */
-function handleDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
+function handleDetail(row: CrmReceivablePlanApi.Plan) {
   push({ name: 'CrmReceivablePlanDetail', params: { id: row.id } });
 }
 
 /** 查看客户详情 */
-function handleCustomerDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
+function handleCustomerDetail(row: CrmReceivablePlanApi.Plan) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  } as VxeTableGridOptions<CrmReceivablePlanApi.ReceivablePlan>,
+  } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
 });
 
 function onChangeSceneType(key: number | string) {
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
index d94b1e3b9..b22c59016 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from '../data';
+
+defineProps<{
+  receivablePlan: CrmReceivablePlanApi.Plan; // 收款计划信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>receivablePlanInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="receivablePlan" />
+    <Divider />
+    <SystemDescription :data="receivablePlan" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
index bec4aa4b6..dde0f0a98 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
@@ -1,4 +1,171 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteReceivablePlan,
+  getReceivablePlanPageByCustomer,
+} from '#/api/crm/receivable/plan';
+import { $t } from '#/locales';
+
+import ReceivableForm from '../../modules/form.vue';
+import { useDetailListColumns } from '../data';
+import Form from './form.vue';
+
+const props = defineProps<{
+  contractId?: number; // 合同编号
+  customerId?: number; // 客户编号
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ReceivableFormModal, receivableFormModalApi] = useVbenModal({
+  connectedComponent: ReceivableForm,
+  destroyOnClose: true,
+});
+
+const checkedRows = ref<CrmReceivablePlanApi.Plan[]>([]);
+function setCheckedRows({ records }: { records: CrmReceivablePlanApi.Plan[] }) {
+  checkedRows.value = records;
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建回款计划 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 创建回款 */
+function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
+  receivableFormModalApi.setData({ plan: row }).open();
+}
+
+/** 编辑回款计划 */
+function handleEdit(row: CrmReceivableApi.Receivable) {
+  formModalApi.setData({ receivable: row }).open();
+}
+
+/** 删除回款计划 */
+async function handleDelete(row: CrmReceivablePlanApi.Plan) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.period]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteReceivablePlan(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const queryParams: CrmReceivablePlanApi.PlanPageParam = {
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          };
+          if (props.customerId && !props.contractId) {
+            queryParams.customerId = props.customerId;
+          } else if (props.customerId && props.contractId) {
+            // 如果是合同的话客户编号也需要带上因为权限基于客户
+            queryParams.customerId = props.customerId;
+            queryParams.contractId = props.contractId;
+          }
+          return await getReceivablePlanPageByCustomer(queryParams);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
+  gridEvents: {
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
+  },
+});
+</script>
+
 <template>
-  <div>receivablePlanList</div>
+  <div>
+    <FormModal @success="onRefresh" />
+    <ReceivableFormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款计划']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable-plan:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款']),
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable-plan:create'],
+              onClick: handleCreateReceivable.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:receivable-plan:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:receivable-plan:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.period]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
index 99ad6b6f9..edc8eefdb 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
@@ -1,7 +1,143 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { ArrowLeft } from '@vben/icons';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getReceivablePlan } from '#/api/crm/receivable/plan';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+import ReceivablePlanForm from './form.vue';
+
+const PermissionList = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/permission-list.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
+const ReceivablePlanDetailsInfo = defineAsyncComponent(
+  () => import('./detail-info.vue'),
+);
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const receivablePlanId = ref(0);
+
+const receivablePlan = ref<CrmReceivablePlanApi.Plan>(
+  {} as CrmReceivablePlanApi.Plan,
+);
+const receivablePlanLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+// 校验编辑权限
+const validateWrite = computed(() => permissionListRef.value?.validateWrite);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ReceivablePlanForm,
+  destroyOnClose: true,
+});
+
+/** 加载线索详情 */
+async function loadreceivablePlanDetail() {
+  loading.value = true;
+  const data = await getReceivablePlan(receivablePlanId.value);
+  receivablePlan.value = data;
+  // 操作日志
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_RECEIVABLE_PLAN,
+    bizId: receivablePlanId.value,
+  });
+  receivablePlanLogList.value = logList.list;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/receivablePlan');
+}
+
+/** 编辑收款 */
+function handleEdit() {
+  formModalApi.setData({ id: receivablePlanId.value }).open();
+}
+
+// 加载数据
+onMounted(() => {
+  receivablePlanId.value = Number(route.params.id);
+  loadreceivablePlanDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page
+    auto-content-height
+    :title="`第${receivablePlan?.period}期`"
+    :loading="loading"
+  >
+    <FormModal @success="loadreceivablePlanDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="handleBack">
+          <ArrowLeft class="size-5" />
+          返回
+        </Button>
+        <Button
+          v-if="validateWrite"
+          type="primary"
+          @click="handleEdit"
+          v-access:code="['crm:receivable-plan:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="receivablePlan" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ReceivablePlanDetailsInfo :receivable-plan="receivablePlan" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="2" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="receivablePlanId"
+            :biz-type="BizTypeEnum.CRM_RECEIVABLE_PLAN"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
+          <OperateLog :log-list="receivablePlanLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
index 41a2132c1..34cdfc634 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
@@ -17,7 +17,7 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<CrmReceivablePlanApi.ReceivablePlan>();
+const formData = ref<CrmReceivablePlanApi.Plan>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['回款计划'])
@@ -45,8 +45,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
-      (await formApi.getValues()) as CrmReceivablePlanApi.ReceivablePlan;
+    const data = (await formApi.getValues()) as CrmReceivablePlanApi.Plan;
     try {
       await (formData.value?.id
         ? updateReceivablePlan(data)
@@ -65,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<CrmReceivablePlanApi.ReceivablePlan>();
+    const data = modalApi.getData<CrmReceivablePlanApi.Plan>();
     if (!data || !data.id) {
       return;
     }
diff --git a/apps/web-antd/src/views/infra/codegen/index.vue b/apps/web-antd/src/views/infra/codegen/index.vue
index fd41a9d92..88bb7b438 100644
--- a/apps/web-antd/src/views/infra/codegen/index.vue
+++ b/apps/web-antd/src/views/infra/codegen/index.vue
@@ -237,7 +237,7 @@ initDataSourceConfig();
               danger: true,
               auth: ['infra:codegen:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.tableName]),
                 confirm: handleDelete.bind(null, row),
               },
             },
diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index 6b7b5cc57..4d28b5217 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -131,28 +131,38 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 /** 详情列表的字段 */
 export const detailColumns = [
   {
-    label: '日志编号',
-    prop: 'id',
+    title: '日志编号',
+    dataIndex: 'id',
     key: 'id',
+    width: 120,
+    ellipsis: false,
   },
   {
-    label: '通知状态',
-    prop: 'status',
+    title: '通知状态',
+    dataIndex: 'status',
     key: 'status',
+    width: 120,
+    ellipsis: false,
   },
   {
-    label: '通知次数',
-    prop: 'notifyTimes',
+    title: '通知次数',
+    dataIndex: 'notifyTimes',
     key: 'notifyTimes',
+    width: 120,
+    ellipsis: false,
   },
   {
-    label: '通知时间',
-    prop: 'lastExecuteTime',
+    title: '通知时间',
+    dataIndex: 'lastExecuteTime',
     key: 'lastExecuteTime',
+    width: 120,
+    ellipsis: false,
   },
   {
-    label: '响应结果',
-    prop: 'response',
+    title: '响应结果',
+    dataIndex: 'response',
     key: 'response',
+    width: 120,
+    ellipsis: false,
   },
 ];
diff --git a/apps/web-antd/src/views/pay/notify/modules/detail.vue b/apps/web-antd/src/views/pay/notify/modules/detail.vue
index 66f6efb6a..85f1a2859 100644
--- a/apps/web-antd/src/views/pay/notify/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/notify/modules/detail.vue
@@ -93,7 +93,11 @@ const [Modal, modalApi] = useVbenModal({
 
     <Descriptions bordered :column="1" size="middle" class="mx-4">
       <Descriptions.Item label="回调日志">
-        <Table :data="formData.logs" :columns="detailColumns" />
+        <Table
+          v-if="formData"
+          :data-source="formData.logs"
+          :columns="detailColumns"
+        />
       </Descriptions.Item>
     </Descriptions>
   </Modal>
diff --git a/apps/web-antd/src/views/system/user/modules/import-form.vue b/apps/web-antd/src/views/system/user/modules/import-form.vue
index ee05847a1..7e02583a2 100644
--- a/apps/web-antd/src/views/system/user/modules/import-form.vue
+++ b/apps/web-antd/src/views/system/user/modules/import-form.vue
@@ -16,11 +16,8 @@ const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
     formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 120,
   },
   layout: 'horizontal',
   schema: useImportFormSchema(),
@@ -62,7 +59,7 @@ async function handleDownload() {
 </script>
 
 <template>
-  <Modal title="导入用户">
+  <Modal title="导入用户" class="w-[30%]">
     <Form class="mx-4">
       <template #file>
         <div class="w-full">
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index ac8b9f224..04e4f3cf2 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-naive/package.json b/apps/web-naive/package.json
index 2a2d3f5f7..dcce96ca2 100644
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/docs/package.json b/docs/package.json
index a53005342..f57dfc854 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "scripts": {
     "build": "vitepress build",
diff --git a/internal/lint-configs/commitlint-config/package.json b/internal/lint-configs/commitlint-config/package.json
index c17cde2a2..a137f947b 100644
--- a/internal/lint-configs/commitlint-config/package.json
+++ b/internal/lint-configs/commitlint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/lint-configs/stylelint-config/package.json b/internal/lint-configs/stylelint-config/package.json
index ee55c702a..8e2a97c2c 100644
--- a/internal/lint-configs/stylelint-config/package.json
+++ b/internal/lint-configs/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/node-utils/package.json b/internal/node-utils/package.json
index 782c0b30f..8b8db7454 100644
--- a/internal/node-utils/package.json
+++ b/internal/node-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json
index 9f62a1b70..8506891b5 100644
--- a/internal/tailwind-config/package.json
+++ b/internal/tailwind-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/tsconfig/package.json b/internal/tsconfig/package.json
index dd4f6321c..44ee3f1b0 100644
--- a/internal/tsconfig/package.json
+++ b/internal/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/package.json b/package.json
index 0583d01cf..72db822c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-monorepo",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "keywords": [
     "monorepo",
diff --git a/packages/@core/base/design/package.json b/packages/@core/base/design/package.json
index 4bdfbe32c..33e924749 100644
--- a/packages/@core/base/design/package.json
+++ b/packages/@core/base/design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/icons/package.json b/packages/@core/base/icons/package.json
index 4d758ca84..9a349883c 100644
--- a/packages/@core/base/icons/package.json
+++ b/packages/@core/base/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/shared/package.json b/packages/@core/base/shared/package.json
index 05bb218ae..b02cc6e47 100644
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/typings/package.json b/packages/@core/base/typings/package.json
index dc99de243..e2ab18701 100644
--- a/packages/@core/base/typings/package.json
+++ b/packages/@core/base/typings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/typings",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/composables/package.json b/packages/@core/composables/package.json
index 3e03540f7..08db5106f 100644
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/preferences/package.json b/packages/@core/preferences/package.json
index 828370fde..726b473db 100644
--- a/packages/@core/preferences/package.json
+++ b/packages/@core/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/preferences",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/form-ui/package.json b/packages/@core/ui-kit/form-ui/package.json
index 651b3dc54..36ae1678f 100644
--- a/packages/@core/ui-kit/form-ui/package.json
+++ b/packages/@core/ui-kit/form-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/form-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/layout-ui/package.json b/packages/@core/ui-kit/layout-ui/package.json
index d62d18646..57a462fe1 100644
--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/menu-ui/package.json b/packages/@core/ui-kit/menu-ui/package.json
index 1ff5741c7..760d7646e 100644
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 989004675..11d2918f1 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "#main": "./dist/index.mjs",
   "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
index 01394caa7..bcb7a0c7e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -29,14 +29,25 @@ export type ValueType = boolean | number | string;
 
 export interface VbenButtonGroupProps
   extends Pick<VbenButtonProps, 'disabled'> {
+  /** 单选模式下允许清除选中 */
+  allowClear?: boolean;
+  /** 值改变前的回调 */
   beforeChange?: (
     value: ValueType,
     isChecked: boolean,
   ) => boolean | PromiseLike<boolean | undefined> | undefined;
+  /** 按钮样式 */
   btnClass?: any;
+  /** 按钮间隔距离 */
   gap?: number;
+  /** 多选模式下限制最多选择的数量。0表示不限制 */
+  maxCount?: number;
+  /** 是否允许多选 */
   multiple?: boolean;
+  /** 选项 */
   options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
+  /** 显示图标 */
   showIcon?: boolean;
+  /** 尺寸 */
   size?: 'large' | 'middle' | 'small';
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
index 6e9378910..fd87396eb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
@@ -19,6 +19,8 @@ const props = withDefaults(defineProps<VbenButtonGroupProps>(), {
   multiple: false,
   showIcon: true,
   size: 'middle',
+  allowClear: false,
+  maxCount: 0,
 });
 const emit = defineEmits(['btnClick']);
 const btnDefaultProps = computed(() => {
@@ -82,12 +84,22 @@ async function onBtnClick(value: ValueType) {
     if (innerValue.value.includes(value)) {
       innerValue.value = innerValue.value.filter((item) => item !== value);
     } else {
+      if (props.maxCount > 0 && innerValue.value.length >= props.maxCount) {
+        innerValue.value = innerValue.value.slice(0, props.maxCount - 1);
+      }
       innerValue.value.push(value);
     }
     modelValue.value = innerValue.value;
   } else {
-    innerValue.value = [value];
-    modelValue.value = value;
+    if (props.allowClear && innerValue.value.includes(value)) {
+      innerValue.value = [];
+      modelValue.value = undefined;
+      emit('btnClick', undefined);
+      return;
+    } else {
+      innerValue.value = [value];
+      modelValue.value = value;
+    }
   }
   emit('btnClick', value);
 }
@@ -112,12 +124,18 @@ async function onBtnClick(value: ValueType) {
       @click="onBtnClick(btn.value)"
     >
       <div class="icon-wrapper" v-if="props.showIcon">
-        <LoaderCircle
-          class="animate-spin"
-          v-if="loadingValues.includes(btn.value)"
-        />
-        <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
-        <Circle v-else />
+        <slot
+          name="icon"
+          :loading="loadingValues.includes(btn.value)"
+          :checked="innerValue.includes(btn.value)"
+        >
+          <LoaderCircle
+            class="animate-spin"
+            v-if="loadingValues.includes(btn.value)"
+          />
+          <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
+          <Circle v-else />
+        </slot>
       </div>
       <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
         <VbenRenderContent :content="btn.label" />
diff --git a/packages/@core/ui-kit/tabs-ui/package.json b/packages/@core/ui-kit/tabs-ui/package.json
index 86afff5b9..bc84b4d6a 100644
--- a/packages/@core/ui-kit/tabs-ui/package.json
+++ b/packages/@core/ui-kit/tabs-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/constants/package.json b/packages/constants/package.json
index 072d6b626..c71e11847 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/access/package.json b/packages/effects/access/package.json
index 51beaa83e..e4c39eb2a 100644
--- a/packages/effects/access/package.json
+++ b/packages/effects/access/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/access",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 6e6cc2bb4..e48539ae9 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/hooks/package.json b/packages/effects/hooks/package.json
index 25a5836ab..004f3c50e 100644
--- a/packages/effects/hooks/package.json
+++ b/packages/effects/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/hooks",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/layouts/package.json b/packages/effects/layouts/package.json
index f645da901..a8439a021 100644
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/layouts",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index 8b5f499fb..8156324af 100644
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -46,7 +46,11 @@ interface Props {
   /**
    * 菜单数组
    */
-  menus?: Array<{ handler: AnyFunction; icon?: Component; text: string }>;
+  menus?: Array<{
+    handler: AnyFunction;
+    icon?: Component | Function | string;
+    text: string;
+  }>;
 
   /**
    * 标签文本
diff --git a/packages/effects/request/package.json b/packages/effects/request/package.json
index 57e5c20ec..527f6d904 100644
--- a/packages/effects/request/package.json
+++ b/packages/effects/request/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/request",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/icons/package.json b/packages/icons/package.json
index d7fbc7d43..858383947 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/locales/package.json b/packages/locales/package.json
index 6ab5ed5e3..5e92de548 100644
--- a/packages/locales/package.json
+++ b/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/locales",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/locales/src/langs/zh-CN/ui.json b/packages/locales/src/langs/zh-CN/ui.json
index eb4d042de..d1de301df 100644
--- a/packages/locales/src/langs/zh-CN/ui.json
+++ b/packages/locales/src/langs/zh-CN/ui.json
@@ -20,8 +20,7 @@
     "detail": "详情{0}",
     "view": "查看{0}",
     "import": "导入",
-    "export": "导出",
-    "detail": "详情"
+    "export": "导出"
   },
   "actionMessage": {
     "deleteConfirm": "确定删除 {0} 吗？",
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index c650bcea7..de276c726 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/stores/package.json b/packages/stores/package.json
index f6f9518ba..c9860b59c 100644
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stores",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 7eada0dc8..127bd4d58 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/styles",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/types/package.json b/packages/types/package.json
index b74ca47ec..2fa047d84 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/types",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 4d135be39..38a6ca199 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/playground/package.json b/playground/package.json
index 9446f38be..8bfd17d51 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/playground/src/views/examples/button-group/index.vue b/playground/src/views/examples/button-group/index.vue
index 2bc350c81..23861da40 100644
--- a/playground/src/views/examples/button-group/index.vue
+++ b/playground/src/views/examples/button-group/index.vue
@@ -9,6 +9,7 @@ import {
   VbenButtonGroup,
   VbenCheckButtonGroup,
 } from '@vben/common-ui';
+import { LoaderCircle, Square, SquareCheckBig } from '@vben/icons';
 
 import { Button, Card, message } from 'ant-design-vue';
 
@@ -51,6 +52,7 @@ const compProps = reactive({
   gap: 0,
   showIcon: true,
   size: 'middle',
+  allowClear: false,
 } as Recordable<any>);
 
 const [Form] = useVbenForm({
@@ -63,6 +65,9 @@ const [Form] = useVbenForm({
       }
     });
   },
+  commonConfig: {
+    labelWidth: 150,
+  },
   schema: [
     {
       component: 'RadioGroup',
@@ -109,6 +114,20 @@ const [Form] = useVbenForm({
       fieldName: 'beforeChange',
       label: '前置回调',
     },
+    {
+      component: 'Switch',
+      defaultValue: false,
+      fieldName: 'allowClear',
+      label: '允许清除',
+      help: '单选时是否允许取消选中（值为undefined）',
+    },
+    {
+      component: 'InputNumber',
+      defaultValue: 0,
+      fieldName: 'maxCount',
+      label: '最大选中数量',
+      help: '多选时有效，0表示不限制',
+    },
   ],
   showDefaultActions: false,
   submitOnChange: true,
@@ -186,6 +205,21 @@ function onBtnClick(value: any) {
           v-bind="compProps"
         />
       </div>
+      <p class="mt-4">自定义图标{{ checkValue }}</p>
+      <div class="mt-2 flex flex-col gap-2">
+        <VbenCheckButtonGroup
+          v-model="checkValue"
+          multiple
+          :options="options"
+          v-bind="compProps"
+        >
+          <template #icon="{ loading, checked }">
+            <LoaderCircle class="animate-spin" v-if="loading" />
+            <SquareCheckBig v-else-if="checked" />
+            <Square v-else />
+          </template>
+        </VbenCheckButtonGroup>
+      </div>
     </Card>
 
     <Card title="设置" class="mt-4">
diff --git a/scripts/turbo-run/package.json b/scripts/turbo-run/package.json
index 83832d81b..4639c873e 100644
--- a/scripts/turbo-run/package.json
+++ b/scripts/turbo-run/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/turbo-run",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "license": "MIT",
   "type": "module",