diff --git a/apps/web-antd/src/api/crm/business/index.ts b/apps/web-antd/src/api/crm/business/index.ts
index ec544b92d..a1ff09e6f 100644
--- a/apps/web-antd/src/api/crm/business/index.ts
+++ b/apps/web-antd/src/api/crm/business/index.ts
@@ -40,6 +40,7 @@ export namespace CrmBusinessApi {
     totalProductPrice: number;
     totalPrice: number;
     discountPercent: number;
+    status?: number;
     remark: string;
     creator: string; // 创建人
     creatorName?: string; // 创建人名称
@@ -47,6 +48,12 @@ export namespace CrmBusinessApi {
     updateTime: Date; // 更新时间
     products?: BusinessProduct[];
   }
+
+  export interface BusinessStatus {
+    id: number;
+    statusId: number | undefined;
+    endStatus: number | undefined;
+  }
 }
 
 /** 查询商机列表 */
@@ -90,7 +97,7 @@ export function updateBusiness(data: CrmBusinessApi.Business) {
 }
 
 /** 修改商机状态 */
-export function updateBusinessStatus(data: CrmBusinessApi.Business) {
+export function updateBusinessStatus(data: CrmBusinessApi.BusinessStatus) {
   return requestClient.put('/crm/business/update-status', data);
 }
 
diff --git a/apps/web-antd/src/api/crm/business/status/index.ts b/apps/web-antd/src/api/crm/business/status/index.ts
index e1c8cfea3..9445938fd 100644
--- a/apps/web-antd/src/api/crm/business/status/index.ts
+++ b/apps/web-antd/src/api/crm/business/status/index.ts
@@ -4,46 +4,50 @@ import { requestClient } from '#/api/request';
 
 export namespace CrmBusinessStatusApi {
   /** 商机状态信息 */
-  export interface BusinessStatus {
-    id: number;
-    name: string;
-    percent: number;
-  }
-
-  /** 商机状态组信息 */
   export interface BusinessStatusType {
     id: number;
     name: string;
-    deptIds: number[];
-    statuses?: BusinessStatus[];
+    percent: number;
+    sort: number;
   }
 
-  /** 默认商机状态 */
-  export const DEFAULT_STATUSES = [
-    {
-      endStatus: 1,
-      key: '结束',
-      name: '赢单',
-      percent: 100,
-    },
-    {
-      endStatus: 2,
-      key: '结束',
-      name: '输单',
-      percent: 0,
-    },
-    {
-      endStatus: 3,
-      key: '结束',
-      name: '无效',
-      percent: 0,
-    },
-  ] as const;
+  /** 商机状态组信息 */
+  export interface BusinessStatus {
+    id: number;
+    name: string;
+    deptIds: number[];
+    deptNames: string[];
+    creator: string;
+    createTime: Date;
+    statuses?: BusinessStatusType[];
+  }
 }
 
+/** 默认商机状态 */
+export const DEFAULT_STATUSES = [
+  {
+    endStatus: 1,
+    key: '结束',
+    name: '赢单',
+    percent: 100,
+  },
+  {
+    endStatus: 2,
+    key: '结束',
+    name: '输单',
+    percent: 0,
+  },
+  {
+    endStatus: 3,
+    key: '结束',
+    name: '无效',
+    percent: 0,
+  },
+];
+
 /** 查询商机状态组列表 */
 export function getBusinessStatusPage(params: PageParam) {
-  return requestClient.get<PageResult<CrmBusinessStatusApi.BusinessStatusType>>(
+  return requestClient.get<PageResult<CrmBusinessStatusApi.BusinessStatus>>(
     '/crm/business-status/page',
     { params },
   );
@@ -51,21 +55,21 @@ export function getBusinessStatusPage(params: PageParam) {
 
 /** 新增商机状态组 */
 export function createBusinessStatus(
-  data: CrmBusinessStatusApi.BusinessStatusType,
+  data: CrmBusinessStatusApi.BusinessStatus,
 ) {
   return requestClient.post('/crm/business-status/create', data);
 }
 
 /** 修改商机状态组 */
 export function updateBusinessStatus(
-  data: CrmBusinessStatusApi.BusinessStatusType,
+  data: CrmBusinessStatusApi.BusinessStatus,
 ) {
   return requestClient.put('/crm/business-status/update', data);
 }
 
 /** 查询商机状态类型详情 */
 export function getBusinessStatus(id: number) {
-  return requestClient.get<CrmBusinessStatusApi.BusinessStatusType>(
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatus>(
     `/crm/business-status/get?id=${id}`,
   );
 }
@@ -77,14 +81,14 @@ export function deleteBusinessStatus(id: number) {
 
 /** 获得商机状态组列表 */
 export function getBusinessStatusTypeSimpleList() {
-  return requestClient.get<CrmBusinessStatusApi.BusinessStatusType[]>(
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatus[]>(
     '/crm/business-status/type-simple-list',
   );
 }
 
 /** 获得商机阶段列表 */
 export function getBusinessStatusSimpleList(typeId: number) {
-  return requestClient.get<CrmBusinessStatusApi.BusinessStatus[]>(
+  return requestClient.get<CrmBusinessStatusApi.BusinessStatusType[]>(
     '/crm/business-status/status-simple-list',
     { params: { typeId } },
   );
diff --git a/apps/web-antd/src/api/crm/clue/index.ts b/apps/web-antd/src/api/crm/clue/index.ts
index 9d3447b88..a3a378b67 100644
--- a/apps/web-antd/src/api/crm/clue/index.ts
+++ b/apps/web-antd/src/api/crm/clue/index.ts
@@ -77,7 +77,7 @@ export function transferClue(data: CrmPermissionApi.TransferReq) {
 
 /** 线索转化为客户 */
 export function transformClue(id: number) {
-  return requestClient.put('/crm/clue/transform', { id });
+  return requestClient.put(`/crm/clue/transform?id=${id}`);
 }
 
 /** 获得分配给我的、待跟进的线索数量 */
diff --git a/apps/web-antd/src/api/crm/customer/index.ts b/apps/web-antd/src/api/crm/customer/index.ts
index 3f7faaab5..611d56bc2 100644
--- a/apps/web-antd/src/api/crm/customer/index.ts
+++ b/apps/web-antd/src/api/crm/customer/index.ts
@@ -35,6 +35,11 @@ export namespace CrmCustomerApi {
     createTime: Date; // 创建时间
     updateTime: Date; // 更新时间
   }
+  export interface CustomerImport {
+    ownerUserId: number;
+    file: File;
+    updateSupport: boolean;
+  }
 }
 
 /** 查询客户列表 */
@@ -78,8 +83,8 @@ export function importCustomerTemplate() {
 }
 
 /** 导入客户 */
-export function importCustomer(file: File) {
-  return requestClient.upload('/crm/customer/import', { file });
+export function importCustomer(data: CrmCustomerApi.CustomerImport) {
+  return requestClient.upload('/crm/customer/import', data);
 }
 
 /** 获取客户精简信息列表 */
diff --git a/apps/web-antd/src/api/crm/receivable/index.ts b/apps/web-antd/src/api/crm/receivable/index.ts
index 96936c910..8a10c7390 100644
--- a/apps/web-antd/src/api/crm/receivable/index.ts
+++ b/apps/web-antd/src/api/crm/receivable/index.ts
@@ -34,10 +34,21 @@ export namespace CrmReceivableApi {
     createTime: Date; // 创建时间
     updateTime: Date; // 更新时间
   }
+
+  export interface ReceivablePageParam extends PageParam {
+    no?: string;
+    planId?: number;
+    customerId?: number;
+    contractId?: number;
+    sceneType?: number;
+    auditStatus?: number;
+  }
 }
 
 /** 查询回款列表 */
-export function getReceivablePage(params: PageParam) {
+export function getReceivablePage(
+  params: CrmReceivableApi.ReceivablePageParam,
+) {
   return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
     '/crm/receivable/page',
     { params },
@@ -45,7 +56,9 @@ export function getReceivablePage(params: PageParam) {
 }
 
 /** 查询回款列表，基于指定客户 */
-export function getReceivablePageByCustomer(params: PageParam) {
+export function getReceivablePageByCustomer(
+  params: CrmReceivableApi.ReceivablePageParam,
+) {
   return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
     '/crm/receivable/page-by-customer',
     { params },
diff --git a/apps/web-antd/src/api/crm/receivable/plan/index.ts b/apps/web-antd/src/api/crm/receivable/plan/index.ts
index d237c1ed9..63e00f271 100644
--- a/apps/web-antd/src/api/crm/receivable/plan/index.ts
+++ b/apps/web-antd/src/api/crm/receivable/plan/index.ts
@@ -29,10 +29,20 @@ export namespace CrmReceivablePlanApi {
       returnTime: Date;
     };
   }
+
+  export interface PlanPageParam extends PageParam {
+    customerId?: number;
+    contractId?: number;
+    contractNo?: string;
+    sceneType?: number;
+    remindType?: number;
+  }
 }
 
 /** 查询回款计划列表 */
-export function getReceivablePlanPage(params: PageParam) {
+export function getReceivablePlanPage(
+  params: CrmReceivablePlanApi.PlanPageParam,
+) {
   return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
     '/crm/receivable-plan/page',
     { params },
@@ -40,7 +50,9 @@ export function getReceivablePlanPage(params: PageParam) {
 }
 
 /** 查询回款计划列表(按客户) */
-export function getReceivablePlanPageByCustomer(params: PageParam) {
+export function getReceivablePlanPageByCustomer(
+  params: CrmReceivablePlanApi.PlanPageParam,
+) {
   return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
     '/crm/receivable-plan/page-by-customer',
     { params },
diff --git a/apps/web-antd/src/api/infra/codegen/index.ts b/apps/web-antd/src/api/infra/codegen/index.ts
index d8fea0453..1c2d97ba3 100644
--- a/apps/web-antd/src/api/infra/codegen/index.ts
+++ b/apps/web-antd/src/api/infra/codegen/index.ts
@@ -112,26 +112,19 @@ export function updateCodegenTable(data: InfraCodegenApi.CodegenUpdateReqVO) {
 
 /** 基于数据库的表结构，同步数据库的表和字段定义 */
 export function syncCodegenFromDB(tableId: number) {
-  return requestClient.put('/infra/codegen/sync-from-db', {
-    params: { tableId },
-  });
+  return requestClient.put(`/infra/codegen/sync-from-db?tableId=${tableId}`);
 }
 
 /** 预览生成代码 */
 export function previewCodegen(tableId: number) {
   return requestClient.get<InfraCodegenApi.CodegenPreview[]>(
-    '/infra/codegen/preview',
-    {
-      params: { tableId },
-    },
+    `/infra/codegen/preview?tableId=${tableId}`,
   );
 }
 
 /** 下载生成代码 */
 export function downloadCodegen(tableId: number) {
-  return requestClient.download('/infra/codegen/download', {
-    params: { tableId },
-  });
+  return requestClient.download(`/infra/codegen/download?tableId=${tableId}`);
 }
 
 /** 获得表定义 */
diff --git a/apps/web-antd/src/api/infra/job/index.ts b/apps/web-antd/src/api/infra/job/index.ts
index 3bd20fdb5..bacdbc4a1 100644
--- a/apps/web-antd/src/api/infra/job/index.ts
+++ b/apps/web-antd/src/api/infra/job/index.ts
@@ -57,7 +57,7 @@ export function updateJobStatus(id: number, status: number) {
     id,
     status,
   };
-  return requestClient.put('/infra/job/update-status', { params });
+  return requestClient.put('/infra/job/update-status', {}, { params });
 }
 
 /** 定时任务立即执行一次 */
diff --git a/apps/web-antd/src/components/operate-log/index.ts b/apps/web-antd/src/components/operate-log/index.ts
index cf38b5e70..a134eaaab 100644
--- a/apps/web-antd/src/components/operate-log/index.ts
+++ b/apps/web-antd/src/components/operate-log/index.ts
@@ -1,3 +1,9 @@
+import { defineAsyncComponent } from 'vue';
+
+export const AsyncOperateLog = defineAsyncComponent(
+  () => import('./operate-log.vue'),
+);
+
 export { default as OperateLog } from './operate-log.vue';
 
 export type { OperateLogProps } from './typing';
diff --git a/apps/web-antd/src/components/operate-log/operate-log.vue b/apps/web-antd/src/components/operate-log/operate-log.vue
index e1e9eb448..2493bc5d5 100644
--- a/apps/web-antd/src/components/operate-log/operate-log.vue
+++ b/apps/web-antd/src/components/operate-log/operate-log.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { OperateLogProps } from './typing';
 
-import { Timeline } from 'ant-design-vue';
+import { formatDateTime } from '@vben/utils';
+
+import { Tag, Timeline } from 'ant-design-vue';
 
 import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils';
 
@@ -38,8 +40,21 @@ function getUserTypeColor(userType: number) {
         :key="log.id"
         :color="getUserTypeColor(log.userType)"
       >
-        <p>{{ log.createTime }}</p>
-        <p>{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}</p>
+        <template #dot>
+          <p
+            :style="{ backgroundColor: getUserTypeColor(log.userType) }"
+            class="absolute left-[-5px] flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
+          >
+            {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+          </p>
+        </template>
+        <p>{{ formatDateTime(log.createTime) }}</p>
+        <p>
+          <Tag :color="getUserTypeColor(log.userType)">
+            {{ log.userName }}
+          </Tag>
+          {{ log.action }}
+        </p>
       </Timeline.Item>
     </Timeline>
   </div>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
index 03f454c52..3e548c97f 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -27,14 +27,13 @@ import {
   TreeSelect,
 } from 'ant-design-vue';
 
-import { BpmModelFormType } from '#/utils';
+import { BpmModelFormType, BpmNodeTypeEnum } from '#/utils';
 
 import {
   CANDIDATE_STRATEGY,
   CandidateStrategy,
   FieldPermissionType,
   MULTI_LEVEL_DEPT,
-  NodeType,
 } from '../../consts';
 import {
   useFormFieldsPermission,
@@ -77,7 +76,7 @@ const currentNode = useWatchNode(props);
 
 // 节点名称
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
-  NodeType.COPY_TASK_NODE,
+  BpmNodeTypeEnum.COPY_TASK_NODE,
 );
 
 // 激活的 Tab 标签页
@@ -137,7 +136,7 @@ const {
   getShowText,
   handleCandidateParam,
   parseCandidateParam,
-} = useNodeForm(NodeType.COPY_TASK_NODE);
+} = useNodeForm(BpmNodeTypeEnum.COPY_TASK_NODE);
 
 const configForm = tempConfigForm as Ref<CopyTaskFormType>;
 // 抄送人策略， 去掉发起人自选 和 发起人自己
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
index 2dca15fba..95ffc5098 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
@@ -22,10 +22,11 @@ import {
   SelectOption,
 } from 'ant-design-vue';
 
+import { BpmNodeTypeEnum } from '#/utils';
+
 import {
   DELAY_TYPE,
   DelayTypeEnum,
-  NodeType,
   TIME_UNIT_TYPES,
   TimeUnitType,
 } from '../../consts';
@@ -45,7 +46,7 @@ const props = defineProps({
 const currentNode = useWatchNode(props);
 // 节点名称
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
-  NodeType.DELAY_TIMER_NODE,
+  BpmNodeTypeEnum.DELAY_TIMER_NODE,
 );
 // 抄送人表单配置
 const formRef = ref(); // 表单 Ref
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
index e42df7d24..0b96375d6 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
@@ -21,7 +21,9 @@ import {
   SelectOption,
 } from 'ant-design-vue';
 
-import { ConditionType, NodeType } from '../../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { ConditionType } from '../../consts';
 import { useNodeName, useWatchNode } from '../../helpers';
 import Condition from './modules/condition.vue';
 
@@ -40,7 +42,7 @@ const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
 const currentNode = useWatchNode(props);
 /** 节点名称 */
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
-  NodeType.ROUTER_BRANCH_NODE,
+  BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
 );
 const routerGroups = ref<RouterSetting[]>([]);
 const nodeOptions = ref<any[]>([]);
@@ -176,15 +178,15 @@ function getRouterNode(node: any) {
   while (true) {
     if (!node) break;
     if (
-      node.type !== NodeType.ROUTER_BRANCH_NODE &&
-      node.type !== NodeType.CONDITION_NODE
+      node.type !== BpmNodeTypeEnum.ROUTER_BRANCH_NODE &&
+      node.type !== BpmNodeTypeEnum.CONDITION_NODE
     ) {
       nodeOptions.value.push({
         label: node.name,
         value: node.id,
       });
     }
-    if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
+    if (!node.childNode || node.type === BpmNodeTypeEnum.END_EVENT_NODE) {
       break;
     }
     if (node.conditionNodes && node.conditionNodes.length > 0) {
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
index bcdb3d9a2..eb6feeb8b 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -23,13 +23,9 @@ import {
   TypographyText,
 } from 'ant-design-vue';
 
-import { BpmModelFormType } from '#/utils';
+import { BpmModelFormType, BpmNodeTypeEnum } from '#/utils';
 
-import {
-  FieldPermissionType,
-  NodeType,
-  START_USER_BUTTON_SETTING,
-} from '../../consts';
+import { FieldPermissionType, START_USER_BUTTON_SETTING } from '../../consts';
 import {
   useFormFieldsPermission,
   useNodeName,
@@ -57,7 +53,7 @@ const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
 const currentNode = useWatchNode(props);
 // 节点名称
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
-  NodeType.COPY_TASK_NODE,
+  BpmNodeTypeEnum.START_USER_NODE,
 );
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
index 85b0726aa..eb7d40476 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -29,9 +29,10 @@ import {
   Tag,
 } from 'ant-design-vue';
 
+import { BpmNodeTypeEnum } from '#/utils';
+
 import {
   DEFAULT_CONDITION_GROUP_VALUE,
-  NodeType,
   TRIGGER_TYPES,
   TriggerTypeEnum,
 } from '../../consts';
@@ -72,7 +73,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 const currentNode = useWatchNode(props);
 // 节点名称
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
-  NodeType.TRIGGER_NODE,
+  BpmNodeTypeEnum.TRIGGER_NODE,
 );
 // 触发器表单配置
 const formRef = ref(); // 表单 Ref
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index 1ee36fb1f..d9376bb3c 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -34,7 +34,11 @@ import {
   TypographyText,
 } from 'ant-design-vue';
 
-import { BpmModelFormType } from '#/utils';
+import {
+  BpmModelFormType,
+  BpmNodeTypeEnum,
+  ProcessVariableEnum,
+} from '#/utils';
 
 import {
   APPROVE_METHODS,
@@ -49,9 +53,7 @@ import {
   DEFAULT_BUTTON_SETTING,
   FieldPermissionType,
   MULTI_LEVEL_DEPT,
-  NodeType,
   OPERATION_BUTTON_NAME,
-  ProcessVariableEnum,
   REJECT_HANDLER_TYPES,
   RejectHandlerType,
   TIME_UNIT_TYPES,
@@ -113,7 +115,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
 // 节点名称配置
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
-  NodeType.USER_TASK_NODE,
+  BpmNodeTypeEnum.USER_TASK_NODE,
 );
 
 // 激活的 Tab 标签页
@@ -245,7 +247,9 @@ const userTaskListenerRef = ref();
 
 /** 节点类型名称 */
 const nodeTypeName = computed(() => {
-  return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批';
+  return currentNode.value.type === BpmNodeTypeEnum.TRANSACTOR_NODE
+    ? '办理'
+    : '审批';
 });
 
 /** 校验节点配置 */
@@ -407,7 +411,7 @@ function showUserTaskNodeConfig(node: SimpleFlowNode) {
   // 3. 操作按钮设置
   buttonsSetting.value =
     cloneDeep(node.buttonsSetting) ||
-    (node.type === NodeType.TRANSACTOR_NODE
+    (node.type === BpmNodeTypeEnum.TRANSACTOR_NODE
       ? TRANSACTOR_DEFAULT_BUTTON_SETTING
       : DEFAULT_BUTTON_SETTING);
   // 4. 表单字段权限配置
@@ -595,7 +599,7 @@ onMounted(() => {
       </div>
     </template>
     <div
-      v-if="currentNode.type === NodeType.USER_TASK_NODE"
+      v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE"
       class="mb-3 flex items-center"
     >
       <span class="mr-3 text-[16px]">审批类型 :</span>
@@ -860,7 +864,7 @@ onMounted(() => {
               </RadioGroup>
             </FormItem>
 
-            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
               <Divider content-position="left">审批人拒绝时</Divider>
               <FormItem name="rejectHandlerType">
                 <RadioGroup
@@ -902,7 +906,7 @@ onMounted(() => {
               </FormItem>
             </div>
 
-            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
               <Divider content-position="left">审批人超时未处理时</Divider>
               <FormItem
                 label="启用开关"
@@ -1047,7 +1051,7 @@ onMounted(() => {
               </Select>
             </FormItem>
 
-            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
               <Divider content-position="left">
                 审批人与提交人为同一人时
               </Divider>
@@ -1081,7 +1085,7 @@ onMounted(() => {
               </FormItem>
             </div>
 
-            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
               <Divider content-position="left">审批意见</Divider>
               <FormItem name="reasonRequire">
                 <Switch
@@ -1096,7 +1100,7 @@ onMounted(() => {
       </TabPane>
       <TabPane
         tab="操作按钮设置"
-        v-if="currentNode.type === NodeType.USER_TASK_NODE"
+        v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE"
         key="buttons"
       >
         <div class="p-1">
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
index c9bd17190..4e4e482a0 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
@@ -7,7 +7,9 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Input } from 'ant-design-vue';
 
-import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
 import CopyTaskNodeConfig from '../nodes-config/copy-task-node-config.vue';
 import NodeHandler from './node-handler.vue';
@@ -32,7 +34,7 @@ const currentNode = useWatchNode(props);
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(
   currentNode,
-  NodeType.COPY_TASK_NODE,
+  BpmNodeTypeEnum.COPY_TASK_NODE,
 );
 
 const nodeSetting = ref();
@@ -85,7 +87,7 @@ function deleteNode() {
             {{ currentNode.showText }}
           </div>
           <div class="node-text" v-else>
-            {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.COPY_TASK_NODE) }}
           </div>
           <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
         </div>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
index fa83d4ebe..3a4227d4f 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
@@ -7,7 +7,9 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Input } from 'ant-design-vue';
 
-import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
 import DelayTimerNodeConfig from '../nodes-config/delay-timer-node-config.vue';
 import NodeHandler from './node-handler.vue';
@@ -30,7 +32,7 @@ const currentNode = useWatchNode(props);
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(
   currentNode,
-  NodeType.DELAY_TIMER_NODE,
+  BpmNodeTypeEnum.DELAY_TIMER_NODE,
 );
 
 const nodeSetting = ref();
@@ -82,7 +84,7 @@ function deleteNode() {
             {{ currentNode.showText }}
           </div>
           <div class="node-text" v-else>
-            {{ NODE_DEFAULT_TEXT.get(NodeType.DELAY_TIMER_NODE) }}
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.DELAY_TIMER_NODE) }}
           </div>
           <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
         </div>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
index e37edc298..1dc18e528 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -8,11 +8,12 @@ import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
 
 import { Button, Input } from 'ant-design-vue';
 
+import { BpmNodeTypeEnum } from '#/utils';
+
 import {
   ConditionType,
   DEFAULT_CONDITION_GROUP_VALUE,
   NODE_DEFAULT_TEXT,
-  NodeType,
 } from '../../consts';
 import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
 import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
@@ -90,7 +91,7 @@ function addCondition() {
       id: `Flow_${generateUUID()}`,
       name: `条件${len}`,
       showText: '',
-      type: NodeType.CONDITION_NODE,
+      type: BpmNodeTypeEnum.CONDITION_NODE,
       childNode: undefined,
       conditionNodes: [],
       conditionSetting: {
@@ -138,7 +139,7 @@ function recursiveFindParentNode(
   node: SimpleFlowNode,
   nodeType: number,
 ) {
-  if (!node || node.type === NodeType.START_USER_NODE) {
+  if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
     return;
   }
   if (node.type === nodeType) {
@@ -210,7 +211,7 @@ function recursiveFindParentNode(
                   {{ item.showText }}
                 </div>
                 <div class="branch-node-text" v-else>
-                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                  {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
                 </div>
               </div>
               <div
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
index cad293d7f..c825d01b2 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -8,11 +8,12 @@ import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
 
 import { Button, Input } from 'ant-design-vue';
 
+import { BpmNodeTypeEnum } from '#/utils';
+
 import {
   ConditionType,
   DEFAULT_CONDITION_GROUP_VALUE,
   NODE_DEFAULT_TEXT,
-  NodeType,
 } from '../../consts';
 import {
   getDefaultInclusiveConditionNodeName,
@@ -95,7 +96,7 @@ function addCondition() {
       id: `Flow_${generateUUID()}`,
       name: `包容条件${len}`,
       showText: '',
-      type: NodeType.CONDITION_NODE,
+      type: BpmNodeTypeEnum.CONDITION_NODE,
       childNode: undefined,
       conditionNodes: [],
       conditionSetting: {
@@ -143,7 +144,7 @@ function recursiveFindParentNode(
   node: SimpleFlowNode,
   nodeType: number,
 ) {
-  if (!node || node.type === NodeType.START_USER_NODE) {
+  if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
     return;
   }
   if (node.type === nodeType) {
@@ -213,7 +214,7 @@ function recursiveFindParentNode(
                   {{ item.showText }}
                 </div>
                 <div class="branch-node-text" v-else>
-                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                  {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
                 </div>
               </div>
               <div
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
index dee4e6985..502789329 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
@@ -8,6 +8,8 @@ import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
 
 import { message, Popover } from 'ant-design-vue';
 
+import { BpmNodeTypeEnum } from '#/utils';
+
 import {
   ApproveMethodType,
   AssignEmptyHandlerType,
@@ -15,7 +17,6 @@ import {
   ConditionType,
   DEFAULT_CONDITION_GROUP_VALUE,
   NODE_DEFAULT_NAME,
-  NodeType,
   RejectHandlerType,
 } from '../../consts';
 
@@ -41,17 +42,21 @@ const readonly = inject<Boolean>('readonly'); // 是否只读
 function addNode(type: number) {
   // 校验：条件分支、包容分支后面，不允许直接添加并行分支
   if (
-    type === NodeType.PARALLEL_BRANCH_NODE &&
-    [NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
-      props.currentNode?.type,
-    )
+    type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE &&
+    [
+      BpmNodeTypeEnum.CONDITION_BRANCH_NODE,
+      BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE,
+    ].includes(props.currentNode?.type)
   ) {
     message.error('条件分支、包容分支后面，不允许直接添加并行分支');
     return;
   }
 
   popoverShow.value = false;
-  if (type === NodeType.USER_TASK_NODE || type === NodeType.TRANSACTOR_NODE) {
+  if (
+    type === BpmNodeTypeEnum.USER_TASK_NODE ||
+    type === BpmNodeTypeEnum.TRANSACTOR_NODE
+  ) {
     const id = `Activity_${generateUUID()}`;
     const data: SimpleFlowNode = {
       id,
@@ -83,20 +88,20 @@ function addNode(type: number) {
     };
     emits('update:childNode', data);
   }
-  if (type === NodeType.COPY_TASK_NODE) {
+  if (type === BpmNodeTypeEnum.COPY_TASK_NODE) {
     const data: SimpleFlowNode = {
       id: `Activity_${generateUUID()}`,
-      name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.COPY_TASK_NODE) as string,
       showText: '',
-      type: NodeType.COPY_TASK_NODE,
+      type: BpmNodeTypeEnum.COPY_TASK_NODE,
       childNode: props.childNode,
     };
     emits('update:childNode', data);
   }
-  if (type === NodeType.CONDITION_BRANCH_NODE) {
+  if (type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE) {
     const data: SimpleFlowNode = {
       name: '条件分支',
-      type: NodeType.CONDITION_BRANCH_NODE,
+      type: BpmNodeTypeEnum.CONDITION_BRANCH_NODE,
       id: `GateWay_${generateUUID()}`,
       childNode: props.childNode,
       conditionNodes: [
@@ -104,7 +109,7 @@ function addNode(type: number) {
           id: `Flow_${generateUUID()}`,
           name: '条件1',
           showText: '',
-          type: NodeType.CONDITION_NODE,
+          type: BpmNodeTypeEnum.CONDITION_NODE,
           childNode: undefined,
           conditionSetting: {
             defaultFlow: false,
@@ -116,7 +121,7 @@ function addNode(type: number) {
           id: `Flow_${generateUUID()}`,
           name: '其它情况',
           showText: '未满足其它条件时，将进入此分支',
-          type: NodeType.CONDITION_NODE,
+          type: BpmNodeTypeEnum.CONDITION_NODE,
           childNode: undefined,
           conditionSetting: {
             defaultFlow: true,
@@ -126,10 +131,10 @@ function addNode(type: number) {
     };
     emits('update:childNode', data);
   }
-  if (type === NodeType.PARALLEL_BRANCH_NODE) {
+  if (type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE) {
     const data: SimpleFlowNode = {
       name: '并行分支',
-      type: NodeType.PARALLEL_BRANCH_NODE,
+      type: BpmNodeTypeEnum.PARALLEL_BRANCH_NODE,
       id: `GateWay_${generateUUID()}`,
       childNode: props.childNode,
       conditionNodes: [
@@ -137,24 +142,24 @@ function addNode(type: number) {
           id: `Flow_${generateUUID()}`,
           name: '并行1',
           showText: '无需配置条件同时执行',
-          type: NodeType.CONDITION_NODE,
+          type: BpmNodeTypeEnum.CONDITION_NODE,
           childNode: undefined,
         },
         {
           id: `Flow_${generateUUID()}`,
           name: '并行2',
           showText: '无需配置条件同时执行',
-          type: NodeType.CONDITION_NODE,
+          type: BpmNodeTypeEnum.CONDITION_NODE,
           childNode: undefined,
         },
       ],
     };
     emits('update:childNode', data);
   }
-  if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
+  if (type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE) {
     const data: SimpleFlowNode = {
       name: '包容分支',
-      type: NodeType.INCLUSIVE_BRANCH_NODE,
+      type: BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE,
       id: `GateWay_${generateUUID()}`,
       childNode: props.childNode,
       conditionNodes: [
@@ -162,7 +167,7 @@ function addNode(type: number) {
           id: `Flow_${generateUUID()}`,
           name: '包容条件1',
           showText: '',
-          type: NodeType.CONDITION_NODE,
+          type: BpmNodeTypeEnum.CONDITION_NODE,
           childNode: undefined,
           conditionSetting: {
             defaultFlow: false,
@@ -174,7 +179,7 @@ function addNode(type: number) {
           id: `Flow_${generateUUID()}`,
           name: '其它情况',
           showText: '未满足其它条件时，将进入此分支',
-          type: NodeType.CONDITION_NODE,
+          type: BpmNodeTypeEnum.CONDITION_NODE,
           childNode: undefined,
           conditionSetting: {
             defaultFlow: true,
@@ -184,42 +189,42 @@ function addNode(type: number) {
     };
     emits('update:childNode', data);
   }
-  if (type === NodeType.DELAY_TIMER_NODE) {
+  if (type === BpmNodeTypeEnum.DELAY_TIMER_NODE) {
     const data: SimpleFlowNode = {
       id: `Activity_${generateUUID()}`,
-      name: NODE_DEFAULT_NAME.get(NodeType.DELAY_TIMER_NODE) as string,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.DELAY_TIMER_NODE) as string,
       showText: '',
-      type: NodeType.DELAY_TIMER_NODE,
+      type: BpmNodeTypeEnum.DELAY_TIMER_NODE,
       childNode: props.childNode,
     };
     emits('update:childNode', data);
   }
-  if (type === NodeType.ROUTER_BRANCH_NODE) {
+  if (type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE) {
     const data: SimpleFlowNode = {
       id: `GateWay_${generateUUID()}`,
-      name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.ROUTER_BRANCH_NODE) as string,
       showText: '',
-      type: NodeType.ROUTER_BRANCH_NODE,
+      type: BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
       childNode: props.childNode,
     };
     emits('update:childNode', data);
   }
-  if (type === NodeType.TRIGGER_NODE) {
+  if (type === BpmNodeTypeEnum.TRIGGER_NODE) {
     const data: SimpleFlowNode = {
       id: `Activity_${generateUUID()}`,
-      name: NODE_DEFAULT_NAME.get(NodeType.TRIGGER_NODE) as string,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.TRIGGER_NODE) as string,
       showText: '',
-      type: NodeType.TRIGGER_NODE,
+      type: BpmNodeTypeEnum.TRIGGER_NODE,
       childNode: props.childNode,
     };
     emits('update:childNode', data);
   }
-  if (type === NodeType.CHILD_PROCESS_NODE) {
+  if (type === BpmNodeTypeEnum.CHILD_PROCESS_NODE) {
     const data: SimpleFlowNode = {
       id: `Activity_${generateUUID()}`,
-      name: NODE_DEFAULT_NAME.get(NodeType.CHILD_PROCESS_NODE) as string,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.CHILD_PROCESS_NODE) as string,
       showText: '',
-      type: NodeType.CHILD_PROCESS_NODE,
+      type: BpmNodeTypeEnum.CHILD_PROCESS_NODE,
       childNode: props.childNode,
       childProcessSetting: {
         calledProcessDefinitionKey: '',
@@ -247,7 +252,10 @@ function addNode(type: number) {
       <Popover trigger="hover" placement="right" width="auto" v-if="!readonly">
         <template #content>
           <div class="handler-item-wrapper">
-            <div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
+            <div
+              class="handler-item"
+              @click="addNode(BpmNodeTypeEnum.USER_TASK_NODE)"
+            >
               <div class="approve handler-item-icon">
                 <span class="iconfont icon-approve icon-size"></span>
               </div>
@@ -255,14 +263,17 @@ function addNode(type: number) {
             </div>
             <div
               class="handler-item"
-              @click="addNode(NodeType.TRANSACTOR_NODE)"
+              @click="addNode(BpmNodeTypeEnum.TRANSACTOR_NODE)"
             >
               <div class="transactor handler-item-icon">
                 <span class="iconfont icon-transactor icon-size"></span>
               </div>
               <div class="handler-item-text">办理人</div>
             </div>
-            <div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
+            <div
+              class="handler-item"
+              @click="addNode(BpmNodeTypeEnum.COPY_TASK_NODE)"
+            >
               <div class="handler-item-icon copy">
                 <span class="iconfont icon-size icon-copy"></span>
               </div>
@@ -270,7 +281,7 @@ function addNode(type: number) {
             </div>
             <div
               class="handler-item"
-              @click="addNode(NodeType.CONDITION_BRANCH_NODE)"
+              @click="addNode(BpmNodeTypeEnum.CONDITION_BRANCH_NODE)"
             >
               <div class="handler-item-icon condition">
                 <span class="iconfont icon-size icon-exclusive"></span>
@@ -279,7 +290,7 @@ function addNode(type: number) {
             </div>
             <div
               class="handler-item"
-              @click="addNode(NodeType.PARALLEL_BRANCH_NODE)"
+              @click="addNode(BpmNodeTypeEnum.PARALLEL_BRANCH_NODE)"
             >
               <div class="handler-item-icon parallel">
                 <span class="iconfont icon-size icon-parallel"></span>
@@ -288,7 +299,7 @@ function addNode(type: number) {
             </div>
             <div
               class="handler-item"
-              @click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)"
+              @click="addNode(BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE)"
             >
               <div class="handler-item-icon inclusive">
                 <span class="iconfont icon-size icon-inclusive"></span>
@@ -297,7 +308,7 @@ function addNode(type: number) {
             </div>
             <div
               class="handler-item"
-              @click="addNode(NodeType.DELAY_TIMER_NODE)"
+              @click="addNode(BpmNodeTypeEnum.DELAY_TIMER_NODE)"
             >
               <div class="handler-item-icon delay">
                 <span class="iconfont icon-size icon-delay"></span>
@@ -306,14 +317,17 @@ function addNode(type: number) {
             </div>
             <div
               class="handler-item"
-              @click="addNode(NodeType.ROUTER_BRANCH_NODE)"
+              @click="addNode(BpmNodeTypeEnum.ROUTER_BRANCH_NODE)"
             >
               <div class="handler-item-icon router">
                 <span class="iconfont icon-size icon-router"></span>
               </div>
               <div class="handler-item-text">路由分支</div>
             </div>
-            <div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
+            <div
+              class="handler-item"
+              @click="addNode(BpmNodeTypeEnum.TRIGGER_NODE)"
+            >
               <div class="handler-item-icon trigger">
                 <span class="iconfont icon-size icon-trigger"></span>
               </div>
@@ -321,7 +335,7 @@ function addNode(type: number) {
             </div>
             <div
               class="handler-item"
-              @click="addNode(NodeType.CHILD_PROCESS_NODE)"
+              @click="addNode(BpmNodeTypeEnum.CHILD_PROCESS_NODE)"
             >
               <div class="handler-item-icon child-process">
                 <span class="iconfont icon-size icon-child-process"></span>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
index 977de0955..b6f8ec151 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
@@ -8,7 +8,9 @@ import { buildShortUUID as generateUUID } from '@vben/utils';
 
 import { Button, Input } from 'ant-design-vue';
 
-import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useTaskStatusClass } from '../../helpers';
 import ProcessNodeTree from '../process-node-tree.vue';
 import NodeHandler from './node-handler.vue';
@@ -70,7 +72,7 @@ function addCondition() {
       id: `Flow_${generateUUID()}`,
       name: `并行${len}`,
       showText: '无需配置条件同时执行',
-      type: NodeType.CONDITION_NODE,
+      type: BpmNodeTypeEnum.CONDITION_NODE,
       childNode: undefined,
       conditionNodes: [],
     };
@@ -97,7 +99,7 @@ function recursiveFindParentNode(
   node: SimpleFlowNode,
   nodeType: number,
 ) {
-  if (!node || node.type === NodeType.START_USER_NODE) {
+  if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
     return;
   }
   if (node.type === nodeType) {
@@ -168,7 +170,7 @@ function recursiveFindParentNode(
                   {{ item.showText }}
                 </div>
                 <div class="branch-node-text" v-else>
-                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                  {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
                 </div>
               </div>
               <div v-if="!readonly" class="node-toolbar">
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
index 1c0538232..7e6876722 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
@@ -7,7 +7,9 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Input } from 'ant-design-vue';
 
-import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
 import RouterNodeConfig from '../nodes-config/router-node-config.vue';
 import NodeHandler from './node-handler.vue';
@@ -33,7 +35,7 @@ const currentNode = useWatchNode(props);
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(
   currentNode,
-  NodeType.ROUTER_BRANCH_NODE,
+  BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
 );
 
 const nodeSetting = ref();
@@ -85,7 +87,7 @@ function deleteNode() {
             {{ currentNode.showText }}
           </div>
           <div class="node-text" v-else>
-            {{ NODE_DEFAULT_TEXT.get(NodeType.ROUTER_BRANCH_NODE) }}
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.ROUTER_BRANCH_NODE) }}
           </div>
           <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
         </div>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
index f71a80217..13e22873e 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
@@ -9,7 +9,9 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Input } from 'ant-design-vue';
 
-import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
 import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
 import NodeHandler from './node-handler.vue';
@@ -36,7 +38,7 @@ const currentNode = useWatchNode(props);
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(
   currentNode,
-  NodeType.START_USER_NODE,
+  BpmNodeTypeEnum.START_USER_NODE,
 );
 
 const nodeSetting = ref();
@@ -98,7 +100,7 @@ function nodeClick() {
             {{ currentNode.showText }}
           </div>
           <div class="node-text" v-else>
-            {{ NODE_DEFAULT_TEXT.get(NodeType.START_USER_NODE) }}
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.START_USER_NODE) }}
           </div>
           <IconifyIcon icon="ep:arrow-right-bold" v-if="!readonly" />
         </div>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
index bf8e8012b..191632729 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
@@ -7,7 +7,9 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Input } from 'ant-design-vue';
 
-import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
 import TriggerNodeConfig from '../nodes-config/trigger-node-config.vue';
 import NodeHandler from './node-handler.vue';
@@ -35,7 +37,7 @@ const currentNode = useWatchNode(props);
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(
   currentNode,
-  NodeType.TRIGGER_NODE,
+  BpmNodeTypeEnum.TRIGGER_NODE,
 );
 
 const nodeSetting = ref();
@@ -87,7 +89,7 @@ function deleteNode() {
             {{ currentNode.showText }}
           </div>
           <div class="node-text" v-else>
-            {{ NODE_DEFAULT_TEXT.get(NodeType.TRIGGER_NODE) }}
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.TRIGGER_NODE) }}
           </div>
           <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
         </div>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
index 270760e37..f7ae63782 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
@@ -9,7 +9,9 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Input } from 'ant-design-vue';
 
-import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
 import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue';
 import NodeHandler from './node-handler.vue';
@@ -24,7 +26,7 @@ const props = defineProps({
 });
 
 const emits = defineEmits<{
-  findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType];
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: BpmNodeTypeEnum];
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();
 
@@ -36,7 +38,7 @@ const currentNode = useWatchNode(props);
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(
   currentNode,
-  NodeType.START_USER_NODE,
+  BpmNodeTypeEnum.USER_TASK_NODE,
 );
 const nodeSetting = ref();
 
@@ -60,7 +62,7 @@ function findReturnTaskNodes(
   matchNodeList: SimpleFlowNode[], // 匹配的节点
 ) {
   // 从父节点查找
-  emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE);
+  emits('findParentNode', matchNodeList, BpmNodeTypeEnum.USER_TASK_NODE);
 }
 
 // const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
@@ -77,10 +79,10 @@ function findReturnTaskNodes(
       >
         <div class="node-title-container">
           <div
-            :class="`node-title-icon ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
+            :class="`node-title-icon ${currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
           >
             <span
-              :class="`iconfont ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
+              :class="`iconfont ${currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
             >
             </span>
           </div>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 1efbce306..50fca1638 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { SimpleFlowNode } from '../consts';
 
-import { NodeType } from '../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
 import { useWatchNode } from '../helpers';
 import CopyTaskNode from './nodes/copy-task-node.vue';
 import DelayTimerNode from './nodes/delay-timer-node.vue';
@@ -57,7 +58,7 @@ function recursiveFindParentNode(
   if (!findNode) {
     return;
   }
-  if (findNode.type === NodeType.START_USER_NODE) {
+  if (findNode.type === BpmNodeTypeEnum.START_USER_NODE) {
     nodeList.push(findNode);
     return;
   }
@@ -71,15 +72,15 @@ function recursiveFindParentNode(
 <template>
   <!-- 发起人节点 -->
   <StartUserNode
-    v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.START_USER_NODE"
     :flow-node="currentNode"
   />
   <!-- 审批节点 -->
   <UserTaskNode
     v-if="
       currentNode &&
-      (currentNode.type === NodeType.USER_TASK_NODE ||
-        currentNode.type === NodeType.TRANSACTOR_NODE)
+      (currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE ||
+        currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE)
     "
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
@@ -87,46 +88,54 @@ function recursiveFindParentNode(
   />
   <!-- 抄送节点 -->
   <CopyTaskNode
-    v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.COPY_TASK_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
   <!-- 条件节点 -->
   <ExclusiveNode
-    v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE
+    "
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
     @find-parent-node="findParentNode"
   />
   <!-- 并行节点 -->
   <ParallelNode
-    v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE
+    "
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
     @find-parent-node="findParentNode"
   />
   <!-- 包容分支节点 -->
   <InclusiveNode
-    v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
+    "
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
     @find-parent-node="findParentNode"
   />
   <!-- 延迟器节点 -->
   <DelayTimerNode
-    v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.DELAY_TIMER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
   <!-- 路由分支节点 -->
   <RouterNode
-    v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE
+    "
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
   <!-- 触发器节点 -->
   <TriggerNode
-    v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.TRIGGER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
@@ -146,7 +155,7 @@ function recursiveFindParentNode(
 
   <!-- 结束节点 -->
   <EndEventNode
-    v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.END_EVENT_NODE"
     :flow-node="currentNode"
   />
 </template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
index 728fa80f4..0a8173692 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
@@ -22,9 +22,9 @@ import { getSimpleDeptList } from '#/api/system/dept';
 import { getSimplePostList } from '#/api/system/post';
 import { getSimpleRoleList } from '#/api/system/role';
 import { getSimpleUserList } from '#/api/system/user';
-import { BpmModelFormType } from '#/utils/constants';
+import { BpmModelFormType, BpmNodeTypeEnum } from '#/utils';
 
-import { NODE_DEFAULT_TEXT, NodeId, NodeType } from '../consts';
+import { NODE_DEFAULT_TEXT, NodeId } from '../consts';
 import SimpleProcessModel from './simple-process-model.vue';
 
 defineOptions({
@@ -124,13 +124,13 @@ function updateModel() {
   if (!processNodeTree.value) {
     processNodeTree.value = {
       name: '发起人',
-      type: NodeType.START_USER_NODE,
+      type: BpmNodeTypeEnum.START_USER_NODE,
       id: NodeId.START_USER_NODE_ID,
       showText: '默认配置',
       childNode: {
         id: NodeId.END_EVENT_NODE_ID,
         name: '结束',
-        type: NodeType.END_EVENT_NODE,
+        type: BpmNodeTypeEnum.END_EVENT_NODE,
       },
     };
     // 初始化时也触发一次保存
@@ -162,14 +162,14 @@ function validateNode(
 ) {
   if (node) {
     const { type, showText, conditionNodes } = node;
-    if (type === NodeType.END_EVENT_NODE) {
+    if (type === BpmNodeTypeEnum.END_EVENT_NODE) {
       return;
     }
 
     if (
-      type === NodeType.CONDITION_BRANCH_NODE ||
-      type === NodeType.PARALLEL_BRANCH_NODE ||
-      type === NodeType.INCLUSIVE_BRANCH_NODE
+      type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
     ) {
       // 1. 分支节点, 先校验各个分支
       conditionNodes?.forEach((item) => {
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
index b09c4e079..dac4be63b 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
@@ -8,7 +8,9 @@ import { downloadFileFromBlob, isString } from '@vben/utils';
 
 import { Button, ButtonGroup, Modal, Row } from 'ant-design-vue';
 
-import { NODE_DEFAULT_TEXT, NodeType } from '../consts';
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../consts';
 import { useWatchNode } from '../helpers';
 import ProcessNodeTree from './process-node-tree.vue';
 
@@ -113,18 +115,18 @@ function validateNode(
 ) {
   if (node) {
     const { type, showText, conditionNodes } = node;
-    if (type === NodeType.END_EVENT_NODE) {
+    if (type === BpmNodeTypeEnum.END_EVENT_NODE) {
       return;
     }
-    if (type === NodeType.START_USER_NODE) {
+    if (type === BpmNodeTypeEnum.START_USER_NODE) {
       // 发起人节点暂时不用校验，直接校验孩子节点
       validateNode(node.childNode, errorNodes);
     }
 
     if (
-      type === NodeType.USER_TASK_NODE ||
-      type === NodeType.COPY_TASK_NODE ||
-      type === NodeType.CONDITION_NODE
+      type === BpmNodeTypeEnum.USER_TASK_NODE ||
+      type === BpmNodeTypeEnum.COPY_TASK_NODE ||
+      type === BpmNodeTypeEnum.CONDITION_NODE
     ) {
       if (!showText) {
         errorNodes.push(node);
@@ -133,9 +135,9 @@ function validateNode(
     }
 
     if (
-      type === NodeType.CONDITION_BRANCH_NODE ||
-      type === NodeType.PARALLEL_BRANCH_NODE ||
-      type === NodeType.INCLUSIVE_BRANCH_NODE
+      type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
     ) {
       // 分支节点
       // 1. 先校验各个分支
diff --git a/apps/web-antd/src/components/simple-process-design/consts.ts b/apps/web-antd/src/components/simple-process-design/consts.ts
index 6ca44fde2..fa2da26a2 100644
--- a/apps/web-antd/src/components/simple-process-design/consts.ts
+++ b/apps/web-antd/src/components/simple-process-design/consts.ts
@@ -1,4 +1,4 @@
-// TODO 芋艿 这些 常量是不是可以共享
+import { BpmNodeTypeEnum, BpmTaskStatusEnum } from '#/utils';
 
 interface DictDataType {
   label: string;
@@ -43,112 +43,6 @@ export enum ApproveMethodType {
   SEQUENTIAL_APPROVE = 4,
 }
 
-/**
- * 任务状态枚举
- */
-export enum TaskStatusEnum {
-  /**
-   * 审批通过
-   */
-  APPROVE = 2,
-
-  /**
-   * 审批通过中
-   */
-  APPROVING = 7,
-  /**
-   * 已取消
-   */
-  CANCEL = 4,
-  /**
-   * 未开始
-   */
-  NOT_START = -1,
-
-  /**
-   * 审批不通过
-   */
-  REJECT = 3,
-
-  /**
-   * 已退回
-   */
-  RETURN = 5,
-  /**
-   * 审批中
-   */
-  RUNNING = 1,
-  /**
-   * 待审批
-   */
-  WAIT = 0,
-}
-
-/**
- * 节点类型
- */
-export enum NodeType {
-  /**
-   * 子流程节点
-   */
-  CHILD_PROCESS_NODE = 20,
-  /**
-   * 条件分支节点 (对应排他网关)
-   */
-  CONDITION_BRANCH_NODE = 51,
-  /**
-   * 条件节点
-   */
-  CONDITION_NODE = 50,
-
-  /**
-   * 抄送人节点
-   */
-  COPY_TASK_NODE = 12,
-
-  /**
-   * 延迟器节点
-   */
-  DELAY_TIMER_NODE = 14,
-
-  /**
-   * 结束节点
-   */
-  END_EVENT_NODE = 1,
-
-  /**
-   * 包容分支节点 (对应包容网关)
-   */
-  INCLUSIVE_BRANCH_NODE = 53,
-
-  /**
-   * 并行分支节点 (对应并行网关)
-   */
-  PARALLEL_BRANCH_NODE = 52,
-
-  /**
-   * 路由分支节点
-   */
-  ROUTER_BRANCH_NODE = 54,
-  /**
-   * 发起人节点
-   */
-  START_USER_NODE = 10,
-  /**
-   * 办理人节点
-   */
-  TRANSACTOR_NODE = 13,
-
-  /**
-   * 触发器节点
-   */
-  TRIGGER_NODE = 15,
-  /**
-   * 审批人节点
-   */
-  USER_TASK_NODE = 11,
-}
-
 export enum NodeId {
   /**
    * 发起人节点 Id
@@ -660,7 +554,7 @@ export type ChildProcessSetting = {
  */
 export interface SimpleFlowNode {
   id: string;
-  type: NodeType;
+  type: BpmNodeTypeEnum;
   name: string;
   showText?: string;
   // 孩子节点
@@ -698,7 +592,7 @@ export interface SimpleFlowNode {
   // 条件设置
   conditionSetting?: ConditionSetting;
   // 活动的状态，用于前端节点状态展示
-  activityStatus?: TaskStatusEnum;
+  activityStatus?: BpmTaskStatusEnum;
   // 延迟设置
   delaySetting?: DelaySetting;
   // 路由分支
@@ -734,26 +628,26 @@ export const DEFAULT_CONDITION_GROUP_VALUE = {
 };
 
 export const NODE_DEFAULT_TEXT = new Map<number, string>();
-NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人');
-NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人');
-NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件');
-NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人');
-NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器');
-NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点');
-NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器');
-NODE_DEFAULT_TEXT.set(NodeType.TRANSACTOR_NODE, '请设置办理人');
-NODE_DEFAULT_TEXT.set(NodeType.CHILD_PROCESS_NODE, '请设置子流程');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.USER_TASK_NODE, '请配置审批人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.COPY_TASK_NODE, '请配置抄送人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.CONDITION_NODE, '请设置条件');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.START_USER_NODE, '请设置发起人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.DELAY_TIMER_NODE, '请设置延迟器');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.ROUTER_BRANCH_NODE, '请设置路由节点');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.TRIGGER_NODE, '请设置触发器');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.TRANSACTOR_NODE, '请设置办理人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.CHILD_PROCESS_NODE, '请设置子流程');
 
 export const NODE_DEFAULT_NAME = new Map<number, string>();
-NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人');
-NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人');
-NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件');
-NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人');
-NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器');
-NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支');
-NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器');
-NODE_DEFAULT_NAME.set(NodeType.TRANSACTOR_NODE, '办理人');
-NODE_DEFAULT_NAME.set(NodeType.CHILD_PROCESS_NODE, '子流程');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.USER_TASK_NODE, '审批人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.COPY_TASK_NODE, '抄送人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.CONDITION_NODE, '条件');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.START_USER_NODE, '发起人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.DELAY_TIMER_NODE, '延迟器');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.ROUTER_BRANCH_NODE, '路由分支');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.TRIGGER_NODE, '触发器');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.TRANSACTOR_NODE, '办理人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.CHILD_PROCESS_NODE, '子流程');
 
 // 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
 export const CANDIDATE_STRATEGY: DictDataType[] = [
@@ -930,24 +824,6 @@ export const MULTI_LEVEL_DEPT: DictDataType[] = [
   { label: '第 15 级部门', value: 15 },
 ];
 
-/**
- * 流程实例的变量枚举
- */
-export enum ProcessVariableEnum {
-  /**
-   * 流程定义名称
-   */
-  PROCESS_DEFINITION_NAME = 'PROCESS_DEFINITION_NAME',
-  /**
-   * 发起时间
-   */
-  START_TIME = 'PROCESS_START_TIME',
-  /**
-   * 发起用户 ID
-   */
-  START_USER_ID = 'PROCESS_START_USER_ID',
-}
-
 export const DELAY_TYPE = [
   { label: '固定时长', value: DelayTypeEnum.FIXED_TIME_DURATION },
   { label: '固定日期', value: DelayTypeEnum.FIXED_DATE_TIME },
diff --git a/apps/web-antd/src/components/simple-process-design/helpers.ts b/apps/web-antd/src/components/simple-process-design/helpers.ts
index 6423111a8..7227b87f9 100644
--- a/apps/web-antd/src/components/simple-process-design/helpers.ts
+++ b/apps/web-antd/src/components/simple-process-design/helpers.ts
@@ -14,6 +14,12 @@ import type { SystemUserApi } from '#/api/system/user';
 
 import { inject, ref, toRaw, unref, watch } from 'vue';
 
+import {
+  BpmNodeTypeEnum,
+  BpmTaskStatusEnum,
+  ProcessVariableEnum,
+} from '#/utils';
+
 import {
   ApproveMethodType,
   AssignEmptyHandlerType,
@@ -23,10 +29,7 @@ import {
   ConditionType,
   FieldPermissionType,
   NODE_DEFAULT_NAME,
-  NodeType,
-  ProcessVariableEnum,
   RejectHandlerType,
-  TaskStatusEnum,
 } from './consts';
 
 export function useWatchNode(props: {
@@ -252,7 +255,7 @@ export type CopyTaskFormType = {
 /**
  * @description 节点表单数据。 用于审批节点、抄送节点
  */
-export function useNodeForm(nodeType: NodeType) {
+export function useNodeForm(nodeType: BpmNodeTypeEnum) {
   const roleOptions = inject<Ref<SystemRoleApi.Role[]>>('roleList', ref([])); // 角色列表
   const postOptions = inject<Ref<SystemPostApi.Post[]>>('postList', ref([])); // 岗位列表
   const userOptions = inject<Ref<SystemUserApi.User[]>>('userList', ref([])); // 用户列表
@@ -269,8 +272,8 @@ export function useNodeForm(nodeType: NodeType) {
   const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
 
   if (
-    nodeType === NodeType.USER_TASK_NODE ||
-    nodeType === NodeType.TRANSACTOR_NODE
+    nodeType === BpmNodeTypeEnum.USER_TASK_NODE ||
+    nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE
   ) {
     configForm.value = {
       candidateStrategy: CandidateStrategy.USER,
@@ -614,7 +617,7 @@ export function useDrawer() {
 /**
  * @description 节点名称配置
  */
-export function useNodeName(nodeType: NodeType) {
+export function useNodeName(nodeType: BpmNodeTypeEnum) {
   // 节点名称
   const nodeName = ref<string>();
   // 节点名称输入框
@@ -637,7 +640,10 @@ export function useNodeName(nodeType: NodeType) {
   };
 }
 
-export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
+export function useNodeName2(
+  node: Ref<SimpleFlowNode>,
+  nodeType: BpmNodeTypeEnum,
+) {
   // 显示节点名称输入框
   const showInput = ref(false);
   // 节点名称输入框失去焦点
@@ -661,21 +667,21 @@ export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
  * @description 根据节点任务状态，获取节点任务状态样式
  */
 export function useTaskStatusClass(
-  taskStatus: TaskStatusEnum | undefined,
+  taskStatus: BpmTaskStatusEnum | undefined,
 ): string {
   if (!taskStatus) {
     return '';
   }
-  if (taskStatus === TaskStatusEnum.APPROVE) {
+  if (taskStatus === BpmTaskStatusEnum.APPROVE) {
     return 'status-pass';
   }
-  if (taskStatus === TaskStatusEnum.RUNNING) {
+  if (taskStatus === BpmTaskStatusEnum.RUNNING) {
     return 'status-running';
   }
-  if (taskStatus === TaskStatusEnum.REJECT) {
+  if (taskStatus === BpmTaskStatusEnum.REJECT) {
     return 'status-reject';
   }
-  if (taskStatus === TaskStatusEnum.CANCEL) {
+  if (taskStatus === BpmTaskStatusEnum.CANCEL) {
     return 'status-cancel';
   }
   return '';
diff --git a/apps/web-antd/src/components/simple-process-design/index.ts b/apps/web-antd/src/components/simple-process-design/index.ts
index 05fee448b..ff79ef8cf 100644
--- a/apps/web-antd/src/components/simple-process-design/index.ts
+++ b/apps/web-antd/src/components/simple-process-design/index.ts
@@ -1,3 +1,7 @@
 import './styles/simple-process-designer.scss';
 
+export { default as HttpRequestSetting } from './components/nodes-config/modules/http-request-setting.vue';
+
 export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue';
+
+export { parseFormFields } from './helpers';
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/constants.ts b/apps/web-antd/src/utils/constants.ts
index ed4f97a8e..00ce6959f 100644
--- a/apps/web-antd/src/utils/constants.ts
+++ b/apps/web-antd/src/utils/constants.ts
@@ -725,3 +725,21 @@ OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.DELEGATE, '委派');
 OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.ADD_SIGN, '加签');
 OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.RETURN, '退回');
 OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.COPY, '抄送');
+
+/**
+ * 流程实例的变量枚举
+ */
+export enum ProcessVariableEnum {
+  /**
+   * 流程定义名称
+   */
+  PROCESS_DEFINITION_NAME = 'PROCESS_DEFINITION_NAME',
+  /**
+   * 发起时间
+   */
+  START_TIME = 'PROCESS_START_TIME',
+  /**
+   * 发起用户 ID
+   */
+  START_USER_ID = 'PROCESS_START_USER_ID',
+}
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/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index e3418da4e..b6353847d 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -29,6 +29,7 @@ import { getSimpleUserList } from '#/api/system/user';
 import { BpmAutoApproveType, BpmModelFormType, BpmModelType } from '#/utils';
 
 import BasicInfo from './modules/basic-info.vue';
+import ExtraSetting from './modules/extra-setting.vue';
 import FormDesign from './modules/form-design.vue';
 import ProcessDesign from './modules/process-design.vue';
 
@@ -55,6 +56,8 @@ const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
 const formDesignRef = ref<InstanceType<typeof FormDesign>>();
 // 流程设计组件引用
 const processDesignRef = ref<InstanceType<typeof ProcessDesign>>();
+// 更多设置组件引用
+const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>();
 
 /** 步骤校验函数 */
 const validateBasic = async () => {
@@ -71,13 +74,18 @@ const validateProcess = async () => {
   await processDesignRef.value?.validate();
 };
 
+/** 更多设置校验 */
+const validateExtra = async () => {
+  await extraSettingRef.value?.validate();
+};
+
 const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
 
 const steps = [
   { title: '基本信息', validator: validateBasic },
   { title: '表单设计', validator: validateForm },
   { title: '流程设计', validator: validateProcess },
-  { title: '更多设置', validator: null },
+  { title: '更多设置', validator: validateExtra },
 ];
 
 // 表单数据
@@ -190,8 +198,8 @@ const initData = async () => {
   // 最终，设置 currentStep 切换到第一步
   currentStep.value = 0;
 
-  // TODO 兼容，以前未配置更多设置的流程
-  // extraSettingsRef.value.initData()
+  // 以前未配置更多设置的流程
+  extraSettingRef.value?.initData();
 };
 
 /** 根据类型切换流程数据 */
@@ -237,7 +245,13 @@ const validateAllSteps = async () => {
     return false;
   }
 
-  // TODO 更多设置校验
+  // 更多设置校验
+  try {
+    await validateExtra();
+  } catch {
+    currentStep.value = 3;
+    return false;
+  }
 
   return true;
 };
@@ -345,6 +359,9 @@ const handleStepClick = async (index: number) => {
     if (index !== 2) {
       await validateProcess();
     }
+    if (index !== 3) {
+      await validateExtra();
+    }
     // 切换步骤
     currentStep.value = index;
   } catch (error) {
@@ -475,8 +492,10 @@ onBeforeUnmount(() => {
             ref="processDesignRef"
           />
 
-          <!-- 第四步：更多设置 TODO -->
-          <div v-if="currentStep === 3" class="mx-auto w-4/6"></div>
+          <!-- 第四步：更多设置 -->
+          <div v-if="currentStep === 3" class="mx-auto w-4/6">
+            <ExtraSetting v-model="formData" ref="extraSettingRef" />
+          </div>
         </div>
       </Card>
     </div>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
new file mode 100644
index 000000000..d951e24a5
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
@@ -0,0 +1,498 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+
+import {
+  Checkbox,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Mentions,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  Switch,
+  Tooltip,
+  TypographyText,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import * as FormApi from '#/api/bpm/form';
+import {
+  HttpRequestSetting,
+  parseFormFields,
+} from '#/components/simple-process-design';
+import { ProcessVariableEnum } from '#/utils';
+import { BpmAutoApproveType, BpmModelFormType } from '#/utils/constants';
+
+const modelData = defineModel<any>();
+
+/** 自定义 ID 流程编码 */
+const timeOptions = ref([
+  {
+    value: '',
+    label: '无',
+  },
+  {
+    value: 'DAY',
+    label: '精确到日',
+  },
+  {
+    value: 'HOUR',
+    label: '精确到时',
+  },
+  {
+    value: 'MINUTE',
+    label: '精确到分',
+  },
+  {
+    value: 'SECOND',
+    label: '精确到秒',
+  },
+]);
+const numberExample = computed(() => {
+  if (modelData.value.processIdRule.enable) {
+    let infix = '';
+    switch (modelData.value.processIdRule.infix) {
+      case 'DAY': {
+        infix = dayjs().format('YYYYMMDD');
+        break;
+      }
+      case 'HOUR': {
+        infix = dayjs().format('YYYYMMDDHH');
+        break;
+      }
+      case 'MINUTE': {
+        infix = dayjs().format('YYYYMMDDHHmm');
+        break;
+      }
+      case 'SECOND': {
+        infix = dayjs().format('YYYYMMDDHHmmss');
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    return (
+      modelData.value.processIdRule.prefix +
+      infix +
+      modelData.value.processIdRule.postfix +
+      '1'.padStart(modelData.value.processIdRule.length - 1, '0')
+    );
+  } else {
+    return '';
+  }
+});
+
+/** 是否开启流程前置通知 */
+const processBeforeTriggerEnable = ref(false);
+const handleProcessBeforeTriggerEnableChange = (
+  val: boolean | number | string,
+) => {
+  modelData.value.processBeforeTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+};
+
+/** 是否开启流程后置通知 */
+const processAfterTriggerEnable = ref(false);
+const handleProcessAfterTriggerEnableChange = (
+  val: boolean | number | string,
+) => {
+  modelData.value.processAfterTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+};
+
+/** 是否开启任务前置通知 */
+const taskBeforeTriggerEnable = ref(false);
+const handleTaskBeforeTriggerEnableChange = (
+  val: boolean | number | string,
+) => {
+  modelData.value.taskBeforeTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+};
+
+/** 是否开启任务后置通知 */
+const taskAfterTriggerEnable = ref(false);
+const handleTaskAfterTriggerEnableChange = (val: boolean | number | string) => {
+  modelData.value.taskAfterTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+};
+
+/** 表单选项 */
+const formField = ref<Array<{ field: string; title: string }>>([]);
+const formFieldOptions4Title = computed(() => {
+  const cloneFormField = formField.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field,
+    };
+  });
+  // 固定添加发起人 ID 字段
+  cloneFormField.unshift({
+    label: '流程名称',
+    value: ProcessVariableEnum.PROCESS_DEFINITION_NAME,
+  });
+  cloneFormField.unshift({
+    label: '发起时间',
+    value: ProcessVariableEnum.START_TIME,
+  });
+  cloneFormField.unshift({
+    label: '发起人',
+    value: ProcessVariableEnum.START_USER_ID,
+  });
+  return cloneFormField;
+});
+const formFieldOptions4Summary = computed(() => {
+  return formField.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field,
+    };
+  });
+});
+
+/** 兼容以前未配置更多设置的流程 */
+const initData = () => {
+  if (!modelData.value.processIdRule) {
+    modelData.value.processIdRule = {
+      enable: false,
+      prefix: '',
+      infix: '',
+      postfix: '',
+      length: 5,
+    };
+  }
+  if (!modelData.value.autoApprovalType) {
+    modelData.value.autoApprovalType = BpmAutoApproveType.NONE;
+  }
+  if (!modelData.value.titleSetting) {
+    modelData.value.titleSetting = {
+      enable: false,
+      title: '',
+    };
+  }
+  if (!modelData.value.summarySetting) {
+    modelData.value.summarySetting = {
+      enable: false,
+      summary: [],
+    };
+  }
+  if (modelData.value.processBeforeTriggerSetting) {
+    processBeforeTriggerEnable.value = true;
+  }
+  if (modelData.value.processAfterTriggerSetting) {
+    processAfterTriggerEnable.value = true;
+  }
+  if (modelData.value.taskBeforeTriggerSetting) {
+    taskBeforeTriggerEnable.value = true;
+  }
+  if (modelData.value.taskAfterTriggerSetting) {
+    taskAfterTriggerEnable.value = true;
+  }
+};
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await FormApi.getFormDetail(newFormId);
+      const result: Array<{ field: string; title: string }> = [];
+      if (data.fields) {
+        data.fields.forEach((fieldStr: string) => {
+          parseFormFields(JSON.parse(fieldStr), result);
+        });
+      }
+      formField.value = result;
+    } else {
+      formField.value = [];
+    }
+  },
+  { immediate: true },
+);
+// 表单引用
+const formRef = ref();
+/** 表单校验 */
+const validate = async () => {
+  await formRef.value?.validate();
+};
+
+defineExpose({ initData, validate });
+</script>
+<template>
+  <Form
+    ref="formRef"
+    :model="modelData"
+    :label-col="{ span: 4 }"
+    :wrapper-col="{ span: 20 }"
+    class="mt-5 px-5"
+  >
+    <FormItem class="mb-5" label="提交人权限">
+      <div class="mt-1 flex flex-col">
+        <Checkbox v-model:checked="modelData.allowCancelRunningProcess">
+          允许撤销审批中的申请
+        </Checkbox>
+        <div class="ml-6">
+          <TypographyText type="warning">
+            第一个审批节点通过后，提交人仍可撤销申请
+          </TypographyText>
+        </div>
+      </div>
+    </FormItem>
+    <FormItem v-if="modelData.processIdRule" class="mb-5" label="流程编码">
+      <Row :gutter="8" align="middle">
+        <Col :span="1">
+          <Checkbox v-model:checked="modelData.processIdRule.enable" />
+        </Col>
+        <Col :span="5">
+          <Input
+            v-model:value="modelData.processIdRule.prefix"
+            placeholder="前缀"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </Col>
+        <Col :span="6">
+          <Select
+            v-model:value="modelData.processIdRule.infix"
+            allow-clear
+            placeholder="中缀"
+            :disabled="!modelData.processIdRule.enable"
+            :options="timeOptions"
+          />
+        </Col>
+        <Col :span="4">
+          <Input
+            v-model:value="modelData.processIdRule.postfix"
+            placeholder="后缀"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </Col>
+        <Col :span="4">
+          <InputNumber
+            v-model:value="modelData.processIdRule.length"
+            :min="5"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </Col>
+      </Row>
+      <div class="ml-6 mt-2" v-if="modelData.processIdRule.enable">
+        <TypographyText type="success">
+          编码示例：{{ numberExample }}
+        </TypographyText>
+      </div>
+    </FormItem>
+    <FormItem class="mb-5" label="自动去重">
+      <div class="mt-1">
+        <TypographyText class="mb-2 block">
+          同一审批人在流程中重复出现时：
+        </TypographyText>
+        <RadioGroup v-model:value="modelData.autoApprovalType">
+          <Row :gutter="[0, 8]">
+            <Col :span="24">
+              <Radio :value="0">不自动通过</Radio>
+            </Col>
+            <Col :span="24">
+              <Radio :value="1">
+                仅审批一次，后续重复的审批节点均自动通过
+              </Radio>
+            </Col>
+            <Col :span="24">
+              <Radio :value="2">仅针对连续审批的节点自动通过</Radio>
+            </Col>
+          </Row>
+        </RadioGroup>
+      </div>
+    </FormItem>
+    <FormItem v-if="modelData.titleSetting" class="mb-5" label="标题设置">
+      <div class="mt-1">
+        <RadioGroup v-model:value="modelData.titleSetting.enable">
+          <Row :gutter="[0, 8]">
+            <Col :span="24">
+              <Radio :value="false">
+                系统默认
+                <TypographyText type="success"> 展示流程名称 </TypographyText>
+              </Radio>
+            </Col>
+            <Col :span="24">
+              <Radio :value="true">
+                <div class="inline-flex items-center">
+                  自定义标题
+                  <Tooltip
+                    title="输入字符 '{' 即可插入表单字段"
+                    placement="top"
+                  >
+                    <CircleHelp class="ml-1 size-4 text-gray-500" />
+                  </Tooltip>
+                </div>
+              </Radio>
+            </Col>
+          </Row>
+        </RadioGroup>
+        <div class="mt-2">
+          <Mentions
+            v-if="modelData.titleSetting.enable"
+            v-model:value="modelData.titleSetting.title"
+            style="width: 100%; max-width: 600px"
+            type="textarea"
+            prefix="{"
+            split="}"
+            :options="formFieldOptions4Title"
+            placeholder="请插入表单字段（输入 '{' 可以选择表单字段）或输入文本"
+          />
+        </div>
+      </div>
+    </FormItem>
+    <FormItem
+      v-if="
+        modelData.summarySetting &&
+        modelData.formType === BpmModelFormType.NORMAL
+      "
+      class="mb-5"
+      label="摘要设置"
+    >
+      <div class="mt-1">
+        <RadioGroup v-model:value="modelData.summarySetting.enable">
+          <Row :gutter="[0, 8]">
+            <Col :span="24">
+              <Radio :value="false">
+                系统默认
+                <TypographyText type="secondary">
+                  展示表单前 3 个字段
+                </TypographyText>
+              </Radio>
+            </Col>
+            <Col :span="24">
+              <Radio :value="true"> 自定义摘要 </Radio>
+            </Col>
+          </Row>
+        </RadioGroup>
+        <div class="mt-2">
+          <Select
+            v-if="modelData.summarySetting.enable"
+            v-model:value="modelData.summarySetting.summary"
+            mode="multiple"
+            placeholder="请选择要展示的表单字段"
+            :options="formFieldOptions4Summary"
+          />
+        </div>
+      </div>
+    </FormItem>
+    <FormItem class="mb-5" label="流程前置通知">
+      <Row class="mt-1">
+        <Col :span="24">
+          <div class="flex items-center">
+            <Switch
+              v-model:checked="processBeforeTriggerEnable"
+              @change="handleProcessBeforeTriggerEnableChange"
+            />
+            <span class="ml-4">流程启动后通知</span>
+          </div>
+        </Col>
+      </Row>
+      <Row v-if="processBeforeTriggerEnable">
+        <Col :span="24" class="mt-6">
+          <HttpRequestSetting
+            v-model:setting="modelData.processBeforeTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="processBeforeTriggerSetting"
+          />
+        </Col>
+      </Row>
+    </FormItem>
+    <FormItem class="mb-5" label="流程后置通知">
+      <Row class="mt-1">
+        <Col :span="24">
+          <div class="flex items-center">
+            <Switch
+              v-model:checked="processAfterTriggerEnable"
+              @change="handleProcessAfterTriggerEnableChange"
+            />
+            <span class="ml-4">流程结束后通知</span>
+          </div>
+        </Col>
+      </Row>
+      <Row v-if="processAfterTriggerEnable" class="mt-2">
+        <Col :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.processAfterTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="processAfterTriggerSetting"
+          />
+        </Col>
+      </Row>
+    </FormItem>
+    <FormItem class="mb-5" label="任务前置通知">
+      <Row class="mt-1">
+        <Col :span="24">
+          <div class="flex items-center">
+            <Switch
+              v-model:checked="taskBeforeTriggerEnable"
+              @change="handleTaskBeforeTriggerEnableChange"
+            />
+            <span class="ml-4">任务执行时通知</span>
+          </div>
+        </Col>
+      </Row>
+      <Row v-if="taskBeforeTriggerEnable" class="mt-2">
+        <Col :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.taskBeforeTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="taskBeforeTriggerSetting"
+          />
+        </Col>
+      </Row>
+    </FormItem>
+    <FormItem class="mb-5" label="任务后置通知">
+      <Row class="mt-1">
+        <Col :span="24">
+          <div class="flex items-center">
+            <Switch
+              v-model:checked="taskAfterTriggerEnable"
+              @change="handleTaskAfterTriggerEnableChange"
+            />
+            <span class="ml-4">任务结束后通知</span>
+          </div>
+        </Col>
+      </Row>
+      <Row v-if="taskAfterTriggerEnable" class="mt-2">
+        <Col :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.taskAfterTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="taskAfterTriggerSetting"
+          />
+        </Col>
+      </Row>
+    </FormItem>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 1173703e7..f1e45938f 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -21,8 +21,6 @@ import CustomerTodayContactList from './modules/customer-today-contact-list.vue'
 import ReceivableAuditList from './modules/receivable-audit-list.vue';
 import ReceivablePlanRemindList from './modules/receivable-plan-remind-list.vue';
 
-defineOptions({ name: 'CrmBacklog' });
-
 const leftMenu = ref('customerTodayContact');
 
 const clueFollowCount = ref(0);
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index bf65a743c..0cfd32130 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -1,6 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { getBusinessStatusTypeSimpleList } from '#/api/crm/business/status';
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { getSimpleUserList } from '#/api/system/user';
+import { erpPriceMultiply } from '#/utils';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -19,18 +24,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 +91,49 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
+      fieldName: 'product',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      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,
+          );
+        },
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/business/index.ts b/apps/web-antd/src/views/crm/business/index.ts
new file mode 100644
index 000000000..6ff97edf2
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/index.ts
@@ -0,0 +1,25 @@
+import { defineAsyncComponent } from 'vue';
+
+export const BusinessForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const BusinessDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const BusinessDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
+
+export const BusinessDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const BusinessDetailsListModal = defineAsyncComponent(
+  () => import('./modules/detail-list-modal.vue'),
+);
+
+export const UpStatusForm = defineAsyncComponent(
+  () => import('./modules/up-status-form.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-data.ts b/apps/web-antd/src/views/crm/business/modules/detail-data.ts
new file mode 100644
index 000000000..cab0f65be
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/modules/detail-data.ts
@@ -0,0 +1,126 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { formatDateTime } from '@vben/utils';
+
+import { erpPriceInputFormatter } from '#/utils';
+
+/** 详情页的字段 */
+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..64e4a9fe7 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmBusinessApi } from '#/api/crm/business';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from './detail-data';
+
+defineProps<{
+  business: CrmBusinessApi.Business; // 商机信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>businessInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="business" />
+    <Divider />
+    <SystemDescription :data="business" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue b/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
new file mode 100644
index 000000000..902065437
--- /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 './detail-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..81cbaa1ea 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 './detail-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..81ff5863d 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,183 @@
-<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 { 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 { AsyncOperateLog } from '#/components/operate-log';
+import {
+  BusinessDetailsInfo,
+  BusinessForm,
+  UpStatusForm,
+} from '#/views/crm/business';
+import { ContactDetailsList } from '#/views/crm/contact';
+import { ContractDetailsList } from '#/views/crm/contract';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
+import { ProductDetailsList } from '#/views/crm/product';
+
+import { useDetailSchema } from './detail-data';
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const businessId = ref(0);
+
+const business = ref<CrmBusinessApi.Business>({} as CrmBusinessApi.Business);
+const businessLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: BusinessForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+const [UpStatusModal, upStatusModalApi] = useVbenModal({
+  connectedComponent: UpStatusForm,
+  destroyOnClose: true,
+});
+
+/** 加载详情 */
+async function loadBusinessDetail() {
+  loading.value = true;
+  const data = await getBusiness(businessId.value);
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_BUSINESS,
+    bizId: businessId.value,
+  });
+  businessLogList.value = logList.list;
+  business.value = data;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/business');
+}
+
+/** 编辑 */
+function handleEdit() {
+  formModalApi.setData({ id: businessId.value }).open();
+}
+
+/** 转移线索 */
+function handleTransfer() {
+  transferModalApi.setData({ bizType: BizTypeEnum.CRM_BUSINESS }).open();
+}
+
+/** 更新商机状态操作 */
+async function handleUpdateStatus() {
+  upStatusModalApi.setData(business.value).open();
+}
+
+// 加载数据
+onMounted(() => {
+  businessId.value = Number(route.params.id);
+  loadBusinessDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="business?.name" :loading="loading">
+    <FormModal @success="loadBusinessDetail" />
+    <TransferModal @success="loadBusinessDetail" />
+    <UpStatusModal @success="loadBusinessDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          type="primary"
+          @click="handleEdit"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          @click="handleUpdateStatus"
+        >
+          变更商机状态
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateOwnerUser"
+          @click="handleTransfer"
+        >
+          转移
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="business" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <BusinessDetailsInfo :business="business" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+          <FollowUp :biz-id="businessId" :biz-type="BizTypeEnum.CRM_BUSINESS" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="联系人" key="3" :force-render="true">
+          <ContactDetailsList
+            :biz-id="businessId"
+            :biz-type="BizTypeEnum.CRM_BUSINESS"
+            :business-id="businessId"
+            :customer-id="business.customerId"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="产品" key="4" :force-render="true">
+          <ProductDetailsList
+            :biz-id="businessId"
+            :biz-type="BizTypeEnum.CRM_BUSINESS"
+            :business="business"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="合同" key="5" :force-render="true">
+          <ContractDetailsList
+            :biz-id="businessId"
+            :biz-type="BizTypeEnum.CRM_BUSINESS"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="6" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="businessId"
+            :biz-type="BizTypeEnum.CRM_BUSINESS"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="7" :force-render="true">
+          <AsyncOperateLog :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..3a25fb663 100644
--- a/apps/web-antd/src/views/crm/business/modules/form.vue
+++ b/apps/web-antd/src/views/crm/business/modules/form.vue
@@ -13,7 +13,10 @@ import {
   getBusiness,
   updateBusiness,
 } from '#/api/crm/business';
+import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
+import { erpPriceMultiply } from '#/utils';
+import { ProductEditTable } from '#/views/crm/product';
 
 import { useFormSchema } from '../data';
 
@@ -25,15 +28,37 @@ const getTitle = computed(() => {
     : $t('ui.actionTitle.create', ['商机']);
 });
 
+function handleUpdateProducts(products: any) {
+  formData.value = modalApi.getData<CrmBusinessApi.Business>();
+  formData.value!.products = products;
+  if (formData.value) {
+    const totalProductPrice =
+      formData.value.products?.reduce(
+        (prev, curr) => prev + curr.totalPrice,
+        0,
+      ) ?? 0;
+    const discountPercent = formData.value.discountPercent;
+    const discountPrice =
+      discountPercent === null
+        ? 0
+        : erpPriceMultiply(totalProductPrice, discountPercent / 100);
+    const totalPrice = totalProductPrice - (discountPrice ?? 0);
+    formData.value!.totalProductPrice = totalProductPrice;
+    formData.value!.totalPrice = totalPrice;
+    formApi.setValues(formData.value!);
+  }
+}
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
     labelWidth: 120,
   },
-  layout: 'horizontal',
+  // 一共3列
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
@@ -47,6 +72,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as CrmBusinessApi.Business;
+    data.products = formData.value?.products;
     try {
       await (formData.value?.id ? updateBusiness(data) : createBusiness(data));
       // 关闭并提示
@@ -64,12 +90,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 {
@@ -80,7 +106,17 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[40%]">
-    <Form class="mx-4" />
+  <Modal :title="getTitle" class="w-[50%]">
+    <Form class="mx-4">
+      <template #product="slotProps">
+        <ProductEditTable
+          v-bind="slotProps"
+          class="w-full"
+          :products="formData?.products ?? []"
+          :biz-type="BizTypeEnum.CRM_BUSINESS"
+          @update:products="handleUpdateProducts"
+        />
+      </template>
+    </Form>
   </Modal>
 </template>
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..ef35115ba 100644
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -1,13 +1,8 @@
 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 { getAreaTree } from '#/api/system/area';
-import { DictTag } from '#/components/dict-tag';
+import { getSimpleUserList } from '#/api/system/user';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
 /** 新增/修改的表单 */
@@ -32,7 +27,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 +39,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 +73,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 +81,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户级别',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL),
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
       },
     },
     {
@@ -250,142 +248,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
-
-/** 详情头部的配置 */
-export function useDetailSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'source',
-      label: '线索来源',
-      content: (data) =>
-        h(DictTag, {
-          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
-        }),
-    },
-    {
-      field: 'mobile',
-      label: '手机',
-    },
-    {
-      field: 'ownerUserName',
-      label: '负责人',
-    },
-    {
-      field: 'createTime',
-      label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
-    },
-  ];
-}
-
-/** 详情基本信息的配置 */
-export function useDetailBaseSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'name',
-      label: '线索名称',
-    },
-    {
-      field: 'source',
-      label: '客户来源',
-      content: (data) =>
-        h(DictTag, {
-          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
-        }),
-    },
-    {
-      field: 'mobile',
-      label: '手机',
-    },
-    {
-      field: 'ownerUserName',
-      label: '负责人',
-    },
-    {
-      field: 'telephone',
-      label: '电话',
-    },
-    {
-      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: 'areaId',
-      label: '地址',
-    },
-    {
-      field: 'detailAddress',
-      label: '详细地址',
-    },
-    {
-      field: 'contactNextTime',
-      label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
-    },
-    {
-      field: 'remark',
-      label: '备注',
-    },
-  ];
-}
-
-/** 详情系统信息的配置 */
-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-data.ts b/apps/web-antd/src/views/crm/clue/modules/detail-data.ts
new file mode 100644
index 000000000..73102e9b1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/clue/modules/detail-data.ts
@@ -0,0 +1,107 @@
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
+
+/** 详情头部的配置 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'source',
+      label: '线索来源',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
+          value: data?.source,
+        }),
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+  ];
+}
+
+/** 详情基本信息的配置 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '线索名称',
+    },
+    {
+      field: 'source',
+      label: '客户来源',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
+          value: data?.source,
+        }),
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'telephone',
+      label: '电话',
+    },
+    {
+      field: 'email',
+      label: '邮箱',
+    },
+    {
+      field: 'areaName',
+      label: '地址',
+      content: (data) => data?.areaName + data?.detailAddress,
+    },
+    {
+      field: 'qq',
+      label: 'QQ',
+    },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
+    {
+      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: 'contactNextTime',
+      label: '下次联系时间',
+      content: (data) => formatDateTime(data?.contactNextTime) as string,
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
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..fc9dbe3b4 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/detail-info.vue
@@ -4,12 +4,11 @@ import type { CrmClueApi } from '#/api/crm/clue';
 import { Divider } from 'ant-design-vue';
 
 import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema, useDetailSystemSchema } from '../data';
+import { useDetailBaseSchema } from './detail-data';
 
-defineOptions({ name: 'CrmClueDetailsInfo' });
-
-const { clue } = defineProps<{
+defineProps<{
   clue: CrmClueApi.Clue; // 线索信息
 }>();
 
@@ -21,7 +20,6 @@ const [BaseDescription] = useDescription({
     class: 'mx-4',
   },
   schema: useDetailBaseSchema(),
-  data: clue,
 });
 
 const [SystemDescription] = useDescription({
@@ -31,15 +29,14 @@ const [SystemDescription] = useDescription({
     column: 3,
     class: 'mx-4',
   },
-  schema: useDetailSystemSchema(),
-  data: clue,
+  schema: useFollowUpDetailSchema(),
 });
 </script>
 
 <template>
   <div class="p-4">
-    <BaseDescription />
+    <BaseDescription :data="clue" />
     <Divider />
-    <SystemDescription />
+    <SystemDescription :data="clue" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail.vue b/apps/web-antd/src/views/crm/clue/modules/detail.vue
index 7c9d29b2a..b2415bab5 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/detail.vue
@@ -1,21 +1,25 @@
 <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 { AsyncOperateLog } from '#/components/operate-log';
+import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 
-import { useDetailSchema } from '../data';
+import { useDetailSchema } from './detail-data';
 import ClueForm from './form.vue';
 
 const ClueDetailsInfo = defineAsyncComponent(() => import('./detail-info.vue'));
@@ -29,7 +33,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 +64,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 +83,7 @@ function handleBack() {
 
 /** 编辑线索 */
 function handleEdit() {
-  formModalApi.setData({ id: clueId }).open();
+  formModalApi.setData({ id: clueId.value }).open();
 }
 
 /** 转移线索 */
@@ -76,31 +92,38 @@ function handleTransfer() {
 }
 
 /** 转化为客户 */
-async function handleTransform() {
-  try {
-    await Modal.confirm({
-      title: '提示',
+async function handleTransform(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
       content: '确定将该线索转化为客户吗？',
-    });
-    await transformClue(clueId.value);
-    Modal.success({
-      title: '成功',
-      content: '转化客户成功',
-    });
-    await loadClueDetail();
-  } catch {
-    // 用户取消操作
-  }
+    })
+      .then(async () => {
+        const res = await transformClue(clueId.value);
+        if (res) {
+          // 提示并返回成功
+          message.success('转化客户成功');
+          resolve(true);
+        } else {
+          reject(new Error('转化失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
 }
 
 // 加载数据
-onMounted(async () => {
-  await loadClueDetail();
+onMounted(() => {
+  clueId.value = Number(route.params.id);
+  loadClueDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="clue?.name" :loading="loading">
+    <FormModal @success="loadClueDetail" />
+    <TransferModal @success="loadClueDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
         <Button @click="handleBack">
@@ -108,58 +131,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">
+          <AsyncOperateLog :log-list="clueLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
-
-    <FormModal @success="loadClueDetail" />
-    <TransferModal @success="loadClueDetail" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/contact/data.ts b/apps/web-antd/src/views/crm/contact/data.ts
index 956f32333..31dee6a36 100644
--- a/apps/web-antd/src/views/crm/contact/data.ts
+++ b/apps/web-antd/src/views/crm/contact/data.ts
@@ -1,16 +1,10 @@
 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 { getSimpleContactList } from '#/api/crm/contact';
 import { getCustomerSimpleList } from '#/api/crm/customer';
 import { getAreaTree } from '#/api/system/area';
 import { getSimpleUserList } from '#/api/system/user';
-import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions } from '#/utils';
 
 /** 新增/修改的表单 */
@@ -278,108 +272,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
-
-/** 详情页的字段 */
-export function useDetailSchema(): DescriptionItemSchema[] {
-  return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
-}
-
-/** 详情页的基础字段 */
-export function useDetailBaseSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'name',
-      label: '客户名称',
-    },
-    {
-      field: 'source',
-      label: '客户来源',
-      content: (data) =>
-        h(DictTag, {
-          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
-        }),
-    },
-    {
-      field: 'mobile',
-      label: '手机',
-    },
-    {
-      field: 'telephone',
-      label: '电话',
-    },
-    {
-      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: 'areaName',
-      label: '地址',
-    },
-    {
-      field: 'detailAddress',
-      label: '详细地址',
-    },
-    {
-      field: 'contactNextTime',
-      label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
-    },
-    {
-      field: 'remark',
-      label: '备注',
-    },
-  ];
-}
-
-/** 详情页的系统字段 */
-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/contact/index.ts b/apps/web-antd/src/views/crm/contact/index.ts
new file mode 100644
index 000000000..e19127cf3
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/index.ts
@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ContactDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const ContactForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const ContactDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const ContactDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-data.ts b/apps/web-antd/src/views/crm/contact/modules/detail-data.ts
new file mode 100644
index 000000000..e4de3e2ff
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-data.ts
@@ -0,0 +1,165 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
+
+/** 详情页的基础字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '客户名称',
+    },
+    {
+      field: 'post',
+      label: '职务',
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'createTime',
+      label: '下次联系时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '姓名',
+    },
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'telephone',
+      label: '电话',
+    },
+    {
+      field: 'email',
+      label: '邮箱',
+    },
+    {
+      field: 'qq',
+      label: 'QQ',
+    },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
+    {
+      field: 'areaName',
+      label: '地址',
+    },
+    {
+      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: '下次联系时间',
+      content: (data) => formatDateTime(data?.contactNextTime) as string,
+    },
+    {
+      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: 'sex',
+      title: '性别',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      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..9e71bd593 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmContactApi } from '#/api/crm/contact';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from './detail-data';
+
+defineProps<{
+  contact: CrmContactApi.Contact; // 联系人信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>contactInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="contact" />
+    <Divider />
+    <SystemDescription :data="contact" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue b/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue
new file mode 100644
index 000000000..8fc58057f
--- /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 './detail-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..2ad66d514 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 './detail-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..9aeb21eda 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,149 @@
-<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 { 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 { AsyncOperateLog } from '#/components/operate-log';
+import { BusinessDetailsList } from '#/views/crm/business';
+import { ContactDetailsInfo, ContactForm } from '#/views/crm/contact';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
+
+import { useDetailSchema } from './detail-data';
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const contactId = ref(0);
+
+const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact);
+const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ContactForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+/** 加载详情 */
+async function loadContactDetail() {
+  loading.value = true;
+  contactId.value = Number(route.params.id);
+  const data = await getContact(contactId.value);
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CONTACT,
+    bizId: contactId.value,
+  });
+  contactLogList.value = logList.list;
+  contact.value = data;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/contact');
+}
+
+/** 编辑 */
+function handleEdit() {
+  formModalApi.setData({ id: contactId.value }).open();
+}
+
+/** 转移线索 */
+function handleTransfer() {
+  transferModalApi.setData({ id: contactId.value }).open();
+}
+
+// 加载数据
+onMounted(() => {
+  contactId.value = Number(route.params.id);
+  loadContactDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="contact?.name" :loading="loading">
+    <FormModal @success="loadContactDetail" />
+    <TransferModal @success="loadContactDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          type="primary"
+          @click="handleEdit"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateOwnerUser"
+          type="primary"
+          @click="handleTransfer"
+        >
+          转移
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="contact" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ContactDetailsInfo :contact="contact" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+          <FollowUp :biz-id="contactId" :biz-type="BizTypeEnum.CRM_CONTACT" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="contactId"
+            :biz-type="BizTypeEnum.CRM_CONTACT"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="商机" key="4" :force-render="true">
+          <BusinessDetailsList
+            :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">
+          <AsyncOperateLog :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..2c20e7a71 100644
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -1,22 +1,32 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { z } from '#/adapter/form';
 import { getSimpleBusinessList } from '#/api/crm/business';
 import { getSimpleContactList } from '#/api/crm/contact';
 import { getCustomerSimpleList } from '#/api/crm/customer';
-import { floatToFixed2 } from '#/utils';
+import { getSimpleUserList } from '#/api/system/user';
+import { erpPriceMultiply, floatToFixed2 } from '#/utils';
 import { DICT_TYPE } from '#/utils/dict';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
     {
       fieldName: 'no',
       label: '合同编号',
       component: 'Input',
-      rules: 'required',
       componentProps: {
-        placeholder: '请输入合同编号',
+        placeholder: '保存时自动生成',
+        disabled: () => true,
       },
     },
     {
@@ -28,9 +38,22 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入合同名称',
       },
     },
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+      rules: 'required',
+    },
     {
       fieldName: 'customerId',
-      label: '客户',
+      label: '客户名称',
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
@@ -42,9 +65,8 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'businessId',
-      label: '商机',
+      label: '商机名称',
       component: 'ApiSelect',
-      rules: 'required',
       componentProps: {
         api: getSimpleBusinessList,
         labelField: 'name',
@@ -52,49 +74,53 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请选择商机',
       },
     },
-    {
-      fieldName: 'totalPrice',
-      label: '合同金额',
-      component: 'InputNumber',
-      rules: 'required',
-      componentProps: {
-        placeholder: '请输入合同金额',
-        min: 0,
-        precision: 2,
-      },
-    },
     {
       fieldName: 'orderDate',
-      label: '下单时间',
+      label: '下单日期',
       component: 'DatePicker',
       rules: 'required',
       componentProps: {
-        placeholder: '请选择下单时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
       },
     },
     {
       fieldName: 'startTime',
       label: '合同开始时间',
       component: 'DatePicker',
-      rules: 'required',
       componentProps: {
-        placeholder: '请选择合同开始时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
       },
     },
     {
       fieldName: 'endTime',
       label: '合同结束时间',
       component: 'DatePicker',
-      rules: 'required',
       componentProps: {
-        placeholder: '请选择合同结束时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'signUserId',
+      label: '公司签约人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
       },
     },
     {
       fieldName: 'signContactId',
       label: '客户签约人',
       component: 'ApiSelect',
-      rules: 'required',
       componentProps: {
         api: getSimpleContactList,
         labelField: 'name',
@@ -111,6 +137,50 @@ export function useFormSchema(): VbenFormSchema[] {
         rows: 4,
       },
     },
+    {
+      fieldName: 'product',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'totalProductPrice',
+      label: '产品总金额',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '整单折扣（%）',
+      component: 'InputNumber',
+      rules: z.number().min(0).max(100).default(0),
+      componentProps: {
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      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,
+          );
+        },
+      },
+    },
   ];
 }
 
diff --git a/apps/web-antd/src/views/crm/contract/index.ts b/apps/web-antd/src/views/crm/contract/index.ts
new file mode 100644
index 000000000..7306f3e20
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/index.ts
@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ContractDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const ContractForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const ContractDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const ContractDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-data.ts b/apps/web-antd/src/views/crm/contract/modules/detail-data.ts
new file mode 100644
index 000000000..cffb31427
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-data.ts
@@ -0,0 +1,188 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, erpPriceInputFormatter, floatToFixed2 } from '#/utils';
+
+/** 详情头部的配置 */
+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..7968e6dad 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmContractApi } from '#/api/crm/contract';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from './detail-data';
+
+defineProps<{
+  contract: CrmContractApi.Contract; // 合同信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>contractInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="contract" />
+    <Divider />
+    <SystemDescription :data="contract" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
index 3114fe4bc..d6ceee285 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 './detail-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..ad283e4e5 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,169 @@
-<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, 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 { AsyncOperateLog } from '#/components/operate-log';
+import { ContractDetailsInfo, ContractForm } from '#/views/crm/contract';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
+import { ProductDetailsList } from '#/views/crm/product';
+import {
+  ReceivableDetailsList,
+  ReceivablePlanDetailsList,
+} from '#/views/crm/receivable';
+
+import { useDetailSchema } from './detail-data';
+
+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: ContractForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+/** 加载线索详情 */
+async function loadContractDetail() {
+  loading.value = true;
+  const data = await getContract(contractId.value);
+  contract.value = data;
+  // 操作日志
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CLUE,
+    bizId: contractId.value,
+  });
+  contractLogList.value = logList.list;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/contract');
+}
+
+/** 编辑 */
+function handleEdit() {
+  formModalApi.setData({ id: contractId.value }).open();
+}
+
+/** 转移 */
+function handleTransfer() {
+  transferModalApi.setData({ bizType: BizTypeEnum.CRM_CONTRACT }).open();
+}
+
+// 加载数据
+onMounted(() => {
+  contractId.value = Number(route.params.id);
+  loadContractDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="contract?.name" :loading="loading">
+    <FormModal @success="loadContractDetail" />
+    <TransferModal @success="loadContractDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="handleBack">
+          <ArrowLeft class="size-5" />
+          返回
+        </Button>
+        <Button
+          v-if="validateWrite"
+          type="primary"
+          @click="handleEdit"
+          v-access:code="['crm:contract:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
+          转移
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="contract" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ContractDetailsInfo :contract="contract" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="合同跟进" key="2" :force-render="true">
+          <FollowUp :biz-id="contractId" :biz-type="BizTypeEnum.CRM_CONTRACT" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="产品" key="3" :force-render="true">
+          <ProductDetailsList
+            :biz-id="contractId"
+            :biz-type="BizTypeEnum.CRM_CONTRACT"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="回款" key="4" :force-render="true">
+          <ReceivablePlanDetailsList
+            :contract-id="contractId"
+            :customer-id="contract.customerId"
+          />
+          <ReceivableDetailsList
+            :contract-id="contractId"
+            :customer-id="contract.customerId"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="5" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="contractId"
+            :biz-type="BizTypeEnum.CRM_CONTRACT"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="6" :force-render="true">
+          <AsyncOperateLog :log-list="contractLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/form.vue b/apps/web-antd/src/views/crm/contract/modules/form.vue
index 5d2b0b78a..b96f22c02 100644
--- a/apps/web-antd/src/views/crm/contract/modules/form.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/form.vue
@@ -12,7 +12,10 @@ import {
   getContract,
   updateContract,
 } from '#/api/crm/contract';
+import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
+import { erpPriceMultiply } from '#/utils';
+import { ProductEditTable } from '#/views/crm/product';
 
 import { useFormSchema } from '../data';
 
@@ -24,15 +27,37 @@ const getTitle = computed(() => {
     : $t('ui.actionTitle.create', ['合同']);
 });
 
+function handleUpdateProducts(products: any) {
+  formData.value = modalApi.getData<CrmContractApi.Contract>();
+  formData.value!.products = products;
+  if (formData.value) {
+    const totalProductPrice =
+      formData.value.products?.reduce(
+        (prev, curr) => prev + curr.totalPrice,
+        0,
+      ) ?? 0;
+    const discountPercent = formData.value.discountPercent;
+    const discountPrice =
+      discountPercent === null
+        ? 0
+        : erpPriceMultiply(totalProductPrice, discountPercent / 100);
+    const totalPrice = totalProductPrice - (discountPrice ?? 0);
+    formData.value!.totalProductPrice = totalProductPrice;
+    formData.value!.totalPrice = totalPrice;
+    formApi.setValues(formData.value!);
+  }
+}
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
+    labelWidth: 120,
   },
-  // 一共2列
-  wrapperClass: 'grid-cols-2',
-  layout: 'horizontal',
+  // 一共3列
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
@@ -46,6 +71,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as CrmContractApi.Contract;
+    data.products = formData.value?.products;
     try {
       await (formData.value?.id ? updateContract(data) : createContract(data));
       // 关闭并提示
@@ -79,7 +105,17 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[40%]">
-    <Form class="mx-4" />
+  <Modal :title="getTitle" class="w-[50%]">
+    <Form class="mx-4">
+      <template #product="slotProps">
+        <ProductEditTable
+          v-bind="slotProps"
+          class="w-full"
+          :products="formData?.products ?? []"
+          :biz-type="BizTypeEnum.CRM_CONTRACT"
+          @update:products="handleUpdateProducts"
+        />
+      </template>
+    </Form>
   </Modal>
 </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..61731e20b 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -1,14 +1,8 @@
 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 { getAreaTree } from '#/api/system/area';
 import { getSimpleUserList } from '#/api/system/user';
-import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
 /** 新增/修改的表单 */
@@ -240,108 +234,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
-
-/** 详情页的字段 */
-export function useDetailSchema(): DescriptionItemSchema[] {
-  return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
-}
-
-/** 详情页的基础字段 */
-export function useDetailBaseSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'name',
-      label: '客户名称',
-    },
-    {
-      field: 'source',
-      label: '客户来源',
-      content: (data) =>
-        h(DictTag, {
-          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
-        }),
-    },
-    {
-      field: 'mobile',
-      label: '手机',
-    },
-    {
-      field: 'telephone',
-      label: '电话',
-    },
-    {
-      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: 'areaName',
-      label: '地址',
-    },
-    {
-      field: 'detailAddress',
-      label: '详细地址',
-    },
-    {
-      field: 'contactNextTime',
-      label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
-    },
-    {
-      field: 'remark',
-      label: '备注',
-    },
-  ];
-}
-
-/** 详情页的系统字段 */
-export function useDetailSystemSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'ownerUserName',
-      label: '负责人',
-    },
-    {
-      field: 'ownerUserDeptName',
-      label: '所属部门',
-    },
-    {
-      field: 'contactLastTime',
-      label: '最后跟进时间',
-      content: (data) => formatDateTime(data?.contactLastTime) as string,
-    },
-    {
-      field: 'createTime',
-      label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
-    },
-    {
-      field: 'updateTime',
-      label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/customer/index.ts b/apps/web-antd/src/views/crm/customer/index.ts
new file mode 100644
index 000000000..3c2e882ae
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/index.ts
@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from 'vue';
+
+export const CustomerDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const CustomerForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const CustomerDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const DistributeForm = defineAsyncComponent(
+  () => import('./poolConfig/distribute-form.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index 5795fdb0c..1e4f6b3bb 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -21,6 +21,7 @@ import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
 
 const { push } = useRouter();
 const sceneType = ref('1');
@@ -35,6 +36,16 @@ function onRefresh() {
   gridApi.query();
 }
 
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 导入客户 */
+function handleImport() {
+  importModalApi.open();
+}
+
 /** 导出表格 */
 async function handleExport() {
   const data = await exportCustomer(await gridApi.formApi.getValues());
@@ -124,6 +135,7 @@ function onChangeSceneType(key: number | string) {
     </template>
 
     <FormModal @success="onRefresh" />
+    <ImportModal @success="onRefresh" />
     <Grid>
       <template #top>
         <Tabs class="border-none" @change="onChangeSceneType">
@@ -142,6 +154,13 @@ function onChangeSceneType(key: number | string) {
               auth: ['crm:customer:create'],
               onClick: handleCreate,
             },
+            {
+              label: $t('ui.actionTitle.import'),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['crm:customer:import'],
+              onClick: handleImport,
+            },
             {
               label: $t('ui.actionTitle.export'),
               type: 'primary',
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-data.ts b/apps/web-antd/src/views/crm/customer/modules/detail-data.ts
new file mode 100644
index 000000000..75a71b01d
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-data.ts
@@ -0,0 +1,101 @@
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  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,
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '客户名称',
+    },
+    {
+      field: 'source',
+      label: '客户来源',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
+          value: data?.source,
+        }),
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'telephone',
+      label: '电话',
+    },
+    {
+      field: 'email',
+      label: '邮箱',
+    },
+    {
+      field: 'areaName',
+      label: '地址',
+    },
+    {
+      field: 'detailAddress',
+      label: '详细地址',
+    },
+    {
+      field: 'qq',
+      label: 'QQ',
+    },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
+    {
+      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: 'contactNextTime',
+      label: '下次联系时间',
+      content: (data) => formatDateTime(data?.contactNextTime) as string,
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
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..0dded9c8f 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
@@ -1,5 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from './detail-data';
+
+defineProps<{
+  customer: CrmCustomerApi.Customer; // 客户信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
 
 <template>
-  <div>detail-info</div>
+  <div class="p-4">
+    <BaseDescription :data="customer" />
+    <Divider />
+    <SystemDescription :data="customer" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-list.vue b/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
deleted file mode 100644
index 8e6c73393..000000000
--- a/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<script lang="ts" setup></script>
-<template>
-  <div>customerList</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..9a3452ae9 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail.vue
@@ -2,34 +2,47 @@
 import type { CrmCustomerApi } from '#/api/crm/customer';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { 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 { AsyncOperateLog } from '#/components/operate-log';
+import { BusinessDetailsList } from '#/views/crm/business';
+import { ContactDetailsList } from '#/views/crm/contact';
+import { ContractDetailsList } from '#/views/crm/contract';
+import {
+  CustomerDetailsInfo,
+  CustomerForm,
+  DistributeForm,
+} from '#/views/crm/customer';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
+import {
+  ReceivableDetailsList,
+  ReceivablePlanDetailsList,
+} from '#/views/crm/receivable';
 
-import { useDetailSchema } from '../data';
-
-const CustomerDetailsInfo = defineAsyncComponent(
-  () => import('./detail-info.vue'),
-);
+import { useDetailSchema } from './detail-data';
 
 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 +53,113 @@ const [Description] = useDescription({
   schema: useDetailSchema(),
 });
 
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: CustomerForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+const [DistributeModal, distributeModalApi] = useVbenModal({
+  connectedComponent: DistributeForm,
+  destroyOnClose: true,
+});
+
 /** 加载详情 */
 async function loadCustomerDetail() {
   loading.value = true;
   customerId.value = Number(route.params.id);
   const data = await getCustomer(customerId.value);
-  await getOperateLog();
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CUSTOMER,
+    bizId: customerId.value,
+  });
+  customerLogList.value = logList.list;
   customer.value = data;
   loading.value = false;
 }
 
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/customer');
+}
+
 /** 编辑 */
 function handleEdit() {
-  // formModalApi.setData({ id: clueId }).open();
+  formModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 转移线索 */
 function handleTransfer() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 锁定客户 */
 function handleLock() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 解锁客户 */
 function handleUnlock() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 领取客户 */
 function handleReceive() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 分配客户 */
 function handleDistributeForm() {
-  // transferModalApi.setData({ id: clueId }).open();
+  distributeModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 客户放入公海 */
 function handlePutPool() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 更新成交状态操作 */
-async function handleUpdateDealStatus() {
-  const dealStatus = !customer.value.dealStatus;
-  try {
-    await Modal.confirm({
-      title: '提示',
+async function handleUpdateDealStatus(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const dealStatus = !customer.value.dealStatus;
+    confirm({
       content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
-    });
-    await updateCustomerDealStatus(customerId.value, dealStatus);
-    Modal.success({
-      title: '成功',
-      content: '更新成交状态成功',
-    });
-    await loadCustomerDetail();
-  } catch {
-    // 用户取消操作
-  }
-}
-
-/** 获取操作日志 */
-const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志列表
-async function getOperateLog() {
-  if (!customerId.value) {
-    return;
-  }
-  const data = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CUSTOMER,
-    bizId: customerId.value,
+    })
+      .then(async () => {
+        const res = await updateCustomerDealStatus(
+          customerId.value,
+          dealStatus,
+        );
+        if (res) {
+          message.success('更新成交状态成功');
+          resolve(true);
+        } else {
+          reject(new Error('更新成交状态失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
   });
-  logList.value = data.list;
 }
 
 // 加载数据
-onMounted(async () => {
-  await loadCustomerDetail();
+onMounted(() => {
+  customerId.value = Number(route.params.id);
+  loadCustomerDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="customer?.name" :loading="loading">
+    <FormModal @success="loadCustomerDetail" />
+    <TransferModal @success="loadCustomerDetail" />
+    <DistributeModal @success="loadCustomerDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
         <Button
@@ -160,10 +195,18 @@ onMounted(async () => {
         >
           锁定
         </Button>
-        <Button v-if="!customer.ownerUserId" @click="handleReceive">
+        <Button
+          v-if="!customer.ownerUserId"
+          type="primary"
+          @click="handleReceive"
+        >
           领取
         </Button>
-        <Button v-if="!customer.ownerUserId" @click="handleDistributeForm">
+        <Button
+          v-if="!customer.ownerUserId"
+          type="primary"
+          @click="handleDistributeForm"
+        >
           分配
         </Button>
         <Button
@@ -174,34 +217,52 @@ onMounted(async () => {
         </Button>
       </div>
     </template>
-    <Card>
+    <Card class="min-h-[10%]">
       <Description :data="customer" />
     </Card>
-    <Card class="mt-4">
+    <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="跟进记录" key="1">
-          <div>跟进记录</div>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <CustomerDetailsInfo :customer="customer" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="基本信息" key="2">
-          <CustomerDetailsInfo />
+        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+          <FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="联系人" key="3">
-          <div>联系人</div>
+        <Tabs.TabPane tab="联系人" key="3" :force-render="true">
+          <ContactDetailsList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :customer-id="customerId"
+          />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="4">
-          <div>团队成员</div>
+        <Tabs.TabPane tab="团队成员" key="4" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="商机" key="5">
-          <div>商机</div>
+        <Tabs.TabPane tab="商机" key="5" :force-render="true">
+          <BusinessDetailsList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :customer-id="customerId"
+          />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="合同" key="6">
-          <div>合同</div>
+        <Tabs.TabPane tab="合同" key="6" :force-render="true">
+          <ContractDetailsList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+          />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="回款" key="7">
-          <div>回款</div>
+        <Tabs.TabPane tab="回款" key="7" :force-render="true">
+          <ReceivablePlanDetailsList :customer-id="customerId" />
+          <ReceivableDetailsList :customer-id="customerId" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="8">
-          <OperateLog :log-list="logList" />
+        <Tabs.TabPane tab="操作日志" key="8" :force-render="true">
+          <AsyncOperateLog :log-list="customerLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/customer/modules/import-form.vue b/apps/web-antd/src/views/crm/customer/modules/import-form.vue
new file mode 100644
index 000000000..2db456eff
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/modules/import-form.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importCustomer, importCustomerTemplate } from '#/api/crm/customer';
+import { getSimpleUserList } from '#/api/system/user';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'file',
+      label: '用户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的用户数据',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await importCustomer({
+        ownerUserId: data.ownerUserId,
+        file: data.file,
+        updateSupport: data.updateSupport,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importCustomerTemplate();
+  downloadFileFromBlobPart({ fileName: '客户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal title="客户导入" class="w-[30%]">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+          >
+            <Button type="primary"> 选择 Excel 文件 </Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload"> 下载导入模板 </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/clue/modules/transfer.vue b/apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
similarity index 63%
rename from apps/web-antd/src/views/crm/clue/modules/transfer.vue
rename to apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
index d076ec4e6..bc1d51fdb 100644
--- a/apps/web-antd/src/views/crm/clue/modules/transfer.vue
+++ b/apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
@@ -1,18 +1,14 @@
 <script lang="ts" setup>
-import type { CrmPermissionApi } from '#/api/crm/permission';
-
-import { ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import { transferClue } from '#/api/crm/clue';
+import { distributeCustomer } from '#/api/crm/customer';
+import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 const emit = defineEmits(['success']);
-const formData = ref<{ id: number }>();
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -24,12 +20,24 @@ const [Form, formApi] = useVbenForm({
   },
   layout: 'horizontal',
   schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
     {
       fieldName: 'ownerUserId',
       label: '负责人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        api: 'getSimpleUserList',
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
       },
       rules: 'required',
     },
@@ -45,9 +53,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
+    const data = await formApi.getValues();
     try {
-      await transferClue(data);
+      await distributeCustomer([data.id], data.ownerUserId);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -58,21 +66,25 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
       return;
     }
     // 加载数据
-    const data = modalApi.getData<{ id: number }>();
+    const data = modalApi.getData();
     if (!data || !data.id) {
       return;
     }
-    formData.value = data;
+    modalApi.lock();
+    try {
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
   },
 });
 </script>
 
 <template>
-  <Modal :title="$t('ui.actionTitle.transfer')" class="w-[40%]">
+  <Modal title="分配客户" class="w-[40%]">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/crm/followup/data.ts b/apps/web-antd/src/views/crm/followup/data.ts
new file mode 100644
index 000000000..6c7f8b148
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/data.ts
@@ -0,0 +1,36 @@
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { formatDateTime } from '@vben/utils';
+
+/** 详情页的系统字段 */
+export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+    {
+      field: 'contactLastContent',
+      label: '最后跟进记录',
+    },
+    {
+      field: 'contactLastTime',
+      label: '最后跟进时间',
+      content: (data) => formatDateTime(data?.contactLastTime) as string,
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data) => formatDateTime(data?.updateTime) as string,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/followup/index.ts b/apps/web-antd/src/views/crm/followup/index.ts
new file mode 100644
index 000000000..560abe8c7
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/index.ts
@@ -0,0 +1,3 @@
+import { defineAsyncComponent } from 'vue';
+
+export const FollowUp = defineAsyncComponent(() => import('./index.vue'));
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/index.ts b/apps/web-antd/src/views/crm/permission/index.ts
index a175bff47..4d9f097cd 100644
--- a/apps/web-antd/src/views/crm/permission/index.ts
+++ b/apps/web-antd/src/views/crm/permission/index.ts
@@ -1,2 +1,13 @@
-export { default as PermissionList } from './modules/permission-list.vue';
-export { default as TransferForm } from './modules/transfer-form.vue';
+import { defineAsyncComponent } from 'vue';
+
+export const PermissionList = defineAsyncComponent(
+  () => import('./modules/permission-list.vue'),
+);
+
+export const PermissionForm = defineAsyncComponent(
+  () => import('./modules/permission-form.vue'),
+);
+
+export const TransferForm = defineAsyncComponent(
+  () => import('./modules/transfer-form.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/permission/modules/data.ts b/apps/web-antd/src/views/crm/permission/modules/data.ts
new file mode 100644
index 000000000..2ef822aa2
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/modules/data.ts
@@ -0,0 +1,231 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { BizTypeEnum, PermissionLevelEnum } from '#/api/crm/permission';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useTransferFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'newOwnerUserId',
+      label: '选择新负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'oldOwnerHandler',
+      label: '老负责人',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '加入团队',
+            value: true,
+          },
+          {
+            label: '移除',
+            value: false,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'oldOwnerPermissionLevel',
+      label: '老负责人权限级别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.CRM_PERMISSION_LEVEL,
+          'number',
+        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
+      },
+      dependencies: {
+        triggerFields: ['oldOwnerHandler'],
+        show: (values) => values.oldOwnerHandler,
+        trigger(values) {
+          if (!values.oldOwnerHandler) {
+            values.oldOwnerPermissionLevel = undefined;
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'toBizTypes',
+      label: '同时转移',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+    },
+  ];
+}
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'bizId',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'ids',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'userId',
+      label: '选择人员',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['ids'],
+        show: (values) => {
+          return values.ids === undefined;
+        },
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '权限级别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.CRM_PERMISSION_LEVEL,
+          'number',
+        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'bizType',
+      label: 'Crm 类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'toBizTypes',
+      label: '同时添加至',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+      dependencies: {
+        triggerFields: ['ids', 'bizType'],
+        show: (values) => {
+          return (
+            values.ids === undefined &&
+            values.bizType === BizTypeEnum.CRM_CUSTOMER
+          );
+        },
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+    },
+    {
+      field: 'nickname',
+      title: '姓名',
+    },
+    {
+      field: 'deptName',
+      title: '部门',
+    },
+    {
+      field: 'postNames',
+      title: '岗位',
+    },
+    {
+      field: 'level',
+      title: '权限级别',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PERMISSION_LEVEL },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '加入时间',
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-form.vue b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
index e6e8fa462..c2c5df01a 100644
--- a/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
@@ -8,15 +8,10 @@ import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import {
-  BizTypeEnum,
-  createPermission,
-  PermissionLevelEnum,
-  updatePermission,
-} from '#/api/crm/permission';
-import { getSimpleUserList } from '#/api/system/user';
+import { createPermission, updatePermission } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { DICT_TYPE, getDictOptions } from '#/utils';
+
+import { useFormSchema } from './data';
 
 const emit = defineEmits(['success']);
 const formData = ref<CrmPermissionApi.Permission>();
@@ -35,74 +30,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 80,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'ids',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'userId',
-      label: '选择人员',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleUserList,
-        labelField: 'nickname',
-        valueField: 'id',
-      },
-      dependencies: {
-        triggerFields: ['ids'],
-        show: (values) => {
-          return values.ids === undefined;
-        },
-      },
-    },
-    {
-      fieldName: 'level',
-      label: '权限级别',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(
-          DICT_TYPE.CRM_PERMISSION_LEVEL,
-          'number',
-        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'toBizTypes',
-      label: '同时添加至',
-      component: 'CheckboxGroup',
-      componentProps: {
-        options: [
-          {
-            label: '联系人',
-            value: BizTypeEnum.CRM_CONTACT,
-          },
-          {
-            label: '商机',
-            value: BizTypeEnum.CRM_BUSINESS,
-          },
-          {
-            label: '合同',
-            value: BizTypeEnum.CRM_CONTRACT,
-          },
-        ],
-      },
-      dependencies: {
-        triggerFields: ['ids', 'bizType'],
-        show: (values) => {
-          return (
-            values.ids === undefined &&
-            formData.value?.bizType === BizTypeEnum.CRM_CUSTOMER
-          );
-        },
-      },
-    },
-  ],
+  schema: useFormSchema(),
   showDefaultActions: false,
 });
 
@@ -114,8 +42,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    let data = (await formApi.getValues()) as CrmPermissionApi.Permission;
-    data = Object.assign(data, formData.value);
+    const data = (await formApi.getValues()) as CrmPermissionApi.Permission;
     try {
       await (formData.value?.ids
         ? updatePermission(data)
@@ -141,7 +68,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = {
-        ids: data.ids || [data.id] || undefined,
+        ids: data.ids ?? (data.id ? [data.id] : undefined),
         userId: undefined,
         bizType: data.bizType,
         bizId: data.bizId,
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
index 65b202261..68181af94 100644
--- a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
@@ -17,12 +17,10 @@ import {
   PermissionLevelEnum,
 } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { DICT_TYPE } from '#/utils';
 
+import { useGridColumns } from './data';
 import Form from './permission-form.vue';
 
-defineOptions({ name: 'CrmPermissionList' });
-
 const props = defineProps<{
   bizId: number; // 模块数据编号
   bizType: number; // 模块类型
@@ -50,13 +48,18 @@ function onRefresh() {
   gridApi.query();
 }
 
-const checkedIds = ref<CrmPermissionApi.Permission[]>([]);
-function setCheckedIds({
+const checkedRows = ref<CrmPermissionApi.Permission[]>([]);
+function setCheckedRows({
   records,
 }: {
   records: CrmPermissionApi.Permission[];
 }) {
-  checkedIds.value = records;
+  if (records.some((item) => item.level === PermissionLevelEnum.OWNER)) {
+    message.warning('不能选择负责人！');
+    gridApi.grid.setAllCheckboxRow(false);
+    return;
+  }
+  checkedRows.value = records;
 }
 
 function handleCreate() {
@@ -69,11 +72,11 @@ function handleCreate() {
 }
 
 function handleEdit() {
-  if (checkedIds.value.length === 0) {
+  if (checkedRows.value.length === 0) {
     message.error('请先选择团队成员后操作！');
     return;
   }
-  if (checkedIds.value.length > 1) {
+  if (checkedRows.value.length > 1) {
     message.error('只能选择一个团队成员进行编辑！');
     return;
   }
@@ -81,29 +84,29 @@ function handleEdit() {
     .setData({
       bizType: props.bizType,
       bizId: props.bizId,
-      id: checkedIds.value[0]?.id,
-      level: checkedIds.value[0]?.level,
+      id: checkedRows.value[0]?.id,
+      level: checkedRows.value[0]?.level,
     })
     .open();
 }
 
 function handleDelete() {
-  if (checkedIds.value.length === 0) {
+  if (checkedRows.value.length === 0) {
     message.error('请先选择团队成员后操作！');
     return;
   }
   return new Promise((resolve, reject) => {
     confirm({
-      content: `你要将${checkedIds.value.map((item) => item.nickname).join(',')}移出团队吗？`,
+      content: `你要将${checkedRows.value.map((item) => item.nickname).join(',')}移出团队吗？`,
     })
       .then(async () => {
-        // 更新用户状态
         const res = await deletePermissionBatch(
-          checkedIds.value.map((item) => item.id as number),
+          checkedRows.value.map((item) => item.id as number),
         );
         if (res) {
           // 提示并返回成功
           message.success($t('ui.actionMessage.operationSuccess'));
+          onRefresh();
           resolve(true);
         } else {
           reject(new Error('移出失败'));
@@ -144,37 +147,7 @@ async function handleQuit() {
 
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: [
-      {
-        type: 'checkbox',
-        width: 50,
-      },
-      {
-        field: 'nickname',
-        title: '姓名',
-      },
-      {
-        field: 'deptName',
-        title: '部门',
-      },
-      {
-        field: 'postNames',
-        title: '岗位',
-      },
-      {
-        field: 'level',
-        title: '权限级别',
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.CRM_PERMISSION_LEVEL },
-        },
-      },
-      {
-        field: 'createTime',
-        title: '加入时间',
-        formatter: 'formatDateTime',
-      },
-    ],
+    columns: useGridColumns(),
     height: 'auto',
     pagerConfig: {
       enabled: false,
@@ -201,8 +174,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmPermissionApi.Permission>,
   gridEvents: {
-    checkboxAll: setCheckedIds,
-    checkboxChange: setCheckedIds,
+    checkboxAll: setCheckedRows,
+    checkboxChange: setCheckedRows,
   },
 });
 
diff --git a/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
index f849cdfc9..9249fc62d 100644
--- a/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
@@ -13,12 +13,10 @@ import { transferClue } from '#/api/crm/clue';
 import { transferContact } from '#/api/crm/contact';
 import { transferContract } from '#/api/crm/contract';
 import { transferCustomer } from '#/api/crm/customer';
-import { BizTypeEnum, PermissionLevelEnum } from '#/api/crm/permission';
-import { getSimpleUserList } from '#/api/system/user';
+import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { DICT_TYPE, getDictOptions } from '#/utils';
 
-defineOptions({ name: 'CrmTransferForm' });
+import { useTransferFormSchema } from './data';
 
 const emit = defineEmits(['success']);
 
@@ -56,87 +54,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'ownerUserId',
-      label: '选择新负责人',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleUserList,
-        labelField: 'nickname',
-        valueField: 'id',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'oldOwnerHandler',
-      label: '老负责人',
-      component: 'RadioGroup',
-      componentProps: {
-        options: [
-          {
-            label: '加入团队',
-            value: true,
-          },
-          {
-            label: '移除',
-            value: false,
-          },
-        ],
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'oldOwnerPermissionLevel',
-      label: '老负责人权限级别',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(
-          DICT_TYPE.CRM_PERMISSION_LEVEL,
-          'number',
-        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
-      },
-      dependencies: {
-        triggerFields: ['oldOwnerHandler'],
-        show: (values) => values.oldOwnerHandler,
-        trigger(values) {
-          if (!values.oldOwnerHandler) {
-            formApi.setFieldValue('oldOwnerPermissionLevel', undefined);
-          }
-        },
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'toBizTypes',
-      label: '同时转移',
-      component: 'CheckboxGroup',
-      componentProps: {
-        options: [
-          {
-            label: '联系人',
-            value: BizTypeEnum.CRM_CONTACT,
-          },
-          {
-            label: '商机',
-            value: BizTypeEnum.CRM_BUSINESS,
-          },
-          {
-            label: '合同',
-            value: BizTypeEnum.CRM_CONTRACT,
-          },
-        ],
-      },
-    },
-  ],
+  schema: useTransferFormSchema(),
   showDefaultActions: false,
 });
 
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
index 348afb372..fa56e96b6 100644
--- a/apps/web-antd/src/views/crm/product/data.ts
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -174,3 +174,60 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 代码生成表格列定义 */
+export function useProductEditTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50 },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 100,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'productNo',
+      title: '条码',
+      minWidth: 150,
+    },
+    {
+      field: 'productUnit',
+      title: '单位',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'productPrice',
+      title: '价格（元）',
+      minWidth: 100,
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'sellingPrice',
+      title: '售价（元）',
+      minWidth: 100,
+      slots: { default: 'sellingPrice' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 100,
+      slots: { default: 'count' },
+    },
+    {
+      field: 'totalPrice',
+      title: '合计',
+      minWidth: 100,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/index.ts b/apps/web-antd/src/views/crm/product/index.ts
new file mode 100644
index 000000000..a9038b467
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/index.ts
@@ -0,0 +1,21 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ProductDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const ProductForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const ProductDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const ProductDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
+
+export const ProductEditTable = defineAsyncComponent(
+  () => import('./modules/product-table.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-data.ts b/apps/web-antd/src/views/crm/product/modules/detail-data.ts
new file mode 100644
index 000000000..a8c0a10e1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/detail-data.ts
@@ -0,0 +1,116 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, erpPriceInputFormatter } from '#/utils';
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'categoryName',
+      label: '产品类别',
+    },
+    {
+      field: 'unit',
+      label: '产品单位',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
+    },
+    {
+      field: 'price',
+      label: '产品价格',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'no',
+      label: '产品编码',
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '产品名称',
+    },
+    {
+      field: 'no',
+      label: '产品编码',
+    },
+    {
+      field: 'price',
+      label: '价格（元）',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'description',
+      label: '产品描述',
+    },
+    {
+      field: 'categoryName',
+      label: '产品类型',
+    },
+    {
+      field: 'status',
+      label: '是否上下架',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_STATUS, value: data?.status }),
+    },
+    {
+      field: 'unit',
+      label: '产品单位',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export function useDetailListColumns(
+  showBussinePrice: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productName',
+      title: '产品名称',
+    },
+    {
+      field: 'productNo',
+      title: '产品条码',
+    },
+    {
+      field: 'productUnit',
+      title: '产品单位',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'productPrice',
+      title: '产品价格（元）',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'businessPrice',
+      title: '商机价格（元）',
+      formatter: 'formatNumber',
+      visible: showBussinePrice,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'totalPrice',
+      title: '合计金额（元）',
+      formatter: 'formatNumber',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-info.vue b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
index c6bcbfbcd..a7868f05d 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
@@ -1,4 +1,27 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailBaseSchema } from './detail-data';
+
+defineProps<{
+  product: CrmProductApi.Product; // 产品信息
+}>();
+
+const [ProductDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+</script>
+
 <template>
-  <div>productInfo</div>
+  <div class="p-4">
+    <ProductDescription :data="product" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-list.vue b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
index 4a0fbfd34..9dfb52ed6 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
@@ -1,4 +1,72 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { ref } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBusiness } from '#/api/crm/business';
+import { getContract } from '#/api/crm/contract';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { erpPriceInputFormatter } from '#/utils';
+
+import { useDetailListColumns } from './detail-data';
+
+const props = defineProps<{
+  bizId: number;
+  bizType: BizTypeEnum;
+}>();
+
+const discountPercent = ref(0);
+const totalProductPrice = ref(0);
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(props.bizType === BizTypeEnum.CRM_BUSINESS),
+    height: 600,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          const data =
+            props.bizType === BizTypeEnum.CRM_BUSINESS
+              ? await getBusiness(props.bizId)
+              : await getContract(props.bizId);
+          discountPercent.value = data.discountPercent;
+          totalProductPrice.value = data.totalProductPrice;
+          return data.products;
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+  } as VxeTableGridOptions<CrmProductApi.Product>,
+});
+</script>
+
 <template>
-  <div>productList</div>
+  <div>
+    <Grid />
+    <div class="flex flex-col items-end justify-end">
+      <span class="ml-4 font-bold text-red-500">
+        {{ `产品总金额：${erpPriceInputFormatter(totalProductPrice)}元` }}
+      </span>
+      <span class="font-bold text-red-500">
+        {{ `整单折扣：${erpPriceInputFormatter(discountPercent)}%` }}
+      </span>
+      <span class="font-bold text-red-500">
+        {{
+          `实际金额：${erpPriceInputFormatter(totalProductPrice * (1 - discountPercent / 100))}元`
+        }}
+      </span>
+    </div>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail.vue b/apps/web-antd/src/views/crm/product/modules/detail.vue
index 99ad6b6f9..1255e4671 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/product/modules/detail.vue
@@ -1,7 +1,89 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmProductApi } from '#/api/crm/product';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getProduct } from '#/api/crm/product';
+import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { ProductDetailsInfo } from '#/views/crm/product';
+
+import { useDetailSchema } from './detail-data';
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const productId = ref(0);
+
+const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product);
+const productLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+/** 加载详情 */
+async function loadProductDetail() {
+  loading.value = true;
+  const data = await getProduct(productId.value);
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_PRODUCT,
+    bizId: productId.value,
+  });
+  productLogList.value = logList.list;
+  product.value = data;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/product');
+}
+
+// 加载数据
+onMounted(() => {
+  productId.value = Number(route.params.id);
+  loadProductDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="product?.name" :loading="loading">
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="handleBack"> 返回 </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="product" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ProductDetailsInfo :product="product" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="2" :force-render="true">
+          <AsyncOperateLog :log-list="productLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/modules/product-table.vue b/apps/web-antd/src/views/crm/product/modules/product-table.vue
new file mode 100644
index 000000000..6ef206355
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/product-table.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import type { CrmBusinessApi } from '#/api/crm/business';
+import type { CrmContractApi } from '#/api/crm/contract';
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { InputNumber, Select } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getProductSimpleList } from '#/api/crm/product';
+import { erpPriceMultiply } from '#/utils';
+
+import { useProductEditTableColumns } from '../data';
+
+const props = defineProps<{
+  bizType: BizTypeEnum;
+  products?:
+    | CrmBusinessApi.BusinessProduct[]
+    | CrmContractApi.ContractProduct[];
+}>();
+
+const emit = defineEmits(['update:products']);
+
+const tableData = ref<any[]>([]);
+
+function handleAdd() {
+  gridApi.grid.insertAt(null, -1);
+}
+
+function handleDelete(row: CrmProductApi.Product) {
+  gridApi.grid.remove(row);
+}
+
+function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+  row.productUnit = product.unit;
+  row.productNo = product.no;
+  row.productPrice = product.price;
+  row.sellingPrice = product.price;
+  row.count = 0;
+  row.totalPrice = 0;
+  handleUpdateValue(row);
+}
+
+function handlePriceChange(row: any) {
+  row.totalPrice = erpPriceMultiply(row.sellingPrice, row.count) ?? 0;
+  handleUpdateValue(row);
+}
+
+function handleUpdateValue(row: any) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
+    row.businessPrice = row.sellingPrice;
+  } else if (props.bizType === BizTypeEnum.CRM_CONTRACT) {
+    row.contractPrice = row.sellingPrice;
+  }
+  if (index === -1) {
+    row.id = tableData.value.length + 1;
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:products', tableData.value);
+}
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    editConfig: {
+      trigger: 'click',
+      mode: 'cell',
+    },
+    columns: useProductEditTableColumns(),
+    data: tableData.value,
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.products,
+  async (products) => {
+    if (!products) {
+      return;
+    }
+    await nextTick();
+    tableData.value = products;
+    if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
+      tableData.value.forEach((item) => {
+        item.sellingPrice = item.businessPrice;
+      });
+    } else if (props.bizType === BizTypeEnum.CRM_CONTRACT) {
+      tableData.value.forEach((item) => {
+        item.sellingPrice = item.contractPrice;
+      });
+    }
+    gridApi.grid?.loadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 初始化 */
+const productOptions = ref<CrmProductApi.Product[]>([]);
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #productId="{ row }">
+      <Select
+        v-model:value="row.productId"
+        :options="productOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+        style="width: 100%"
+        @change="handleProductChange($event, row)"
+      />
+    </template>
+    <template #sellingPrice="{ row }">
+      <InputNumber
+        v-model:value="row.sellingPrice"
+        :min="0.001"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+    </template>
+    <template #count="{ row }">
+      <InputNumber
+        v-model:value="row.count"
+        :min="0.001"
+        :precision="3"
+        @change="handlePriceChange(row)"
+      />
+    </template>
+    <template #bottom>
+      <TableAction
+        class="mt-4 flex justify-center"
+        :actions="[
+          {
+            label: '添加产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.delete'),
+            type: 'link',
+            danger: true,
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/index.ts b/apps/web-antd/src/views/crm/receivable/index.ts
new file mode 100644
index 000000000..bd8a2aed4
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/index.ts
@@ -0,0 +1,29 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ReceivableDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const ReceivableForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const ReceivableDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const ReceivableDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
+
+export const ReceivablePlanDetailsInfo = defineAsyncComponent(
+  () => import('./plan/modules/detail-info.vue'),
+);
+
+export const ReceivablePlanDetailsList = defineAsyncComponent(
+  () => import('./plan/modules/detail-list.vue'),
+);
+
+export const ReceivablePlanDetails = defineAsyncComponent(
+  () => import('./plan/modules/detail.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-data.ts b/apps/web-antd/src/views/crm/receivable/modules/detail-data.ts
new file mode 100644
index 000000000..744a74e0b
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-data.ts
@@ -0,0 +1,150 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, erpPriceInputFormatter } from '#/utils';
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'totalPrice',
+      label: '合同金额',
+      content: (data) => erpPriceInputFormatter(data.totalPrice),
+    },
+    {
+      field: 'returnTime',
+      label: '回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '回款编号',
+    },
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'contract',
+      label: '合同编号',
+      content: (data) => data?.contract?.no,
+    },
+    {
+      field: 'returnTime',
+      label: '回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'returnType',
+      label: '回款方式',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
+          value: data?.returnType,
+        }),
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '回款编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+    },
+    {
+      title: '合同编号',
+      field: 'contract.no',
+      minWidth: 150,
+    },
+    {
+      title: '回款日期',
+      field: 'returnTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款金额（元）',
+      field: 'price',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      minWidth: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '回款状态',
+      field: 'auditStatus',
+      minWidth: 100,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
index bac747f62..884a1ce49 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from './detail-data';
+
+defineProps<{
+  receivable: CrmReceivableApi.Receivable; // 收款信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>receivableInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="receivable" />
+    <Divider />
+    <SystemDescription :data="receivable" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
index d9444469c..a892185cb 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
@@ -1,4 +1,140 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteReceivable,
+  getReceivablePageByCustomer,
+} from '#/api/crm/receivable';
+import { $t } from '#/locales';
+
+import { useDetailListColumns } from './detail-data';
+import Form from './form.vue';
+
+const props = defineProps<{
+  contractId?: number; // 合同编号
+  customerId?: number; // 客户编号
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建回款 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑回款 */
+function handleEdit(row: CrmReceivableApi.Receivable) {
+  formModalApi.setData({ receivable: row }).open();
+}
+
+/** 删除回款 */
+async function handleDelete(row: CrmReceivableApi.Receivable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.no]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteReceivable(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 500,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const queryParams: CrmReceivableApi.ReceivablePageParam = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+          };
+          if (props.customerId && !props.contractId) {
+            queryParams.customerId = props.customerId;
+          } else if (props.customerId && props.contractId) {
+            // 如果是合同的话客户编号也需要带上因为权限基于客户
+            queryParams.customerId = props.customerId;
+            queryParams.contractId = props.contractId;
+          }
+          return await getReceivablePageByCustomer(queryParams);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
+});
+</script>
+
 <template>
-  <div>receivableList</div>
+  <div>
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:receivable:update'],
+              onClick: handleEdit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:receivable:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail.vue b/apps/web-antd/src/views/crm/receivable/modules/detail.vue
index 99ad6b6f9..8fddd38b5 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail.vue
@@ -1,7 +1,130 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { ArrowLeft } from '@vben/icons';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getReceivable } from '#/api/crm/receivable';
+import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { PermissionList } from '#/views/crm/permission';
+import { ReceivableDetailsInfo } from '#/views/crm/receivable';
+
+import { useDetailSchema } from './detail-data';
+import ReceivableForm from './form.vue';
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const receivableId = ref(0);
+
+const receivable = ref<CrmReceivableApi.Receivable>(
+  {} as CrmReceivableApi.Receivable,
+);
+const receivableLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+// 校验编辑权限
+const validateWrite = computed(() => permissionListRef.value?.validateWrite);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ReceivableForm,
+  destroyOnClose: true,
+});
+
+/** 加载线索详情 */
+async function loadReceivableDetail() {
+  loading.value = true;
+  const data = await getReceivable(receivableId.value);
+  receivable.value = data;
+  // 操作日志
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_RECEIVABLE,
+    bizId: receivableId.value,
+  });
+  receivableLogList.value = logList.list;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/receivable');
+}
+
+/** 编辑收款 */
+function handleEdit() {
+  formModalApi.setData({ id: receivableId.value }).open();
+}
+
+// 加载数据
+onMounted(() => {
+  receivableId.value = Number(route.params.id);
+  loadReceivableDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="receivable?.no" :loading="loading">
+    <FormModal @success="loadReceivableDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="handleBack">
+          <ArrowLeft class="size-5" />
+          返回
+        </Button>
+        <Button
+          v-if="validateWrite"
+          type="primary"
+          @click="handleEdit"
+          v-access:code="['crm:receivable:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="receivable" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ReceivableDetailsInfo :receivable="receivable" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="2" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="receivableId"
+            :biz-type="BizTypeEnum.CRM_RECEIVABLE"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
+          <AsyncOperateLog :log-list="receivableLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/form.vue b/apps/web-antd/src/views/crm/receivable/modules/form.vue
index e92610c25..287804065 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/form.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/form.vue
@@ -64,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<CrmReceivableApi.Receivable>();
+    const data = modalApi.getData();
     if (!data) {
       return;
     }
diff --git a/apps/web-antd/src/views/crm/receivable/plan/index.vue b/apps/web-antd/src/views/crm/receivable/plan/index.vue
index 1f4c479cb..137af3946 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -53,12 +53,12 @@ function handleCreate() {
 }
 
 /** 编辑回款计划 */
-function handleEdit(row: CrmReceivablePlanApi.ReceivablePlan) {
+function handleEdit(row: CrmReceivablePlanApi.Plan) {
   formModalApi.setData(row).open();
 }
 
 /** 删除回款计划 */
-async function handleDelete(row: CrmReceivablePlanApi.ReceivablePlan) {
+async function handleDelete(row: CrmReceivablePlanApi.Plan) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.period]),
     key: 'action_key_msg',
@@ -76,17 +76,17 @@ async function handleDelete(row: CrmReceivablePlanApi.ReceivablePlan) {
 }
 
 /** 创建回款 */
-function handleCreateReceivable(row: CrmReceivablePlanApi.ReceivablePlan) {
+function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
   receivableFormModalApi.setData({ plan: row }).open();
 }
 
 /** 查看回款计划详情 */
-function handleDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
+function handleDetail(row: CrmReceivablePlanApi.Plan) {
   push({ name: 'CrmReceivablePlanDetail', params: { id: row.id } });
 }
 
 /** 查看客户详情 */
-function handleCustomerDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
+function handleCustomerDetail(row: CrmReceivablePlanApi.Plan) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  } as VxeTableGridOptions<CrmReceivablePlanApi.ReceivablePlan>,
+  } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
 });
 
 function onChangeSceneType(key: number | string) {
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-data.ts b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-data.ts
new file mode 100644
index 000000000..8947dcef0
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-data.ts
@@ -0,0 +1,141 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, erpPriceInputFormatter } from '#/utils';
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'totalPrice',
+      label: '合同金额',
+      content: (data) => erpPriceInputFormatter(data.totalPrice),
+    },
+    {
+      field: 'returnTime',
+      label: '回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '回款编号',
+    },
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'contract',
+      label: '合同编号',
+      content: (data) => data?.contract?.no,
+    },
+    {
+      field: 'returnTime',
+      label: '回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'returnType',
+      label: '回款方式',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
+          value: data?.returnType,
+        }),
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+    },
+    {
+      title: '合同编号',
+      field: 'contractNo',
+      minWidth: 150,
+    },
+    {
+      title: '期数',
+      field: 'period',
+      minWidth: 150,
+    },
+    {
+      title: '计划回款(元)',
+      field: 'price',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '计划回款日期',
+      field: 'returnTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '提前几天提醒',
+      field: 'remindDays',
+      minWidth: 150,
+    },
+    {
+      title: '提醒日期',
+      field: 'remindTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
index d94b1e3b9..530b4e1a6 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
@@ -1,4 +1,42 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from './detail-data';
+
+defineProps<{
+  receivablePlan: CrmReceivablePlanApi.Plan; // 收款计划信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
 <template>
-  <div>receivablePlanInfo</div>
+  <div class="p-4">
+    <BaseDescription :data="receivablePlan" />
+    <Divider />
+    <SystemDescription :data="receivablePlan" />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
index bec4aa4b6..8929bb491 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
@@ -1,4 +1,161 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteReceivablePlan,
+  getReceivablePlanPageByCustomer,
+} from '#/api/crm/receivable/plan';
+import { $t } from '#/locales';
+
+import ReceivableForm from '../../modules/form.vue';
+import { useDetailListColumns } from './detail-data';
+import Form from './form.vue';
+
+const props = defineProps<{
+  contractId?: number; // 合同编号
+  customerId?: number; // 客户编号
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ReceivableFormModal, receivableFormModalApi] = useVbenModal({
+  connectedComponent: ReceivableForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建回款计划 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 创建回款 */
+function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
+  receivableFormModalApi.setData({ plan: row }).open();
+}
+
+/** 编辑回款计划 */
+function handleEdit(row: CrmReceivableApi.Receivable) {
+  formModalApi.setData({ receivable: row }).open();
+}
+
+/** 删除回款计划 */
+async function handleDelete(row: CrmReceivablePlanApi.Plan) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.period]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteReceivablePlan(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(),
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const queryParams: CrmReceivablePlanApi.PlanPageParam = {
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          };
+          if (props.customerId && !props.contractId) {
+            queryParams.customerId = props.customerId;
+          } else if (props.customerId && props.contractId) {
+            // 如果是合同的话客户编号也需要带上因为权限基于客户
+            queryParams.customerId = props.customerId;
+            queryParams.contractId = props.contractId;
+          }
+          return await getReceivablePlanPageByCustomer(queryParams);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
+});
+</script>
+
 <template>
-  <div>receivablePlanList</div>
+  <div>
+    <FormModal @success="onRefresh" />
+    <ReceivableFormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款计划']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable-plan:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款']),
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable-plan:create'],
+              disabled: !!row.receivableId,
+              onClick: handleCreateReceivable.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:receivable-plan:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:receivable-plan:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.period]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
index 99ad6b6f9..573f97cb4 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
@@ -1,7 +1,134 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { ArrowLeft } from '@vben/icons';
+
+import { Button, Card, Tabs } from 'ant-design-vue';
+
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { getReceivablePlan } from '#/api/crm/receivable/plan';
+import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { PermissionList } from '#/views/crm/permission';
+import { ReceivablePlanDetailsInfo } from '#/views/crm/receivable';
+
+import { useDetailSchema } from './detail-data';
+import ReceivablePlanForm from './form.vue';
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const receivablePlanId = ref(0);
+
+const receivablePlan = ref<CrmReceivablePlanApi.Plan>(
+  {} as CrmReceivablePlanApi.Plan,
+);
+const receivablePlanLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+// 校验编辑权限
+const validateWrite = computed(() => permissionListRef.value?.validateWrite);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ReceivablePlanForm,
+  destroyOnClose: true,
+});
+
+/** 加载线索详情 */
+async function loadreceivablePlanDetail() {
+  loading.value = true;
+  const data = await getReceivablePlan(receivablePlanId.value);
+  receivablePlan.value = data;
+  // 操作日志
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_RECEIVABLE_PLAN,
+    bizId: receivablePlanId.value,
+  });
+  receivablePlanLogList.value = logList.list;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/receivablePlan');
+}
+
+/** 编辑收款 */
+function handleEdit() {
+  formModalApi.setData({ id: receivablePlanId.value }).open();
+}
+
+// 加载数据
+onMounted(() => {
+  receivablePlanId.value = Number(route.params.id);
+  loadreceivablePlanDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page
+    auto-content-height
+    :title="`第${receivablePlan?.period}期`"
+    :loading="loading"
+  >
+    <FormModal @success="loadreceivablePlanDetail" />
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="handleBack">
+          <ArrowLeft class="size-5" />
+          返回
+        </Button>
+        <Button
+          v-if="validateWrite"
+          type="primary"
+          @click="handleEdit"
+          v-access:code="['crm:receivable-plan:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+      </div>
+    </template>
+    <Card class="min-h-[10%]">
+      <Description :data="receivablePlan" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+          <ReceivablePlanDetailsInfo :receivable-plan="receivablePlan" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="2" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="receivablePlanId"
+            :biz-type="BizTypeEnum.CRM_RECEIVABLE_PLAN"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
+          <AsyncOperateLog :log-list="receivablePlanLogList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
index 41a2132c1..34cdfc634 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
@@ -17,7 +17,7 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<CrmReceivablePlanApi.ReceivablePlan>();
+const formData = ref<CrmReceivablePlanApi.Plan>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['回款计划'])
@@ -45,8 +45,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
-      (await formApi.getValues()) as CrmReceivablePlanApi.ReceivablePlan;
+    const data = (await formApi.getValues()) as CrmReceivablePlanApi.Plan;
     try {
       await (formData.value?.id
         ? updateReceivablePlan(data)
@@ -65,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<CrmReceivablePlanApi.ReceivablePlan>();
+    const data = modalApi.getData<CrmReceivablePlanApi.Plan>();
     if (!data || !data.id) {
       return;
     }
diff --git a/apps/web-antd/src/views/infra/codegen/index.vue b/apps/web-antd/src/views/infra/codegen/index.vue
index fd41a9d92..88bb7b438 100644
--- a/apps/web-antd/src/views/infra/codegen/index.vue
+++ b/apps/web-antd/src/views/infra/codegen/index.vue
@@ -237,7 +237,7 @@ initDataSourceConfig();
               danger: true,
               auth: ['infra:codegen:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.tableName]),
                 confirm: handleDelete.bind(null, row),
               },
             },
diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index 6b7b5cc57..4d28b5217 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -131,28 +131,38 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 /** 详情列表的字段 */
 export const detailColumns = [
   {
-    label: '日志编号',
-    prop: 'id',
+    title: '日志编号',
+    dataIndex: 'id',
     key: 'id',
+    width: 120,
+    ellipsis: false,
   },
   {
-    label: '通知状态',
-    prop: 'status',
+    title: '通知状态',
+    dataIndex: 'status',
     key: 'status',
+    width: 120,
+    ellipsis: false,
   },
   {
-    label: '通知次数',
-    prop: 'notifyTimes',
+    title: '通知次数',
+    dataIndex: 'notifyTimes',
     key: 'notifyTimes',
+    width: 120,
+    ellipsis: false,
   },
   {
-    label: '通知时间',
-    prop: 'lastExecuteTime',
+    title: '通知时间',
+    dataIndex: 'lastExecuteTime',
     key: 'lastExecuteTime',
+    width: 120,
+    ellipsis: false,
   },
   {
-    label: '响应结果',
-    prop: 'response',
+    title: '响应结果',
+    dataIndex: 'response',
     key: 'response',
+    width: 120,
+    ellipsis: false,
   },
 ];
diff --git a/apps/web-antd/src/views/pay/notify/modules/detail.vue b/apps/web-antd/src/views/pay/notify/modules/detail.vue
index 66f6efb6a..85f1a2859 100644
--- a/apps/web-antd/src/views/pay/notify/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/notify/modules/detail.vue
@@ -93,7 +93,11 @@ const [Modal, modalApi] = useVbenModal({
 
     <Descriptions bordered :column="1" size="middle" class="mx-4">
       <Descriptions.Item label="回调日志">
-        <Table :data="formData.logs" :columns="detailColumns" />
+        <Table
+          v-if="formData"
+          :data-source="formData.logs"
+          :columns="detailColumns"
+        />
       </Descriptions.Item>
     </Descriptions>
   </Modal>
diff --git a/apps/web-antd/src/views/system/dept/index.vue b/apps/web-antd/src/views/system/dept/index.vue
index db28fffce..f62e6db7a 100644
--- a/apps/web-antd/src/views/system/dept/index.vue
+++ b/apps/web-antd/src/views/system/dept/index.vue
@@ -119,7 +119,7 @@ onMounted(async () => {
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['菜单']),
+              label: $t('ui.actionTitle.create', ['部门']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['system:dept:create'],
@@ -140,14 +140,14 @@ onMounted(async () => {
               label: '新增下级',
               type: 'link',
               icon: ACTION_ICON.ADD,
-              auth: ['system:menu:create'],
+              auth: ['system:dept:create'],
               onClick: handleAppend.bind(null, row),
             },
             {
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
-              auth: ['system:menu:update'],
+              auth: ['system:dept:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -155,7 +155,7 @@ onMounted(async () => {
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
-              auth: ['system:menu:delete'],
+              auth: ['system:dept:delete'],
               disabled: !!(row.children && row.children.length > 0),
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
diff --git a/apps/web-antd/src/views/system/user/modules/import-form.vue b/apps/web-antd/src/views/system/user/modules/import-form.vue
index ee05847a1..7e02583a2 100644
--- a/apps/web-antd/src/views/system/user/modules/import-form.vue
+++ b/apps/web-antd/src/views/system/user/modules/import-form.vue
@@ -16,11 +16,8 @@ const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
     formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 120,
   },
   layout: 'horizontal',
   schema: useImportFormSchema(),
@@ -62,7 +59,7 @@ async function handleDownload() {
 </script>
 
 <template>
-  <Modal title="导入用户">
+  <Modal title="导入用户" class="w-[30%]">
     <Form class="mx-4">
       <template #file>
         <div class="w-full">
diff --git a/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} 吗？",