diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
index 4f9a51c10..713fedc47 100644
--- a/apps/web-antd/src/api/bpm/model/index.ts
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -18,6 +18,7 @@ export namespace BpmModelApi {
     deploymentTime: number;
     suspensionState: number;
     formType?: number;
+    formCustomViewPath?: string;
   }
 
   /** 流程模型 VO */
diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index cec0a1fdd..f287ee0be 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -1,7 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
 import type { BpmModelApi } from '#/api/bpm/model';
-import type { CandidateStrategy, NodeType } from '#/utils';
+import type { CandidateStrategyEnum, NodeTypeEnum } from '#/utils';
 
 import { requestClient } from '#/api/request';
 
@@ -29,12 +29,12 @@ export namespace BpmProcessInstanceApi {
 
   // 审批节点信息
   export type ApprovalNodeInfo = {
-    candidateStrategy?: CandidateStrategy;
+    candidateStrategy?: CandidateStrategyEnum;
     candidateUsers?: User[];
     endTime?: Date;
     id: number;
     name: string;
-    nodeType: NodeType;
+    nodeType: NodeTypeEnum;
     startTime?: Date;
     status: number;
     tasks: ApprovalTaskInfo[];
@@ -46,14 +46,25 @@ export namespace BpmProcessInstanceApi {
     createTime: string;
     endTime: string;
     fields: string[];
+    formVariables: Record<string, any>;
     id: number;
     name: string;
     processDefinition?: BpmModelApi.ProcessDefinitionVO;
     processDefinitionId: string;
     remark: string;
     result: number;
+    startTime?: Date;
+    startUser?: User;
+    status: number;
+    tasks?: BpmProcessInstanceApi.Task[];
+  };
+
+  export type ApprovalDetail = {
+    activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
+    formFieldsPermission: any;
+    processDefinition: BpmModelApi.ProcessDefinitionVO;
+    processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
     status: number;
-    tasks: BpmProcessInstanceApi.Task[];
   };
 }
 
@@ -133,7 +144,7 @@ export async function updateProcessInstance(
 
 /** 获取审批详情 */
 export async function getApprovalDetail(params: any) {
-  return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
+  return requestClient.get<BpmProcessInstanceApi.ApprovalDetail>(
     `/bpm/process-instance/get-approval-detail`,
     { params },
   );
@@ -156,7 +167,7 @@ export async function getFormFieldsPermission(params: any) {
 }
 
 /** 获取流程实例 BPMN 模型视图 */
-export async function getProcessInstanceBpmnModelView(id: number) {
+export async function getProcessInstanceBpmnModelView(id: string) {
   return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
     `/bpm/process-instance/get-bpmn-model-view?id=${id}`,
   );
diff --git a/apps/web-antd/src/components/user-select-modal/index.ts b/apps/web-antd/src/components/user-select-modal/index.ts
new file mode 100644
index 000000000..9cb1c93fd
--- /dev/null
+++ b/apps/web-antd/src/components/user-select-modal/index.ts
@@ -0,0 +1 @@
+export { default as UserSelectModal } from './user-select-modal.vue';
diff --git a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
new file mode 100644
index 000000000..7437a8b28
--- /dev/null
+++ b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
@@ -0,0 +1,528 @@
+<script lang="ts" setup>
+import type { Key } from 'ant-design-vue/es/table/interface';
+
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import {
+  Button,
+  Col,
+  Input,
+  message,
+  Pagination,
+  Row,
+  Spin,
+  Transfer,
+  Tree,
+} from 'ant-design-vue';
+
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getUserPage } from '#/api/system/user';
+
+// 部门树节点接口
+interface DeptTreeNode {
+  key: string;
+  title: string;
+  children?: DeptTreeNode[];
+}
+
+defineOptions({ name: 'UserSelectModal' });
+
+const props = withDefaults(
+  defineProps<{
+    cancelText?: string;
+    confirmText?: string;
+    multiple?: boolean;
+    title?: string;
+    value?: number[];
+  }>(),
+  {
+    title: '选择用户',
+    multiple: true,
+    value: () => [],
+    confirmText: '确定',
+    cancelText: '取消',
+  },
+);
+
+const emit = defineEmits<{
+  cancel: [];
+  confirm: [value: number[]];
+  'update:value': [value: number[]];
+}>();
+
+// 部门树数据
+const deptTree = ref<any[]>([]);
+const deptList = ref<SystemDeptApi.Dept[]>([]);
+const expandedKeys = ref<Key[]>([]);
+const selectedDeptId = ref<number>();
+const deptSearchKeys = ref('');
+
+// 加载状态
+const loading = ref(false);
+
+// 用户数据管理
+const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
+const selectedUserIds = ref<string[]>([]);
+
+// 左侧列表状态
+const leftListState = ref({
+  loading: false,
+  searchValue: '',
+  dataSource: [] as SystemUserApi.User[],
+  pagination: {
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  },
+});
+
+// 右侧列表状态
+const rightListState = ref({
+  searchValue: '',
+  dataSource: [] as SystemUserApi.User[],
+  pagination: {
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  },
+});
+
+// 计算属性：Transfer 数据源
+const transferDataSource = computed(() => {
+  return [
+    ...leftListState.value.dataSource,
+    ...rightListState.value.dataSource,
+  ];
+});
+
+// 过滤部门树数据
+const filteredDeptTree = computed(() => {
+  if (!deptSearchKeys.value) return deptTree.value;
+
+  const filterNode = (node: any): any => {
+    const title = node?.title?.toLowerCase();
+    const search = deptSearchKeys.value.toLowerCase();
+
+    // 如果当前节点匹配
+    if (title.includes(search)) {
+      return {
+        ...node,
+        children: node.children?.map((child: any) => filterNode(child)),
+      };
+    }
+
+    // 如果当前节点不匹配，检查子节点
+    if (node.children) {
+      const filteredChildren = node.children
+        .map((child: any) => filterNode(child))
+        .filter(Boolean);
+
+      if (filteredChildren.length > 0) {
+        return {
+          ...node,
+          children: filteredChildren,
+        };
+      }
+    }
+
+    return null;
+  };
+
+  return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
+});
+
+// 加载用户数据
+const loadUserData = async (pageNo: number, pageSize: number) => {
+  leftListState.value.loading = true;
+  try {
+    const { list, total } = await getUserPage({
+      pageNo,
+      pageSize,
+      deptId: selectedDeptId.value,
+      username: leftListState.value.searchValue || undefined,
+    });
+
+    leftListState.value.dataSource = list;
+    leftListState.value.pagination.total = total;
+    leftListState.value.pagination.current = pageNo;
+    leftListState.value.pagination.pageSize = pageSize;
+
+    // 更新用户列表缓存
+    const newUsers = list.filter(
+      (user) => !userList.value.some((u) => u.id === user.id),
+    );
+    if (newUsers.length > 0) {
+      userList.value.push(...newUsers);
+    }
+  } finally {
+    leftListState.value.loading = false;
+  }
+};
+
+// 更新右侧列表数据
+const updateRightListData = () => {
+  // 获取选中的用户
+  const selectedUsers = userList.value.filter((user) =>
+    selectedUserIds.value.includes(String(user.id)),
+  );
+
+  // 应用搜索过滤
+  const filteredUsers = rightListState.value.searchValue
+    ? selectedUsers.filter((user) =>
+        user.nickname
+          .toLowerCase()
+          .includes(rightListState.value.searchValue.toLowerCase()),
+      )
+    : selectedUsers;
+
+  // 更新总数
+  rightListState.value.pagination.total = filteredUsers.length;
+
+  // 应用分页
+  const { current, pageSize } = rightListState.value.pagination;
+  const startIndex = (current - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+
+  rightListState.value.dataSource = filteredUsers.slice(startIndex, endIndex);
+};
+
+// 处理左侧分页变化
+const handleLeftPaginationChange = async (page: number, pageSize: number) => {
+  await loadUserData(page, pageSize);
+};
+
+// 处理右侧分页变化
+const handleRightPaginationChange = (page: number, pageSize: number) => {
+  rightListState.value.pagination.current = page;
+  rightListState.value.pagination.pageSize = pageSize;
+  updateRightListData();
+};
+
+// 处理用户搜索
+const handleUserSearch = async (direction: string, value: string) => {
+  if (direction === 'left') {
+    leftListState.value.searchValue = value;
+    leftListState.value.pagination.current = 1;
+    await loadUserData(1, leftListState.value.pagination.pageSize);
+  } else {
+    rightListState.value.searchValue = value;
+    rightListState.value.pagination.current = 1;
+    updateRightListData();
+  }
+};
+
+// 处理用户选择变化
+const handleUserChange = (targetKeys: string[]) => {
+  selectedUserIds.value = targetKeys;
+  emit('update:value', targetKeys.map(Number));
+  updateRightListData();
+};
+
+// 重置数据
+const resetData = () => {
+  userList.value = [];
+  selectedUserIds.value = [];
+
+  // 取消部门选中
+  selectedDeptId.value = undefined;
+
+  // 取消选中的用户
+  selectedUserIds.value = [];
+
+  leftListState.value = {
+    loading: false,
+    searchValue: '',
+    dataSource: [],
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
+  };
+
+  rightListState.value = {
+    searchValue: '',
+    dataSource: [],
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
+  };
+};
+
+// 打开弹窗
+const open = async () => {
+  resetData();
+  loading.value = true;
+  try {
+    // 加载部门数据
+    const deptData = await getSimpleDeptList();
+    deptList.value = deptData;
+    const treeData = handleTree(deptData);
+    deptTree.value = treeData.map((node) => processDeptNode(node));
+    expandedKeys.value = deptTree.value.map((node) => node.key);
+
+    // 加载初始用户数据
+    await loadUserData(1, leftListState.value.pagination.pageSize);
+
+    // 设置已选用户
+    if (props.value?.length) {
+      selectedUserIds.value = props.value.map(String);
+      // 加载已选用户的完整信息
+      const { list } = await getUserPage({
+        pageNo: 1,
+        pageSize: props.value.length,
+        userIds: props.value,
+      });
+      userList.value.push(...list);
+      updateRightListData();
+    }
+
+    modalApi.open();
+  } finally {
+    loading.value = false;
+  }
+};
+
+// TODO   后端接口目前仅支持  username 检索， 筛选条件需要跟后端请求参数保持一致。
+const filterOption = (inputValue: string, option: any) => {
+  return option.username.toLowerCase().includes(inputValue.toLowerCase());
+};
+
+// 处理部门树展开/折叠
+const handleExpand = (keys: Key[]) => {
+  expandedKeys.value = keys;
+};
+
+// 处理部门搜索
+const handleDeptSearch = (value: string) => {
+  deptSearchKeys.value = value;
+
+  // 如果有搜索结果，自动展开所有节点
+  if (value) {
+    const getAllKeys = (nodes: any[]): string[] => {
+      const keys: string[] = [];
+      for (const node of nodes) {
+        keys.push(node.key);
+        if (node.children) {
+          keys.push(...getAllKeys(node.children));
+        }
+      }
+      return keys;
+    };
+    expandedKeys.value = getAllKeys(deptTree.value);
+  } else {
+    // 清空搜索时，只展开第一级节点
+    expandedKeys.value = deptTree.value.map((node) => node.key);
+  }
+};
+
+// 处理部门选择
+const handleDeptSelect = async (selectedKeys: Key[], _info: any) => {
+  // 更新选中的部门ID
+  const newDeptId =
+    selectedKeys.length > 0 ? Number(selectedKeys[0]) : undefined;
+  selectedDeptId.value =
+    newDeptId === selectedDeptId.value ? undefined : newDeptId;
+
+  // 重置分页并加载数据
+  const { pageSize } = leftListState.value.pagination;
+  leftListState.value.pagination.current = 1;
+  await loadUserData(1, pageSize);
+};
+
+// 确认选择
+const handleConfirm = () => {
+  if (selectedUserIds.value.length === 0) {
+    message.warning('请选择用户');
+    return;
+  }
+  emit('confirm', selectedUserIds.value.map(Number));
+  modalApi.close();
+};
+
+// 取消选择
+const handleCancel = () => {
+  emit('cancel');
+  modalApi.close();
+  // 确保在动画结束后再重置数据
+  setTimeout(() => {
+    resetData();
+  }, 300);
+};
+
+// 关闭弹窗
+const handleClosed = () => {
+  resetData();
+};
+
+// 弹窗配置
+const [ModalComponent, modalApi] = useVbenModal({
+  title: props.title,
+  onCancel: handleCancel,
+  onClosed: handleClosed,
+  destroyOnClose: true,
+});
+
+// 递归处理部门树节点
+const processDeptNode = (node: any): DeptTreeNode => {
+  return {
+    key: String(node.id),
+    title: `${node.name} (${node.id})`,
+    children: node.children?.map((child: any) => processDeptNode(child)),
+  };
+};
+
+defineExpose({
+  open,
+});
+</script>
+
+<template>
+  <ModalComponent class="w-[1000px]" key="user-select-modal">
+    <Spin :spinning="loading">
+      <Row :gutter="[16, 16]">
+        <Col :span="6">
+          <div class="h-[500px] overflow-auto rounded border border-gray-200">
+            <div class="border-b border-gray-200 p-2">
+              <Input
+                v-model:value="deptSearchKeys"
+                placeholder="搜索部门"
+                allow-clear
+                @input="(e) => handleDeptSearch(e.target?.value ?? '')"
+              />
+            </div>
+            <Tree
+              :tree-data="filteredDeptTree"
+              :expanded-keys="expandedKeys"
+              :selected-keys="selectedDeptId ? [String(selectedDeptId)] : []"
+              @select="handleDeptSelect"
+              @expand="handleExpand"
+            />
+          </div>
+        </Col>
+        <Col :span="18">
+          <Transfer
+            :row-key="(record) => String(record.id)"
+            :data-source="transferDataSource"
+            v-model:target-keys="selectedUserIds"
+            :titles="['未选', '已选']"
+            :show-search="true"
+            :show-select-all="true"
+            :filter-option="filterOption"
+            @change="handleUserChange"
+            @search="handleUserSearch"
+          >
+            <template #render="item">
+              {{ item.nickname }} ({{ item.id }})
+            </template>
+
+            <template #footer="{ direction }">
+              <div v-if="direction === 'left'">
+                <Pagination
+                  v-model:current="leftListState.pagination.current"
+                  v-model:page-size="leftListState.pagination.pageSize"
+                  :total="leftListState.pagination.total"
+                  :show-size-changer="true"
+                  :show-total="(total) => `共 ${total} 条`"
+                  size="small"
+                  @change="handleLeftPaginationChange"
+                />
+              </div>
+
+              <div v-if="direction === 'right'">
+                <Pagination
+                  v-model:current="rightListState.pagination.current"
+                  v-model:page-size="rightListState.pagination.pageSize"
+                  :total="rightListState.pagination.total"
+                  :show-size-changer="true"
+                  :show-total="(total) => `共 ${total} 条`"
+                  size="small"
+                  @change="handleRightPaginationChange"
+                />
+              </div>
+            </template>
+          </Transfer>
+        </Col>
+      </Row>
+    </Spin>
+    <template #footer>
+      <Button
+        type="primary"
+        :disabled="selectedUserIds.length === 0"
+        @click="handleConfirm"
+      >
+        {{ confirmText }}
+      </Button>
+      <Button @click="handleCancel">{{ cancelText }}</Button>
+    </template>
+  </ModalComponent>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-transfer) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 500px;
+}
+
+:deep(.ant-transfer-list) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 300px !important;
+  height: 100%;
+}
+
+:deep(.ant-transfer-list-header) {
+  flex-shrink: 0;
+}
+
+:deep(.ant-transfer-list-search) {
+  flex-shrink: 0;
+  padding: 8px;
+}
+
+:deep(.ant-transfer-list-body) {
+  flex: 1;
+  overflow: auto;
+}
+
+:deep(.ant-transfer-list-content) {
+  height: auto !important;
+}
+
+:deep(.ant-transfer-list-content-item) {
+  padding: 6px 12px;
+}
+
+:deep(.ant-transfer-operation) {
+  padding: 0 8px;
+}
+
+:deep(.ant-transfer-list-footer) {
+  flex-shrink: 0;
+}
+
+:deep(.ant-pagination) {
+  margin: 8px;
+  font-size: 12px;
+  text-align: right;
+}
+
+:deep(.ant-pagination-options) {
+  margin-left: 8px;
+}
+
+:deep(.ant-pagination-options-size-changer) {
+  margin-right: 8px;
+}
+</style>
diff --git a/apps/web-antd/src/router/routes/modules/bpm.ts b/apps/web-antd/src/router/routes/modules/bpm.ts
new file mode 100644
index 000000000..20688f3e3
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/bpm.ts
@@ -0,0 +1,35 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/bpm',
+    name: 'bpm',
+    meta: {
+      title: '工作流',
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: 'process-instance/detail',
+        component: () => import('#/views/bpm/processInstance/detail/index.vue'),
+        name: 'BpmProcessInstanceDetail',
+        meta: {
+          title: '流程详情',
+          activePath: '/bpm/task/my',
+          icon: 'ant-design:history-outlined',
+          keepAlive: false,
+          hideInMenu: true,
+        },
+        props: (route) => {
+          return {
+            id: route.query.id,
+            taskId: route.query.taskId,
+            activityId: route.query.activityId,
+          };
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-antd/src/utils/constants.ts b/apps/web-antd/src/utils/constants.ts
index ec58eec82..78da9f947 100644
--- a/apps/web-antd/src/utils/constants.ts
+++ b/apps/web-antd/src/utils/constants.ts
@@ -466,7 +466,7 @@ export const BpmAutoApproveType = {
 };
 
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
-export enum CandidateStrategy {
+export enum CandidateStrategyEnum {
   /**
    * 审批人自选
    */
@@ -532,7 +532,7 @@ export enum CandidateStrategy {
 /**
  * 节点类型
  */
-export enum NodeType {
+export enum NodeTypeEnum {
   /**
    * 子流程节点
    */
@@ -593,3 +593,44 @@ export enum NodeType {
    */
   USER_TASK_NODE = 11,
 }
+
+/**
+ * 任务状态枚举
+ */
+export enum TaskStatusEnum {
+  /**
+   * 审批通过
+   */
+  APPROVE = 2,
+
+  /**
+   * 审批通过中
+   */
+  APPROVING = 7,
+  /**
+   * 已取消
+   */
+  CANCEL = 4,
+  /**
+   * 未开始
+   */
+  NOT_START = -1,
+
+  /**
+   * 审批不通过
+   */
+  REJECT = 3,
+
+  /**
+   * 已退回
+   */
+  RETURN = 5,
+  /**
+   * 审批中
+   */
+  RUNNING = 1,
+  /**
+   * 待审批
+   */
+  WAIT = 0,
+}
diff --git a/apps/web-antd/src/utils/formCreate.ts b/apps/web-antd/src/utils/formCreate.ts
new file mode 100644
index 000000000..d7f944c0f
--- /dev/null
+++ b/apps/web-antd/src/utils/formCreate.ts
@@ -0,0 +1,64 @@
+/**
+ * 针对 https://github.com/xaboy/form-create-designer 封装的工具类
+ */
+
+import { isRef } from 'vue';
+
+// 编码表单 Conf
+export const encodeConf = (designerRef: object) => {
+  // @ts-ignore designerRef.value is dynamically added by form-create-designer
+  return JSON.stringify(designerRef.value.getOption());
+};
+
+// 编码表单 Fields
+export const encodeFields = (designerRef: object) => {
+  // @ts-ignore designerRef.value is dynamically added by form-create-designer
+  const rule = JSON.parse(designerRef.value.getJson());
+  const fields: string[] = [];
+  rule.forEach((item: unknown) => {
+    fields.push(JSON.stringify(item));
+  });
+  return fields;
+};
+
+// 解码表单 Fields
+export const decodeFields = (fields: string[]) => {
+  const rule: object[] = [];
+  fields.forEach((item) => {
+    rule.push(JSON.parse(item));
+  });
+  return rule;
+};
+
+// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
+export const setConfAndFields = (
+  designerRef: object,
+  conf: string,
+  fields: string,
+) => {
+  // @ts-ignore designerRef.value is dynamically added by form-create-designer
+  designerRef.value.setOption(JSON.parse(conf));
+  // @ts-ignore designerRef.value is dynamically added by form-create-designer
+  designerRef.value.setRule(decodeFields(fields));
+};
+
+// 设置表单的 Conf 和 Fields，适用 form-create 场景
+export const setConfAndFields2 = (
+  detailPreview: object,
+  conf: string,
+  fields: string[],
+  value?: object,
+) => {
+  if (isRef(detailPreview)) {
+    // @ts-ignore detailPreview.value is dynamically added by form-create-designer
+    detailPreview = detailPreview.value;
+  }
+  // @ts-ignore detailPreview properties are dynamically added by form-create-designer
+  detailPreview.option = JSON.parse(conf);
+  // @ts-ignore detailPreview properties are dynamically added by form-create-designer
+  detailPreview.rule = decodeFields(fields);
+  if (value) {
+    // @ts-ignore detailPreview properties are dynamically added by form-create-designer
+    detailPreview.value = value;
+  }
+};
diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts
index dfcc60466..022e6441d 100644
--- a/apps/web-antd/src/utils/index.ts
+++ b/apps/web-antd/src/utils/index.ts
@@ -1,5 +1,7 @@
 export * from './constants';
 export * from './dict';
 export * from './formatTime';
+export * from './formCreate';
 export * from './rangePickerProps';
+export * from './routerHelper';
 export * from './validator';
diff --git a/apps/web-antd/src/utils/routerHelper.ts b/apps/web-antd/src/utils/routerHelper.ts
new file mode 100644
index 000000000..d4c7ac5d0
--- /dev/null
+++ b/apps/web-antd/src/utils/routerHelper.ts
@@ -0,0 +1,15 @@
+import { defineAsyncComponent } from 'vue';
+
+const modules = import.meta.glob('../views/**/*.{vue,tsx}');
+/**
+ * 注册一个异步组件
+ * @param componentPath 例:/bpm/oa/leave/detail
+ */
+export const registerComponent = (componentPath: string) => {
+  for (const item in modules) {
+    if (item.includes(componentPath)) {
+      // 使用异步组件的方式来动态加载组件
+      return defineAsyncComponent(modules[item] as any);
+    }
+  }
+};
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
new file mode 100644
index 000000000..74ee5c766
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -0,0 +1,354 @@
+<script lang="ts" setup>
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { nextTick, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import {
+  SvgBpmApproveIcon,
+  SvgBpmCancelIcon,
+  SvgBpmRejectIcon,
+  SvgBpmRunningIcon,
+} from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  Avatar,
+  Button,
+  Card,
+  Col,
+  message,
+  Row,
+  TabPane,
+  Tabs,
+} from 'ant-design-vue';
+
+import {
+  getApprovalDetail as getApprovalDetailApi,
+  getProcessInstanceBpmnModelView,
+} from '#/api/bpm/processInstance';
+import { getSimpleUserList } from '#/api/system/user';
+import DictTag from '#/components/dict-tag/dict-tag.vue';
+import {
+  BpmModelFormType,
+  BpmModelType,
+  DICT_TYPE,
+  registerComponent,
+  setConfAndFields2,
+  TaskStatusEnum,
+} from '#/utils';
+
+import TimeLine from './modules/time-line.vue';
+
+defineOptions({ name: 'BpmProcessInstanceDetail' });
+
+const props = defineProps<{
+  activityId?: string; // 流程活动编号，用于抄送查看
+  id: string; // 流程实例的编号
+  taskId?: string; // 任务编号
+}>();
+
+enum FieldPermissionType {
+  /**
+   * 隐藏
+   */
+  // eslint-disable-next-line no-unused-vars
+  NONE = '3',
+  /**
+   * 只读
+   */
+  // eslint-disable-next-line no-unused-vars
+  READ = '1',
+  /**
+   * 编辑
+   */
+  // eslint-disable-next-line no-unused-vars
+  WRITE = '2',
+}
+
+const processInstanceLoading = ref(false); // 流程实例的加载中
+const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
+const processDefinition = ref<any>({}); // 流程定义
+const processModelView = ref<any>({}); // 流程模型视图
+// const operationButtonRef = ref(); // 操作按钮组件 ref
+const auditIconsMap: {
+  [key: string]:
+    | typeof SvgBpmApproveIcon
+    | typeof SvgBpmCancelIcon
+    | typeof SvgBpmRejectIcon
+    | typeof SvgBpmRunningIcon;
+} = {
+  [TaskStatusEnum.RUNNING]: SvgBpmRunningIcon,
+  [TaskStatusEnum.APPROVE]: SvgBpmApproveIcon,
+  [TaskStatusEnum.REJECT]: SvgBpmRejectIcon,
+  [TaskStatusEnum.CANCEL]: SvgBpmCancelIcon,
+  [TaskStatusEnum.APPROVING]: SvgBpmApproveIcon,
+  [TaskStatusEnum.RETURN]: SvgBpmRejectIcon,
+  [TaskStatusEnum.WAIT]: SvgBpmRunningIcon,
+};
+
+// ========== 申请信息 ==========
+const fApi = ref<any>(); //
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {},
+}); // 流程实例的表单详情
+
+const writableFields: Array<string> = []; // 表单可以编辑的字段
+
+/** 加载流程实例 */
+const BusinessFormComponent = ref<any>(null); // 异步组件
+
+/** 获取详情 */
+async function getDetail() {
+  // 获得审批详情
+  getApprovalDetail();
+
+  // 获得流程模型视图
+  getProcessModelView();
+}
+
+async function getApprovalDetail() {
+  processInstanceLoading.value = true;
+  try {
+    const param = {
+      processInstanceId: props.id,
+      activityId: props.activityId,
+      taskId: props.taskId,
+    };
+    const data = await getApprovalDetailApi(param);
+
+    if (!data) {
+      message.error('查询不到审批详情信息！');
+    }
+
+    if (!data.processDefinition || !data.processInstance) {
+      message.error('查询不到流程信息！');
+    }
+
+    processInstance.value = data.processInstance;
+    processDefinition.value = data.processDefinition;
+
+    // 设置表单信息
+    if (processDefinition.value.formType === BpmModelFormType.NORMAL) {
+      // 获取表单字段权限
+      const formFieldsPermission = data.formFieldsPermission;
+      // 清空可编辑字段为空
+      writableFields.splice(0);
+      if (detailForm.value.rule?.length > 0) {
+        // 避免刷新 form-create 显示不了
+        detailForm.value.value = processInstance.value.formVariables;
+      } else {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.value.formConf,
+          processDefinition.value.formFields,
+          processInstance.value.formVariables,
+        );
+      }
+      nextTick().then(() => {
+        fApi.value?.btn.show(false);
+        fApi.value?.resetBtn.show(false);
+        fApi.value?.disabled(true);
+        // 设置表单字段权限
+        if (formFieldsPermission) {
+          Object.keys(data.formFieldsPermission).forEach((item) => {
+            setFieldPermission(item, formFieldsPermission[item]);
+          });
+        }
+      });
+    } else {
+      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+      BusinessFormComponent.value = registerComponent(
+        data?.processDefinition?.formCustomViewPath || '',
+      );
+    }
+
+    // 获取审批节点，显示 Timeline 的数据
+    activityNodes.value = data.activityNodes;
+  } catch {
+    message.error('获取审批详情失败！');
+  } finally {
+    processInstanceLoading.value = false;
+  }
+}
+
+/** 获取流程模型视图*/
+const getProcessModelView = async () => {
+  if (BpmModelType.BPMN === processDefinition.value?.modelType) {
+    // 重置，解决 BPMN 流程图刷新不会重新渲染问题
+    processModelView.value = {
+      bpmnXml: '',
+    };
+  }
+  const data = await getProcessInstanceBpmnModelView(props.id);
+  if (data) {
+    processModelView.value = data;
+  }
+};
+
+// 审批节点信息
+const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
+/**
+ * 设置表单权限
+ */
+const setFieldPermission = (field: string, permission: string) => {
+  if (permission === FieldPermissionType.READ) {
+    // @ts-ignore
+    fApi.value?.disabled(true, field);
+  }
+  if (permission === FieldPermissionType.WRITE) {
+    // @ts-ignore
+    fApi.value?.disabled(false, field);
+    // 加入可以编辑的字段
+    writableFields.push(field);
+  }
+  if (permission === FieldPermissionType.NONE) {
+    // @ts-ignore
+    fApi.value?.hidden(true, field);
+  }
+};
+
+/**
+ * 操作成功后刷新
+ */
+// const refresh = () => {
+//   // 重新获取详情
+//   getDetail();
+// };
+
+/** 当前的Tab */
+const activeTab = ref('form');
+
+/** 初始化 */
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+onMounted(async () => {
+  getDetail();
+  // 获得用户列表
+  userOptions.value = await getSimpleUserList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Card
+      class="h-full"
+      :body-style="{
+        height: 'calc(100% - 140px)',
+        overflowY: 'auto',
+        paddingTop: '12px',
+      }"
+    >
+      <template #title>
+        <span class="text-[#878c93]">编号：{{ id || '-' }}</span>
+      </template>
+
+      <div class="flex h-[100%] flex-col">
+        <!-- 流程基本信息 -->
+        <div class="flex flex-col gap-2">
+          <div class="mb-10px h-40px flex items-center gap-5">
+            <div class="mb-5px text-[26px] font-bold">
+              {{ processInstance?.name }}
+            </div>
+            <DictTag
+              v-if="processInstance?.status"
+              :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+              :value="processInstance.status"
+            />
+          </div>
+
+          <div class="mb-10px text-13px h-35px flex items-center gap-5">
+            <div
+              class="flex items-center gap-2 rounded-3xl bg-gray-100 px-[10px] py-[4px] dark:bg-gray-600"
+            >
+              <Avatar
+                :size="28"
+                v-if="processInstance?.startUser?.avatar"
+                :src="processInstance?.startUser?.avatar"
+              />
+              <Avatar
+                :size="28"
+                v-else-if="processInstance?.startUser?.nickname"
+              >
+                {{ processInstance?.startUser?.nickname.substring(0, 1) }}
+              </Avatar>
+              <span class="text-12px">{{
+                processInstance?.startUser?.nickname
+              }}</span>
+            </div>
+            <div class="text-[#878c93]">
+              {{ formatDateTime(processInstance?.startTime) }} 提交
+            </div>
+          </div>
+
+          <component
+            v-if="processInstance?.status"
+            :is="auditIconsMap[processInstance?.status]"
+            class="absolute right-[20px] top-[10px] size-[150px]"
+          />
+        </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
+                    v-if="
+                      processDefinition?.formType === BpmModelFormType.NORMAL
+                    "
+                  >
+                    <!-- v-model="detailForm.value" -->
+                    <form-create
+                      v-model="detailForm.value"
+                      v-model:api="fApi"
+                      :option="detailForm.option"
+                      :rule="detailForm.rule"
+                    />
+                  </div>
+
+                  <div
+                    v-if="
+                      processDefinition?.formType === BpmModelFormType.CUSTOM
+                    "
+                  >
+                    <BusinessFormComponent :id="processInstance?.businessKey" />
+                  </div>
+                </Col>
+                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
+                  <div class="mt-2">
+                    <TimeLine :activity-nodes="activityNodes" />
+                  </div>
+                </Col>
+              </Row>
+            </TabPane>
+
+            <TabPane tab="流程图" key="diagram">
+              <div>流程图</div>
+            </TabPane>
+
+            <TabPane tab="流转记录" key="record">
+              <div>流转记录</div>
+            </TabPane>
+
+            <!-- TODO 待开发 -->
+            <TabPane tab="流转评论" key="comment" v-if="false">
+              <div>流转评论</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>
+      </template>
+    </Card>
+  </Page>
+</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
new file mode 100644
index 000000000..0a5a3d8fb
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -0,0 +1,451 @@
+<!-- 审批详情的右侧：审批流 -->
+<script lang="ts" setup>
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime, isEmpty } from '@vben/utils';
+
+import { Avatar, Button, Image, Tooltip } from 'ant-design-vue';
+
+import { UserSelectModal } from '#/components/user-select-modal';
+import { CandidateStrategyEnum, NodeTypeEnum, TaskStatusEnum } from '#/utils';
+
+defineOptions({ name: 'BpmProcessInstanceTimeline' });
+
+withDefaults(
+  defineProps<{
+    activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[]; // 审批节点信息
+    showStatusIcon?: boolean; // 是否显示头像右下角状态图标
+  }>(),
+  {
+    showStatusIcon: true, // 默认值为 true
+  },
+);
+
+const emit = defineEmits<{
+  selectUserConfirm: [id: string, userList: any[]];
+}>();
+
+const { push } = useRouter(); // 路由
+
+// 状态图标映射
+const statusIconMap: Record<
+  string,
+  { animation?: string; color: string; icon: string }
+> = {
+  // 审批未开始
+  '-1': { color: '#909398', icon: 'mdi:clock-outline' },
+  // 待审批
+  '0': { color: '#00b32a', icon: 'mdi:loading' },
+  // 审批中
+  '1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
+  // 审批通过
+  '2': { color: '#00b32a', icon: 'mdi:check' },
+  // 审批不通过
+  '3': { color: '#f46b6c', icon: 'mdi:close' },
+  // 已取消
+  '4': { color: '#cccccc', icon: 'mdi:trash-can-outline' },
+  // 退回
+  '5': { color: '#f46b6c', icon: 'mdi:arrow-left' },
+  // 委派中
+  '6': { color: '#448ef7', icon: 'mdi:clock-outline' },
+  // 审批通过中
+  '7': { color: '#00b32a', icon: 'mdi:check' },
+};
+
+// 节点类型图标映射
+const nodeTypeSvgMap = {
+  // 结束节点
+  [NodeTypeEnum.END_EVENT_NODE]: {
+    color: '#909398',
+    icon: 'mdi:power',
+  },
+  // 开始节点
+  [NodeTypeEnum.START_USER_NODE]: {
+    color: '#909398',
+    icon: 'mdi:account-outline',
+  },
+  // 用户任务节点
+  [NodeTypeEnum.USER_TASK_NODE]: {
+    color: '#ff943e',
+    icon: 'tdesign:seal',
+  },
+  // 事务节点
+  [NodeTypeEnum.TRANSACTOR_NODE]: {
+    color: '#ff943e',
+    icon: 'mdi:file-edit-outline',
+  },
+  // 复制任务节点
+  [NodeTypeEnum.COPY_TASK_NODE]: {
+    color: '#3296fb',
+    icon: 'mdi:content-copy',
+  },
+  // 条件分支节点
+  [NodeTypeEnum.CONDITION_NODE]: {
+    color: '#14bb83',
+    icon: 'carbon:flow',
+  },
+  // 并行分支节点
+  [NodeTypeEnum.PARALLEL_BRANCH_NODE]: {
+    color: '#14bb83',
+    icon: 'si:flow-parallel-line',
+  },
+  // 子流程节点
+  [NodeTypeEnum.CHILD_PROCESS_NODE]: {
+    color: '#14bb83',
+    icon: 'icon-park-outline:tree-diagram',
+  },
+};
+
+// 只有状态是 -1、0、1 才展示头像右小角状态小icon
+const onlyStatusIconShow = [-1, 0, 1];
+
+// 获取审批节点类型图标
+const getApprovalNodeTypeIcon = (nodeType: NodeTypeEnum) => {
+  return nodeTypeSvgMap[nodeType]?.icon;
+};
+
+// 获取审批节点图标
+const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeTypeEnum) => {
+  if (taskStatus === TaskStatusEnum.NOT_START) {
+    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
+  }
+
+  if (
+    nodeType === NodeTypeEnum.START_USER_NODE ||
+    nodeType === NodeTypeEnum.USER_TASK_NODE ||
+    nodeType === NodeTypeEnum.TRANSACTOR_NODE ||
+    nodeType === NodeTypeEnum.CHILD_PROCESS_NODE ||
+    nodeType === NodeTypeEnum.END_EVENT_NODE
+  ) {
+    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
+  }
+  return 'mdi:clock-outline';
+};
+
+// 获取审批节点颜色
+const getApprovalNodeColor = (taskStatus: number) => {
+  return statusIconMap[taskStatus]?.color;
+};
+
+// 获取审批节点时间
+const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
+  if (node.nodeType === NodeTypeEnum.START_USER_NODE && node.startTime) {
+    return formatDateTime(node.startTime);
+  }
+  if (node.endTime) {
+    return formatDateTime(node.endTime);
+  }
+  if (node.startTime) {
+    return formatDateTime(node.startTime);
+  }
+  return '';
+};
+
+// 选择自定义审批人
+const userSelectFormRef = ref();
+const customApproveUsers = ref<Record<string, any[]>>({}); // key：activityId，value：用户列表
+
+// 打开选择用户弹窗
+const handleSelectUser = (activityId: string, selectedList: any[]) => {
+  console.log(userSelectFormRef.value);
+  userSelectFormRef.value.open(activityId, selectedList);
+};
+
+// 选择用户完成
+const selectedUsers = ref<number[]>([]);
+const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
+  customApproveUsers.value[activityId] = userList || [];
+  emit('selectUserConfirm', activityId, userList);
+};
+
+/** 跳转子流程 */
+const handleChildProcess = (activity: any) => {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: activity.processInstanceId,
+    },
+  });
+};
+
+// 渲染用户头像和昵称
+const renderUserAvatar = (user: any) => {
+  if (!user) return null;
+
+  return h('div', {}, [
+    user.avatar
+      ? h(Avatar, {
+          class: '!m-[5px]',
+          size: 28,
+          src: user.avatar,
+        })
+      : h(
+          Avatar,
+          {
+            class: '!m-[5px]',
+            size: 28,
+          },
+          {
+            default: () => user.nickname?.slice(0, 1),
+          },
+        ),
+    h('span', { class: 'text-[13px]' }, user.nickname),
+  ]);
+};
+
+// 判断是否需要显示自定义选择审批人
+const shouldShowCustomUserSelect = (
+  activity: BpmProcessInstanceApi.ApprovalNodeInfo,
+) => {
+  return (
+    isEmpty(activity.tasks) &&
+    isEmpty(activity.candidateUsers) &&
+    (CandidateStrategyEnum.START_USER_SELECT === activity.candidateStrategy ||
+      CandidateStrategyEnum.APPROVE_USER_SELECT === activity.candidateStrategy)
+  );
+};
+
+// 判断是否需要显示审批意见
+const shouldShowApprovalReason = (task: any, nodeType: NodeTypeEnum) => {
+  return (
+    task.reason &&
+    [NodeTypeEnum.END_EVENT_NODE, NodeTypeEnum.USER_TASK_NODE].includes(
+      nodeType,
+    )
+  );
+};
+</script>
+
+<template>
+  <a-timeline class="pt-20px">
+    <!-- 遍历每个审批节点 -->
+    <a-timeline-item
+      v-for="(activity, index) in activityNodes"
+      :key="index"
+      :color="getApprovalNodeColor(activity.status)"
+    >
+      <template #dot>
+        <div class="relative">
+          <div
+            class="position-absolute left--10px top--6px flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-[#dedede] bg-[#3f73f7] p-[6px]"
+          >
+            <IconifyIcon
+              :icon="getApprovalNodeTypeIcon(activity.nodeType)"
+              class="size-[24px] text-white"
+            />
+          </div>
+
+          <div
+            v-if="showStatusIcon"
+            class="absolute right-[-10px] top-[18px] flex size-[20px] items-center rounded-full border-[2px] border-solid border-white p-[2px]"
+            :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
+          >
+            <IconifyIcon
+              :icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
+              class="text-white"
+              :class="[statusIconMap[activity.status]?.animation]"
+            />
+          </div>
+        </div>
+      </template>
+
+      <div
+        class="ml-2 flex flex-col items-start gap-2"
+        :id="`activity-task-${activity.id}-${index}`"
+      >
+        <!-- 第一行：节点名称、时间 -->
+        <div class="flex w-full">
+          <div class="font-bold">{{ activity.name }}</div>
+          <!-- 信息：时间 -->
+          <div
+            v-if="activity.status !== TaskStatusEnum.NOT_START"
+            class="ml-auto mt-1 text-[13px] text-[#a5a5a5]"
+          >
+            {{ getApprovalNodeTime(activity) }}
+          </div>
+        </div>
+
+        <!-- 子流程节点 -->
+        <div v-if="activity.nodeType === NodeTypeEnum.CHILD_PROCESS_NODE">
+          <Button
+            type="primary"
+            ghost
+            size="small"
+            @click="handleChildProcess(activity)"
+          >
+            查看子流程
+          </Button>
+        </div>
+
+        <!-- 需要自定义选择审批人 -->
+        <div
+          v-if="true || shouldShowCustomUserSelect(activity)"
+          class="flex flex-wrap items-center gap-2"
+        >
+          <Tooltip title="添加用户" placement="left">
+            <Button
+              type="primary"
+              size="middle"
+              ghost
+              @click="
+                handleSelectUser(activity.id, customApproveUsers[activity.id])
+              "
+            >
+              <template #icon>
+                <IconifyIcon
+                  icon="mdi:account-plus-outline"
+                  class="size-[18px]"
+                />
+              </template>
+            </Button>
+          </Tooltip>
+          <div
+            v-for="(user, userIndex) in customApproveUsers[activity.id]"
+            :key="userIndex"
+            class="relative flex h-[36px] items-center gap-2 rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
+          >
+            {{ renderUserAvatar(user) }}
+          </div>
+        </div>
+
+        <div v-else class="mt-1 flex flex-wrap items-center gap-2">
+          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
+          <div
+            v-for="(task, idx) in activity.tasks"
+            :key="idx"
+            class="flex flex-col gap-2 pr-[8px]"
+          >
+            <div
+              class="relative flex flex-wrap gap-2"
+              v-if="task.assigneeUser || task.ownerUser"
+            >
+              <!-- 信息：头像昵称 -->
+              <div
+                class="h-35px relative flex items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
+              >
+                <template
+                  v-if="
+                    task.assigneeUser?.avatar || task.assigneeUser?.nickname
+                  "
+                >
+                  <Avatar
+                    class="!m-[5px]"
+                    :size="28"
+                    v-if="task.assigneeUser?.avatar"
+                    :src="task.assigneeUser?.avatar"
+                  />
+                  <Avatar class="!m-[5px]" :size="28" v-else>
+                    {{ task.assigneeUser?.nickname.substring(0, 1) }}
+                  </Avatar>
+                  {{ task.assigneeUser?.nickname }}
+                </template>
+                <template
+                  v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname"
+                >
+                  <Avatar
+                    class="!m-[5px]"
+                    :size="28"
+                    v-if="task.ownerUser?.avatar"
+                    :src="task.ownerUser?.avatar"
+                  />
+                  <Avatar class="!m-[5px]" :size="28" v-else>
+                    {{ task.ownerUser?.nickname.substring(0, 1) }}
+                  </Avatar>
+                  {{ task.ownerUser?.nickname }}
+                </template>
+
+                <!-- 信息：任务状态图标 -->
+                <div
+                  v-if="
+                    showStatusIcon && onlyStatusIconShow.includes(task.status)
+                  "
+                  class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[2px]"
+                  :style="{
+                    backgroundColor: statusIconMap[task.status]?.color,
+                  }"
+                >
+                  <IconifyIcon
+                    :icon="
+                      statusIconMap[task.status]?.icon || 'mdi:clock-outline'
+                    "
+                    class="size-[10px] text-white"
+                    :class="[statusIconMap[task.status]?.animation]"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <!-- 审批意见和签名 -->
+            <teleport defer :to="`#activity-task-${activity.id}-${index}`">
+              <div
+                v-if="shouldShowApprovalReason(task, activity.nodeType)"
+                class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
+              >
+                审批意见：{{ task.reason }}
+              </div>
+              <div
+                v-if="
+                  task.signPicUrl &&
+                  activity.nodeType === NodeTypeEnum.USER_TASK_NODE
+                "
+                class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
+              >
+                签名：
+                <Image
+                  class="ml-[5px] h-[40px] w-[90px]"
+                  :src="task.signPicUrl"
+                  :preview="{ src: task.signPicUrl }"
+                />
+              </div>
+            </teleport>
+          </div>
+
+          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务 -->
+          <div
+            v-for="(user, userIndex) in activity.candidateUsers"
+            :key="userIndex"
+            class="relative flex h-[35px] items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
+          >
+            <Avatar
+              class="!m-[5px]"
+              :size="28"
+              v-if="user.avatar"
+              :src="user.avatar"
+            />
+            <Avatar class="!m-[5px]" :size="28" v-else>
+              {{ user.nickname.substring(0, 1) }}
+            </Avatar>
+            <span class="text-[13px]">
+              {{ user.nickname }}
+            </span>
+
+            <!-- 候选任务状态图标 -->
+            <div
+              v-if="showStatusIcon"
+              class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[1px]"
+              :style="{ backgroundColor: statusIconMap['-1']?.color }"
+            >
+              <IconifyIcon
+                class="text-[11px] text-white"
+                :icon="statusIconMap['-1']?.icon || 'mdi:clock-outline'"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-timeline-item>
+  </a-timeline>
+
+  <!-- 用户选择弹窗 -->
+  <UserSelectModal
+    ref="userSelectFormRef"
+    v-model:value="selectedUsers"
+    :multiple="true"
+    title="选择用户"
+    @confirm="handleUserSelectConfirm"
+  />
+</template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
index 3b3ce81b9..576cc2ec0 100644
--- a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
@@ -17,6 +17,7 @@ import {
   getProcessInstanceManagerPage,
 } from '#/api/bpm/processInstance';
 import { DocAlert } from '#/components/doc-alert';
