From 01f929e10fc188f73d93fdcf2a03fa1ad50c7ca9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=90=E5=A4=9C?= <278898052@qq.com>
Date: Sat, 24 May 2025 15:10:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=80=90BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81=E3=80=91=E5=AE=8C=E5=96=84=E6=93=8D=E4=BD=9C=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E3=80=81=E6=B5=81=E7=A8=8B=E7=AD=BE=E5=90=8D=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |    3 +-
 apps/web-antd/src/api/bpm/definition/index.ts |   11 +-
 apps/web-antd/src/api/bpm/model/index.ts      |    1 +
 .../src/api/bpm/processInstance/index.ts      |   17 +-
 apps/web-antd/src/api/bpm/task/index.ts       |    4 +-
 apps/web-antd/src/utils/constants.ts          |  106 +-
 apps/web-antd/src/utils/download.ts           |  214 +++
 apps/web-antd/src/utils/index.ts              |    1 +
 .../bpm/processInstance/create/index.vue      |   39 +-
 .../bpm/processInstance/detail/index.vue      |  125 +-
 .../detail/modules/bpm-viewer.vue             |    9 +
 .../detail/modules/operation-button.vue       | 1392 +++++++++++++++++
 .../detail/modules/signature.vue              |   88 ++
 .../detail/modules/simple-bpm-viewer.vue      |    9 +
 .../detail/modules/time-line.vue              |    2 +-
 .../src/views/bpm/task/copy/index.vue         |    4 +-
 pnpm-lock.yaml                                |   27 +
 pnpm-workspace.yaml                           |    1 +
 18 files changed, 1962 insertions(+), 91 deletions(-)
 create mode 100644 apps/web-antd/src/utils/download.ts
 create mode 100644 apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
 create mode 100644 apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
 create mode 100644 apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
 create mode 100644 apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index fdb068a51..f9a0862ed 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -53,7 +53,8 @@
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
-    "vue-router": "catalog:"
+    "vue-router": "catalog:",
+    "vue3-signature": "catalog:"
   },
   "devDependencies": {
     "@types/crypto-js": "catalog:"
diff --git a/apps/web-antd/src/api/bpm/definition/index.ts b/apps/web-antd/src/api/bpm/definition/index.ts
index 2dc9f625b..795caa1b5 100644
--- a/apps/web-antd/src/api/bpm/definition/index.ts
+++ b/apps/web-antd/src/api/bpm/definition/index.ts
@@ -37,11 +37,12 @@ export async function getProcessDefinitionPage(params: PageParam) {
 
 /** 查询流程定义列表 */
 export async function getProcessDefinitionList(params: any) {
-  return requestClient.get<
-    PageResult<BpmProcessDefinitionApi.ProcessDefinitionVO>
-  >('/bpm/process-definition/list', {
-    params,
-  });
+  return requestClient.get<BpmProcessDefinitionApi.ProcessDefinitionVO[]>(
+    '/bpm/process-definition/list',
+    {
+      params,
+    },
+  );
 }
 
 /** 查询流程定义列表（简单列表） */
diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
index 713fedc47..455981782 100644
--- a/apps/web-antd/src/api/bpm/model/index.ts
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -14,6 +14,7 @@ export namespace BpmModelApi {
   /** 流程定义 VO */
   export interface ProcessDefinitionVO {
     id: string;
+    key?: string;
     version: number;
     deploymentTime: number;
     suspensionState: number;
diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index 70d218469..4e8329c94 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmTaskApi } from '../task';
+
 import type { BpmModelApi } from '#/api/bpm/model';
 import type { BpmCandidateStrategyEnum, BpmNodeTypeEnum } from '#/utils';
 
@@ -67,25 +69,26 @@ export namespace BpmProcessInstanceApi {
     processDefinition: BpmModelApi.ProcessDefinitionVO;
     processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
     status: number;
+    todoTask: BpmTaskApi.TaskVO;
   };
 
   // 抄送流程实例 VO
   export type CopyVO = {
+    activityId: string;
+    activityName: string;
+    createTime: number;
+    createUser: User;
     id: number;
-    startUser: User;
     processInstanceId: string;
     processInstanceName: string;
     processInstanceStartTime: number;
-    activityId: string;
-    activityName: string;
-    taskId: string;
     reason: string;
-    createUser: User;
-    createTime: number;
+    startUser: User;
     summary: {
       key: string;
       value: string;
     }[];
+    taskId: string;
   };
 }
 
@@ -173,7 +176,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/api/bpm/task/index.ts b/apps/web-antd/src/api/bpm/task/index.ts
index 17987704a..19cbede85 100644
--- a/apps/web-antd/src/api/bpm/task/index.ts
+++ b/apps/web-antd/src/api/bpm/task/index.ts
@@ -89,8 +89,8 @@ export const getTaskListByProcessInstanceId = async (id: string) => {
 };
 
 /** 获取所有可退回的节点 */
-export const getTaskListByReturn = async (data: any) => {
-  return await requestClient.get('/bpm/task/list-by-return', data);
+export const getTaskListByReturn = async (id: string) => {
+  return await requestClient.get(`/bpm/task/list-by-return?id=${id}`);
 };
 
 /** 退回 */
diff --git a/apps/web-antd/src/utils/constants.ts b/apps/web-antd/src/utils/constants.ts
index affb6b1bb..ed4f97a8e 100644
--- a/apps/web-antd/src/utils/constants.ts
+++ b/apps/web-antd/src/utils/constants.ts
@@ -441,30 +441,6 @@ export const ErpBizType = {
 
 // ========== BPM 模块 ==========
 
-export const BpmModelType = {
-  BPMN: 10, // BPMN 设计器
-  SIMPLE: 20, // 简易设计器
-};
-
-export const BpmModelFormType = {
-  NORMAL: 10, // 流程表单
-  CUSTOM: 20, // 业务表单
-};
-
-export const BpmProcessInstanceStatus = {
-  NOT_START: -1, // 未开始
-  RUNNING: 1, // 审批中
-  APPROVE: 2, // 审批通过
-  REJECT: 3, // 审批不通过
-  CANCEL: 4, // 已取消
-};
-
-export const BpmAutoApproveType = {
-  NONE: 0, // 不自动通过
-  APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
-  APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
-};
-
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum BpmCandidateStrategyEnum {
   /**
@@ -594,6 +570,40 @@ export enum BpmNodeTypeEnum {
   USER_TASK_NODE = 11,
 }
 
+/**
+ *  流程任务操作按钮
+ */
+export enum BpmTaskOperationButtonTypeEnum {
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 抄送
+   */
+  COPY = 7,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 退回
+   */
+  RETURN = 6,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+}
+
 /**
  * 任务状态枚举
  */
@@ -667,3 +677,51 @@ export enum BpmFieldPermissionType {
    */
   WRITE = '2',
 }
+
+/**
+ * 流程模型类型
+ */
+export const BpmModelType = {
+  BPMN: 10, // BPMN 设计器
+  SIMPLE: 20, // 简易设计器
+};
+
+/**
+ * 流程模型表单类型
+ */
+export const BpmModelFormType = {
+  NORMAL: 10, // 流程表单
+  CUSTOM: 20, // 业务表单
+};
+
+/**
+ * 流程实例状态
+ */
+export const BpmProcessInstanceStatus = {
+  NOT_START: -1, // 未开始
+  RUNNING: 1, // 审批中
+  APPROVE: 2, // 审批通过
+  REJECT: 3, // 审批不通过
+  CANCEL: 4, // 已取消
+};
+
+/**
+ * 自动审批类型
+ */
+export const BpmAutoApproveType = {
+  NONE: 0, // 不自动通过
+  APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
+  APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
+};
+
+/**
+ * 审批操作按钮名称
+ */
+export const OPERATION_BUTTON_NAME = new Map<number, string>();
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.APPROVE, '通过');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.REJECT, '拒绝');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.TRANSFER, '转办');
+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, '抄送');
diff --git a/apps/web-antd/src/utils/download.ts b/apps/web-antd/src/utils/download.ts
new file mode 100644
index 000000000..acb0129c8
--- /dev/null
+++ b/apps/web-antd/src/utils/download.ts
@@ -0,0 +1,214 @@
+/**
+ * 下载工具模块
+ * 提供多种文件格式的下载功能
+ */
+
+/**
+ * 图片下载配置接口
+ */
+interface ImageDownloadOptions {
+  /** 图片 URL */
+  url: string;
+  /** 指定画布宽度 */
+  canvasWidth?: number;
+  /** 指定画布高度 */
+  canvasHeight?: number;
+  /** 将图片绘制在画布上时带上图片的宽高值，默认为 true */
+  drawWithImageSize?: boolean;
+}
+
+/**
+ * 基础文件下载函数
+ * @param data - 文件数据 Blob
+ * @param fileName - 文件名
+ * @param mimeType - MIME 类型
+ */
+export const download0 = (data: Blob, fileName: string, mimeType: string) => {
+  try {
+    // 创建 blob
+    const blob = new Blob([data], { type: mimeType });
+    // 创建 href 超链接，点击进行下载
+    window.URL = window.URL || window.webkitURL;
+    const href = URL.createObjectURL(blob);
+    const downA = document.createElement('a');
+    downA.href = href;
+    downA.download = fileName;
+    downA.click();
+    // 销毁超链接
+    window.URL.revokeObjectURL(href);
+  } catch (error) {
+    console.error('文件下载失败:', error);
+    throw new Error(
+      `文件下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
+    );
+  }
+};
+
+/**
+ * 触发文件下载的通用方法
+ * @param url - 下载链接
+ * @param fileName - 文件名
+ */
+const triggerDownload = (url: string, fileName: string) => {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  a.click();
+};
+
+export const download = {
+  /**
+   * 下载 Excel 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  excel: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/vnd.ms-excel');
+  },
+
+  /**
+   * 下载 Word 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  word: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/msword');
+  },
+
+  /**
+   * 下载 Zip 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  zip: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/zip');
+  },
+
+  /**
+   * 下载 HTML 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  html: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'text/html');
+  },
+
+  /**
+   * 下载 Markdown 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  markdown: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'text/markdown');
+  },
+
+  /**
+   * 下载 JSON 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  json: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/json');
+  },
+
+  /**
+   * 下载图片（允许跨域）
+   * @param options - 图片下载配置
+   */
+  image: (options: ImageDownloadOptions) => {
+    const {
+      url,
+      canvasWidth,
+      canvasHeight,
+      drawWithImageSize = true,
+    } = options;
+
+    const image = new Image();
+    // image.setAttribute('crossOrigin', 'anonymous')
+    image.src = url;
+    image.addEventListener('load', () => {
+      try {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvasWidth || image.width;
+        canvas.height = canvasHeight || image.height;
+        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+        ctx?.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (drawWithImageSize) {
+          ctx.drawImage(image, 0, 0, image.width, image.height);
+        } else {
+          ctx.drawImage(image, 0, 0);
+        }
+
+        const dataUrl = canvas.toDataURL('image/png');
+        triggerDownload(dataUrl, 'image.png');
+      } catch (error) {
+        console.error('图片下载失败:', error);
+        throw new Error(
+          `图片下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
+        );
+      }
+    });
+
+    image.addEventListener('error', () => {
+      throw new Error('图片加载失败');
+    });
+  },
+
+  /**
+   * 将 Base64 字符串转换为文件对象
+   * @param base64 - Base64 字符串
+   * @param fileName - 文件名
+   * @returns File 对象
+   */
+  base64ToFile: (base64: string, fileName: string): File => {
+    // 输入验证
+    if (!base64 || typeof base64 !== 'string') {
+      throw new Error('base64 参数必须是非空字符串');
+    }
+
+    // 将 base64 按照逗号进行分割，将前缀与后续内容分隔开
+    const data = base64.split(',');
+    if (data.length !== 2 || !data[0] || !data[1]) {
+      throw new Error('无效的 base64 格式');
+    }
+
+    // 利用正则表达式从前缀中获取类型信息（image/png、image/jpeg、image/webp等）
+    const typeMatch = data[0].match(/:(.*?);/);
+    if (!typeMatch || !typeMatch[1]) {
+      throw new Error('无法解析 base64 类型信息');
+    }
+    const type = typeMatch[1];
+
+    // 从类型信息中获取具体的文件格式后缀（png、jpeg、webp）
+    const typeParts = type.split('/');
+    if (typeParts.length !== 2 || !typeParts[1]) {
+      throw new Error('无效的 MIME 类型格式');
+    }
+    const suffix = typeParts[1];
+
+    try {
+      // 使用 atob() 对 base64 数据进行解码，结果是一个文件数据流以字符串的格式输出
+      const bstr = window.atob(data[1]);
+
+      // 获取解码结果字符串的长度
+      const n = bstr.length;
+      // 根据解码结果字符串的长度创建一个等长的整型数字数组
+      const u8arr = new Uint8Array(n);
+
+      // 优化的 Uint8Array 填充逻辑
+      for (let i = 0; i < n; i++) {
+        // 使用 charCodeAt() 获取字符对应的字节值（Base64 解码后的字符串是字节级别的）
+        // eslint-disable-next-line unicorn/prefer-code-point
+        u8arr[i] = bstr.charCodeAt(i);
+      }
+
+      // 返回 File 文件对象
+      return new File([u8arr], `${fileName}.${suffix}`, { type });
+    } catch (error) {
+      throw new Error(
+        `Base64 解码失败: ${error instanceof Error ? error.message : '未知错误'}`,
+      );
+    }
+  },
+};
diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts
index 022e6441d..101e381e5 100644
--- a/apps/web-antd/src/utils/index.ts
+++ b/apps/web-antd/src/utils/index.ts
@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './dict';
+export * from './download';
 export * from './formatTime';
 export * from './formCreate';
 export * from './rangePickerProps';
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/index.vue b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
index a8ceeb353..08274b6b5 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
 import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
 import { computed, nextTick, onMounted, ref } from 'vue';
