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/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/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..a583db684 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,44 @@
-<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';
+
+defineOptions({ name: 'CrmCustomerDetailsInfo' });
+
+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..d7289dcd9 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,204 @@
-<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 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(async () => {
+  businessId.value = Number(route.params.id);
+  await 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="business.id"
+            :customer-id="business.customerId"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="产品" key="4" :force-render="true">
+          <div>产品</div>
+        </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..6abc70a99 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,13 @@ 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 +22,6 @@ const [BaseDescription] = useDescription({
     class: 'mx-4',
   },
   schema: useDetailBaseSchema(),
-  data: clue,
 });
 
 const [SystemDescription] = useDescription({
@@ -31,15 +31,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..4b8c54d32 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 () => {
+  clueId.value = Number(route.params.id);
   await 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/clue/modules/transfer.vue b/apps/web-antd/src/views/crm/clue/modules/transfer.vue
deleted file mode 100644
index d076ec4e6..000000000
--- a/apps/web-antd/src/views/crm/clue/modules/transfer.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<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 { $t } from '#/locales';
-
-const emit = defineEmits(['success']);
-const formData = ref<{ id: number }>();
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'ownerUserId',
-      label: '负责人',
-      component: 'Select',
-      componentProps: {
-        api: 'getSimpleUserList',
-      },
-      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 CrmPermissionApi.TransferReq;
-    try {
-      await transferClue(data);
-      // 关闭并提示
-      await modalApi.close();
-      emit('success');
-      message.success($t('ui.actionMessage.operationSuccess'));
-    } finally {
-      modalApi.unlock();
-    }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      formData.value = undefined;
-      return;
-    }
-    // 加载数据
-    const data = modalApi.getData<{ id: number }>();
-    if (!data || !data.id) {
-      return;
-    }
-    formData.value = data;
-  },
-});
-</script>
-
-<template>
-  <Modal :title="$t('ui.actionTitle.transfer')" class="w-[40%]">
-    <Form class="mx-4" />
-  </Modal>
-</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..bf0532c80 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,44 @@
-<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';
+
+defineOptions({ name: 'CrmContactDetailsInfo' });
+
+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..1822f6e7e 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(async () => {
+  contactId.value = Number(route.params.id);
+  await 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..da17394b4 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,44 @@
-<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';
+
+defineOptions({ name: 'CrmContractDetailsInfo' });
+
+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..72335ca22 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,167 @@
-<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 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 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(async () => {
+  contractId.value = Number(route.params.id);
+  await 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" />
+        <Tabs.TabPane tab="回款" key="4" :force-render="true" />
+        <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/modules/detail-info.vue b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
index c651e23e0..12b2526d2 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,44 @@
-<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';
+
+defineOptions({ name: 'CrmCustomerDetailsInfo' });
+
+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..9a945705b 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail.vue
@@ -5,15 +5,15 @@ 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';
 
@@ -21,15 +21,49 @@ 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 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 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 +74,107 @@ const [Description] = useDescription({
   schema: useDetailSchema(),
 });
 
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: CustomerForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  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();
+  transferModalApi.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 () => {
+  customerId.value = Number(route.params.id);
   await loadCustomerDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="customer?.name" :loading="loading">
+    <FormModal @success="loadCustomerDetail" />
+    <TransferModal @success="loadCustomerDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
         <Button
@@ -174,34 +224,51 @@ 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">
+        <Tabs.TabPane tab="回款" key="7" :force-render="true">
           <div>回款</div>
         </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/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..c928efc47 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,8 +17,8 @@ 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' });
@@ -50,13 +50,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 +74,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 +86,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 +149,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 +176,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..d68a38f0a 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,10 +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';
+
+import { useTransferFormSchema } from './data';
 
 defineOptions({ name: 'CrmTransferForm' });
 
@@ -56,87 +56,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/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/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} 吗？",