+import { router } from '#/router';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
@@ -110,6 +111,10 @@ function onCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
 /** 查看流程实例 */
 function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
   console.warn(row);
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
 }
 
 /** 刷新表格 */
diff --git a/packages/icons/src/svg/icons/bpm-approve.svg b/packages/icons/src/svg/icons/bpm-approve.svg
new file mode 100644
index 000000000..06aa09d6d
--- /dev/null
+++ b/packages/icons/src/svg/icons/bpm-approve.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724316565416" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1339" xmlns:xlink="http://www.w3.org/1999/xlink" width="253.90625" height="200"><path d="M784.058182 99.258182l10.938182 18.385454-21.294546-2.56-14.196363 16.058182-4.072728-21.061818-19.781818-8.494545 18.734546-10.472728 2.094545-21.294545 15.709091 14.545454 20.945454-4.654545-9.076363 19.549091zM1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96z" fill="#13C463" p-id="1340"></path><path d="M1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96zM571.927273 100.072727l-17.454546-12.567272 20.596364-6.167273 6.516364-20.48 12.218181 17.570909 21.410909-0.116364-12.916363 17.105455 6.749091 20.363636-20.247273-6.981818-17.338182 12.683636 0.465455-21.410909zM991.418182 784.407273l-21.178182 3.490909 10.123636-18.967273-9.774545-18.967273 21.061818 3.723637 15.127273-15.243637 2.909091 21.294546 19.2 9.658182-19.316364 9.309091-3.258182 21.178181-14.894545-15.476363zM427.985455 156.741818L407.272727 151.505455l16.872728-13.265455-1.396364-21.410909 17.803636 11.985454 20.014546-7.912727-5.934546 20.596364 13.730909 16.523636-21.410909 0.814546-11.52 18.152727-7.447272-20.247273zM854.225455 896.465455l-20.712728-5.352728 16.872728-13.265454-1.396364-21.294546 17.803636 11.869091 20.014546-7.912727-5.934546 20.712727 13.730909 16.523637-21.527272 0.814545-11.403637 18.036364-7.447272-20.130909zM562.501818 923.694545l10.821818 18.385455-21.294545-2.56-14.196364 16.058182-4.072727-21.061818-19.665455-8.494546 18.734546-10.356363 1.978182-21.41091 15.709091 14.661819 20.945454-4.770909-8.96 19.54909zM242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364z" fill="#13C463" p-id="1341"></path><path d="M242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364zM700.858182 943.941818l-17.454546-12.450909 20.48-6.283636 6.516364-20.48 12.334545 17.687272 21.41091-0.116363-12.916364 17.105454 6.632727 20.363637-20.247273-7.098182-17.221818 12.683636 0.465455-21.410909zM303.592727 278.807273l-21.178182 3.490909 10.123637-18.967273-9.890909-18.967273 21.178182 3.723637 15.010909-15.243637 2.909091 21.294546 19.2 9.541818-19.316364 9.425455-3.258182 21.178181-14.778182-15.476363z" fill="#13C463" p-id="1342"></path><path d="M407.272727 90.647273a486.632727 486.632727 0 0 1 504.552728 11.636363l25.018181-14.429091A512 512 0 0 0 139.636364 546.909091l25.018181-14.429091A486.981818 486.981818 0 0 1 407.272727 90.647273zM893.323636 933.352727a486.749091 486.749091 0 0 1-504.669091-11.636363l-24.901818 14.429091A512 512 0 0 0 1161.192727 477.090909l-24.901818 13.963636a486.981818 486.981818 0 0 1-242.967273 442.298182z" fill="#13C463" p-id="1343"></path><path d="M814.545455 795.927273a327.447273 327.447273 0 0 1-258.21091 29.556363l-29.78909 17.105455A353.163636 353.163636 0 0 0 998.865455 570.181818l-29.789091 17.105455A326.865455 326.865455 0 0 1 814.545455 795.927273zM486.865455 228.072727A327.447273 327.447273 0 0 1 744.727273 198.516364l29.789091-17.105455A353.163636 353.163636 0 0 0 302.545455 453.818182l29.78909-17.105455A326.865455 326.865455 0 0 1 486.865455 228.072727zM1288.378182 374.690909a53.294545 53.294545 0 0 1-14.429091 11.636364L229.469091 989.090909a53.876364 53.876364 0 0 1-73.425455-19.665454L7.214545 710.632727a53.527273 53.527273 0 0 1 19.781819-73.309091L1071.476364 34.909091a53.876364 53.876364 0 0 1 73.425454 19.665454l148.829091 258.327273a53.061818 53.061818 0 0 1 5.352727 40.727273 55.272727 55.272727 0 0 1-10.705454 21.061818zM32.232727 665.716364A28.043636 28.043636 0 0 0 29.323636 698.181818l148.829091 257.978182a28.392727 28.392727 0 0 0 38.516364 10.356364l1044.48-601.949091a28.16 28.16 0 0 0 10.356364-38.516364L1122.676364 67.84a28.276364 28.276364 0 0 0-38.4-10.356364L39.68 659.432727a27.810909 27.810909 0 0 0-7.447273 6.283637z" fill="#13C463" p-id="1344"></path><path d="M356.770909 569.250909l22.341818 38.749091-15.476363 8.727273L349.090909 592.64l-153.483636 88.785455 14.778182 25.483636-15.476364 8.96-23.272727-39.912727L256 627.2c-6.283636-4.887273-11.636364-8.843636-16.174545-11.636364L256 602.647273c3.956364 3.141818 9.774545 8.261818 17.338182 15.127272z m-17.338182 199.447273l-49.221818 28.392727 7.563636 13.149091-15.476363 8.96-62.138182-107.52 64.814545-37.469091-12.8-22.574545 15.941819-9.192728 12.8 22.109091 65.396363-37.701818 61.672728 106.821818-15.476364 8.96-7.214546-12.450909-49.92 28.858182 26.065455 45.032727-16.058182 9.192728z m-46.545454-79.825455L244.363636 717.265455l14.778182 25.6 49.221818-28.509091zM267.636364 756.945455l14.778181 25.6 49.221819-28.509091-14.778182-25.483637z m106.938181-80.523637l-14.778181-25.483636-49.92 28.741818 14.778181 25.483636zM346.996364 744.727273l49.803636-28.741818-14.661818-25.483637-49.92 28.741818zM505.832727 609.978182c-4.654545 6.283636-10.123636 13.265455-16.523636 21.061818l35.84 62.021818a18.967273 18.967273 0 0 1-6.749091 29.672727l-19.316364 11.636364-12.450909-13.847273a170.123636 170.123636 0 0 0 17.803637-8.727272 8.494545 8.494545 0 0 0 2.909091-13.614546L477.090909 645.352727l-9.890909 10.472728-10.007273 10.24-12.683636-13.149091c9.309091-8.261818 17.221818-15.941818 23.272727-23.272728l-31.301818-54.341818-25.018182 14.545455-8.843636-15.36 25.018182-14.429091-23.272728-41.076364 15.476364-8.96 23.272727 41.076364L465.454545 538.763636l8.843637 15.36-22.109091 12.567273 28.509091 49.221818c5.469091-6.516364 10.938182-13.498182 16.407273-21.061818z m9.076364-45.730909L572.043636 663.272727a207.825455 207.825455 0 0 0 23.272728-27.461818l11.636363 13.149091a365.381818 365.381818 0 0 1-41.774545 45.498182l-12.567273-12.567273a11.636364 11.636364 0 0 0 1.745455-13.963636L453.818182 493.963636l15.709091-9.076363 36.887272 63.883636 31.301819-18.152727 8.96 15.592727z m129.745454 83.316363a20.596364 20.596364 0 0 1-31.418181-9.774545l-103.098182-178.618182 15.709091-9.192727 38.632727 67.025454a200.261818 200.261818 0 0 0 28.043636-41.076363l16.872728 7.68a303.243636 303.243636 0 0 1-35.723637 49.338182l53.410909 93.090909a9.192727 9.192727 0 0 0 13.963637 4.072727l10.821818-6.283636a14.312727 14.312727 0 0 0 8.029091-11.636364 103.447273 103.447273 0 0 0-15.243637-39.098182l17.338182-3.84c12.567273 25.134545 18.036364 41.658182 16.290909 49.803636A28.392727 28.392727 0 0 1 663.272727 636.741818zM860.276364 521.774545c-7.563636 4.421818-20.829091 11.636364-39.912728 22.574546a179.432727 179.432727 0 0 1-37.352727 16.174545 58.181818 58.181818 0 0 1-33.047273-1.978181 14.312727 14.312727 0 0 0-11.636363-0.581819c-5.352727 3.025455-8.261818 18.385455-8.727273 45.847273l-18.269091-3.956364c1.047273-25.483636 5.003636-42.821818 11.636364-52.014545l-38.865455-67.374545-31.534545 18.152727-8.378182-14.661818 46.545454-26.647273 47.825455 82.850909a55.505455 55.505455 0 0 1 8.494545 1.861818 59.694545 59.694545 0 0 0 25.367273 4.072727 101.701818 101.701818 0 0 0 33.512727-11.636363L849.454545 508.509091l31.418182-18.734546c11.636364-7.214545 19.898182-12.334545 24.087273-15.127272l5.469091 18.152727zM676.072727 413.207273L671.185455 430.545455a279.272727 279.272727 0 0 0-58.181819-13.265455l4.887273-16.64a307.781818 307.781818 0 0 1 58.181818 12.567273zM754.967273 372.363636a261.818182 261.818182 0 0 0 20.247272-38.516363l-98.443636 56.785454-7.796364-13.498182 119.97091-69.46909 6.632727 11.636363a281.134545 281.134545 0 0 1-25.949091 54.807273l5.236364 0.930909L818.734545 349.090909l57.25091 99.025455a18.385455 18.385455 0 0 1-8.843637 27.927272l-18.385454 10.589091-11.636364-11.636363 17.92-9.425455a7.796364 7.796364 0 0 0 3.607273-11.636364L849.454545 437.410909l-37.236363 21.527273 21.992727 38.050909-14.894545 8.610909-21.992728-38.167273L760.203636 488.727273l22.458182 38.749091-15.127273 8.727272L699.461818 418.909091l55.389091-32a306.269091 306.269091 0 0 0-39.330909-1.047273l4.305455-15.127273c13.265455-0.232727 24.901818 0.465455 35.141818 1.629091z m15.825454 49.454546l-11.636363-20.014546-37.003637 21.410909 11.636364 20.014546z m-29.44 34.909091l11.636364 19.549091 37.003636-21.410909-11.636363-19.549091z m81.454546-64.814546l-11.636364-19.898182-37.236364 21.527273 11.636364 19.898182z m-29.556364 34.909091l11.636364 19.432727 37.236363-21.527272-11.636363-19.432728zM1086.370909 391.214545l-19.898182 11.636364-10.589091 6.167273-10.938181 6.050909a186.181818 186.181818 0 0 1-38.749091 16.989091 60.16 60.16 0 0 1-33.978182-1.978182 14.312727 14.312727 0 0 0-11.636364 0c-5.585455 3.258182-8.610909 18.734545-8.96 46.545455l-18.036363-3.723637c0.814545-26.181818 4.770909-43.752727 11.636363-52.945454l-38.865454-67.141819-31.883637 18.385455-8.727272-15.010909 47.243636-27.345455 47.941818 83.2h4.189091a32.465455 32.465455 0 0 1 4.538182 1.163637 71.68 71.68 0 0 0 26.298182 3.490909 112.872727 112.872727 0 0 0 34.210909-13.265455c16.523636-9.192727 31.767273-17.803636 46.545454-25.949091l14.545455-8.727272 14.196363-8.727273c11.636364-6.865455 18.618182-11.636364 22.574546-14.196364l5.352727 18.385455zM896 286.021818l-4.770909 18.385455a296.378182 296.378182 0 0 0-58.181818-14.661818l4.770909-16.872728a311.156364 311.156364 0 0 1 58.181818 13.149091zM1031.098182 384l-12.334546-13.149091c11.636364-5.934545 21.76-11.636364 30.138182-15.941818a9.658182 9.658182 0 0 0 4.189091-14.661818l-54.341818-94.138182-83.781818 48.290909-9.076364-15.709091 83.781818-48.407273-20.712727-35.84 16.174545-9.425454 20.712728 36.072727 32.814545-18.967273 8.610909 15.243637-32.349091 18.850909 56.552728 97.978182a20.247273 20.247273 0 0 1-8.843637 31.185454z m-23.272727-59.345455L1000.727273 340.48a405.876364 405.876364 0 0 0-58.181818-25.6l7.796363-15.127273a393.890909 393.890909 0 0 1 57.716364 24.436364z" fill="#13C463" p-id="1345"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/bpm-cancel.svg b/packages/icons/src/svg/icons/bpm-cancel.svg
new file mode 100644
index 000000000..ab9b1553b
--- /dev/null
+++ b/packages/icons/src/svg/icons/bpm-cancel.svg
@@ -0,0 +1 @@
+<svg t="1729178183592" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4332" width="200" height="200"><path d="M784.074702 99.196443l10.927871 18.473304-21.302843-2.56935-14.180213 16.066571-4.130475-21.042655-19.676671-8.521137 18.733492-10.440019 2.016452-21.335366 15.708814 14.603017 20.945085-4.683373-9.041512 19.449008zM1067.22363 642.402668l-18.440781 10.92787 2.56935-21.302842-16.099094-14.180213 21.042655-4.130475 8.521137-19.676671 10.440019 18.733492 21.367889 2.016452-14.603017 15.708814 4.683373 20.945085-19.481531-9.041512z" fill="#8a8a8a" p-id="4333"></path><path d="M1067.22363 642.402668l-18.440781 10.92787 2.56935-21.302842-16.099094-14.180213 21.042655-4.130475 8.521137-19.676671 10.440019 18.733492 21.367889 2.016452-14.603017 15.708814 4.683373 20.945085-19.481531-9.041512zM571.924408 100.009528l-17.400031-12.488994 20.52228-6.211974 6.504685-20.457234 12.261331 17.595172 21.432936-0.09757-12.944323 17.074798 6.732349 20.359663-20.262093-7.02506-17.269938 12.716659 0.422804-21.46546zM991.444053 784.43246l-21.172749 3.480006 10.114785-18.928632-9.822074-19.026203 21.107702 3.772717 15.090868-15.253486 2.927109 21.237796 19.156296 9.626933-19.318914 9.366746-3.219819 21.205273-14.863204-15.48115zM428.008258 156.795426l-20.749945-5.333841 16.879657-13.237034-1.365983-21.400413 17.822836 11.936097 19.936859-7.870669-5.88674 20.619851 13.692361 16.521899-21.432936 0.813086-11.513292 18.083024-7.382817-20.132zM854.260251 896.475655l-20.749945-5.333841 16.879657-13.237034-1.365983-21.400413 17.822836 11.96862 19.936859-7.903192-5.854217 20.619851 13.659838 16.554423-21.432936 0.780562-11.513292 18.115547-7.382817-20.164523zM562.460092 923.665237l10.895347 18.440782-21.302843-2.569351-14.180212 16.099095-4.130475-21.042655-19.676672-8.521137 18.733493-10.440019 2.016452-21.36789 15.708814 14.603018 20.945085-4.683373-9.008989 19.48153zM242.787359 420.788058l-18.473305 10.895347 2.569351-21.302843-16.066572-14.180213 21.042656-4.130474 8.521137-19.676672 10.440019 18.733492 21.335366 2.016453-14.603018 15.708813 4.683374 20.945085-19.449008-9.008988z" fill="#8a8a8a" p-id="4334"></path><path d="M242.787359 420.788058l-18.473305 10.895347 2.569351-21.302843-16.066572-14.180213 21.042656-4.130474 8.521137-19.676672 10.440019 18.733492 21.335366 2.016453-14.603018 15.708813 4.683374 20.945085-19.449008-9.008988zM700.814737 943.959854l-17.400032-12.521518 20.522281-6.211974 6.504685-20.42471 12.26133 17.595172 21.432937-0.130094-12.944323 17.107321 6.732349 20.359663-20.262093-7.025059-17.269938 12.684135 0.422804-21.432936zM303.541115 278.823313l-21.140226 3.480006 10.114785-18.928633-9.854597-19.058726 21.107702 3.772717 15.090868-15.220962 2.927109 21.237796 19.156296 9.626933-19.28639 9.366746-3.252342 21.172749-14.863205-15.448626z" fill="#8a8a8a" p-id="4335"></path><path d="M407.648595 90.642782a486.713038 486.713038 0 0 1 504.568397 11.578339l25.010513-14.407877A512.081309 512.081309 0 0 0 139.850723 547.401747l24.977989-14.407877a486.778085 486.778085 0 0 1 242.819883-442.351088zM893.28836 933.422265a486.810608 486.810608 0 0 1-504.568398-11.610863l-25.010513 14.407877a512.081309 512.081309 0 0 0 797.5394-459.621026l-24.97799 14.505447a486.843132 486.843132 0 0 1-242.982499 442.318565z" fill="#8a8a8a" p-id="4336"></path><path d="M814.061299 795.880705a326.665269 326.665269 0 0 1-258.170939 29.563792l-29.791456 17.172368a353.236906 353.236906 0 0 0 472.793013-272.448721l-29.693886 17.172367a326.762839 326.762839 0 0 1-155.136732 208.540194zM486.875655 228.119295a326.795363 326.795363 0 0 1 258.170939-29.563792l29.791456-17.172368a353.236906 353.236906 0 0 0-472.793013 272.448721l29.82398-17.172367a326.762839 326.762839 0 0 1 155.006638-208.540194zM1288.350389 374.73489a53.923837 53.923837 0 0 1-14.34283 12.001143L229.420232 988.712085A53.793743 53.793743 0 0 1 156.112434 968.937843l-148.924757-258.235985a53.76122 53.76122 0 0 1 19.741718-73.437891L1071.516722 35.352962A53.826266 53.826266 0 0 1 1144.82452 55.062157l148.827187 258.268508a53.793743 53.793743 0 0 1-5.398888 61.404225zM32.19819 665.754486a28.360426 28.360426 0 0 0-5.626553 10.73273 28.067715 28.067715 0 0 0 2.699444 21.432936L178.195839 956.188661a28.165285 28.165285 0 0 0 38.442687 10.342449l1044.587328-601.976052a28.132762 28.132762 0 0 0 10.440019-38.442687l-148.924758-258.268509a28.197808 28.197808 0 0 0-38.442687-10.342449L39.711101 659.444942a28.230332 28.230332 0 0 0-7.512911 6.309544z" fill="#8a8a8a" p-id="4337"></path><path d="M498.941845 597.390249l-138.322121 79.877529 38.637827 66.933207q8.000762 13.854979 21.595554 5.98431l114.254788-65.957504a21.172749 21.172749 0 0 0 9.952167-11.123011q2.634397-9.757027-16.91218-47.321582l18.440781-4.130474q20.489757 43.22363 18.148071 56.167953a36.166047 36.166047 0 0 1-16.261712 19.514054l-123.068636 71.031158q-25.17313 14.603017-40.394092-11.77348L317.103383 639.020232l16.066571-9.269176 18.570875 32.133143 122.027886-70.47826-33.596697-58.249452-150.160648 86.707448-9.041511-15.611243 166.454883-96.106718zM691.903319 563.663459c-3.935334 3.837764-9.757027 9.399269-17.497602 16.619469l23.319295 40.394093-15.611244 9.008988-21.237795-36.816516q-31.027346 27.709957-64.754137 54.314118l-12.814229-13.39965 9.171605-7.382818 9.236653-7.122629-79.714912-138.126982-17.627696 10.179832-8.781324-15.155915L601.683341 414.836271l6.960013 12.06619 86.34969-49.858408 8.488614 14.733111q28.197808 65.82741 30.506972 123.39387a274.660314 274.660314 0 0 0 69.339939 27.612387l-3.642623 18.440781a322.177037 322.177037 0 0 1-65.534699-26.40902 220.899095 220.899095 0 0 1-15.38358 72.819946l-18.14807-6.179451a215.272542 215.272542 0 0 0 15.448626-77.340702 312.940384 312.940384 0 0 1-89.374369-86.739971l-8.748801 5.138701-7.2202-12.488995-17.172368 9.919644 71.876767 124.499667q10.570113-10.017215 17.465079-16.61947z m-134.32174-56.948515l40.166428-23.189202-19.969382-34.702493-40.166429 23.189201z m28.067714 48.785135l40.166429-23.189201-19.514055-33.921931-40.166428 23.189201z m48.557472-8.813847l-40.166428 23.189201 21.888264 37.922312q13.334604-10.92787 35.775766-30.767159z m7.2202-117.832365A289.848753 289.848753 0 0 0 715.515325 503.365031a330.437986 330.437986 0 0 0-26.441544-101.92841zM812.760362 400.460918l-4.813467 17.95293a280.482007 280.482007 0 0 0-56.167953-12.781706l5.073654-17.530125a291.637542 291.637542 0 0 1 55.907766 12.358901z m24.360045 28.78323a925.063745 925.063745 0 0 1 10.017214 101.895887l-18.440781 2.016452a812.792886 812.792886 0 0 0-8.878895-101.375512z m-45.923075-86.25212l-4.813467 18.017977a290.922026 290.922026 0 0 0-58.542163-11.513292l5.073655-17.497602a308.972527 308.972527 0 0 1 58.281975 10.992917z m48.459902-17.562649l-9.334223 13.724885A298.792695 298.792695 0 0 0 783.814515 315.477211l9.757027-14.180212a437.635191 437.635191 0 0 1 46.085692 24.13238zM834.355916 269.944418l16.521899-9.529363 35.157821 60.916373 48.199714-27.840051L1003.282579 413.047483q12.716659 22.115928-8.228426 34.214642l-26.018739 15.058345-13.237034-13.009369 25.238177-13.952549c6.992536-4.065428 8.45609-9.561887 4.423186-16.554423l-12.716659-22.018358-80.527997 46.475973L919.762427 491.1037l-16.066572 9.269176-81.926505-141.899698 47.744387-27.579864z m107.750103 73.763125l-14.830682-25.660981-80.56052 46.508496 14.830681 25.726028z m-72.592282 60.330952l14.700587 25.433317 80.560521-46.508496-14.700587-25.433318z m45.532793-166.064603a222.720407 222.720407 0 0 1-2.406733 56.13543l-16.456853 0.878132a242.722312 242.722312 0 0 0 2.081499-55.647578z" fill="#8a8a8a" p-id="4338"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/bpm-reject.svg b/packages/icons/src/svg/icons/bpm-reject.svg
new file mode 100644
index 000000000..21fd5f60e
--- /dev/null
+++ b/packages/icons/src/svg/icons/bpm-reject.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724316570161" class="icon" viewBox="0 0 1185 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1505" xmlns:xlink="http://www.w3.org/1999/xlink" width="231.4453125" height="200"><path d="M414.276535 230.004913l-2.443086-31.647244 26.446614 17.351559 29.437984-11.852598-8.143622 30.31685 20.423559 24.221229-31.623055 1.475527-16.722646 26.801386-11.239811-29.760504-30.663559-7.522772zM581.664252 176.902047l13.884472-28.542992 14.206993 28.220473 31.42148 4.321763-22.350614 22.092599 5.684409 31.123149-28.180157-14.513385-27.897953 14.819779 5.28126-31.066709-22.76989-21.689448zM896.507969 672.735748l17.754708 26.398236-31.494047-2.064126-19.560819 24.705008-7.95011-30.502299-29.575055-11.02211 26.744945-16.771024 1.104629-31.526299 24.414741 20.197795 30.268472-8.619338zM777.030551 801.961323l2.112504 31.647244-26.446614-17.682142-29.413795 11.546205 8.466141-30.308787-20.092976-24.221229 31.606929-1.153008 17.045166-26.793323 10.86085 29.704063 30.647433 7.837229zM609.312252 853.451591l-14.198929 28.518803-14.110236-28.542992-31.405355-4.636221 22.673134-22.084535-5.36189-31.12315 27.833449 14.835906 28.188221-14.803654-5.28126 31.066709 22.76989 22.060346zM298.435528 354.828094l-17.448315-26.390173 31.485984 2.394709 19.875275-24.753386 7.611465 30.865134 29.583118 11.288189-27.011024 16.779087-1.419086 31.526299-24.084158-20.504189-30.518425 8.280693zM962.56 91.53915a43.636913 43.636913 0 0 1 59.375874 15.601889l138.627024 236.753638c12.175118 20.447748 5.12 47.208819-15.609953 59.375874L229.13411 938.185575a43.636913 43.636913 0 0 1-59.375874-15.60189L31.12315 685.773606a43.636913 43.636913 0 0 1 15.601889-59.319433z m25.672567 24.108346a13.594205 13.594205 0 0 0-10.441575 1.548095L61.625449 652.054173a13.586142 13.586142 0 0 0-4.853921 18.83515l138.643149 236.793953a13.586142 13.586142 0 0 0 18.843213 4.837795l915.818834-534.915024a13.957039 13.957039 0 0 0 5.160315-18.778708l-138.602834-236.78589a13.594205 13.594205 0 0 0-8.401638-6.393953z" fill="#F5222D" p-id="1506"></path><path d="M395.981606 172.338394c123.670173-72.349228 271.11811-69.462677 388.394331-5.12l29.623433-17.335433a414.574866 414.574866 0 0 0-112.107842-47.071748 429.991307 429.991307 0 0 0-162.009701-10.498016 412.792945 412.792945 0 0 0-158.80063 54.707401 417.856504 417.856504 0 0 0-125.363402 111.922394A426.282331 426.282331 0 0 0 185.206929 405.004094a417.348535 417.348535 0 0 0-13.529701 120.977134l29.623433-17.335433c1.386835-133.958551 70.688252-263.958173 194.672882-336.307401z m397.666772 679.484472c-123.670173 72.365354-271.110047 69.462677-388.394331 5.128063l-29.623433 17.335433a414.679685 414.679685 0 0 0 112.075591 47.087874 429.991307 429.991307 0 0 0 162.009701 10.498016 412.744567 412.744567 0 0 0 158.808692-54.707402 423.145827 423.145827 0 0 0 209.105638-378.976756l-29.623433 17.335434c-1.072378 133.974677-70.712441 263.95011-194.350362 336.307401h-0.008063z" fill="#F5222D" p-id="1507"></path><path d="M478.377323 313.110173a226.271748 226.271748 0 0 1 109.979212-31.219905l45.668788-26.761071c-58.634079-9.13537-118.316346 2.314079-170.612914 32.735748a258.693039 258.693039 0 0 0-111.91433 132.71685l45.67685-26.761071a230.359685 230.359685 0 0 1 81.097575-80.589606l0.104819-0.120945z m232.568945 397.674835a226.328189 226.328189 0 0 1-109.979213 31.227968l-45.668787 26.753008c58.634079 9.13537 118.316346-2.314079 170.612913-32.735748a258.709165 258.709165 0 0 0 111.914331-132.71685l-45.676851 26.761071a225.215496 225.215496 0 0 1-81.097574 80.597669l-0.104819 0.112882zM188.57726 706.938961l-10.062614-17.424126 109.938897-63.471874 9.578835 16.585574 17.093543-9.869102-18.770645-32.509984-63.689575 36.767244c-4.047622-3.918614-7.804976-7.337323-11.272063-10.24l-16.859717 13.747401c3.249386 2.144756 6.595528 4.458835 9.869103 7.038993l-62.173733 35.896441 19.254426 33.348535 17.093543-9.869102zM317.44 781.142677l-19.060913-33.017953 32.679307-18.867401 4.741039 8.216189 17.093543-9.869103-48.474708-83.959937-49.772851 28.736504-7.933984-13.747401-17.432189 10.062614 7.933984 13.747402-49.264882 28.446236 48.764977 84.459842 17.093543-9.869102-5.031307-8.708032 32.171339-18.585196 19.060913 33.017952 17.432189-10.062614z m-12.505701-97.126803l-32.679307 18.867402-8.321008-14.41663 32.679307-18.867402 8.321008 14.41663z m-50.111496 28.930016l-32.171338 18.577134-8.321008-14.41663 32.171338-18.577134 8.321008 14.41663z m16.932284 29.325102l-32.171339 18.577134-8.127496-14.077984 32.171339-18.577134 8.127496 14.077984z m50.111496-28.930016l-32.679307 18.867402-8.127496-14.077984 32.679307-18.867402 8.127496 14.077984z m95.828661 7.684032c11.062425-6.38589 13.368441-15.537386 6.692284-27.099717l-25.05978-43.411149c3.55578-4.289512 7.014803-8.740283 10.48189-13.199118l-9.482079-16.424315c-3.467087 4.458835-6.92611 8.917669-10.48189 13.199118l-17.803086-30.832882 14.755275-8.51452-9.780409-16.932283-14.747213 8.522582-16.738771-28.994519-17.093544 9.869102 16.738772 28.99452-16.924221 9.772346 9.772347 16.924221 16.932283-9.772347 20.891213 36.202835a299.927181 299.927181 0 0 1-16.690394 15.214866l13.868347 14.344063a572.617575 572.617575 0 0 0 12.497638-12.804031l19.157669 33.179212c2.322142 4.031496 1.475528 7.200252-2.20926 9.328882-3.85411 2.225386-8.167811 4.039559-12.578268 5.692472l13.55389 14.964914 14.247307-8.224252z m111.390236-65.205417c6.369764-3.676724 10.15937-8.329071 11.151118-13.586142 1.225575-5.619906-3.201008-18.706142-13.182992-39.089386l-18.827086 4.160504c7.627591 14.368252 11.368819 23.164976 11.570393 26.615937 0.112882 3.289701-0.959496 5.692472-3.467086 7.143811l-6.539087 3.77348c-3.354205 1.935118-6.095622 1.064315-8.224252-2.628535l-38.702362-67.027654c8.933795-10.07874 17.762772-21.874898 26.390173-35.573921l-18.383622-8.603213a168.443969 168.443969 0 0 1-17.972409 26.914268l-26.801386-46.426709-17.254803 9.965859 77.686929 134.571338c6.966425 12.070299 16.077606 15.077795 27.478677 8.498394l15.077795-8.708031z m-78.501291 45.547842c13.626457-12.779843 25.285543-25.100094 34.783748-37.291339l-12.473449-14.247307a157.808882 157.808882 0 0 1-14.706897 17.875654l-38.412095-66.535811 20.617071-11.900976-9.869102-17.093544-20.617071 11.900977-27.18841-47.087874-17.254803 9.965858 72.94589 126.363212c2.999433 5.192567 2.418898 9.99811-1.564221 14.311811l13.739339 13.739339z m201.663496-113.978457l-65.21348-112.946393c0.137071-7.901732-0.16126-15.771213-0.886929-23.624567l53.78822-31.050583-9.869102-17.093543-144.795213 83.597102 9.869102 17.093543 71.05915-41.024504c1.894803 37.331654-9.45789 76.517795-33.848441 117.856756l20.367118 8.570961c14.860094-26.898142 25.05978-53.344756 30.445859-79.243087l50.990362 88.313953 18.093354-10.449638z m28.728441-76.017889l5.716661-21.850709c-21.157291-7.224441-45.330142-12.707276-72.349228-16.54526l-5.603779 19.318929c29.163843 4.837795 53.385071 11.191433 72.244409 19.07704z m18.738394-105.33493l5.265134-19.13348c-12.739528-4.25726-27.414173-7.627591-43.612725-10.127118l-5.410268 18.101417c17.674079 2.74948 32.380976 6.555213 43.757859 11.159181z m88.934803 67.74526l-15.76315-27.317417 21.786205-12.578268 15.674457 27.148095 16.085669-9.288567-15.674457-27.148095 22.455433-12.965291 4.063748 7.038992c2.031874 3.523528 1.249764 6.426205-2.435023 8.554835l-11.852599 6.176252 12.175118 12.183181 12.570205-7.256693c11.393008-6.579402 13.997354-15.230992 7.998488-25.616126l-42.862866-74.244032-33.848441 19.544693-0.532157-0.145133a202.445606 202.445606 0 0 0 18.738393-38.750741L790.173228 306.87748l-92.676031 53.506016 8.321008 14.41663 31.679496-18.286866-3.85411 13.836094c8.401638-0.16126 16.125984 0.08063 23.261732 0.427339l-37.202646 21.479811 52.538457 90.998929 16.424315-9.482079z m-25.35811-117.856756c-6.724535-0.806299-14.126362-1.233638-21.947465-1.628724l33.517858-19.351181c-3.305827 7.047055-7.143811 13.948976-11.570393 20.979905z m47.571653 16.996788l-22.455433 12.965291-6.095622-10.56252 22.455433-12.965291 6.095622 10.56252z m-38.541102 22.253858l-21.786205 12.578268-6.095622-10.56252 21.786205-12.578268 6.095622 10.56252z m-24.253481 137.570772c-0.330583-19.915591 1.112693-30.582929 4.458835-32.518048 1.846425-1.064315 4.628157-0.886929 8.627402 0.604725 8.304882 2.797858 16.400126 3.265512 24.269606 1.402961 8.006551-2.386646 17.464441-6.506835 28.462362-12.626646 10.812472-6.031118 20.96378-11.66715 30.187843-16.988725l38.379842-22.157102-5.781165-19.673701c-4.329827 2.942992-10.675402 7.055118-19.028662 12.320252-8.708031 5.031307-16.996787 10.038425-25.374236 14.876221-13.07011 7.546961-24.398614 13.868346-34.211275 19.302803-10.07874 5.378016-18.230425 8.296819-24.543748 8.587087-5.28126 0.145134-11.070488-0.983685-17.440252-3.120378l-2.902678-0.774048-36.767244-63.681511-38.379842 22.157102 9.288567 16.085669 22.116787-12.771779 26.511118 45.91874c-4.571717 7.555024-7.014803 20.359055-7.651779 38.605606l19.778519 4.450772z m38.476599-112.938331l-21.786205 12.578268-6.095622-10.56252 21.786205-12.578268 6.095622 10.56252z m38.541102-22.253858l-22.455433 12.965291-6.095622-10.56252 22.455433-12.957228 6.095622 10.56252z m172.241638-43.798173c12.062236-6.966425 14.610142-16.488819 7.740472-28.381733l-39.863433-69.051464 23.302048-13.449071-9.869103-17.093543-23.302047 13.44907-14.513386-25.132346-17.424126 10.062614 14.513386 25.132347-62.681701 36.186708 9.869103 17.093544 62.6817-36.186709 37.34778 64.689386c2.515654 4.354016 1.523906 8.062992-2.838173 10.578645-6.692283 3.870236-14.190866 7.522772-21.955528 11.110804l13.529701 14.537574 23.463307-13.545826z m-130.942992-43.725607l5.386079-20.092976c-12.900787-4.168567-27.389984-7.200252-43.65304-9.433701l-5.321575 18.27074c17.682142 2.74948 32.219717 6.643906 43.596599 11.255937z m80.702488 27.148095l8.466142-17.851465c-10.756031-5.853732-24.825953-12.038047-41.846929-18.302992l-8.740284 16.22274c16.883906 6.789039 30.808693 13.497449 42.121071 19.931717z m-31.219905 99.577952c-0.354772-20.350992 1.064315-31.445669 4.418519-33.380787 2.007685-1.161071 5.128063-1.177197 9.119244 0.32252a42.951559 42.951559 0 0 0 24.938835 1.007874c8.175874-2.483402 18.141732-6.893858 29.639559-13.303937 11.320441-6.321386 21.810394-12.150929 31.365039-17.657953l35.525544-20.520315-5.966614-20.012346c-3.999244 2.74948-10.006173 6.668094-17.859528 11.651023-7.95011 4.805543-15.722835 9.522394-23.439118 13.973166a2406.72252 2406.72252 0 0 1-35.719055 20.181669c-10.586709 5.66022-19.165732 8.603213-25.712882 9.256315-5.28126 0.145134-11.401071-0.790173-17.940158-2.822047l-3.080063-0.685355-36.767244-63.681512-39.041008 22.544126 9.482079 16.424315 22.455433-12.965291 26.511118 45.91874c-4.57978 7.555024-7.256693 20.72189-7.700157 39.299024l19.770457 4.450771z" fill="#F5222D" p-id="1508"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/bpm-running.svg b/packages/icons/src/svg/icons/bpm-running.svg
new file mode 100644
index 000000000..5908c13b2
--- /dev/null
+++ b/packages/icons/src/svg/icons/bpm-running.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724304256588" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1272" xmlns:xlink="http://www.w3.org/1999/xlink" width="253.90625" height="200"><path d="M784.058182 99.258182l10.938182 18.385454-21.294546-2.56-14.196363 16.058182-4.072728-21.061818-19.781818-8.494545 18.734546-10.472728 2.094545-21.294545 15.709091 14.545454 20.945454-4.654545-9.076363 19.549091zM1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96z" fill="#2196F3" p-id="1273"></path><path d="M1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96zM571.927273 100.072727l-17.454546-12.567272 20.596364-6.167273 6.516364-20.48 12.218181 17.570909 21.410909-0.116364-12.916363 17.105455 6.749091 20.363636-20.247273-6.981818-17.338182 12.683636 0.465455-21.410909zM991.418182 784.407273l-21.178182 3.490909 10.123636-18.967273-9.774545-18.967273 21.061818 3.723637 15.127273-15.243637 2.909091 21.294546 19.2 9.658182-19.316364 9.309091-3.258182 21.178181-14.894545-15.476363zM427.985455 156.741818L407.272727 151.505455l16.872728-13.265455-1.396364-21.410909 17.803636 11.985454 20.014546-7.912727-5.934546 20.596364 13.730909 16.523636-21.410909 0.814546-11.52 18.152727-7.447272-20.247273zM854.225455 896.465455l-20.712728-5.352728 16.872728-13.265454-1.396364-21.294546 17.803636 11.869091 20.014546-7.912727-5.934546 20.712727 13.730909 16.523637-21.527272 0.814545-11.403637 18.036364-7.447272-20.130909zM562.501818 923.694545l10.821818 18.385455-21.294545-2.56-14.196364 16.058182-4.072727-21.061818-19.665455-8.494546 18.734546-10.356363 1.978182-21.41091 15.709091 14.661819 20.945454-4.770909-8.96 19.54909zM242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364z" fill="#2196F3" p-id="1274"></path><path d="M242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364zM700.858182 943.941818l-17.454546-12.450909 20.48-6.283636 6.516364-20.48 12.334545 17.687272 21.41091-0.116363-12.916364 17.105454 6.632727 20.363637-20.247273-7.098182-17.221818 12.683636 0.465455-21.410909zM303.592727 278.807273l-21.178182 3.490909 10.123637-18.967273-9.890909-18.967273 21.178182 3.723637 15.010909-15.243637 2.909091 21.294546 19.2 9.541818-19.316364 9.425455-3.258182 21.178181-14.778182-15.476363z" fill="#2196F3" p-id="1275"></path><path d="M407.272727 90.647273a486.632727 486.632727 0 0 1 504.552728 11.636363l25.018181-14.429091A512 512 0 0 0 139.636364 546.909091l25.018181-14.429091A486.981818 486.981818 0 0 1 407.272727 90.647273zM893.323636 933.352727a486.749091 486.749091 0 0 1-504.669091-11.636363l-24.901818 14.429091A512 512 0 0 0 1161.192727 477.090909l-24.901818 13.963636a486.981818 486.981818 0 0 1-242.967273 442.298182z" fill="#2196F3" p-id="1276"></path><path d="M814.545455 795.927273a327.447273 327.447273 0 0 1-258.21091 29.556363l-29.78909 17.105455A353.163636 353.163636 0 0 0 998.865455 570.181818l-29.789091 17.105455A326.865455 326.865455 0 0 1 814.545455 795.927273zM486.865455 228.072727A327.447273 327.447273 0 0 1 744.727273 198.516364l29.789091-17.105455A353.163636 353.163636 0 0 0 302.545455 453.818182l29.78909-17.105455A326.865455 326.865455 0 0 1 486.865455 228.072727zM1288.378182 374.690909a53.294545 53.294545 0 0 1-14.429091 11.636364L229.469091 989.090909a53.876364 53.876364 0 0 1-73.425455-19.665454L7.214545 710.632727a53.527273 53.527273 0 0 1 19.781819-73.309091L1071.476364 34.909091a53.876364 53.876364 0 0 1 73.425454 19.665454l148.829091 258.327273a53.061818 53.061818 0 0 1 5.352727 40.727273 55.272727 55.272727 0 0 1-10.705454 21.061818zM32.232727 665.716364A28.043636 28.043636 0 0 0 29.323636 698.181818l148.829091 257.978182a28.392727 28.392727 0 0 0 38.516364 10.356364l1044.48-601.949091a28.16 28.16 0 0 0 10.356364-38.516364L1122.676364 67.84a28.276364 28.276364 0 0 0-38.4-10.356364L39.68 659.432727a27.810909 27.810909 0 0 0-7.447273 6.283637z" fill="#2196F3" p-id="1277"></path><path d="M477.090909 500.945455l22.109091 38.283636-15.36 8.843636-13.963636-24.436363-151.272728 87.621818 14.545455 25.134545-15.243636 8.843637-23.272728-39.330909L377.949091 558.545455c-6.050909-4.887273-11.636364-8.843636-15.825455-11.636364l14.894546-12.450909c3.956364 3.141818 9.658182 8.145455 17.105454 14.894545zM459.869091 698.181818l-48.407273 28.043637 7.447273 12.334545-15.36 8.843636-61.207273-106.007272L406.225455 605.090909l-12.683637-21.876364 15.709091-9.076363 12.683636 21.876363L486.4 558.545455l60.509091 104.727272-15.36 8.843637-7.098182-12.218182-49.105454 28.392727L501.294545 733.090909l-15.70909 9.076364z m-45.381818-78.661818l-48.523637 27.461818 14.545455 25.134546 48.523636-28.043637zM388.538182 686.545455l14.545454 25.134545 48.523637-28.043636-14.545455-25.134546z m105.425454-79.476364L479.418182 581.818182 430.545455 609.861818l14.545454 25.134546z m-26.647272 67.490909l49.221818-28.392727-14.545455-25.134546-49.105454 28.392728zM624.058182 541.090909c-4.654545 6.167273-10.123636 13.149091-16.290909 20.829091l34.909091 61.207273a18.734545 18.734545 0 0 1-6.632728 29.207272l-18.734545 10.938182-11.636364-13.614545a174.545455 174.545455 0 0 0 17.454546-8.610909 8.378182 8.378182 0 0 0 2.327272-12.683637l-30.021818-52.363636-9.774545 10.24-9.890909 10.123636-12.450909-12.916363c9.076364-8.145455 16.872727-15.709091 23.272727-22.574546l-30.836364-53.527272-24.785454 14.196363-8.727273-15.010909L546.909091 492.218182l-23.272727-40.378182 15.36-8.843636 23.272727 40.378181 21.643636-12.450909 8.727273 15.127273-21.643636 12.450909L599.156364 546.909091c5.352727-6.4 10.821818-13.381818 16.290909-20.712727z m8.843636-45.032727L689.221818 593.454545a193.745455 193.745455 0 0 0 22.574546-27.112727l11.636363 13.032727a363.985455 363.985455 0 0 1-41.192727 44.8l-12.334545-12.450909a10.821818 10.821818 0 0 0 1.62909-13.730909l-98.90909-171.403636 15.476363-8.96 36.305455 62.952727 30.836363-17.803636 8.029091 15.476363z m128 81.454545a20.130909 20.130909 0 0 1-30.836363-9.541818L628.363636 392.378182l15.36-8.378182 38.050909 66.094545A206.08 206.08 0 0 0 709.818182 409.018182l16.64 7.563636a297.890909 297.890909 0 0 1-34.909091 48.64l52.712727 91.112727a8.843636 8.843636 0 0 0 13.614546 4.072728l10.821818-6.167273a14.429091 14.429091 0 0 0 7.912727-11.636364 102.981818 102.981818 0 0 0-15.010909-38.516363l17.105455-3.723637c12.334545 24.669091 17.687273 41.076364 16.058181 48.989091a28.16 28.16 0 0 1-15.127272 18.152728zM805.236364 288.116364l16.174545-9.309091 23.272727 39.330909 78.429091-45.265455 59.345455 102.749091-16.64 9.076364-7.912727-13.847273L896 407.272727l42.938182 74.472728-16.174546 9.30909-42.938181-74.472727-62.603637 36.072727 8.029091 13.73091-15.825454 9.192727L749.730909 372.363636l78.196364-45.265454z m2.676363 149.061818l62.603637-36.072727-33.745455-58.181819-62.487273 36.072728z m78.778182-45.381818l62.72-36.189091-33.745454-58.181818-62.72 36.072727z" fill="#2196F3" p-id="1278"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
index 3b5cb9953..64d46df75 100644
--- a/packages/icons/src/svg/index.ts
+++ b/packages/icons/src/svg/index.ts
@@ -12,6 +12,12 @@ const SvgBellIcon = createIconifyIcon('svg:bell');
 const SvgCakeIcon = createIconifyIcon('svg:cake');
 const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
 
+// bpm 图标
+const SvgBpmRunningIcon = createIconifyIcon('svg:bpm-running');
+const SvgBpmApproveIcon = createIconifyIcon('svg:bpm-approve');
+const SvgBpmRejectIcon = createIconifyIcon('svg:bpm-reject');
+const SvgBpmCancelIcon = createIconifyIcon('svg:bpm-cancel');
+
 export {
   SvgAntdvLogoIcon,
   SvgAvatar1Icon,
@@ -19,6 +25,10 @@ export {
   SvgAvatar3Icon,
   SvgAvatar4Icon,
   SvgBellIcon,
+  SvgBpmApproveIcon,
+  SvgBpmCancelIcon,
+  SvgBpmRejectIcon,
+  SvgBpmRunningIcon,
   SvgCakeIcon,
   SvgCardIcon,
   SvgDownloadIcon,