@@ -33,7 +34,9 @@ const processInstanceId: any = route.query.processInstanceId; // 流程实例编
 const loading = ref(true); // 加载中
 const categoryList: any = ref([]); // 分类的列表
 const activeCategory = ref(''); // 当前选中的分类
-const processDefinitionList = ref([]); // 流程定义的列表
+const processDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinitionVO[]
+>([]); // 流程定义的列表
 
 // 实现 groupBy 功能
 const groupBy = (array: any[], key: string) => {
@@ -107,8 +110,12 @@ const handleGetProcessDefinitionList = async () => {
   }
 };
 
+/** 用于存储搜索过滤后的流程定义 */
+const filteredProcessDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinitionVO[]
+>([]);
+
 /** 搜索流程 */
-const filteredProcessDefinitionList = ref([]); // 用于存储搜索过滤后的流程定义
 const handleQuery = () => {
   if (searchName.value.trim()) {
     // 如果有搜索关键字，进行过滤
@@ -150,10 +157,15 @@ const processDefinitionGroup: any = computed(() => {
 
   const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
   // 按照 categoryList 的顺序重新组织数据
-  const orderedGroup = {};
-  categoryList.value.forEach((category: any) => {
+  const orderedGroup: Record<
+    string,
+    BpmProcessDefinitionApi.ProcessDefinitionVO[]
+  > = {};
+  categoryList.value.forEach((category: BpmCategoryApi.CategoryVO) => {
     if (grouped[category.code]) {
-      orderedGroup[category.code] = grouped[category.code];
+      orderedGroup[category.code] = grouped[
+        category.code
+      ] as BpmProcessDefinitionApi.ProcessDefinitionVO[];
     }
   });
   return orderedGroup;
@@ -191,7 +203,7 @@ const availableCategories = computed(() => {
   const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
 
   // 过滤出有流程的分类
-  return categoryList.value.filter((category: CategoryVO) =>
+  return categoryList.value.filter((category: BpmCategoryApi.CategoryVO) =>
     availableCategoryCodes.includes(category.code),
   );
 });
@@ -229,11 +241,7 @@ onMounted(() => {
               allow-clear
               @input="handleQuery"
               @clear="handleQuery"
-            >
-              <template #prefix>
-                <IconifyIcon icon="mdi:search-web" />
-              </template>
-            </InputSearch>
+            />
           </div>
         </template>
 
@@ -289,15 +297,6 @@ onMounted(() => {
                         </Tooltip>
                       </span>
                     </div>
-
-                    <!-- TODO: 发起流程按钮 -->
-                    <!-- <template #actions>
-                      <div class="flex justify-end px-4">
-                        <Button type="link" @click="handleSelect(definition)">
-                          发起流程
-                        </Button>
-                      </div>
-                    </template> -->
                   </Card>
                 </Col>
               </Row>
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 6df07c99d..487e1165d 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, shallowRef, 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,
@@ -39,6 +30,9 @@ import {
   SvgBpmRunningIcon,
 } 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';
 
@@ -72,7 +66,7 @@ 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
@@ -162,6 +156,7 @@ async function getApprovalDetail() {
       });
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+
       BusinessFormComponent.value = registerComponent(
         data?.processDefinition?.formCustomViewPath || '',
       );
@@ -169,6 +164,9 @@ async function getApprovalDetail() {
 
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes;
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask);
   } catch {
     message.error('获取审批详情失败！');
   } finally {
@@ -249,9 +247,7 @@ onMounted(async () => {
 <template>
   <Page auto-content-height>
     <Card
-      class="h-full"
       :body-style="{
-        height: 'calc(100% - 140px)',
         overflowY: 'auto',
         paddingTop: '12px',
       }"
@@ -306,18 +302,25 @@ onMounted(async () => {
         </div>
 
         <!-- 流程操作 -->
-        <div class="flex-1">
-          <Tabs v-model:active-key="activeTab" class="mt-0">
-            <TabPane tab="审批详情" key="form">
-              <Row :gutter="[48, 24]">
-                <Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
+        <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">
+                <Col
+                  :xs="24"
+                  :sm="24"
+                  :md="18"
+                  :lg="18"
+                  :xl="16"
+                  class="h-full"
+                >
                   <!-- 流程表单 -->
                   <div
                     v-if="
                       processDefinition?.formType === BpmModelFormType.NORMAL
                     "
+                    class="h-full"
                   >
-                    <!-- v-model="detailForm.value" -->
                     <form-create
                       v-model="detailForm.value"
                       v-model:api="fApi"
@@ -330,23 +333,41 @@ onMounted(async () => {
                     v-if="
                       processDefinition?.formType === BpmModelFormType.CUSTOM
                     "
+                    class="h-full"
                   >
                     <BusinessFormComponent :id="processInstance?.businessKey" />
                   </div>
                 </Col>
-                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
-                  <div class="mt-2">
+                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
+                  <div class="mt-4 h-full">
                     <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                   </div>
                 </Col>
               </Row>
             </TabPane>
 
-            <TabPane tab="流程图" key="diagram">
-              <div>待开发</div>
+            <TabPane tab="流程图" key="diagram" class="tab-pane-content">
+              <div class="h-full">
+                <ProcessInstanceSimpleViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.SIMPLE
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+                <ProcessInstanceBpmnViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.BPMN
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+              </div>
             </TabPane>
 
-            <TabPane tab="流转记录" key="record">
+            <TabPane tab="流转记录" key="record" class="tab-pane-content">
               <div class="h-full">
                 <BpmProcessInstanceTaskList
                   ref="taskListRef"
@@ -357,19 +378,65 @@ onMounted(async () => {
             </TabPane>
 
             <!-- TODO 待开发 -->
-            <TabPane tab="流转评论" key="comment" v-if="false">
-              <div>待开发</div>
+            <TabPane
+              tab="流转评论"
+              key="comment"
+              v-if="false"
+              class="tab-pane-content"
+            >
+              <div class="h-full">待开发</div>
             </TabPane>
           </Tabs>
         </div>
       </div>
 
       <template #actions>
-        <div class="flex justify-start gap-x-2 p-4">
-          <Button type="primary">驳回</Button>
-          <Button type="primary">同意</Button>
+        <div class="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>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+.ant-tabs-content {
+  height: 100%;
+}
+
+.process-tabs-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs-content) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+:deep(.ant-tabs-tabpane) {
+  height: 100%;
+}
+
+.tab-pane-content {
+  height: calc(100vh - 420px);
+  padding-right: 12px;
+  overflow: hidden auto;
+}
+</style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
new file mode 100644
index 000000000..127caca6c
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProcessInstanceBpmnViewer' });
+</script>
+
+<template>
+  <div>
+    <h1>BPMN Viewer</h1>
+  </div>
+</template>
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
new file mode 100644
index 000000000..f00c58ab1
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -0,0 +1,1392 @@
+<script lang="ts" setup>
+import type { FormInstance } from 'ant-design-vue';
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { computed, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { IconifyIcon } from '@vben/icons';
+import { useUserStore } from '@vben/stores';
+import { isEmpty } from '@vben/utils';
+
+import FormCreate from '@form-create/ant-design-vue';
+import {
+  Alert,
+  Button,
+  Card,
+  Form,
+  FormItem,
+  Image,
+  message,
+  Popover,
+  Select,
+  SelectOption,
+  Space,
+  Textarea,
+} from 'ant-design-vue';
+
+import {
+  cancelProcessInstanceByStartUser,
+  getNextApprovalNodes,
+} from '#/api/bpm/processInstance';
+import * as TaskApi from '#/api/bpm/task';
+import * as UserApi from '#/api/system/user';
+import {
+  BpmCandidateStrategyEnum,
+  BpmModelFormType,
+  BpmNodeTypeEnum,
+  BpmProcessInstanceStatus,
+  BpmTaskOperationButtonTypeEnum,
+  BpmTaskStatusEnum,
+  OPERATION_BUTTON_NAME,
+  setConfAndFields2,
+} from '#/utils';
+
+import Signature from './signature.vue';
+import ProcessInstanceTimeline from './time-line.vue';
+
+defineOptions({ name: 'ProcessInstanceBtnContainer' });
+
+// 定义 success 事件，用于操作成功后的回调
+
+const props = defineProps<{
+  normalForm: any; // 流程表单 formCreate
+  normalFormApi: any; // 流程表单 formCreate Api
+  processDefinition: any; // 流程定义信息
+  processInstance: any; // 流程实例信息
+  userOptions: UserApi.SystemUserApi.User[];
+  writableFields: string[]; // 流程表单可以编辑的字段
+}>(); // 当前登录的编号
+const emit = defineEmits(['success']);
+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 TaskApi.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: BpmProcessInstanceApi.ApprovalNodeInfo) => {
+      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 TaskApi.approveTask(data);
+      popOverVisible.value.approve = false;
+      nextAssigneesActivityNode.value = [];
+      message.success('审批通过成功');
+    } else {
+      // 审批不通过数据
+      const data = {
+        id: runningTask.value.id,
+        reason: rejectReasonForm.reason,
+      };
+      await TaskApi.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 TaskApi.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 TaskApi.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 TaskApi.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 TaskApi.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 TaskApi.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 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 },
+  });
+  // router.push('/bpm/task/my');
+};
+
+/** 获取减签人员标签 */
+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 TaskApi.signDeleteTask(data);
+    message.success('减签成功');
+    deleteSignFormRef.value.resetFields();
+    popOverVisible.value.deleteSign = false;
+    // 2 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+/** 重新加载数据 */
+const reload = () => {
+  emit('success');
+};
+
+/** 任务是否为处理中状态 */
+const isHandleTaskStatus = () => {
+  let canHandle = false;
+  if (BpmTaskStatusEnum.RUNNING === runningTask.value?.status) {
+    canHandle = true;
+  }
+  return canHandle;
+};
+
+/** 流程状态是否为结束状态 */
+const isEndProcessStatus = (status: number) => {
+  let isEndStatus = false;
+  if (
+    BpmProcessInstanceStatus.APPROVE === status ||
+    BpmProcessInstanceStatus.REJECT === status ||
+    BpmProcessInstanceStatus.CANCEL === status
+  ) {
+    isEndStatus = true;
+  }
+  return isEndStatus;
+};
+
+/** 是否显示按钮 */
+const isShowButton = (btnType: BpmTaskOperationButtonTypeEnum): boolean => {
+  let isShow = true;
+  if (
+    runningTask.value?.buttonsSetting &&
+    runningTask.value?.buttonsSetting[btnType]
+  ) {
+    isShow = runningTask.value.buttonsSetting[btnType].enable;
+  }
+  return isShow;
+};
+
+/** 获取按钮的显示名称 */
+const getButtonDisplayName = (btnType: BpmTaskOperationButtonTypeEnum) => {
+  let displayName = OPERATION_BUTTON_NAME.get(btnType);
+  if (
+    runningTask.value?.buttonsSetting &&
+    runningTask.value?.buttonsSetting[btnType]
+  ) {
+    displayName = runningTask.value.buttonsSetting[btnType].displayName;
+  }
+  return displayName;
+};
+
+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;
+};
+
+/** 处理签名完成 */
+const handleSignFinish = (url: string) => {
+  approveReasonForm.signPicUrl = url;
+  approveFormRef.value?.validateFields(['signPicUrl']);
+};
+
+/** 处理弹窗可见性 */
+const handlePopoverVisible = (visible: boolean) => {
+  if (!visible) {
+    // 拦截关闭事件
+    popOverVisible.value.approve = true;
+  }
+};
+
+defineExpose({ loadTodoTask });
+</script>
+<template>
+  <div class="flex items-center">
+    <!-- <div>是否处理中 {{ !!isHandleTaskStatus() }}</div> -->
+
+    <!-- 【通过】按钮 -->
+    <!-- z-index 设置为300 避免覆盖签名弹窗 -->
+    <Space size="middle">
+      <Popover
+        v-model:open="popOverVisible.approve"
+        placement="top"
+        :overlay-style="{ minWidth: '400px', zIndex: 300 }"
+        trigger="click"
+        @open-change="handlePopoverVisible"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.APPROVE)
+        "
+      >
+        <Button ghost type="primary" @click="openPopover('approve')">
+          <IconifyIcon icon="icon-park-outline:check" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE) }}
+        </Button>
+        <template #content>
+          <!-- 办理表单 -->
+          <div
+            class="flex flex-1 flex-col px-[20px] pt-[20px]"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="approveFormRef"
+              :model="approveReasonForm"
+              :rules="approveReasonRule"
+              label-width="100px"
+            >
+              <Card
+                v-if="runningTask?.formId > 0"
+                class="!-mt-[10px] mb-[15px]"
+              >
+                <template #title>
+                  <span class="el-icon-picture-outline">
+                    填写表单【{{ runningTask?.formName }}】
+                  </span>
+                </template>
+                <FormCreate
+                  v-model:value="approveForm.value"
+                  v-model:api="approveFormFApi"
+                  :option="approveForm.option"
+                  :rule="approveForm.rule"
+                />
+              </Card>
+
+              <FormItem
+                label="下一个节点的审批人"
+                name="nextAssignees"
+                v-if="nextAssigneesActivityNode.length > 0"
+              >
+                <div class="-mb-[35px] -mt-[15px] ml-[10px]">
+                  <ProcessInstanceTimeline
+                    :activity-nodes="nextAssigneesActivityNode"
+                    :show-status-icon="false"
+                    @select-user-confirm="selectNextAssigneesConfirm"
+                  />
+                </div>
+              </FormItem>
+              <FormItem
+                v-if="runningTask.signEnable"
+                label="签名"
+                name="signPicUrl"
+                ref="approveSignFormRef"
+              >
+                <Button @click="signRef.open()" type="primary">
+                  {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
+                </Button>
+
+                <div class="mt-2">
+                  <Image
+                    style="float: left; width: 326px; height: 150px"
+                    v-if="approveReasonForm.signPicUrl"
+                    :src="approveReasonForm.signPicUrl"
+                  />
+                </div>
+              </FormItem>
+
+              <FormItem :label="`${nodeTypeName}意见`" name="reason">
+                <Textarea
+                  v-model:value="approveReasonForm.reason"
+                  :placeholder="`请输入${nodeTypeName}意见`"
+                  :rows="4"
+                />
+              </FormItem>
+
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleAudit(true, approveFormRef)"
+                  >
+                    {{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.APPROVE,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('approve', approveFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【拒绝】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.reject"
+        placement="top"
+        :overlay-style="{ minWidth: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.REJECT)
+        "
+      >
+        <Button ghost danger type="primary" @click="openPopover('reject')">
+          <IconifyIcon icon="icon-park-outline:close" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.REJECT) }}
+        </Button>
+        <template #content>
+          <!-- 审批表单 -->
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="rejectFormRef"
+              :model="rejectReasonForm"
+              :rules="rejectReasonRule"
+              label-width="100px"
+            >
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="rejectReasonForm.reason"
+                  placeholder="请输入审批意见"
+                  :rows="4"
+                />
+              </FormItem>
+              <FormItem>
+                <Button
+                  :disabled="formLoading"
+                  danger
+                  type="primary"
+                  @click="handleAudit(false, rejectFormRef)"
+                >
+                  {{
+                    getButtonDisplayName(BpmTaskOperationButtonTypeEnum.REJECT)
+                  }}
+                </Button>
+                <Button
+                  class="ml-2"
+                  @click="closePopover('reject', rejectFormRef)"
+                >
+                  取消
+                </Button>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【抄送】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.copy"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.COPY)
+        "
+      >
+        <Button type="dashed" @click="openPopover('copy')">
+          <IconifyIcon icon="icon-park-outline:copy" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="copyFormRef"
+              :model="copyForm"
+              :rules="copyFormRule"
+              label-width="100px"
+            >
+              <FormItem label="抄送人" name="copyUserIds">
+                <Select
+                  v-model:value="copyForm.copyUserIds"
+                  :allow-clear="true"
+                  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="抄送意见" name="copyReason">
+                <Textarea
+                  v-model:value="copyForm.copyReason"
+                  placeholder="请输入抄送意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleCopy"
+                  >
+                    {{
+                      getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY)
+                    }}
+                  </Button>
+                  <Button @click="closePopover('copy', copyFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【转办】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.transfer"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.TRANSFER)
+        "
+      >
+        <Button type="dashed" @click="openPopover('transfer')">
+          <IconifyIcon icon="icon-park-outline:share-two" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.TRANSFER) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="transferFormRef"
+              :model="transferForm"
+              :rules="transferFormRule"
+              label-width="100px"
+            >
+              <FormItem label="新审批人" name="assigneeUserId">
+                <Select
+                  v-model:value="transferForm.assigneeUserId"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.nickname"
+                    :value="item.id"
+                  >
+                    {{ item.nickname }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="transferForm.reason"
+                  clearable
+                  placeholder="请输入审批意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleTransfer()"
+                  >
+                    {{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.TRANSFER,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('transfer', transferFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【委派】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.delegate"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.DELEGATE)
+        "
+      >
+        <Button type="dashed" @click="openPopover('delegate')">
+          <IconifyIcon :size="14" icon="icon-park-outline:user-positioning" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="delegateFormRef"
+              :model="delegateForm"
+              :rules="delegateFormRule"
+              label-width="100px"
+            >
+              <FormItem label="接收人" name="delegateUserId">
+                <Select
+                  v-model:value="delegateForm.delegateUserId"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.nickname"
+                    :value="item.id"
+                  >
+                    {{ item.nickname }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="delegateForm.reason"
+                  clearable
+                  placeholder="请输入审批意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleDelegate()"
+                  >
+                    {{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.DELEGATE,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('delegate', delegateFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+      <Popover
+        v-model:open="popOverVisible.addSign"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.ADD_SIGN)
+        "
+      >
+        <Button type="dashed" @click="openPopover('addSign')">
+          <IconifyIcon :size="14" icon="icon-park-outline:plus" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="addSignFormRef"
+              :model="addSignForm"
+              :rules="addSignFormRule"
+              label-width="100px"
+            >
+              <FormItem label="加签处理人" name="addSignUserIds">
+                <Select
+                  v-model:value="addSignForm.addSignUserIds"
+                  :allow-clear="true"
+                  mode="multiple"
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.nickname"
+                    :value="item.id"
+                  >
+                    {{ item.nickname }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="addSignForm.reason"
+                  clearable
+                  placeholder="请输入审批意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handlerAddSign('before')"
+                  >
+                    向前{{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.ADD_SIGN,
+                      )
+                    }}
+                  </Button>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handlerAddSign('after')"
+                  >
+                    向后{{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.ADD_SIGN,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('addSign', addSignFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【减签】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.deleteSign"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="runningTask?.children.length > 0"
+      >
+        <Button type="dashed" @click="openPopover('deleteSign')">
+          <IconifyIcon :size="14" icon="icon-park-outline:minus" /> 减签
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="deleteSignFormRef"
+              :model="deleteSignForm"
+              :rules="deleteSignFormRule"
+              label-width="100px"
+            >
+              <FormItem label="减签人员" name="deleteSignTaskId">
+                <Select
+                  v-model:value="deleteSignForm.deleteSignTaskId"
+                  :allow-clear="true"
+                  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="审批意见" name="reason">
+                <Textarea
+                  v-model:value="deleteSignForm.reason"
+                  clearable
+                  placeholder="请输入审批意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handlerDeleteSign()"
+                  >
+                    减签
+                  </Button>
+                  <Button
+                    @click="closePopover('deleteSign', deleteSignFormRef)"
+                  >
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【退回】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.return"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.RETURN)
+        "
+      >
+        <Button type="dashed" @click="openPopover('return')">
+          <IconifyIcon :size="14" icon="ep:back" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="returnFormRef"
+              :model="returnForm"
+              :rules="returnFormRule"
+              label-width="100px"
+            >
+              <FormItem label="退回节点" name="targetTaskDefinitionKey">
+                <Select
+                  v-model:value="returnForm.targetTaskDefinitionKey"
+                  :allow-clear="true"
+                  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="退回理由" name="returnReason">
+                <Textarea
+                  v-model:value="returnForm.returnReason"
+                  clearable
+                  placeholder="请输入退回理由"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleReturn()"
+                  >
+                    {{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.RETURN,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('return', returnFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+      <Popover
+        v-model:open="popOverVisible.cancel"
+        placement="top"
+        :width="500"
+        trigger="click"
+        v-if="
+          userId === processInstance?.startUser?.id &&
+          !isEndProcessStatus(processInstance?.status)
+        "
+      >
+        <Button type="dashed" @click="openPopover('cancel')">
+          <IconifyIcon :size="14" icon="icon-park-outline:back" />
+          取消
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex w-[400px] flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="cancelFormRef"
+              :model="cancelForm"
+              :rules="cancelFormRule"
+              label-width="100px"
+            >
+              <FormItem label="取消理由" name="cancelReason">
+                <Alert
+                  class="text-12px mb-2"
+                  type="warning"
+                  size="small"
+                  show-icon
+                  message="友情提醒：取消后，该审批流程将自动结束。"
+                />
+                <Textarea
+                  v-model:value="cancelForm.cancelReason"
+                  clearable
+                  placeholder="请输入取消理由"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem :wrapper-col="{ span: 18, offset: 0 }">
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleCancel()"
+                  >
+                    确认
+                  </Button>
+
+                  <Button @click="closePopover('cancel', cancelFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+      <!-- 【再次提交】 按钮-->
+      <Button
+        type="dashed"
+        @click="handleReCreate()"
+        v-if="
+          userId === processInstance?.startUser?.id &&
+          isEndProcessStatus(processInstance?.status) &&
+          processDefinition?.formType === 10
+        "
+      >
+        <IconifyIcon :size="14" icon="icon-park-outline:refresh" /> 再次提交
+      </Button>
+    </Space>
+  </div>
+
+  <!-- 签名弹窗 -->
+  <Signature ref="signRef" @success="handleSignFinish" />
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
new file mode 100644
index 000000000..6eff26be0
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, message, Space, Tooltip } from 'ant-design-vue';
+import Vue3Signature from 'vue3-signature';
+
+import { uploadFile } from '#/api/infra/file';
+import { download } from '#/utils';
+
+defineOptions({
+  name: 'BpmProcessInstanceSignature',
+});
+
+const emits = defineEmits(['success']);
+
+const [Modal, modalApi] = useVbenModal({
+  title: '流程签名',
+  onOpenChange(visible) {
+    if (!visible) {
+      modalApi.close();
+    }
+  },
+  onConfirm: () => {
+    submit();
+  },
+});
+
+const signature = ref<InstanceType<typeof Vue3Signature>>();
+
+const open = async () => {
+  modalApi.open();
+};
+
+defineExpose({ open });
+
+const submit = async () => {
+  message.success({
+    content: '签名上传中请稍等。。。',
+  });
+  const signFileUrl = await uploadFile({
+    file: download.base64ToFile(
+      signature?.value?.save('image/jpeg') || '',
+      '签名',
+    ),
+  });
+  emits('success', signFileUrl);
+  modalApi.close();
+};
+</script>
+
+<template>
+  <Modal class="h-[500px] w-[900px]">
+    <div class="mb-2 flex justify-end">
+      <Space>
+        <Tooltip title="撤销上一步操作">
+          <Button @click="signature?.undo()">
+            <template #icon>
+              <IconifyIcon icon="mi:undo" class="mb-[4px] size-[16px]" />
+            </template>
+            撤销
+          </Button>
+        </Tooltip>
+
+        <Tooltip title="清空画布">
+          <Button @click="signature?.clear()">
+            <template #icon>
+              <IconifyIcon
+                icon="mdi:delete-outline"
+                class="mb-[4px] size-[16px]"
+              />
+            </template>
+            <span>清除</span>
+          </Button>
+        </Tooltip>
+      </Space>
+    </div>
+
+    <Vue3Signature
+      class="mx-auto border-[1px] border-solid border-gray-300"
+      ref="signature"
+      w="874px"
+      h="324px"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
new file mode 100644
index 000000000..5f1c9bb31
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProcessInstanceSimpleViewer' });
+</script>
+
+<template>
+  <div>
+    <h1>Simple BPM Viewer</h1>
+  </div>
+</template>
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 408e6acb9..23b3aa217 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
@@ -43,7 +43,7 @@ const statusIconMap: Record<
   // 审批未开始
   '-1': { color: '#909398', icon: 'mdi:clock-outline' },
   // 待审批
-  '0': { color: '#00b32a', icon: 'mdi:loading' },
+  '0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' },
   // 审批中
   '1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
   // 审批通过
diff --git a/apps/web-antd/src/views/bpm/task/copy/index.vue b/apps/web-antd/src/views/bpm/task/copy/index.vue
index 31c0e1d92..41f4b3fa9 100644
--- a/apps/web-antd/src/views/bpm/task/copy/index.vue
+++ b/apps/web-antd/src/views/bpm/task/copy/index.vue
@@ -45,14 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
+  } as VxeTableGridOptions<BpmProcessInstanceApi.CopyVO>,
 });
 
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
   row,
-}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
+}: OnActionClickParams<BpmProcessInstanceApi.CopyVO>) {
   switch (code) {
     case 'detail': {
       onDetail(row);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e1059045..4788eecae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -528,6 +528,9 @@ catalogs:
     vue-tsc:
       specifier: 2.2.10
       version: 2.2.10
+    vue3-signature:
+      specifier: ^0.2.4
+      version: 0.2.4
     vxe-pc-ui:
       specifier: ^4.5.35
       version: 4.6.8
@@ -758,6 +761,9 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+      vue3-signature:
+        specifier: 'catalog:'
+        version: 0.2.4(vue@3.5.13(typescript@5.8.3))
     devDependencies:
       '@types/crypto-js':
         specifier: 'catalog:'
@@ -6220,6 +6226,9 @@ packages:
     resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
     engines: {node: '>=18'}
 
+  default-passive-events@2.0.0:
+    resolution: {integrity: sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==}
+
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -10018,6 +10027,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  signature_pad@3.0.0-beta.4:
+    resolution: {integrity: sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw==}
+
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
@@ -11163,6 +11175,11 @@ packages:
     peerDependencies:
       vue: ^3.5.13
 
+  vue3-signature@0.2.4:
+    resolution: {integrity: sha512-XFwwFVK9OG3F085pKIq2SlNVqx32WdFH+TXbGEWc5FfEKpx8oMmZuAwZZ50K/pH2FgmJSE8IRwU9DDhrLpd6iA==}
+    peerDependencies:
+      vue: ^3.5.13
+
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -16351,6 +16368,8 @@ snapshots:
       bundle-name: 4.1.0
       default-browser-id: 5.0.0
 
+  default-passive-events@2.0.0: {}
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
@@ -20470,6 +20489,8 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  signature_pad@3.0.0-beta.4: {}
+
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
@@ -21801,6 +21822,12 @@ snapshots:
       is-plain-object: 3.0.1
       vue: 3.5.13(typescript@5.8.3)
 
+  vue3-signature@0.2.4(vue@3.5.13(typescript@5.8.3)):
+    dependencies:
+      default-passive-events: 2.0.0
+      signature_pad: 3.0.0-beta.4
+      vue: 3.5.13(typescript@5.8.3)
+
   vue@3.5.13(typescript@5.8.3):
     dependencies:
       '@vue/compiler-dom': 3.5.13
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 56c6c2e75..c59b29b0b 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -198,3 +198,4 @@ catalog:
   zod: ^3.24.3
   zod-defaults: ^0.1.3
   highlight.js: ^11.11.1
+  vue3-signature: ^0.2.4