diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index 0550b595f..49c623b73 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -35,7 +35,7 @@ export namespace BpmProcessInstanceApi {
     candidateStrategy?: BpmCandidateStrategyEnum;
     candidateUsers?: User[];
     endTime?: Date;
-    id: number;
+    id: string;
     name: string;
     nodeType: BpmNodeTypeEnum;
     startTime?: Date;
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
index 0d8f4268e..23254a457 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
 import { computed, nextTick, ref, watch } from 'vue';
 
@@ -20,7 +21,6 @@ import {
   BpmModelFormType,
   BpmModelType,
   BpmNodeIdEnum,
-  BpmNodeTypeEnum,
   decodeFields,
   setConfAndFields2,
 } from '#/utils';
@@ -39,22 +39,6 @@ interface UserTask {
   name: string;
 }
 
-interface ApprovalNodeInfo {
-  id: number;
-  name: string;
-  candidateStrategy: BpmCandidateStrategyEnum;
-  candidateUsers?: Array<{
-    avatar: string;
-    id: number;
-    nickname: string;
-  }>;
-  endTime?: Date;
-  nodeType: BpmNodeTypeEnum;
-  startTime?: Date;
-  status: number;
-  tasks: any[];
-}
-
 defineOptions({ name: 'BpmProcessInstanceCreateForm' });
 
 const props = defineProps({
@@ -86,7 +70,7 @@ const bpmnXML = ref<string | undefined>(undefined);
 const simpleJson = ref<string | undefined>(undefined);
 const timelineRef = ref<any>();
 const activeTab = ref('form');
-const activityNodes = ref<ApprovalNodeInfo[]>([]);
+const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
 const processInstanceStartLoading = ref(false);
 
 /** 提交按钮 */
@@ -217,7 +201,7 @@ async function getApprovalDetail(row: {
     }
 
     // 获取审批节点
-    activityNodes.value = data.activityNodes as unknown as ApprovalNodeInfo[];
+    activityNodes.value = data.activityNodes;
 
     // 获取发起人自选的任务
     startUserSelectTasks.value = (data.activityNodes?.filter(
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
index fa34f86b8..0a5f966f5 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -5,6 +5,7 @@ import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime, isEmpty } from '@vben/utils';
 
@@ -102,7 +103,7 @@ const nodeTypeSvgMap = {
     color: '#14bb83',
     icon: 'icon-park-outline:tree-diagram',
   },
-};
+} as Record<BpmNodeTypeEnum, { color: string; icon: string }>;
 
 // 只有状态是 -1、0、1 才展示头像右小角状态小icon
 const onlyStatusIconShow = [-1, 0, 1];
@@ -150,21 +151,27 @@ function getApprovalNodeTime(node: BpmProcessInstanceApi.ApprovalNodeInfo) {
 }
 
 // 选择自定义审批人
-const userSelectFormRef = ref();
+const [UserSelectModalComp, userSelectModalApi] = useVbenModal({
+  connectedComponent: UserSelectModal,
+  destroyOnClose: true,
+});
 const selectedActivityNodeId = ref<string>();
 const customApproveUsers = ref<Record<string, any[]>>({}); // key：activityId，value：用户列表
 
 // 打开选择用户弹窗
 const handleSelectUser = (activityId: string, selectedList: any[]) => {
   selectedActivityNodeId.value = activityId;
-  userSelectFormRef.value.open(
-    selectedList?.length ? selectedList.map((item) => item.id) : [],
-  );
+  userSelectModalApi
+    .setData({ userIds: selectedList.map((item) => item.id) })
+    .open();
 };
 
 // 选择用户完成
 const selectedUsers = ref<number[]>([]);
 function handleUserSelectConfirm(userList: any[]) {
+  if (!selectedActivityNodeId.value) {
+    return;
+  }
   customApproveUsers.value[selectedActivityNodeId.value] = userList || [];
 
   emit('selectUserConfirm', selectedActivityNodeId.value, userList);
@@ -289,8 +296,12 @@ function handleUserSelectCancel() {
                 type="primary"
                 size="middle"
                 ghost
+                class="flex items-center justify-center"
                 @click="
-                  handleSelectUser(activity.id, customApproveUsers[activity.id])
+                  handleSelectUser(
+                    activity.id,
+                    customApproveUsers[activity.id] ?? [],
+                  )
                 "
               >
                 <template #icon>
@@ -445,8 +456,7 @@ function handleUserSelectCancel() {
     </Timeline>
 
     <!-- 用户选择弹窗 -->
-    <UserSelectModal
-      ref="userSelectFormRef"
+    <UserSelectModalComp
       v-model:value="selectedUsers"
       :multiple="true"
       title="选择用户"