diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index 23afa8c30..befafb9a0 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -152,7 +152,7 @@ export async function getApprovalDetail(params: any) {
 
 /** 获取下一个执行的流程节点 */
 export async function getNextApprovalNodes(params: any) {
-  return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
+  return requestClient.get<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
     `/bpm/process-instance/get-next-approval-nodes`,
     { params },
   );
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 2f12f455f..1e64fd7a0 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -7,16 +7,7 @@ import { nextTick, onMounted, ref, watch } from 'vue';
 import { Page } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
-import {
-  Avatar,
-  Button,
-  Card,
-  Col,
-  message,
-  Row,
-  TabPane,
-  Tabs,
-} from 'ant-design-vue';
+import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';
 
 import {
   getApprovalDetail as getApprovalDetailApi,
@@ -40,6 +31,7 @@ import {
 } from '#/views/bpm/processInstance/detail/modules/icons';
 
 import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
+import ProcessInstanceOperationButton from './modules/operation-button.vue';
 import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
 import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';
@@ -74,7 +66,8 @@ const processInstanceLoading = ref(false); // 流程实例的加载中
 const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
 const processDefinition = ref<any>({}); // 流程定义
 const processModelView = ref<any>({}); // 流程模型视图
-// const operationButtonRef = ref(); // 操作按钮组件 ref
+const operationButtonRef = ref(); // 操作按钮组件 ref
+
 const auditIconsMap: {
   [key: string]:
     | typeof SvgBpmApproveIcon
@@ -253,9 +246,8 @@ onMounted(async () => {
     <Card
       class="h-full"
       :body-style="{
-        height: 'calc(100% - 140px)',
+        height: 'calc(100% - 128px)',
         overflowY: 'auto',
-        paddingTop: '12px',
       }"
     >
       <template #title>
@@ -311,11 +303,11 @@ onMounted(async () => {
         <div class="process-tabs-container flex flex-1 flex-col">
           <Tabs v-model:active-key="activeTab" class="mt-0 h-full">
             <TabPane tab="审批详情" key="form" class="tab-pane-content">
-              <Row :gutter="[48, 24]" class="h-full">
+              <Row :gutter="[48, 12]" class="h-full">
                 <Col
                   :xs="24"
                   :sm="24"
-                  :md="18"
+                  :md="16"
                   :lg="18"
                   :xl="16"
                   class="h-full"
@@ -344,8 +336,8 @@ onMounted(async () => {
                     <BusinessFormComponent :id="processInstance?.businessKey" />
                   </div>
                 </Col>
-                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
-                  <div class="mt-4 h-full">
+                <Col :xs="24" :sm="24" :md="8" :lg="6" :xl="8" class="h-full">
+                  <div class="h-full pt-4">
                     <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                   </div>
                 </Col>
@@ -397,9 +389,17 @@ onMounted(async () => {
       </div>
 
       <template #actions>
-        <div class="flex justify-start gap-x-2 p-4">
-          <Button type="primary">驳回</Button>
-          <Button type="primary">同意</Button>
+        <div class="flex px-4">
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :user-options="userOptions"
+            :normal-form="detailForm"
+            :normal-form-api="fApi"
+            :writable-fields="writableFields"
+            @success="getDetail"
+          />
         </div>
       </template>
     </Card>
@@ -434,6 +434,6 @@ onMounted(async () => {
 
 .tab-pane-content {
   height: calc(100vh - 440px);
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 </style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
index 32846aa71..7d7a0e61f 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -1,11 +1,1308 @@
 <script lang="ts" setup>
-defineOptions({
-  name: 'BpmProcessInstanceOperationButton',
-});
-</script>
+import type { FormInstance } from 'ant-design-vue';
+import type { Rule } from 'ant-design-vue/es/form';
 
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { IconifyIcon, Plus } from '@vben/icons';
+import { useUserStore } from '@vben/stores';
+import { isEmpty } from '@vben/utils';
+
+import {
+  Button,
+  Form,
+  FormItem,
+  message,
+  Popover,
+  Select,
+  SelectOption,
+  Textarea,
+} from 'ant-design-vue';
+
+import { getNextApprovalNodes } from '#/api/bpm/processInstance';
+import * as ProcessInstanceApi from '#/api/bpm/processInstance';
+import {
+  approveTask,
+  copyTask,
+  delegateTask,
+  getTaskListByReturn,
+  rejectTask,
+  returnTask,
+  signCreateTask,
+  signDeleteTask,
+  transferTask,
+} from '#/api/bpm/task';
+import {
+  BpmCandidateStrategyEnum,
+  BpmNodeTypeEnum,
+  setConfAndFields2,
+} from '#/utils';
+import {
+  BpmModelFormType,
+  BpmProcessInstanceStatus,
+  BpmTaskStatusEnum,
+} from '#/utils/constants';
+
+import ApproveButton from './components/ApproveButton.vue';
+// import SignDialog from './SignDialog.vue';
+
+defineOptions({ name: 'ProcessInstanceBtnContainer' });
+
+// 定义 success 事件，用于操作成功后的回调
+
+const props = defineProps<{
+  normalForm: any; // 流程表单 formCreate
+  normalFormApi: any; // 流程表单 formCreate Api
+  processDefinition: any; // 流程定义信息
+  processInstance: any; // 流程实例信息
+  userOptions: SystemUserApi.User[];
+  writableFields: string[]; // 流程表单可以编辑的字段
+}>();
+
+// 当前登录的编号
+const emit = defineEmits(['success']);
+
+// 操作按钮类型枚举 (用于审批节点)
+enum OperationButtonType {
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 抄送
+   */
+  COPY = 7,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 退回
+   */
+  RETURN = 6,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+}
+
+const OPERATION_BUTTON_NAME = new Map<number, string>();
+OPERATION_BUTTON_NAME.set(OperationButtonType.APPROVE, '通过');
+OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝');
+OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办');
+OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派');
+OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签');
+OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '退回');
+OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送');
+
+const router = useRouter(); // 路由
+const userStore = useUserStore();
+const userId = userStore.userInfo?.id;
+const formLoading = ref(false); // 表单加载中
+const popOverVisible: any = ref({
+  approve: false,
+  reject: false,
+  transfer: false,
+  delegate: false,
+  addSign: false,
+  return: false,
+  copy: false,
+  cancel: false,
+  deleteSign: false,
+}); // 气泡卡是否展示
+const returnList = ref([] as any); // 退回节点
+
+// ========== 审批信息 ==========
+const runningTask = ref<any>(); // 运行中的任务
+const approveForm = ref<any>({}); // 审批通过时，额外的补充信息
+const approveFormFApi = ref<any>({}); // approveForms 的 fAPi
+const nodeTypeName = ref('审批'); // 节点类型名称
+
+// 审批通过意见表单
+const reasonRequire = ref();
+const approveFormRef = ref<FormInstance>();
+const signRef = ref();
+const approveSignFormRef = ref();
+const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
+  [],
+); // 下一个审批节点信息
+const approveReasonForm: any = reactive({
+  reason: '',
+  signPicUrl: '',
+  nextAssignees: {},
+});
+const approveReasonRule: Record<string, any> = computed(() => {
+  return {
+    reason: [
+      {
+        required: reasonRequire.value,
+        message: `${nodeTypeName.value}意见不能为空`,
+        trigger: 'blur',
+      },
+    ],
+    signPicUrl: [
+      { required: true, message: '签名不能为空', trigger: 'change' },
+    ],
+    nextAssignees: [
+      { required: true, message: '审批人不能为空', trigger: 'blur' },
+    ],
+  };
+});
+
+// 拒绝表单
+const rejectFormRef = ref<FormInstance>();
+const rejectReasonForm = reactive({
+  reason: '',
+});
+const rejectReasonRule: any = computed(() => {
+  return {
+    reason: [
+      {
+        required: reasonRequire.value,
+        message: '审批意见不能为空',
+        trigger: 'blur',
+      },
+    ],
+  } as Record<string, Rule[]>;
+});
+
+// 抄送表单
+const copyFormRef = ref<FormInstance>();
+const copyForm = reactive({
+  copyUserIds: [],
+  copyReason: '',
+});
+const copyFormRule: Record<string, Rule[]> = reactive({
+  copyUserIds: [
+    { required: true, message: '抄送人不能为空', trigger: 'change' },
+  ],
+});
+
+// 转办表单
+const transferFormRef = ref<FormInstance>();
+const transferForm = reactive({
+  assigneeUserId: undefined,
+  reason: '',
+});
+const transferFormRule: Record<string, Rule[]> = reactive({
+  assigneeUserId: [
+    { required: true, message: '新审批人不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+// 委派表单
+const delegateFormRef = ref<FormInstance>();
+const delegateForm = reactive({
+  delegateUserId: undefined,
+  reason: '',
+});
+const delegateFormRule: Record<string, Rule[]> = reactive({
+  delegateUserId: [
+    { required: true, message: '接收人不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+// 加签表单
+const addSignFormRef = ref<FormInstance>();
+const addSignForm = reactive({
+  addSignUserIds: undefined,
+  reason: '',
+});
+const addSignFormRule: Record<string, Rule[]> = reactive({
+  addSignUserIds: [
+    { required: true, message: '加签处理人不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+// 减签表单
+const deleteSignFormRef = ref<FormInstance>();
+const deleteSignForm = reactive({
+  deleteSignTaskId: undefined,
+  reason: '',
+});
+const deleteSignFormRule: Record<string, Rule[]> = reactive({
+  deleteSignTaskId: [
+    { required: true, message: '减签人员不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+// 退回表单
+const returnFormRef = ref<FormInstance>();
+const returnForm = reactive({
+  targetTaskDefinitionKey: undefined,
+  returnReason: '',
+});
+const returnFormRule: Record<string, Rule[]> = reactive({
+  targetTaskDefinitionKey: [
+    { required: true, message: '退回节点不能为空', trigger: 'change' },
+  ],
+  returnReason: [
+    { required: true, message: '退回理由不能为空', trigger: 'blur' },
+  ],
+});
+
+// 取消表单
+const cancelFormRef = ref<FormInstance>();
+
+const cancelForm = reactive({
+  cancelReason: '',
+});
+const cancelFormRule: Record<string, Rule[]> = reactive({
+  cancelReason: [
+    { required: true, message: '取消理由不能为空', trigger: 'blur' },
+  ],
+});
+
+/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
+watch(
+  () => approveFormFApi.value,
+  (val) => {
+    val?.btn?.show(false);
+    val?.resetBtn?.show(false);
+  },
+  {
+    deep: true,
+  },
+);
+
+/** 弹出气泡卡 */
+const openPopover = async (type: string) => {
+  if (type === 'approve') {
+    // 校验流程表单
+    const valid = await validateNormalForm();
+    if (!valid) {
+      message.warning('表单校验不通过，请先完善表单!!');
+      return;
+    }
+    initNextAssigneesFormField();
+  }
+  if (type === 'return') {
+    // 获取退回节点
+    returnList.value = await getTaskListByReturn(runningTask.value.id);
+    if (returnList.value.length === 0) {
+      message.warning('当前没有可退回的节点');
+      return;
+    }
+  }
+  Object.keys(popOverVisible.value).forEach((item) => {
+    if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
+  });
+  // await nextTick()
+  // formRef.value.resetFields()
+};
+
+/** 关闭气泡卡 */
+const closePopover = (type: string, formRef: any | FormInstance) => {
+  if (formRef) {
+    formRef.resetFields();
+  }
+  if (popOverVisible.value[type]) popOverVisible.value[type] = false;
+  nextAssigneesActivityNode.value = [];
+};
+
+/** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
+const initNextAssigneesFormField = async () => {
+  // 获取修改的流程变量, 暂时只支持流程表单
+  const variables = getUpdatedProcessInstanceVariables();
+  const data = await getNextApprovalNodes({
+    processInstanceId: props.processInstance.id,
+    taskId: runningTask.value.id,
+    processVariablesStr: JSON.stringify(variables),
+  });
+  if (data && data.length > 0) {
+    data.forEach((node: any) => {
+      if (
+        // 情况一：当前节点没有审批人，并且是发起人自选
+        (isEmpty(node.tasks) &&
+          isEmpty(node.candidateUsers) &&
+          BpmCandidateStrategyEnum.START_USER_SELECT ===
+            node.candidateStrategy) ||
+        // 情况二：当前节点是审批人自选
+        BpmCandidateStrategyEnum.APPROVE_USER_SELECT === node.candidateStrategy
+      ) {
+        nextAssigneesActivityNode.value.push(node);
+      }
+    });
+  }
+};
+
+/** 选择下一个节点的审批人 */
+const selectNextAssigneesConfirm = (id: string, userList: any[]) => {
+  approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id);
+};
+/** 审批通过时，校验每个自选审批人的节点是否都已配置了审批人 */
+const validateNextAssignees = () => {
+  if (Object.keys(nextAssigneesActivityNode.value).length === 0) {
+    return true;
+  }
+  // 如果需要自选审批人，则校验每个节点是否都已配置审批人
+  for (const item of nextAssigneesActivityNode.value) {
+    if (isEmpty(approveReasonForm.nextAssignees[item.id])) {
+      message.warning('下一个节点的审批人不能为空!');
+      return false;
+    }
+  }
+  return true;
+};
+
+/** 处理审批通过和不通过的操作 */
+const handleAudit = async (
+  pass: boolean,
+  formRef: FormInstance | undefined,
+) => {
+  formLoading.value = true;
+  try {
+    // 校验表单
+    if (!formRef) return;
+    await formRef?.validate();
+    // 校验流程表单必填字段
+    const valid = await validateNormalForm();
+    if (!valid) {
+      message.warning('表单校验不通过，请先完善表单!!');
+      return;
+    }
+
+    if (pass) {
+      const nextAssigneesValid = validateNextAssignees();
+      if (!nextAssigneesValid) return;
+      const variables = getUpdatedProcessInstanceVariables();
+      // 审批通过数据
+      const data = {
+        id: runningTask.value.id,
+        reason: approveReasonForm.reason,
+        variables, // 审批通过, 把修改的字段值赋于流程实例变量
+        nextAssignees: approveReasonForm.nextAssignees, // 下个自选节点选择的审批人信息
+      } as any;
+      // 签名
+      if (runningTask.value.signEnable) {
+        data.signPicUrl = approveReasonForm.signPicUrl;
+      }
+      // 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
+      // TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
+      const formCreateApi = approveFormFApi.value;
+      if (Object.keys(formCreateApi)?.length > 0) {
+        await formCreateApi.validate();
+        // @ts-ignore
+        data.variables = approveForm.value.value;
+      }
+      await approveTask(data);
+      popOverVisible.value.approve = false;
+      nextAssigneesActivityNode.value = [];
+      message.success('审批通过成功');
+    } else {
+      // 审批不通过数据
+      const data = {
+        id: runningTask.value.id,
+        reason: rejectReasonForm.reason,
+      };
+      await rejectTask(data);
+      popOverVisible.value.reject = false;
+      message.success('审批不通过成功');
+    }
+    // 重置表单
+    formRef.resetFields();
+    // 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理抄送 */
+const handleCopy = async () => {
+  formLoading.value = true;
+  try {
+    // 1. 校验表单
+    if (!copyFormRef.value) return;
+    await copyFormRef.value.validate();
+    // 2. 提交抄送
+    const data = {
+      id: runningTask.value.id,
+      reason: copyForm.copyReason,
+      copyUserIds: copyForm.copyUserIds,
+    };
+    await copyTask(data);
+    copyFormRef.value.resetFields();
+    popOverVisible.value.copy = false;
+    message.success('操作成功');
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理转交 */
+const handleTransfer = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!transferFormRef.value) return;
+    await transferFormRef.value.validate();
+    // 1.2 提交转交
+    const data = {
+      id: runningTask.value.id,
+      reason: transferForm.reason,
+      assigneeUserId: transferForm.assigneeUserId,
+    };
+    await transferTask(data);
+    transferFormRef.value.resetFields();
+    popOverVisible.value.transfer = false;
+    message.success('操作成功');
+    // 2. 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理委派 */
+const handleDelegate = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!delegateFormRef.value) return;
+    await delegateFormRef.value.validate();
+    // 1.2 处理委派
+    const data = {
+      id: runningTask.value.id,
+      reason: delegateForm.reason,
+      delegateUserId: delegateForm.delegateUserId,
+    };
+
+    await delegateTask(data);
+    popOverVisible.value.delegate = false;
+    delegateFormRef.value.resetFields();
+    message.success('操作成功');
+    // 2. 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理加签 */
+const handlerAddSign = async (type: string) => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!addSignFormRef.value) return;
+    await addSignFormRef.value.validate();
+    // 1.2 提交加签
+    const data = {
+      id: runningTask.value.id,
+      type,
+      reason: addSignForm.reason,
+      userIds: addSignForm.addSignUserIds,
+    };
+    await signCreateTask(data);
+    message.success('操作成功');
+    addSignFormRef.value.resetFields();
+    popOverVisible.value.addSign = false;
+    // 2 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理退回 */
+const handleReturn = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!returnFormRef.value) return;
+    await returnFormRef.value.validate();
+    // 1.2 提交退回
+    const data = {
+      id: runningTask.value.id,
+      reason: returnForm.returnReason,
+      targetTaskDefinitionKey: returnForm.targetTaskDefinitionKey,
+    };
+
+    await returnTask(data);
+    popOverVisible.value.return = false;
+    returnFormRef.value.resetFields();
+    message.success('操作成功');
+    // 2 重新加载数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理取消 */
+const handleCancel = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!cancelFormRef.value) return;
+    await cancelFormRef.value.validate();
+    // 1.2 提交取消
+    await ProcessInstanceApi.cancelProcessInstanceByStartUser(
+      props.processInstance.id,
+      cancelForm.cancelReason,
+    );
+    popOverVisible.value.return = false;
+    message.success('操作成功');
+    cancelFormRef.value.resetFields();
+    // 2 重新加载数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理再次提交 */
+const handleReCreate = async () => {
+  await router.push({
+    path: '/bpm/task/create',
+    query: { processInstanceId: props.processInstance?.id },
+  });
+};
+
+/** 获取减签人员标签 */
+const getDeleteSignUserLabel = (task: any): string => {
+  const deptName = task?.assigneeUser?.deptName || task?.ownerUser?.deptName;
+  const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname;
+  return `${nickname} ( 所属部门：${deptName} )`;
+};
+/** 处理减签 */
+const handlerDeleteSign = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!deleteSignFormRef.value) return;
+    await deleteSignFormRef.value?.validate();
+    // 1.2 提交减签
+    const data = {
+      id: deleteSignForm.deleteSignTaskId,
+      reason: deleteSignForm.reason,
+    };
+    await signDeleteTask(data);
+    message.success('减签成功');
+    deleteSignFormRef.value.resetFields();
+    popOverVisible.value.deleteSign = false;
+    // 2 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+/** 重新加载数据 */
+const reload = () => {
+  emit('success');
+};
+
+/** 任务是否为处理中状态 */
+const isHandleTaskStatus = () => {
+  return BpmTaskStatusEnum.RUNNING === runningTask.value?.status;
+};
+
+/** 流程状态是否为结束状态 */
+const isEndProcessStatus = (status: number) => {
+  return [
+    BpmProcessInstanceStatus.APPROVE,
+    BpmProcessInstanceStatus.CANCEL,
+    BpmProcessInstanceStatus.REJECT,
+  ].includes(status);
+};
+
+/** 是否显示按钮 */
+const isShowButton = (btnType: OperationButtonType): boolean => {
+  if (!runningTask.value?.buttonsSetting?.[btnType]) return true;
+  return runningTask.value.buttonsSetting[btnType].enable;
+};
+
+/** 获取按钮的显示名称 */
+const getButtonDisplayName = (btnType: OperationButtonType) => {
+  const displayName = runningTask.value?.buttonsSetting?.[btnType]?.displayName;
+  return displayName || OPERATION_BUTTON_NAME.get(btnType);
+};
+
+/** 加载待办任务 */
+const loadTodoTask = (task: any) => {
+  approveForm.value = {};
+  runningTask.value = task;
+  approveFormFApi.value = {};
+  reasonRequire.value = task?.reasonRequire ?? false;
+  nodeTypeName.value =
+    task?.nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE ? '办理' : '审批';
+  // 处理 approve 表单.
+  if (task && task.formId && task.formConf) {
+    const tempApproveForm = {};
+    setConfAndFields2(
+      tempApproveForm,
+      task.formConf,
+      task.formFields,
+      task.formVariables,
+    );
+    approveForm.value = tempApproveForm;
+  } else {
+    approveForm.value = {}; // 占位，避免为空
+  }
+};
+
+/** 校验流程表单 */
+const validateNormalForm = async () => {
+  if (props.processDefinition?.formType === BpmModelFormType.NORMAL) {
+    let valid = true;
+    try {
+      await props.normalFormApi?.validate();
+    } catch {
+      valid = false;
+    }
+    return valid;
+  } else {
+    return true;
+  }
+};
+
+/** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
+const getUpdatedProcessInstanceVariables = () => {
+  const variables: any = {};
+  props.writableFields.forEach((field: string) => {
+    if (field && variables[field])
+      variables[field] = props.normalFormApi.getValue(field);
+  });
+  return variables;
+};
+
+/** 处理签名完成 - 将在SignDialog启用时使用 */
+/*
+const handleSignFinish = (url: string) => {
+  approveReasonForm.signPicUrl = url;
+  approveFormRef.value?.validateFields(['signPicUrl']);
+  // approveSignFormRef.value.validate('change');
+};
+*/
+const handlePopoverVisible = (visible: boolean) => {
+  if (!visible) {
+    // 拦截关闭事件
+    popOverVisible.value.approve = true;
+  }
+};
+defineExpose({ loadTodoTask });
+</script>
 <template>
-  <div>
-    <h1>BPM 流程操作按钮</h1>
+  <div
+    class="color-[#32373c] dark:color-[#fff] btn-container bottom-10 flex h-[48px] items-center text-[14px] font-bold"
+  >
+    <!-- 【通过】按钮 -->
+    <ApproveButton
+      v-if="
+        runningTask &&
+        isHandleTaskStatus() &&
+        isShowButton(OperationButtonType.APPROVE)
+      "
+      :task="runningTask"
+      :process-instance-id="processInstance.id"
+      :form-type="processDefinition.formType"
+      :normal-form-api="normalFormApi"
+      :writable-fields="writableFields"
+      @success="emit('success')"
+    />
+
+    <!-- 【拒绝】按钮 -->
+    <Popover
+      v-model:open="popOverVisible.reject"
+      placement="top"
+      :width="420"
+      trigger="click"
+      v-if="
+        runningTask &&
+        isHandleTaskStatus() &&
+        isShowButton(OperationButtonType.REJECT)
+      "
+    >
+      <Button
+        class="ml-[10px]"
+        ghost
+        danger
+        type="primary"
+        @click="openPopover('reject')"
+      >
+        <IconifyIcon icon="ep:close" />&nbsp;
+        {{ getButtonDisplayName(OperationButtonType.REJECT) }}
+      </Button>
+      <template #content>
+        <!-- 审批表单 -->
+        <div
+          class="pt-20px px-20px flex flex-1 flex-col"
+          v-loading="formLoading"
+        >
+          <Form
+            label-position="top"
+            class="mb-auto"
+            ref="rejectFormRef"
+            :model="rejectReasonForm"
+            :rules="rejectReasonRule"
+            label-width="100px"
+          >
+            <FormItem label="审批意见" prop="reason">
+              <Textarea
+                v-model:value="rejectReasonForm.reason"
+                placeholder="请输入审批意见"
+                :rows="4"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                :disabled="formLoading"
+                ghost
+                danger
+                @click="handleAudit(false, rejectFormRef)"
+              >
+                {{ getButtonDisplayName(OperationButtonType.REJECT) }}
+              </Button>
+              <Button
+                class="ml-2"
+                @click="closePopover('reject', rejectFormRef)"
+              >
+                取消
+              </Button>
+            </FormItem>
+          </Form>
+        </div>
+      </template>
+    </Popover>
+
+    <!-- 【抄送】按钮 -->
+    <Popover
+      v-model:open="popOverVisible.copy"
+      placement="top"
+      :width="420"
+      trigger="click"
+      v-if="
+        runningTask &&
+        isHandleTaskStatus() &&
+        isShowButton(OperationButtonType.COPY)
+      "
+    >
+      <div
+        @click="openPopover('copy')"
+        class="hover-bg-gray-100 p-6px rounded-xl"
+      >
+        <Plus />&nbsp;
+        {{ getButtonDisplayName(OperationButtonType.COPY) }}
+      </div>
+      <template #content>
+        <div
+          class="pt-20px px-20px flex flex-1 flex-col"
+          v-loading="formLoading"
+        >
+          <Form
+            label-position="top"
+            class="mb-auto"
+            ref="copyFormRef"
+            :model="copyForm"
+            :rules="copyFormRule"
+            label-width="100px"
+          >
+            <FormItem label="抄送人" prop="copyUserIds">
+              <Select
+                v-model:value="copyForm.copyUserIds"
+                clearable
+                style="width: 100%"
+                mode="multiple"
+                placeholder="请选择抄送人"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                >
+                  {{ item.nickname }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem label="抄送意见" prop="copyReason">
+              <Textarea
+                v-model:value="copyForm.copyReason"
+                clearable
+                placeholder="请输入抄送意见"
+                :rows="3"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                :disabled="formLoading"
+                type="primary"
+                @click="handleCopy"
+              >
+                {{ getButtonDisplayName(OperationButtonType.COPY) }}
+              </Button>
+              <Button @click="closePopover('copy', copyFormRef)"> 取消 </Button>
+            </FormItem>
+          </Form>
+        </div>
+      </template>
+    </Popover>
+
+    <!-- 【转办】按钮 -->
+    <Popover
+      v-model:open="popOverVisible.transfer"
+      placement="top"
+      :width="420"
+      trigger="click"
+      v-if="
+        runningTask &&
+        isHandleTaskStatus() &&
+        isShowButton(OperationButtonType.TRANSFER)
+      "
+    >
+      <div
+        @click="openPopover('transfer')"
+        class="hover-bg-gray-100 p-6px rounded-xl"
+      >
+        <IconifyIcon :size="14" icon="fa:share-square-o" />&nbsp;
+        {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+      </div>
+      <template #content>
+        <div
+          class="pt-20px px-20px flex flex-1 flex-col"
+          v-loading="formLoading"
+        >
+          <Form
+            label-position="top"
+            class="mb-auto"
+            ref="transferFormRef"
+            :model="transferForm"
+            :rules="transferFormRule"
+            label-width="100px"
+          >
+            <FormItem label="新审批人" prop="assigneeUserId">
+              <Select
+                v-model:value="transferForm.assigneeUserId"
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </Select>
+            </FormItem>
+            <FormItem label="审批意见" prop="reason">
+              <Textarea
+                v-model:value="transferForm.reason"
+                clearable
+                placeholder="请输入审批意见"
+                :rows="3"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                :disabled="formLoading"
+                type="primary"
+                @click="handleTransfer()"
+              >
+                {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+              </Button>
+              <Button @click="closePopover('transfer', transferFormRef)">
+                取消
+              </Button>
+            </FormItem>
+          </Form>
+        </div>
+      </template>
+    </Popover>
+
+    <!-- 【委派】按钮 -->
+    <Popover
+      v-model:open="popOverVisible.delegate"
+      placement="top"
+      :width="420"
+      trigger="click"
+      v-if="
+        runningTask &&
+        isHandleTaskStatus() &&
+        isShowButton(OperationButtonType.DELEGATE)
+      "
+    >
+      <div
+        @click="openPopover('delegate')"
+        class="hover-bg-gray-100 p-6px rounded-xl"
+      >
+        <IconifyIcon :size="14" icon="ep:position" />&nbsp;
+        {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+      </div>
+      <template #content>
+        <div
+          class="pt-20px px-20px flex flex-1 flex-col"
+          v-loading="formLoading"
+        >
+          <Form
+            label-position="top"
+            class="mb-auto"
+            ref="delegateFormRef"
+            :model="delegateForm"
+            :rules="delegateFormRule"
+            label-width="100px"
+          >
+            <FormItem label="接收人" prop="delegateUserId">
+              <Select
+                v-model:value="delegateForm.delegateUserId"
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </Select>
+            </FormItem>
+            <FormItem label="审批意见" prop="reason">
+              <Textarea
+                v-model:value="delegateForm.reason"
+                clearable
+                placeholder="请输入审批意见"
+                :rows="3"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                :disabled="formLoading"
+                type="primary"
+                @click="handleDelegate()"
+              >
+                {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+              </Button>
+              <Button @click="closePopover('delegate', delegateFormRef)">
+                取消
+              </Button>
+            </FormItem>
+          </Form>
+        </div>
+      </template>
+    </Popover>
+
+    <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+    <Popover
+      v-model:open="popOverVisible.addSign"
+      placement="top"
+      :width="420"
+      trigger="click"
+      v-if="
+        runningTask &&
+        isHandleTaskStatus() &&
+        isShowButton(OperationButtonType.ADD_SIGN)
+      "
+    >
+      <div
+        @click="openPopover('addSign')"
+        class="hover-bg-gray-100 p-6px rounded-xl"
+      >
+        <IconifyIcon :size="14" icon="ep:plus" />&nbsp;
+        {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+      </div>
+      <template #content>
+        <div
+          class="pt-20px px-20px flex flex-1 flex-col"
+          v-loading="formLoading"
+        >
+          <Form
+            label-position="top"
+            class="mb-auto"
+            ref="addSignFormRef"
+            :model="addSignForm"
+            :rules="addSignFormRule"
+            label-width="100px"
+          >
+            <FormItem label="加签处理人" prop="addSignUserIds">
+              <Select
+                v-model:value="addSignForm.addSignUserIds"
+                multiple
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </Select>
+            </FormItem>
+            <FormItem label="审批意见" prop="reason">
+              <Textarea
+                v-model:value="addSignForm.reason"
+                clearable
+                placeholder="请输入审批意见"
+                :rows="3"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                :disabled="formLoading"
+                type="primary"
+                @click="handlerAddSign('before')"
+              >
+                向前{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+              </Button>
+              <Button
+                :disabled="formLoading"
+                type="primary"
+                @click="handlerAddSign('after')"
+              >
+                向后{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+              </Button>
+              <Button @click="closePopover('addSign', addSignFormRef)">
+                取消
+              </Button>
+            </FormItem>
+          </Form>
+        </div>
+      </template>
+    </Popover>
+
+    <!-- 【减签】按钮 -->
+    <Popover
+      v-model:open="popOverVisible.deleteSign"
+      placement="top"
+      :width="420"
+      trigger="click"
+      v-if="runningTask?.children.length > 0"
+    >
+      <div
+        @click="openPopover('deleteSign')"
+        class="hover-bg-gray-100 p-6px rounded-xl"
+      >
+        <IconifyIcon :size="14" icon="ep:semi-select" />&nbsp; 减签
+      </div>
+      <template #content>
+        <div
+          class="pt-20px px-20px flex flex-1 flex-col"
+          v-loading="formLoading"
+        >
+          <Form
+            label-position="top"
+            class="mb-auto"
+            ref="deleteSignFormRef"
+            :model="deleteSignForm"
+            :rules="deleteSignFormRule"
+            label-width="100px"
+          >
+            <FormItem label="减签人员" prop="deleteSignTaskId">
+              <Select
+                v-model:value="deleteSignForm.deleteSignTaskId"
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in runningTask.children"
+                  :key="item.id"
+                  :label="getDeleteSignUserLabel(item)"
+                  :value="item.id"
+                >
+                  {{ getDeleteSignUserLabel(item) }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem label="审批意见" prop="reason">
+              <Textarea
+                v-model:value="deleteSignForm.reason"
+                clearable
+                placeholder="请输入审批意见"
+                :rows="3"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                :disabled="formLoading"
+                type="primary"
+                @click="handlerDeleteSign()"
+              >
+                减签
+              </Button>
+              <Button @click="closePopover('deleteSign', deleteSignFormRef)">
+                取消
+              </Button>
+            </FormItem>
+          </Form>
+        </div>
+      </template>
+    </Popover>
+
+    <!-- 【退回】按钮 -->
+    <Popover
+      v-model:open="popOverVisible.return"
+      placement="top"
+      :width="420"
+      trigger="click"
+      v-if="
+        runningTask &&
+        isHandleTaskStatus() &&
+        isShowButton(OperationButtonType.RETURN)
+      "
+    >
+      <div
+        @click="openPopover('return')"
+        class="hover-bg-gray-100 p-6px rounded-xl"
+      >
+        <IconifyIcon :size="14" icon="ep:back" />&nbsp;
+        {{ getButtonDisplayName(OperationButtonType.RETURN) }}
+      </div>
+      <template #content>
+        <div
+          class="pt-20px px-20px flex flex-1 flex-col"
+          v-loading="formLoading"
+        >
+          <Form
+            label-position="top"
+            class="mb-auto"
+            ref="returnFormRef"
+            :model="returnForm"
+            :rules="returnFormRule"
+            label-width="100px"
+          >
+            <FormItem label="退回节点" prop="targetTaskDefinitionKey">
+              <Select
+                v-model:value="returnForm.targetTaskDefinitionKey"
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in returnList"
+                  :key="item.taskDefinitionKey"
+                  :label="item.name"
+                  :value="item.taskDefinitionKey"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem label="退回理由" prop="returnReason">
+              <Textarea
+                v-model:value="returnForm.returnReason"
+                clearable
+                placeholder="请输入退回理由"
+                :rows="3"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                :disabled="formLoading"
+                type="primary"
+                @click="handleReturn()"
+              >
+                {{ getButtonDisplayName(OperationButtonType.RETURN) }}
+              </Button>
+              <Button @click="closePopover('return', returnFormRef)">
+                取消
+              </Button>
+            </FormItem>
+          </Form>
+        </div>
+      </template>
+    </Popover>
+
+    <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+    <Popover
+      v-model:open="popOverVisible.cancel"
+      placement="top"
+      :width="420"
+      trigger="click"
+      v-if="
+        userId === processInstance?.startUser?.id &&
+        !isEndProcessStatus(processInstance?.status)
+      "
+    >
+      <div
+        @click="openPopover('cancel')"
+        class="hover-bg-gray-100 p-6px rounded-xl"
+      >
+        <IconifyIcon :size="14" icon="fa:mail-reply" />&nbsp; 取消
+      </div>
+      <template #content>
+        <div
+          class="pt-20px px-20px flex flex-1 flex-col"
+          v-loading="formLoading"
+        >
+          <Form
+            label-position="top"
+            class="mb-auto"
+            ref="cancelFormRef"
+            :model="cancelForm"
+            :rules="cancelFormRule"
+            label-width="100px"
+          >
+            <FormItem label="取消理由" prop="cancelReason">
+              <span class="text-12px"> 取消后，该审批流程将自动结束</span>
+              <Textarea
+                v-model:value="cancelForm.cancelReason"
+                clearable
+                placeholder="请输入取消理由"
+                :rows="3"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                :disabled="formLoading"
+                type="primary"
+                @click="handleCancel()"
+              >
+                确认
+              </Button>
+              <Button @click="closePopover('cancel', cancelFormRef)">
+                取消
+              </Button>
+            </FormItem>
+          </Form>
+        </div>
+      </template>
+    </Popover>
+    <!-- 【再次提交】 按钮-->
+    <div
+      @click="handleReCreate()"
+      class="hover-bg-gray-100 p-6px rounded-xl"
+      v-if="
+        userId === processInstance?.startUser?.id &&
+        isEndProcessStatus(processInstance?.status) &&
+        processDefinition?.formType === 10
+      "
+    >
+      <IconifyIcon :size="14" icon="ep:refresh" />&nbsp; 再次提交
+    </div>
   </div>
+
+  <!-- 签名弹窗 -->
+  <!-- <SignDialog ref="signRef" @success="handleSignFinish" /> -->
 </template>
+<style lang="scss" scoped>
+:deep(.el-affix--fixed) {
+  background-color: var(--el-bg-color);
+}
+
+.btn-container {
+  > div {
+    display: flex;
+    align-items: center;
+    margin: 0 8px;
+    cursor: pointer;
+
+    &:hover {
+      color: #6db5ff;
+    }
+  }
+}
+</style>