diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
index fc0fd0171..1711576bd 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
@@ -8,17 +8,20 @@
      7. 是否需要签名
 -->
 <script lang="ts" setup>
+import type { ComponentPublicInstance } from 'vue';
+
 import type { SystemUserApi } from '#/api/system/user';
-import type { ButtonSetting } from '#/views/bpm/components/simple-process-design/consts';
 
 import { inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
 
 import { BpmModelFormType } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
 
 import {
   Button,
   Divider,
   Form,
+  Input,
   Radio,
   RadioGroup,
   Select,
@@ -74,15 +77,67 @@ const assignEmptyUserIdsEl = ref<any>();
 const assignEmptyUserIds = ref<any>();
 
 // 操作按钮
-const buttonsSettingEl = ref<any>();
-const { btnDisplayNameEdit, changeBtnDisplayName } = useButtonsSetting();
-const btnDisplayNameBlurEvent = (index: number) => {
-  btnDisplayNameEdit.value[index] = false;
-  const buttonItem = buttonsSettingEl.value[index];
-  buttonItem.displayName =
-    buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!;
-  updateElementExtensions();
-};
+// const buttonsSettingEl = ref<any>();
+// const { btnDisplayNameEdit, changeBtnDisplayName } = useButtonsSetting();
+// const btnDisplayNameBlurEvent = (index: number) => {
+//   btnDisplayNameEdit.value[index] = false;
+//   const buttonItem = buttonsSettingEl.value[index];
+//   buttonItem.displayName =
+//     buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!;
+//   updateElementExtensions();
+// };
+
+// 操作按钮设置
+const {
+  buttonsSetting,
+  btnDisplayNameEdit,
+  changeBtnDisplayName,
+  btnDisplayNameBlurEvent,
+  setInputRef,
+} = useButtonsSetting();
+
+/** 操作按钮设置 */
+function useButtonsSetting() {
+  const buttonsSetting = ref<any[]>([]);
+  // 操作按钮显示名称可编辑
+  const btnDisplayNameEdit = ref<boolean[]>([]);
+  // 输入框的引用数组 - 内部使用，不暴露出去
+  const _btnDisplayNameInputRefs = ref<Array<HTMLInputElement | null>>([]);
+
+  const changeBtnDisplayName = (index: number) => {
+    btnDisplayNameEdit.value[index] = true;
+    // 输入框自动聚集
+    nextTick(() => {
+      if (_btnDisplayNameInputRefs.value[index]) {
+        _btnDisplayNameInputRefs.value[index]?.focus();
+      }
+    });
+  };
+
+  const btnDisplayNameBlurEvent = (index: number) => {
+    btnDisplayNameEdit.value[index] = false;
+    const buttonItem = buttonsSetting.value![index];
+    if (buttonItem)
+      buttonItem.displayName =
+        buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!;
+  };
+
+  // 设置 ref 引用的方法
+  const setInputRef = (
+    el: ComponentPublicInstance | Element | null,
+    index: number,
+  ) => {
+    _btnDisplayNameInputRefs.value[index] = el as HTMLInputElement;
+  };
+
+  return {
+    buttonsSetting,
+    btnDisplayNameEdit,
+    changeBtnDisplayName,
+    btnDisplayNameBlurEvent,
+    setInputRef,
+  };
+}
 
 // 字段权限
 const fieldsPermissionEl = ref<any[]>([]);
@@ -178,12 +233,12 @@ const resetCustomConfigList = () => {
     });
 
   // 操作按钮
-  buttonsSettingEl.value = elExtensionElements.value.values?.filter(
+  buttonsSetting.value = elExtensionElements.value.values?.filter(
     (ex: any) => ex.$type === `${prefix}:ButtonsSetting`,
   );
-  if (buttonsSettingEl.value.length === 0) {
+  if (buttonsSetting.value.length === 0) {
     DEFAULT_BUTTON_SETTING.forEach((item) => {
-      buttonsSettingEl.value.push(
+      buttonsSetting.value.push(
         bpmnInstances().moddle.create(`${prefix}:ButtonsSetting`, {
           'flowable:id': item.id,
           'flowable:displayName': item.displayName,
@@ -226,7 +281,7 @@ const resetCustomConfigList = () => {
 
   // 保留剩余扩展元素，便于后面更新该元素对应属性
   otherExtensions.value =
-    elExtensionElements.value.values?.find(
+    elExtensionElements.value.values?.filter(
       (ex: any) =>
         ex.$type !== `${prefix}:AssignStartUserHandlerType` &&
         ex.$type !== `${prefix}:RejectHandlerType` &&
@@ -287,7 +342,7 @@ const updateElementExtensions = () => {
       assignEmptyHandlerTypeEl.value,
       assignEmptyUserIdsEl.value,
       approveType.value,
-      ...buttonsSettingEl.value,
+      ...buttonsSetting.value,
       ...fieldsPermissionEl.value,
       signEnable.value,
       reasonRequire.value,
@@ -357,19 +412,19 @@ function findAllPredecessorsExcludingStart(elementId: string, modeler: any) {
   return [...predecessors]; // 返回前置节点数组
 }
 
-function useButtonsSetting() {
-  const buttonsSetting = ref<ButtonSetting[]>();
-  // 操作按钮显示名称可编辑
-  const btnDisplayNameEdit = ref<boolean[]>([]);
-  const changeBtnDisplayName = (index: number) => {
-    btnDisplayNameEdit.value[index] = true;
-  };
-  return {
-    buttonsSetting,
-    btnDisplayNameEdit,
-    changeBtnDisplayName,
-  };
-}
+// function useButtonsSetting() {
+//   const buttonsSetting = ref<ButtonSetting[]>();
+//   // 操作按钮显示名称可编辑
+//   const btnDisplayNameEdit = ref<boolean[]>([]);
+//   const changeBtnDisplayName = (index: number) => {
+//     btnDisplayNameEdit.value[index] = true;
+//   };
+//   return {
+//     buttonsSetting,
+//     btnDisplayNameEdit,
+//     changeBtnDisplayName,
+//   };
+// }
 
 /** 批量更新权限 */
 const updatePermission = (type: string) => {
@@ -413,13 +468,13 @@ onMounted(async () => {
         :disabled="returnTaskList.length === 0"
         @change="updateRejectHandlerType"
       >
-        <div class="flex-col">
-          <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
-            <Radio :key="item.value" :value="item.value">
-              {{ item.label }}
-            </Radio>
-          </div>
-        </div>
+        <Radio
+          v-for="(item, index) in REJECT_HANDLER_TYPES"
+          :key="index"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </Radio>
       </RadioGroup>
     </Form.Item>
     <Form.Item
@@ -450,7 +505,7 @@ onMounted(async () => {
         v-model:value="assignEmptyHandlerType"
         @change="updateAssignEmptyHandlerType"
       >
-        <div class="flex-col">
+        <div class="flex flex-col gap-2">
           <div v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES" :key="index">
             <Radio :key="item.value" :value="item.value">
               {{ item.label }}
@@ -486,7 +541,7 @@ onMounted(async () => {
       v-model:value="assignStartUserHandlerType"
       @change="updateAssignStartUserHandlerType"
     >
-      <div class="flex-col">
+      <div class="flex flex-col gap-2">
         <div
           v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES"
           :key="index"
@@ -499,35 +554,44 @@ onMounted(async () => {
     </RadioGroup>
 
     <Divider orientation="left">操作按钮</Divider>
-    <div class="button-setting-pane">
-      <div class="button-setting-title">
-        <div class="button-title-label">操作按钮</div>
-        <div class="button-title-label pl-4">显示名称</div>
-        <div class="button-title-label">启用</div>
-      </div>
+    <div class="mt-2 text-sm">
+      <!-- 头部标题行 -->
       <div
-        class="button-setting-item"
-        v-for="(item, index) in buttonsSettingEl"
-        :key="index"
+        class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold text-slate-900"
       >
-        <div class="button-setting-item-label">
+        <div class="w-28 text-left">操作按钮</div>
+        <div class="w-40 pl-2 text-left">显示名称</div>
+        <div class="w-20 text-center">启用</div>
+      </div>
+
+      <!-- 按钮配置行 -->
+      <div
+        v-for="(item, index) in buttonsSetting"
+        :key="index"
+        class="flex items-center justify-between border border-t-0 border-slate-200 px-3 py-2 text-sm"
+      >
+        <div class="w-28 truncate text-left">
           {{ OPERATION_BUTTON_NAME.get(item.id) }}
         </div>
-        <div class="button-setting-item-label">
-          <input
-            type="text"
-            class="editable-title-input"
-            @blur="btnDisplayNameBlurEvent(index)"
-            v-mounted-focus
-            v-model="item.displayName"
-            :placeholder="item.displayName"
+        <div class="flex w-40 items-center truncate text-left">
+          <Input
             v-if="btnDisplayNameEdit[index]"
+            :ref="(el) => setInputRef(el, index)"
+            @blur="btnDisplayNameBlurEvent(index)"
+            @press-enter="btnDisplayNameBlurEvent(index)"
+            type="text"
+            v-model:value="item.displayName"
+            :placeholder="item.displayName"
+            class="max-w-32 focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
           />
-          <Button v-else type="text" @click="changeBtnDisplayName(index)">
-            {{ item.displayName }}
+          <Button v-else @click="changeBtnDisplayName(index)">
+            <div class="flex items-center">
+              {{ item.displayName }}
+              <IconifyIcon icon="lucide:edit" class="ml-2" />
+            </div>
           </Button>
         </div>
-        <div class="button-setting-item-label">
+        <div class="flex w-20 items-center justify-center">
           <Switch
             v-model:checked="item.enable"
             @change="updateElementExtensions"
@@ -537,40 +601,50 @@ onMounted(async () => {
     </div>
 
     <Divider orientation="left">字段权限</Divider>
-    <div class="field-setting-pane" v-if="formType === BpmModelFormType.NORMAL">
-      <div class="field-permit-title">
-        <div class="setting-title-label first-title">字段名称</div>
-        <div class="other-titles">
+    <div v-if="formType === BpmModelFormType.NORMAL" class="mt-2 text-sm">
+      <!-- 头部标题行 -->
+      <div
+        class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold text-slate-900"
+      >
+        <div class="w-28 text-left">字段名称</div>
+        <div class="flex flex-1 justify-between">
           <span
-            class="setting-title-label cursor-pointer"
+            class="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
             @click="updatePermission('READ')"
-            >只读
+          >
+            只读
           </span>
           <span
-            class="setting-title-label cursor-pointer"
+            class="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
             @click="updatePermission('WRITE')"
           >
             可编辑
           </span>
           <span
-            class="setting-title-label cursor-pointer"
+            class="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
             @click="updatePermission('NONE')"
-            >隐藏
+          >
+            隐藏
           </span>
         </div>
       </div>
+
+      <!-- 字段权限行 -->
       <div
-        class="field-setting-item"
         v-for="(item, index) in fieldsPermissionEl"
         :key="index"
+        class="flex items-center justify-between border border-t-0 border-slate-200 px-3 py-2 text-sm"
       >
-        <div class="field-setting-item-label">{{ item.title }}</div>
+        <div class="w-28 truncate text-left" :title="item.title">
+          {{ item.title }}
+        </div>
         <RadioGroup
-          class="field-setting-item-group"
           v-model:value="item.permission"
+          class="flex flex-1 justify-between"
         >
-          <div class="item-radio-wrap">
+          <div class="flex w-24 items-center justify-center">
             <Radio
+              class="ml-5"
               :value="FieldPermissionType.READ"
               size="large"
               @change="updateElementExtensions"
@@ -578,8 +652,9 @@ onMounted(async () => {
               <span></span>
             </Radio>
           </div>
-          <div class="item-radio-wrap">
+          <div class="flex w-24 items-center justify-center">
             <Radio
+              class="ml-5"
               :value="FieldPermissionType.WRITE"
               size="large"
               @change="updateElementExtensions"
@@ -587,8 +662,9 @@ onMounted(async () => {
               <span></span>
             </Radio>
           </div>
-          <div class="item-radio-wrap">
+          <div class="flex w-24 items-center justify-center">
             <Radio
+              class="ml-5"
               :value="FieldPermissionType.NONE"
               size="large"
               @change="updateElementExtensions"
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
index 8e68131e9..eb7a1d1ec 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -1,25 +1,25 @@
 <script lang="ts" setup>
 import { inject, nextTick, ref, watch } from 'vue';
 
+import { confirm, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import {
   Button,
   Divider,
-  Drawer,
   Form,
   FormItem,
   Input,
-  Modal,
   Select,
   SelectOption,
-  Table,
-  TableColumn,
 } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
+
 import { createListenerObject, updateElementExtensions } from '../../utils';
-import ProcessListenerDialog from './ProcessListenerDialog.vue';
+import ListenerFieldModal from './ListenerFieldModal.vue';
 import {
   fieldType,
   initListenerForm,
@@ -41,13 +41,9 @@ const props = defineProps({
   },
 });
 const prefix = inject('prefix');
-const width = inject('width');
 const elementListenersList = ref<any[]>([]); // 监听器列表
 const listenerForm = ref<any>({}); // 监听器详情表单
-const listenerFormModelVisible = ref(false); // 监听器 编辑 侧边栏显示状态
 const fieldsListOfListener = ref<any[]>([]);
-const listenerFieldForm = ref<any>({}); // 监听器 注入字段 详情表单
-const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状态
 const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
 const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
 const listenerTypeObject = ref(listenerType);
@@ -55,7 +51,6 @@ const fieldTypeObject = ref(fieldType);
 const otherExtensionList = ref();
 const bpmnElementListeners = ref();
 const listenerFormRef = ref();
-const listenerFieldFormRef = ref();
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 const resetListenersList = () => {
@@ -80,13 +75,12 @@ const resetListenersList = () => {
 };
 // 打开 监听器详情 侧边栏
 const openListenerForm = (listener: any, index: number) => {
-  // debugger
   if (listener) {
     listenerForm.value = initListenerForm(listener);
     editingListenerIndex.value = index;
   } else {
     listenerForm.value = {};
-    editingListenerIndex.value = -1; // 标记为新增
+    editingListenerIndex.value = -1;
   }
   if (listener && listener.fields) {
     fieldsListOfListener.value = listener.fields.map((field: any) => ({
@@ -97,8 +91,7 @@ const openListenerForm = (listener: any, index: number) => {
     fieldsListOfListener.value = [];
     listenerForm.value.fields = [];
   }
-  // 打开侧边栏并清楚验证状态
-  listenerFormModelVisible.value = true;
+  listenerDrawerApi.open();
   nextTick(() => {
     if (listenerFormRef.value) {
       listenerFormRef.value.clearValidate();
@@ -108,96 +101,64 @@ const openListenerForm = (listener: any, index: number) => {
 
 // 打开监听器字段编辑弹窗
 const openListenerFieldForm = (field: any, index: number) => {
-  listenerFieldForm.value = field ? cloneDeep(field) : {};
+  const data = field ? cloneDeep(field) : {};
   editingListenerFieldIndex.value = field ? index : -1;
-  listenerFieldFormModelVisible.value = true;
-  nextTick(() => {
-    if (listenerFieldFormRef.value) {
-      listenerFieldFormRef.value.clearValidate();
-    }
-  });
+  fieldModalApi.setData(data).open();
 };
 // 保存监听器注入字段
-const saveListenerFiled = async () => {
-  // debugger
-  const validateStatus = await listenerFieldFormRef.value.validate();
-  if (!validateStatus) return; // 验证不通过直接返回
+const saveListenerFiled = async (data: any) => {
   if (editingListenerFieldIndex.value === -1) {
-    fieldsListOfListener.value.push(listenerFieldForm.value);
-    listenerForm.value.fields.push(listenerFieldForm.value);
+    fieldsListOfListener.value.push(data);
+    listenerForm.value.fields.push(data);
   } else {
-    fieldsListOfListener.value.splice(
-      editingListenerFieldIndex.value,
-      1,
-      listenerFieldForm.value,
-    );
-    listenerForm.value.fields.splice(
-      editingListenerFieldIndex.value,
-      1,
-      listenerFieldForm.value,
-    );
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, data);
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, data);
   }
-  listenerFieldFormModelVisible.value = false;
-  nextTick(() => {
-    listenerFieldForm.value = {};
-  });
 };
 // 移除监听器字段
 const removeListenerField = (index: number) => {
-  // debugger
-  Modal.confirm({
-    title: '确认移除该字段吗？',
-    content: '此操作不可撤销',
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      fieldsListOfListener.value.splice(index, 1);
-      listenerForm.value.fields.splice(index, 1);
-    },
-    onCancel() {
-      console.warn('操作取消');
-    },
+  confirm({
+    title: '提示',
+    content: '确认移除该字段吗？',
+  }).then(() => {
+    fieldsListOfListener.value.splice(index, 1);
+    listenerForm.value.fields.splice(index, 1);
   });
 };
 // 移除监听器
 const removeListener = (index: number) => {
-  Modal.confirm({
-    title: '确认移除该监听器吗？',
-    content: '此操作不可撤销',
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      const instances = bpmnInstances();
-      if (!instances || !instances.bpmnElement) return;
-
-      bpmnElementListeners.value.splice(index, 1);
-      elementListenersList.value.splice(index, 1);
-      updateElementExtensions(instances.bpmnElement, [
-        ...otherExtensionList.value,
-        ...bpmnElementListeners.value,
-      ]);
-    },
-    onCancel() {
-      console.warn('操作取消');
-    },
+  confirm({
+    title: '提示',
+    content: '确认移除该监听器吗？',
+  }).then(() => {
+    const instances = bpmnInstances();
+    if (!instances || !instances.bpmnElement) return;
+    bpmnElementListeners.value.splice(index, 1);
+    elementListenersList.value.splice(index, 1);
+    updateElementExtensions(instances.bpmnElement, [
+      ...otherExtensionList.value,
+      ...bpmnElementListeners.value,
+    ]);
   });
 };
 // 保存监听器配置
 const saveListenerConfig = async () => {
-  // debugger
-  const validateStatus = await listenerFormRef.value.validate();
-  if (!validateStatus) return; // 验证不通过直接返回
-
-  const instances = bpmnInstances();
-  if (!instances || !instances.bpmnElement) return;
-
-  const bpmnElement = instances.bpmnElement;
+  try {
+    await listenerFormRef.value.validate();
+  } catch {
+    return;
+  }
   const listenerObject = createListenerObject(
     listenerForm.value,
     false,
     prefix,
   );
 
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+
   if (editingListenerIndex.value === -1) {
     bpmnElementListeners.value.push(listenerObject);
     elementListenersList.value.push(listenerForm.value);
@@ -213,7 +174,6 @@ const saveListenerConfig = async () => {
       listenerForm.value,
     );
   }
-  // 保存其他配置
   otherExtensionList.value =
     bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
@@ -222,15 +182,101 @@ const saveListenerConfig = async () => {
     ...otherExtensionList.value,
     ...bpmnElementListeners.value,
   ]);
-  // 4. 隐藏侧边栏
-  listenerFormModelVisible.value = false;
+  listenerDrawerApi.close();
   listenerForm.value = {};
 };
 
+// 配置主列表 Grid
+const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'event', title: '事件类型', minWidth: 100 },
+      {
+        field: 'listenerType',
+        title: '监听器类型',
+        minWidth: 100,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (listenerTypeObject.value as Record<string, any>)[cellValue],
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置字段列表 Grid
+const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'name', title: '字段名称', minWidth: 100 },
+      {
+        field: 'fieldType',
+        title: '字段类型',
+        minWidth: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (fieldTypeObject.value as Record<string, any>)[cellValue],
+      },
+      {
+        title: '字段值/表达式',
+        minWidth: 100,
+        formatter: ({ row }: { row: any }) => row.string || row.expression,
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    maxHeight: 200,
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置 Drawer
+const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
+  title: '执行监听器',
+  destroyOnClose: true,
+  onConfirm: saveListenerConfig,
+});
+
+// 配置字段 Modal
+const [FieldModal, fieldModalApi] = useVbenModal({
+  connectedComponent: ListenerFieldModal,
+});
+
+// 配置选择监听器 Modal
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });
+
 // 打开监听器弹窗
-const processListenerDialogRef = ref();
 const openProcessListenerDialog = async () => {
-  processListenerDialogRef.value.open('execution');
+  processListenerSelectModalApi.setData({ type: 'execution' }).open();
 };
 const selectProcessListener = (listener: any) => {
   const instances = bpmnInstances();
@@ -253,6 +299,22 @@ const selectProcessListener = (listener: any) => {
   ]);
 };
 
+watch(
+  elementListenersList,
+  (val) => {
+    listenerGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  fieldsListOfListener,
+  (val) => {
+    fieldsGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
 watch(
   () => props.id,
   (val: string) => {
@@ -266,56 +328,44 @@ watch(
 );
 </script>
 <template>
-  <div class="panel-tab__content">
-    <Table
-      :data-source="elementListenersList"
-      size="small"
-      bordered
-      :pagination="false"
-    >
-      <TableColumn title="序号" width="50px">
-        <template #default="{ index }">
-          {{ index + 1 }}
-        </template>
-      </TableColumn>
-      <TableColumn title="事件类型" width="100px" data-index="event" />
-      <TableColumn
-        title="监听器类型"
-        width="100px"
-        :custom-render="
-          ({ record }: any) =>
-            listenerTypeObject[record.listenerType as keyof typeof listenerType]
-        "
-      />
-      <TableColumn title="操作" width="100px">
-        <template #default="{ record, index }">
-          <Button
-            size="small"
-            type="link"
-            @click="openListenerForm(record, index)"
-          >
-            编辑
-          </Button>
-          <Divider type="vertical" />
-          <Button
-            size="small"
-            type="link"
-            danger
-            @click="removeListener(index)"
-          >
-            移除
-          </Button>
-        </template>
-      </TableColumn>
-    </Table>
-    <div class="element-drawer__button">
-      <Button type="primary" size="small" @click="openListenerForm(null, -1)">
+  <div class="-mx-2">
+    <ListenerGrid :data="elementListenersList">
+      <template #action="{ row, rowIndex }">
+        <Button
+          size="small"
+          type="link"
+          @click="openListenerForm(row, rowIndex)"
+        >
+          编辑
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          size="small"
+          type="link"
+          danger
+          @click="removeListener(rowIndex)"
+        >
+          移除
+        </Button>
+      </template>
+    </ListenerGrid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <Button
+        class="flex flex-1 items-center justify-center"
+        type="primary"
+        size="small"
+        @click="openListenerForm(null, -1)"
+      >
         <template #icon>
           <IconifyIcon icon="ep:plus" />
         </template>
         添加监听器
       </Button>
-      <Button size="small" @click="openProcessListenerDialog">
+      <Button
+        class="flex flex-1 items-center justify-center"
+        size="small"
+        @click="openProcessListenerDialog"
+      >
         <template #icon>
           <IconifyIcon icon="ep:select" />
         </template>
@@ -324,13 +374,13 @@ watch(
     </div>
 
     <!-- 监听器 编辑/创建 部分 -->
-    <Drawer
-      v-model:open="listenerFormModelVisible"
-      title="执行监听器"
-      :width="width as any"
-      :destroy-on-close="true"
-    >
-      <Form :model="listenerForm" ref="listenerFormRef">
+    <ListenerDrawer>
+      <Form
+        :model="listenerForm"
+        ref="listenerFormRef"
+        :label-col="{ span: 5 }"
+        :wrapper-col="{ span: 19 }"
+      >
         <FormItem
           label="事件类型"
           name="event"
@@ -484,8 +534,9 @@ watch(
           注入字段
         </span>
         <Button
-          type="primary"
-          title="添加字段"
+          class="flex items-center"
+          size="small"
+          type="link"
           @click="openListenerFieldForm(null, -1)"
         >
           <template #icon>
@@ -494,143 +545,32 @@ watch(
           添加字段
         </Button>
       </div>
-      <Table :data-source="fieldsListOfListener" size="small" bordered>
-        <TableColumn title="序号" width="50px">
-          <template #default="{ index }">
-            {{ index + 1 }}
-          </template>
-        </TableColumn>
-        <TableColumn title="字段名称" width="100px" data-index="name" />
-        <TableColumn
-          title="字段类型"
-          width="80px"
-          :custom-render="
-            ({ record }: any) =>
-              fieldTypeObject[record.fieldType as keyof typeof fieldType]
-          "
-        />
-        <TableColumn
-          title="字段值/表达式"
-          width="120px"
-          :custom-render="
-            ({ record }: any) => record.string || record.expression
-          "
-        />
-        <TableColumn title="操作" width="80px" fixed="right">
-          <template #default="{ record, index }">
-            <Button
-              size="small"
-              type="link"
-              @click="openListenerFieldForm(record, index)"
-            >
-              编辑
-            </Button>
-            <Divider type="vertical" />
-            <Button
-              size="small"
-              type="link"
-              danger
-              @click="removeListenerField(index)"
-            >
-              移除
-            </Button>
-          </template>
-        </TableColumn>
-      </Table>
-
-      <div class="element-drawer__button">
-        <Button @click="listenerFormModelVisible = false">取 消</Button>
-        <Button type="primary" @click="saveListenerConfig">保 存</Button>
-      </div>
-    </Drawer>
+      <FieldsGrid :data="fieldsListOfListener">
+        <template #action="{ row, rowIndex }">
+          <Button
+            size="small"
+            type="link"
+            @click="openListenerFieldForm(row, rowIndex)"
+          >
+            编辑
+          </Button>
+          <Divider type="vertical" />
+          <Button
+            size="small"
+            type="link"
+            danger
+            @click="removeListenerField(rowIndex)"
+          >
+            移除
+          </Button>
+        </template>
+      </FieldsGrid>
+    </ListenerDrawer>
 
     <!-- 注入字段 编辑/创建 部分 -->
-    <Modal
-      title="字段配置"
-      v-model:open="listenerFieldFormModelVisible"
-      width="600px"
-      :destroy-on-close="true"
-    >
-      <Form :model="listenerFieldForm" ref="listenerFieldFormRef">
-        <FormItem
-          label="字段名称："
-          name="name"
-          :rules="[
-            {
-              required: true,
-              message: '请填写字段名称',
-              trigger: ['blur', 'change'],
-            },
-          ]"
-        >
-          <Input v-model:value="listenerFieldForm.name" allow-clear />
-        </FormItem>
-        <FormItem
-          label="字段类型："
-          name="fieldType"
-          :rules="[
-            {
-              required: true,
-              message: '请选择字段类型',
-              trigger: ['blur', 'change'],
-            },
-          ]"
-        >
-          <Select v-model:value="listenerFieldForm.fieldType">
-            <SelectOption
-              v-for="i in Object.keys(fieldTypeObject)"
-              :key="i"
-              :value="i"
-            >
-              {{ fieldTypeObject[i as keyof typeof fieldType] }}
-            </SelectOption>
-          </Select>
-        </FormItem>
-        <FormItem
-          v-if="listenerFieldForm.fieldType === 'string'"
-          label="字段值："
-          name="string"
-          key="field-string"
-          :rules="[
-            {
-              required: true,
-              message: '请填写字段值',
-              trigger: ['blur', 'change'],
-            },
-          ]"
-        >
-          <Input v-model:value="listenerFieldForm.string" allow-clear />
-        </FormItem>
-        <FormItem
-          v-if="listenerFieldForm.fieldType === 'expression'"
-          label="表达式："
-          name="expression"
-          key="field-expression"
-          :rules="[
-            {
-              required: true,
-              message: '请填写表达式',
-              trigger: ['blur', 'change'],
-            },
-          ]"
-        >
-          <Input v-model:value="listenerFieldForm.expression" allow-clear />
-        </FormItem>
-      </Form>
-      <template #footer>
-        <Button size="small" @click="listenerFieldFormModelVisible = false">
-          取 消
-        </Button>
-        <Button size="small" type="primary" @click="saveListenerFiled">
-          确 定
-        </Button>
-      </template>
-    </Modal>
+    <FieldModal @confirm="saveListenerFiled" />
   </div>
 
   <!-- 选择弹窗 -->
-  <ProcessListenerDialog
-    ref="processListenerDialogRef"
-    @select="selectProcessListener"
-  />
+  <ProcessListenerSelectModalComp @select="selectProcessListener" />
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
new file mode 100644
index 000000000..4cce76196
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
+
+import { fieldType } from './utilSelf';
+
+defineOptions({ name: 'ListenerFieldModal' });
+
+const emit = defineEmits<{
+  confirm: [data: any];
+}>();
+
+const fieldTypeObject = ref(fieldType);
+const form = ref<any>({});
+const formRef = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<any>();
+      form.value = data || {};
+      // clear validate
+      setTimeout(() => {
+        formRef.value?.clearValidate();
+      }, 50);
+    }
+  },
+  onConfirm: async () => {
+    try {
+      await formRef.value?.validate();
+      emit('confirm', { ...form.value });
+      modalApi.close();
+    } catch {
+      // validate failed
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="字段配置" class="w-3/5">
+    <Form
+      ref="formRef"
+      :model="form"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem
+        label="字段名称："
+        name="name"
+        :rules="[
+          {
+            required: true,
+            message: '请填写字段名称',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <Input v-model:value="form.name" allow-clear />
+      </FormItem>
+      <FormItem
+        label="字段类型："
+        name="fieldType"
+        :rules="[
+          {
+            required: true,
+            message: '请选择字段类型',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <Select v-model:value="form.fieldType">
+          <SelectOption
+            v-for="i in Object.keys(fieldTypeObject)"
+            :key="i"
+            :value="i"
+          >
+            {{ fieldTypeObject[i as keyof typeof fieldType] }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem
+        v-if="form.fieldType === 'string'"
+        label="字段值："
+        name="string"
+        key="field-string"
+        :rules="[
+          {
+            required: true,
+            message: '请填写字段值',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <Input v-model:value="form.string" allow-clear />
+      </FormItem>
+      <FormItem
+        v-if="form.fieldType === 'expression'"
+        label="表达式："
+        name="expression"
+        key="field-expression"
+        :rules="[
+          {
+            required: true,
+            message: '请填写表达式',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <Input v-model:value="form.expression" allow-clear />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
deleted file mode 100644
index 1798f67f4..000000000
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<!-- 执行器选择 -->
-<script setup lang="ts">
-import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
-
-import { reactive, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
-
-import { Button, Modal, Pagination, Table } from 'ant-design-vue';
-
-import { getProcessListenerPage } from '#/api/bpm/processListener';
-import { DictTag } from '#/components/dict-tag';
-
-/** BPM 流程 表单 */
-defineOptions({ name: 'ProcessListenerDialog' });
-
-/** 提交表单 */
-const emit = defineEmits(['success', 'select']);
-const dialogVisible = ref(false); // 弹窗的是否展示
-const loading = ref(true); // 列表的加载中
-const list = ref<BpmProcessListenerApi.ProcessListener[]>([]); // 列表的数据
-const total = ref(0); // 列表的总页数
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  type: '',
-  status: CommonStatusEnum.ENABLE,
-});
-
-/** 打开弹窗 */
-const open = async (type: string) => {
-  queryParams.pageNo = 1;
-  queryParams.type = type;
-  await getList();
-  dialogVisible.value = true;
-};
-defineExpose({ open }); // 提供 open 方法，用于打开弹窗
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true;
-  try {
-    const data = await getProcessListenerPage(queryParams);
-    list.value = data.list;
-    total.value = data.total;
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 定义 success 事件，用于操作成功后的回调
-const select = async (row: BpmProcessListenerApi.ProcessListener) => {
-  dialogVisible.value = false;
-  // 发送操作成功的事件
-  emit('select', row);
-};
-</script>
-<template>
-  <Modal
-    title="请选择监听器"
-    v-model:open="dialogVisible"
-    width="1024px"
-    :footer="null"
-  >
-    <ContentWrap>
-      <Table
-        :loading="loading"
-        :data-source="list"
-        :pagination="false"
-        :scroll="{ x: 'max-content' }"
-      >
-        <Table.Column title="名字" align="center" data-index="name" />
-        <Table.Column title="类型" align="center" data-index="type">
-          <template #default="{ record }">
-            <DictTag
-              :type="DICT_TYPE.BPM_PROCESS_LISTENER_TYPE"
-              :value="record.type"
-            />
-          </template>
-        </Table.Column>
-        <Table.Column title="事件" align="center" data-index="event" />
-        <Table.Column title="值类型" align="center" data-index="valueType">
-          <template #default="{ record }">
-            <DictTag
-              :type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE"
-              :value="record.valueType"
-            />
-          </template>
-        </Table.Column>
-        <Table.Column title="值" align="center" data-index="value" />
-        <Table.Column title="操作" align="center" fixed="right">
-          <template #default="{ record }">
-            <Button type="primary" @click="select(record)"> 选择 </Button>
-          </template>
-        </Table.Column>
-      </Table>
-      <!-- 分页 -->
-      <div class="mt-4 flex justify-end">
-        <Pagination
-          :total="total"
-          v-model:current="queryParams.pageNo"
-          v-model:page-size="queryParams.pageSize"
-          show-size-changer
-          @change="getList"
-        />
-      </div>
-    </ContentWrap>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
index 2788ef29c..ba5747d08 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -16,9 +16,10 @@ import {
 } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import ProcessListenerDialog from '#/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue';
+import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
 
 import { createListenerObject, updateElementExtensions } from '../../utils';
+import ListenerFieldModal from './ListenerFieldModal.vue';
 import {
   eventType,
   fieldType,
@@ -47,11 +48,9 @@ const fieldTypeObject = ref(fieldType);
 const fieldsListOfListener = ref<any[]>([]);
 const editingListenerIndex = ref(-1);
 const editingListenerFieldIndex = ref<any>(-1);
-const listenerFieldForm = ref<any>({});
 const bpmnElementListeners = ref<any[]>([]);
 const otherExtensionList = ref<any[]>([]);
 const listenerFormRef = ref<any>({});
-const listenerFieldFormRef = ref<any>({});
 
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
@@ -157,12 +156,9 @@ async function saveListenerConfig() {
 }
 
 const openListenerFieldForm = (field: any, index?: number) => {
-  listenerFieldForm.value = field ? cloneDeep(field) : {};
+  const data = field ? cloneDeep(field) : {};
   editingListenerFieldIndex.value = field ? index : -1;
-  fieldModalApi.open();
-  nextTick(() => {
-    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
-  });
+  fieldModalApi.setData(data).open();
 };
 
 const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
@@ -203,28 +199,13 @@ const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
   },
 });
 
-async function saveListenerField() {
-  try {
-    await listenerFieldFormRef.value.validate();
-    if (editingListenerFieldIndex.value === -1) {
-      fieldsListOfListener.value.push(cloneDeep(listenerFieldForm.value));
-      listenerForm.value.fields.push(cloneDeep(listenerFieldForm.value));
-    } else {
-      fieldsListOfListener.value.splice(
-        editingListenerFieldIndex.value,
-        1,
-        cloneDeep(listenerFieldForm.value),
-      );
-      listenerForm.value.fields.splice(
-        editingListenerFieldIndex.value,
-        1,
-        cloneDeep(listenerFieldForm.value),
-      );
-    }
-    fieldModalApi.close();
-    listenerFieldForm.value = {};
-  } catch (error) {
-    console.error(error);
+async function saveListenerField(data: any) {
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(data);
+    listenerForm.value.fields.push(data);
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, data);
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, data);
   }
 }
 
@@ -238,9 +219,8 @@ const removeListenerField = (_: any, index: number) => {
   });
 };
 
-const processListenerDialogRef = ref<any>();
 const openProcessListenerDialog = async () => {
-  processListenerDialogRef.value.open('task');
+  processListenerSelectModalApi.setData({ type: 'task' }).open();
 };
 const selectProcessListener = (listener: any) => {
   const instances = bpmnInstances();
@@ -248,6 +228,7 @@ const selectProcessListener = (listener: any) => {
 
   const bpmnElement = instances.bpmnElement;
   const listenerForm = initListenerForm2(listener);
+  listenerForm.id = listener.id;
   const listenerObject = createListenerObject(listenerForm, true, prefix);
   bpmnElementListeners.value.push(listenerObject);
   elementListenersList.value.push(listenerForm);
@@ -269,10 +250,15 @@ const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
 });
 
 const [FieldModal, fieldModalApi] = useVbenModal({
-  title: '字段配置',
-  onConfirm: saveListenerField,
+  connectedComponent: ListenerFieldModal,
 });
 
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });
+
 const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: [
@@ -568,60 +554,9 @@ watch(
     </ListenerDrawer>
 
     <!-- 注入字段 编辑/创建 部分 -->
-    <FieldModal class="w-3/5">
-      <Form
-        :label-col="{ span: 4 }"
-        :wrapper-col="{ span: 18 }"
-        :model="listenerFieldForm"
-        ref="listenerFieldFormRef"
-      >
-        <FormItem
-          label="字段名称："
-          name="name"
-          :rules="[{ required: true, message: '请输入字段名称' }]"
-        >
-          <Input v-model:value="listenerFieldForm.name" allow-clear />
-        </FormItem>
-        <FormItem
-          label="字段类型："
-          name="fieldType"
-          :rules="[{ required: true, message: '请选择字段类型' }]"
-        >
-          <Select v-model:value="listenerFieldForm.fieldType">
-            <SelectOption
-              v-for="i in Object.keys(fieldTypeObject)"
-              :key="i"
-              :value="i"
-            >
-              {{ fieldTypeObject[i as keyof typeof fieldType] }}
-            </SelectOption>
-          </Select>
-        </FormItem>
-        <FormItem
-          v-if="listenerFieldForm.fieldType === 'string'"
-          label="字段值："
-          name="string"
-          key="field-string"
-          :rules="[{ required: true, message: '请输入字段值' }]"
-        >
-          <Input v-model:value="listenerFieldForm.string" allow-clear />
-        </FormItem>
-        <FormItem
-          v-if="listenerFieldForm.fieldType === 'expression'"
-          label="表达式："
-          name="expression"
-          key="field-expression"
-          :rules="[{ required: true, message: '请输入表达式' }]"
-        >
-          <Input v-model:value="listenerFieldForm.expression" allow-clear />
-        </FormItem>
-      </Form>
-    </FieldModal>
+    <FieldModal @confirm="saveListenerField" />
   </div>
 
   <!-- 选择弹窗 -->
-  <ProcessListenerDialog
-    ref="processListenerDialogRef"
-    @select="selectProcessListener"
-  />
+  <ProcessListenerSelectModalComp @select="selectProcessListener" />
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
index 52d33902f..2cfd78dfa 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
@@ -53,6 +53,7 @@ export function initListenerForm2(processListener: any) {
         class: processListener.value,
         event: processListener.event,
         fields: [],
+        id: undefined,
       };
     }
     case 'delegateExpression': {
@@ -61,6 +62,7 @@ export function initListenerForm2(processListener: any) {
         delegateExpression: processListener.value,
         event: processListener.event,
         fields: [],
+        id: undefined,
       };
     }
     case 'expression': {
@@ -69,6 +71,7 @@ export function initListenerForm2(processListener: any) {
         expression: processListener.value,
         event: processListener.event,
         fields: [],
+        id: undefined,
       };
     }
     // No default
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
index 02ec3e106..9c5c16c9e 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -1,4 +1,4 @@
-<!-- eslint-disable unused-imports/no-unused-vars -->
+<!-- eslint-disable no-unused-vars -->
 <script lang="ts" setup>
 import { inject, nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
@@ -73,6 +73,7 @@ declare global {
 
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
+// eslint-disable-next-line unused-imports/no-unused-vars
 const getElementLoop = (businessObject: any): void => {
   if (!businessObject.loopCharacteristics) {
     loopCharacteristics.value = 'Null';
@@ -278,6 +279,8 @@ const approveRatio = ref<number>(100);
 const otherExtensions = ref<any[]>([]);
 const getElementLoopNew = (): void => {
   if (props.type === 'UserTask') {
+    const loopCharacteristics =
+      bpmnElement.value.businessObject?.loopCharacteristics;
     const extensionElements =
       bpmnElement.value.businessObject?.extensionElements ??
       bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
@@ -294,10 +297,25 @@ const getElementLoopNew = (): void => {
       approveMethod.value = ApproveMethodType.SEQUENTIAL_APPROVE;
       updateLoopCharacteristics();
     }
+
+    // 如果是按比例会签，从现有 completionCondition 中解析比例，反推到 approveRatio
+    if (
+      approveMethod.value === ApproveMethodType.APPROVE_BY_RATIO &&
+      loopCharacteristics?.completionCondition?.body
+    ) {
+      const body = loopCharacteristics.completionCondition.body as string;
+      // 形如 "${ nrOfCompletedInstances/nrOfInstances >= 0.9 }"
+      const match = body.match(/>=\s*(\d+(?:\.\d+)?)/);
+      if (match) {
+        const ratio = Number(match[1]);
+        if (!Number.isNaN(ratio)) {
+          approveRatio.value = ratio * 100;
+        }
+      }
+    }
   }
 };
 const onApproveMethodChange = (): void => {
-  approveRatio.value = 100;
   updateLoopCharacteristics();
 };
 const onApproveRatioChange = (): void => {
@@ -393,31 +411,29 @@ watch(
 </script>
 
 <template>
-  <div class="panel-tab__content">
+  <div class="-mx-2 px-2">
     <RadioGroup
       v-if="type === 'UserTask'"
       v-model:value="approveMethod"
       @change="onApproveMethodChange"
     >
-      <div class="flex-col">
+      <div class="flex flex-col gap-3">
         <div v-for="(item, index) in APPROVE_METHODS" :key="index">
           <Radio :value="item.value">
             {{ item.label }}
           </Radio>
-          <FormItem prop="approveRatio">
-            <InputNumber
-              v-model:value="approveRatio"
-              :min="10"
-              :max="100"
-              :step="10"
-              size="small"
-              v-if="
-                item.value === ApproveMethodType.APPROVE_BY_RATIO &&
-                approveMethod === ApproveMethodType.APPROVE_BY_RATIO
-              "
-              @change="onApproveRatioChange"
-            />
-          </FormItem>
+          <InputNumber
+            v-if="
+              item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+              approveMethod === ApproveMethodType.APPROVE_BY_RATIO
+            "
+            v-model:value="approveRatio"
+            :min="10"
+            :max="100"
+            :step="10"
+            size="small"
+            @change="onApproveRatioChange"
+          />
         </div>
       </div>
     </RadioGroup>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
index bf8250eda..019d3829e 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
-import { Input } from 'ant-design-vue';
+import { Textarea } from 'ant-design-vue';
 
 defineOptions({ name: 'ElementOtherConfig' });
 
@@ -12,8 +12,6 @@ const props = defineProps({
   },
 });
 
-const { Textarea } = Input;
-
 const documentation = ref('');
 const bpmnElement = ref();
 
@@ -58,10 +56,10 @@ watch(
 </script>
 
 <template>
-  <div class="panel-tab__content">
-    <div class="element-property input-property">
-      <div class="element-property__label">元素文档：</div>
-      <div class="element-property__value">
+  <div class="px-2 py-1">
+    <div class="flex items-start gap-2">
+      <div class="w-20 pt-1 text-sm text-gray-700">元素文档：</div>
+      <div class="flex-1">
         <Textarea
           v-model:value="documentation"
           :auto-size="{ minRows: 2, maxRows: 4 }"
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
index cc96afa68..beae93e1b 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
@@ -1,19 +1,13 @@
 <script lang="ts" setup>
 import { inject, nextTick, ref, watch } from 'vue';
 
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import {
-  Button,
-  Divider,
-  Form,
-  FormItem,
-  Input,
-  Modal,
-  Table,
-  TableColumn,
-} from 'ant-design-vue';
+import { Button, Divider, Form, FormItem, Input } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 defineOptions({ name: 'ElementProperties' });
 
@@ -29,12 +23,10 @@ const props = defineProps({
 });
 
 const prefix = inject('prefix');
-// const width = inject('width')
 
 const elementPropertyList = ref<Array<{ name: string; value: string }>>([]);
 const propertyForm = ref<{ name?: string; value?: string }>({});
 const editingPropertyIndex = ref(-1);
-const propertyFormModelVisible = ref(false);
 const otherExtensionList = ref<any[]>([]);
 const bpmnElementProperties = ref<any[]>([]);
 const bpmnElementPropertyList = ref<any[]>([]);
@@ -58,57 +50,41 @@ const resetAttributesList = () => {
       return ex.$type === `${prefix}:Properties`;
     }) ?? [];
 
-  // 保存所有的 扩展属性字段
   bpmnElementPropertyList.value = bpmnElementProperties.value.flatMap(
     (current: any) => current.values,
   );
-  // 复制 显示
   elementPropertyList.value = cloneDeep(bpmnElementPropertyList.value ?? []);
 };
 
-const openAttributesForm = (
-  attr: null | { name: string; value: string },
-  index: number,
-) => {
-  editingPropertyIndex.value = index;
-  // @ts-ignore
-  propertyForm.value = index === -1 ? {} : cloneDeep(attr);
-  propertyFormModelVisible.value = true;
-  nextTick(() => {
-    if (attributeFormRef.value) attributeFormRef.value.clearValidate();
-  });
-};
-
 const removeAttributes = (
   _attr: { name: string; value: string },
   index: number,
 ) => {
-  Modal.confirm({
+  confirm({
     title: '提示',
     content: '确认移除该属性吗？',
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      elementPropertyList.value.splice(index, 1);
-      bpmnElementPropertyList.value.splice(index, 1);
-      // 新建一个属性字段的保存列表
-      const propertiesObject = bpmnInstances().moddle.create(
-        `${prefix}:Properties`,
-        {
-          values: bpmnElementPropertyList.value,
-        },
-      );
-      updateElementExtensions(propertiesObject);
-      resetAttributesList();
-    },
-    onCancel() {
-      // console.info('操作取消');
-    },
+  }).then(() => {
+    elementPropertyList.value.splice(index, 1);
+    bpmnElementPropertyList.value.splice(index, 1);
+    const propertiesObject = bpmnInstances().moddle.create(
+      `${prefix}:Properties`,
+      {
+        values: bpmnElementPropertyList.value,
+      },
+    );
+    updateElementExtensions(propertiesObject);
+    resetAttributesList();
   });
 };
 
-const saveAttribute = () => {
-  // console.log(propertyForm.value, 'propertyForm.value');
+const saveAttribute = async () => {
+  try {
+    await attributeFormRef.value?.validate();
+  } catch {
+    // 校验未通过，直接返回
+    return;
+  }
+
   const { name, value } = propertyForm.value;
   const instances = bpmnInstances();
   if (!instances || !instances.bpmnElement) return;
@@ -136,7 +112,7 @@ const saveAttribute = () => {
       },
     );
   }
-  propertyFormModelVisible.value = false;
+  fieldModalApi.close();
   resetAttributesList();
 };
 
@@ -153,11 +129,61 @@ const updateElementExtensions = (properties: any) => {
   });
 };
 
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'name', title: '属性名', minWidth: 120 },
+      { field: 'value', title: '属性值', minWidth: 120 },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [FieldModal, fieldModalApi] = useVbenModal({
+  title: '属性配置',
+  onConfirm: saveAttribute,
+});
+
+const openAttributesForm = (
+  attr: null | { name: string; value: string },
+  index: number,
+) => {
+  editingPropertyIndex.value = index;
+  propertyForm.value = index === -1 ? {} : cloneDeep(attr || {});
+  fieldModalApi.open();
+  nextTick(() => {
+    if (attributeFormRef.value) attributeFormRef.value.clearValidate();
+  });
+};
+
+watch(
+  elementPropertyList,
+  (val) => {
+    gridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
 watch(
   () => props.id,
   (val) => {
-    if (val) {
-      val && val.length > 0 && resetAttributesList();
+    if (val && val.length > 0) {
+      resetAttributesList();
     }
   },
   { immediate: true },
@@ -165,38 +191,34 @@ watch(
 </script>
 
 <template>
-  <div class="panel-tab__content">
-    <Table :data="elementPropertyList" size="small" bordered>
-      <TableColumn title="序号" width="50">
-        <template #default="{ index }">
-          {{ index + 1 }}
-        </template>
-      </TableColumn>
-      <TableColumn title="属性名" data-index="name" />
-      <TableColumn title="属性值" data-index="value" />
-      <TableColumn title="操作">
-        <template #default="{ record, index }">
-          <Button
-            type="link"
-            @click="openAttributesForm(record, index)"
-            size="small"
-          >
-            编辑
-          </Button>
-          <Divider type="vertical" />
-          <Button
-            type="link"
-            size="small"
-            danger
-            @click="removeAttributes(record, index)"
-          >
-            移除
-          </Button>
-        </template>
-      </TableColumn>
-    </Table>
-    <div class="element-drawer__button">
-      <Button type="primary" @click="openAttributesForm(null, -1)">
+  <div class="-mx-2">
+    <Grid :data="elementPropertyList">
+      <template #action="{ row, rowIndex }">
+        <Button
+          size="small"
+          type="link"
+          @click="openAttributesForm(row, rowIndex)"
+        >
+          编辑
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          size="small"
+          type="link"
+          danger
+          @click="removeAttributes(row, rowIndex)"
+        >
+          移除
+        </Button>
+      </template>
+    </Grid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <Button
+        class="flex flex-1 items-center justify-center"
+        type="primary"
+        size="small"
+        @click="openAttributesForm(null, -1)"
+      >
         <template #icon>
           <IconifyIcon icon="ep:plus" />
         </template>
@@ -204,24 +226,28 @@ watch(
       </Button>
     </div>
 
-    <Modal
-      v-model:open="propertyFormModelVisible"
-      title="属性配置"
-      :width="600"
-      :destroy-on-close="true"
-    >
-      <Form :model="propertyForm" ref="attributeFormRef">
-        <FormItem label="属性名：" name="name">
+    <FieldModal class="w-3/5">
+      <Form
+        :model="propertyForm"
+        ref="attributeFormRef"
+        :label-col="{ span: 5 }"
+        :wrapper-col="{ span: 17 }"
+      >
+        <FormItem
+          label="属性名："
+          name="name"
+          :rules="[{ required: true, message: '请输入属性名' }]"
+        >
           <Input v-model:value="propertyForm.name" allow-clear />
         </FormItem>
-        <FormItem label="属性值：" name="value">
+        <FormItem
+          label="属性值："
+          name="value"
+          :rules="[{ required: true, message: '请输入属性值' }]"
+        >
           <Input v-model:value="propertyForm.value" allow-clear />
         </FormItem>
       </Form>
-      <template #footer>
-        <Button @click="propertyFormModelVisible = false">取 消</Button>
-        <Button type="primary" @click="saveAttribute">确 定</Button>
-      </template>
-    </Modal>
+    </FieldModal>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
index c05793c3f..d3dd79bb7 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
@@ -10,17 +11,16 @@ import {
   FormItem,
   Input,
   message,
-  Modal,
-  Table,
-  TableColumn,
 } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 defineOptions({ name: 'SignalAndMassage' });
 const signalList = ref<any[]>([]);
 const messageList = ref<any[]>([]);
-const dialogVisible = ref(false);
 const modelType = ref('');
 const modelObjectForm = ref<any>({});
+const formRef = ref();
 const rootElements = ref();
 const messageIdMap = ref();
 const signalIdMap = ref();
@@ -50,7 +50,6 @@ const generateStandardId = (type: string): string => {
 };
 
 const initDataList = () => {
-  // console.log(window, 'window');
   rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements;
   messageIdMap.value = {};
   signalIdMap.value = {};
@@ -75,17 +74,24 @@ const openModel = (type: any) => {
     id: generateStandardId(type),
     name: '',
   };
-  dialogVisible.value = true;
+  modelModalApi.open();
 };
 
 const openEditModel = (type: any, row: any, index: number) => {
   modelType.value = type;
   editingIndex.value = index;
   modelObjectForm.value = { ...row };
-  dialogVisible.value = true;
+  modelModalApi.open();
 };
 
-const addNewObject = () => {
+const addNewObject = async () => {
+  try {
+    await formRef.value?.validate();
+  } catch {
+    // 校验未通过，直接返回
+    return;
+  }
+
   if (modelType.value === 'message') {
     // 编辑模式
     if (editingIndex.value === -1) {
@@ -135,37 +141,29 @@ const addNewObject = () => {
       }
     }
   }
-  dialogVisible.value = false;
-  // 触发建模器更新以保存更改
+  modelModalApi.close();
+  // 触发建模器更新以保存更改。
   saveChanges();
   initDataList();
 };
 
 // 补充"编辑"、"移除"功能。相关 issue：https://github.com/YunaiV/yudao-cloud/issues/270
 const removeObject = (type: any, row: any) => {
-  Modal.confirm({
+  confirm({
     title: '提示',
     content: `确认移除该${type === 'message' ? '消息' : '信号'}吗？`,
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      // 从 rootElements 中移除
-      const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal';
-      const elementIndex = rootElements.value.findIndex(
-        (el: any) => el.$type === targetType && el.id === row.id,
-      );
-      if (elementIndex !== -1) {
-        rootElements.value.splice(elementIndex, 1);
-      }
-      // 触发建模器更新以保存更改
-      saveChanges();
-      // 刷新列表
-      initDataList();
-      message.success('移除成功');
-    },
-    onCancel() {
-      // console.info('操作取消');
-    },
+  }).then(() => {
+    // 从 rootElements 中移除
+    const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal';
+    const elementIndex = rootElements.value.findIndex(
+      (el: any) => el.$type === targetType && el.id === row.id,
+    );
+    if (elementIndex !== -1) {
+      rootElements.value.splice(elementIndex, 1);
+    }
+    // 刷新列表
+    initDataList();
+    message.success('移除成功');
   });
 };
 
@@ -202,114 +200,178 @@ const saveChanges = () => {
   }
 };
 
+const [MessageGrid, messageGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'id', title: '消息ID', minWidth: 120 },
+      { field: 'name', title: '消息名称', minWidth: 100 },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [SignalGrid, signalGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'id', title: '信号ID', minWidth: 120 },
+      { field: 'name', title: '信号名称', minWidth: 100 },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [ModelModal, modelModalApi] = useVbenModal({
+  destroyOnClose: true,
+  onConfirm: addNewObject,
+});
+
 onMounted(() => {
   initDataList();
 });
+
+watch(
+  messageList,
+  (val) => {
+    messageGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  signalList,
+  (val) => {
+    signalGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
 </script>
 <template>
-  <div class="panel-tab__content">
-    <div class="panel-tab__content--title">
+  <div class="-mx-2">
+    <div class="mb-2 flex items-center justify-between">
       <span class="flex items-center">
         <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
         消息列表
       </span>
-      <Button type="primary" title="创建新消息" @click="openModel('message')">
+      <Button
+        class="flex items-center"
+        size="small"
+        type="link"
+        @click="openModel('message')"
+      >
         <template #icon>
           <IconifyIcon icon="ep:plus" />
         </template>
         创建新消息
       </Button>
     </div>
-    <Table :data-source="messageList" size="small" bordered>
-      <TableColumn title="序号" width="60px">
-        <template #default="{ index }">
-          {{ index + 1 }}
-        </template>
-      </TableColumn>
-      <TableColumn title="消息ID" data-index="id" />
-      <TableColumn title="消息名称" data-index="name" />
-      <TableColumn title="操作" width="110px">
-        <template #default="{ record, index }">
-          <Button
-            size="small"
-            type="link"
-            @click="openEditModel('message', record, index)"
-          >
-            编辑
-          </Button>
-          <Divider type="vertical" />
-          <Button
-            size="small"
-            type="link"
-            danger
-            @click="removeObject('message', record)"
-          >
-            移除
-          </Button>
-        </template>
-      </TableColumn>
-    </Table>
-    <div class="panel-tab__content--title mt-2 border-t border-gray-200 pt-2">
+    <MessageGrid :data="messageList">
+      <template #action="{ row, rowIndex }">
+        <Button
+          size="small"
+          type="link"
+          @click="openEditModel('message', row, rowIndex)"
+        >
+          编辑
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          size="small"
+          type="link"
+          danger
+          @click="removeObject('message', row)"
+        >
+          移除
+        </Button>
+      </template>
+    </MessageGrid>
+    <div
+      class="mb-2 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+    >
       <span class="flex items-center">
         <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
         信号列表
       </span>
-      <Button type="primary" title="创建新信号" @click="openModel('signal')">
+      <Button
+        class="flex items-center"
+        size="small"
+        type="link"
+        @click="openModel('signal')"
+      >
         <template #icon>
           <IconifyIcon icon="ep:plus" />
         </template>
         创建新信号
       </Button>
     </div>
-    <Table :data-source="signalList" size="small" bordered>
-      <TableColumn title="序号" width="60px">
-        <template #default="{ index }">
-          {{ index + 1 }}
-        </template>
-      </TableColumn>
-      <TableColumn title="信号ID" data-index="id" />
-      <TableColumn title="信号名称" data-index="name" />
-      <TableColumn title="操作" width="110px">
-        <template #default="{ record, index }">
-          <Button
-            size="small"
-            type="link"
-            @click="openEditModel('signal', record, index)"
-          >
-            编辑
-          </Button>
-          <Divider type="vertical" />
-          <Button
-            size="small"
-            type="link"
-            danger
-            @click="removeObject('signal', record)"
-          >
-            移除
-          </Button>
-        </template>
-      </TableColumn>
-    </Table>
+    <SignalGrid :data="signalList">
+      <template #action="{ row, rowIndex }">
+        <Button
+          size="small"
+          type="link"
+          @click="openEditModel('signal', row, rowIndex)"
+        >
+          编辑
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          size="small"
+          type="link"
+          danger
+          @click="removeObject('signal', row)"
+        >
+          移除
+        </Button>
+      </template>
+    </SignalGrid>
 
-    <Modal
-      v-model:open="dialogVisible"
-      :title="modelConfig.title"
-      :mask-closable="false"
-      width="400px"
-      :destroy-on-close="true"
-    >
-      <Form :model="modelObjectForm">
-        <FormItem :label="modelConfig.idLabel">
+    <ModelModal :title="modelConfig.title" class="w-3/5">
+      <Form
+        :model="modelObjectForm"
+        ref="formRef"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 18 }"
+      >
+        <FormItem
+          :label="modelConfig.idLabel"
+          name="id"
+          :rules="[{ required: true, message: '请输入 ID' }]"
+        >
           <Input v-model:value="modelObjectForm.id" allow-clear />
         </FormItem>
         <FormItem :label="modelConfig.nameLabel">
           <Input v-model:value="modelObjectForm.name" allow-clear />
         </FormItem>
       </Form>
-      <template #footer>
-        <Button @click="dialogVisible = false">取 消</Button>
-        <Button type="primary" @click="addNewObject">保 存</Button>
-      </template>
-    </Modal>
+    </ModelModal>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue
deleted file mode 100644
index 7ef79b1fd..000000000
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<!-- 表达式选择 -->
-<script setup lang="ts">
-import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
-
-import { reactive, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';
-
-import { Button, Modal, Pagination, Table, TableColumn } from 'ant-design-vue';
-
-import { getProcessExpressionPage } from '#/api/bpm/processExpression';
-
-/** BPM 流程 表单 */
-defineOptions({ name: 'ProcessExpressionDialog' });
-
-/** 提交表单 */
-const emit = defineEmits(['select']);
-const dialogVisible = ref(false); // 弹窗的是否展示
-const loading = ref(true); // 列表的加载中
-const list = ref<BpmProcessExpressionApi.ProcessExpression[]>([]); // 列表的数据
-const total = ref(0); // 列表的总页数
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  type: '',
-  status: CommonStatusEnum.ENABLE,
-});
-
-/** 打开弹窗 */
-const open = (type: string) => {
-  queryParams.pageNo = 1;
-  queryParams.type = type;
-  getList();
-  dialogVisible.value = true;
-};
-defineExpose({ open }); // 提供 open 方法，用于打开弹窗
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true;
-  try {
-    const data = await getProcessExpressionPage(queryParams);
-    list.value = data.list;
-    total.value = data.total;
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 定义 select 事件，用于操作成功后的回调
-const select = async (row: BpmProcessExpressionApi.ProcessExpression) => {
-  dialogVisible.value = false;
-  // 发送操作成功的事件
-  emit('select', row);
-};
-
-// const handleCancel = () => {
-//   dialogVisible.value = false;
-// };
-</script>
-<template>
-  <Modal
-    title="请选择表达式"
-    v-model:open="dialogVisible"
-    width="1024px"
-    :footer="null"
-  >
-    <ContentWrap>
-      <Table
-        :loading="loading"
-        :data-source="list"
-        :pagination="false"
-        :scroll="{ x: 'max-content' }"
-      >
-        <TableColumn title="名字" align="center" data-index="name" />
-        <TableColumn title="表达式" align="center" data-index="expression" />
-        <TableColumn title="操作" align="center">
-          <template #default="{ record }">
-            <Button type="primary" @click="select(record)"> 选择 </Button>
-          </template>
-        </TableColumn>
-      </Table>
-      <!-- 分页 -->
-      <div class="mt-4 flex justify-end">
-        <Pagination
-          :total="total"
-          v-model:current="queryParams.pageNo"
-          v-model:page-size="queryParams.pageSize"
-          show-size-changer
-          @change="getList"
-        />
-      </div>
-    </ContentWrap>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
index c13a8bf72..7b8831c69 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -17,6 +17,7 @@ import {
   watch,
 } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { SelectOutlined } from '@vben/icons';
 import { handleTree } from '@vben/utils';
 
@@ -42,8 +43,7 @@ import {
   MULTI_LEVEL_DEPT,
 } from '#/views/bpm/components/simple-process-design/consts';
 import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
-
-import ProcessExpressionDialog from './ProcessExpressionDialog.vue';
+import ProcessExpressionSelectModal from '#/views/bpm/processExpression/components/process-expression-select-modal.vue';
 
 defineOptions({ name: 'UserTask' });
 const props = defineProps({
@@ -292,9 +292,13 @@ const updateSkipExpression = () => {
 };
 
 // 打开监听器弹窗
-const processExpressionDialogRef = ref<any>();
+const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessExpressionSelectModal,
+    destroyOnClose: true,
+  });
 const openProcessExpressionDialog = async () => {
-  processExpressionDialogRef.value.open();
+  ProcessExpressionSelectModalApi.open();
 };
 const selectProcessExpression = (
   expression: BpmProcessExpressionApi.ProcessExpression,
@@ -344,7 +348,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Form>
+  <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
     <FormItem label="规则类型" name="candidateStrategy">
       <Select
         v-model:value="userTaskForm.candidateStrategy"
@@ -544,19 +548,19 @@ onBeforeUnmount(() => {
         style="width: 100%"
         @change="updateElementTask"
       />
-      <Button
-        class="!w-1/1 mt-5px"
-        type="primary"
-        :icon="h(SelectOutlined)"
-        @click="openProcessExpressionDialog"
-      >
-        选择表达式
-      </Button>
+      <div class="mt-2 flex w-full items-center justify-center">
+        <Button
+          class="flex flex-1 items-center justify-center"
+          type="primary"
+          size="small"
+          :icon="h(SelectOutlined)"
+          @click="openProcessExpressionDialog"
+        >
+          选择表达式
+        </Button>
+      </div>
       <!-- 选择弹窗 -->
-      <ProcessExpressionDialog
-        ref="processExpressionDialogRef"
-        @select="selectProcessExpression"
-      />
+      <ProcessExpressionSelectModalComp @select="selectProcessExpression" />
     </FormItem>
 
     <FormItem label="跳过表达式" name="skipExpression">
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index 9ead376ff..a297e253e 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -25,8 +25,9 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
-import { DeptSelectModal, UserSelectModal } from '#/components/select-modal';
 import { ImageUpload } from '#/components/upload';
+import { DeptSelectModal } from '#/views/system/dept/components';
+import { UserSelectModal } from '#/views/system/user/components';
 
 const props = defineProps({
   categoryList: {
diff --git a/apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue b/apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue
new file mode 100644
index 000000000..4876e9a32
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessExpressionPage } from '#/api/bpm/processExpression';
+
+defineOptions({ name: 'ProcessExpressionSelectModal' });
+
+const emit = defineEmits<{
+  select: [expression: BpmProcessExpressionApi.ProcessExpression];
+}>();
+
+// 查询参数
+const queryParams = ref({
+  status: CommonStatusEnum.ENABLE,
+});
+
+// 配置 VxeGrid
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'name', title: '名字', minWidth: 160 },
+      { field: 'expression', title: '表达式', minWidth: 260 },
+      {
+        field: 'action',
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+      },
+    ],
+    showOverflow: true,
+    minHeight: 300,
+    proxyConfig: {
+      ajax: {
+        // 查询表达式列表
+        query: async ({ page }) => {
+          return await getProcessExpressionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            status: queryParams.value.status,
+          });
+        },
+      },
+    } as VxeGridPropTypes.ProxyConfig,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置 Modal
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  destroyOnClose: true,
+});
+
+// 选择表达式
+function handleSelect(row: BpmProcessExpressionApi.ProcessExpression) {
+  emit('select', row);
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal class="w-4/5" title="请选择表达式">
+    <Grid>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '选择',
+              type: 'link',
+              icon: 'lucide:pointer',
+              onClick: handleSelect.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</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 88fe40728..cb823f041 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
@@ -16,7 +16,7 @@ import { formatDateTime, isEmpty } from '@vben/utils';
 
 import { Avatar, Button, Image, Timeline, Tooltip } from 'ant-design-vue';
 
-import { UserSelectModal } from '#/components/select-modal';
+import { UserSelectModal } from '#/views/system/user/components';
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' });
 
diff --git a/apps/web-antd/src/views/bpm/processListener/components/data.ts b/apps/web-antd/src/views/bpm/processListener/components/data.ts
new file mode 100644
index 000000000..37725d839
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processListener/components/data.ts
@@ -0,0 +1,36 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 选择监听器弹窗的列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { field: 'name', title: '名字', minWidth: 120 },
+    {
+      field: 'type',
+      title: '类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
+      },
+    },
+    { field: 'event', title: '事件', minWidth: 200 },
+    {
+      field: 'valueType',
+      title: '值类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE },
+      },
+    },
+    { field: 'value', title: '值', minWidth: 150 },
+    {
+      title: '操作',
+      width: 100,
+      slots: { default: 'action' },
+      fixed: 'right',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue b/apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue
new file mode 100644
index 000000000..37b1ae49c
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessListenerPage } from '#/api/bpm/processListener';
+
+import { useGridColumns } from './data';
+
+defineOptions({ name: 'ProcessListenerSelectModal' });
+
+const emit = defineEmits<{
+  select: [listener: BpmProcessListenerApi.ProcessListener];
+}>();
+
+// 查询参数
+const queryParams = ref({
+  type: '',
+  status: CommonStatusEnum.ENABLE,
+});
+
+// 配置 VxeGrid
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    showOverflow: true,
+    minHeight: 300,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProcessListenerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: queryParams.value.type,
+            status: queryParams.value.status,
+          });
+        },
+      },
+    } as VxeGridPropTypes.ProxyConfig,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置 Modal
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      queryParams.value.type = '';
+      return;
+    }
+    const data = modalApi.getData<{ type: string }>();
+    if (data?.type) {
+      queryParams.value.type = data.type;
+    }
+  },
+  destroyOnClose: true,
+});
+
+// 选择监听器
+function handleSelect(row: BpmProcessListenerApi.ProcessListener) {
+  emit('select', row);
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal class="w-4/5" title="请选择监听器">
+    <Grid>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '选择',
+              type: 'link',
+              icon: 'lucide:pointer',
+              onClick: handleSelect.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/iot/device/device/data.ts b/apps/web-antd/src/views/iot/device/device/data.ts
index 3c2bfc694..625eecac4 100644
--- a/apps/web-antd/src/views/iot/device/device/data.ts
+++ b/apps/web-antd/src/views/iot/device/device/data.ts
@@ -1,14 +1,12 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import { DeviceTypeEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
 import { getSimpleDeviceList } from '#/api/iot/device/device';
 import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
-import { DeviceTypeEnum } from '@vben/constants';
-
 import { getSimpleProductList } from '#/api/iot/product/product';
 
 /** 新增/修改的表单 */
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/modules/simulator.vue b/apps/web-antd/src/views/iot/device/device/modules/detail/modules/simulator.vue
index 2b65f9bdf..092033019 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/modules/simulator.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/detail/modules/simulator.vue
@@ -9,6 +9,7 @@ import type { ThingModelData } from '#/api/iot/thingmodel';
 import { computed, ref } from 'vue';
 
 import { ContentWrap } from '@vben/common-ui';
+import { DeviceStateEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import {
@@ -21,15 +22,13 @@ import {
   Textarea,
 } from 'ant-design-vue';
 
-import { DeviceStateEnum } from '@vben/constants';
-
 import { sendDeviceMessage } from '#/api/iot/device/device';
-import DataDefinition from '../../../../../thingmodel/modules/components/data-definition.vue';
 import {
   IotDeviceMessageMethodEnum,
   IoTThingModelTypeEnum,
 } from '#/views/iot/utils/constants';
 
+import DataDefinition from '../../../../../thingmodel/modules/components/data-definition.vue';
 import DeviceDetailsMessage from './message.vue';
 
 const props = defineProps<{
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/modules/thing-model-property-history.vue b/apps/web-antd/src/views/iot/device/device/modules/detail/modules/thing-model-property-history.vue
index 9c4bdd184..cdc84d7f4 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/modules/thing-model-property-history.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/detail/modules/thing-model-property-history.vue
@@ -529,7 +529,10 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
   .chart-container,
   .table-container {
     padding: 16px;
-    background-color: hsl(var(--card)); // TODO @haohao：看看这个能不能 fix 下~ idea 爆红了；
+    background-color: hsl(
+      var(--card)
+    ); // TODO @haohao：看看这个能不能 fix 下~ idea 爆红了；
+
     border: 1px solid hsl(var(--border) / 60%);
     border-radius: 8px;
   }
diff --git a/apps/web-antd/src/views/iot/product/product/modules/detail/modules/info.vue b/apps/web-antd/src/views/iot/product/product/modules/detail/modules/info.vue
index 3d0ae5b99..7f23de1e9 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/detail/modules/info.vue
+++ b/apps/web-antd/src/views/iot/product/product/modules/detail/modules/info.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import type { IotProductApi } from '#/api/iot/product/product';
 
-import { DICT_TYPE } from '@vben/constants';
+import { DeviceTypeEnum, DICT_TYPE } from '@vben/constants';
 
 import { Card, Descriptions } from 'ant-design-vue';
 
-import { DeviceTypeEnum } from '@vben/constants';
 import { DictTag } from '#/components/dict-tag';
 
 interface Props {
diff --git a/apps/web-antd/src/views/mp/material/modules/image-table.vue b/apps/web-antd/src/views/mp/material/modules/image-table.vue
index 10b8f2db9..28781bc83 100644
--- a/apps/web-antd/src/views/mp/material/modules/image-table.vue
+++ b/apps/web-antd/src/views/mp/material/modules/image-table.vue
@@ -6,7 +6,7 @@ import { nextTick, onMounted, watch } from 'vue';
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { useImageGridColumns } from './data';
-import {$t} from '@vben/locales';
+import { $t } from '@vben/locales';
 
 const props = defineProps<{
   list: MpMaterialApi.Material[];
diff --git a/apps/web-antd/src/components/select-modal/dept-select-modal.vue b/apps/web-antd/src/views/system/dept/components/dept-select-modal.vue
similarity index 98%
rename from apps/web-antd/src/components/select-modal/dept-select-modal.vue
rename to apps/web-antd/src/views/system/dept/components/dept-select-modal.vue
index 09cea78ef..7b691dea3 100644
--- a/apps/web-antd/src/components/select-modal/dept-select-modal.vue
+++ b/apps/web-antd/src/views/system/dept/components/dept-select-modal.vue
@@ -1,4 +1,3 @@
-// TODO @芋艿：是否有更好的组织形式？！
 <script lang="ts" setup>
 import type { DataNode } from 'ant-design-vue/es/tree';
 
diff --git a/apps/web-antd/src/components/select-modal/index.ts b/apps/web-antd/src/views/system/dept/components/index.ts
similarity index 50%
rename from apps/web-antd/src/components/select-modal/index.ts
rename to apps/web-antd/src/views/system/dept/components/index.ts
index 2b6e91893..d373be445 100644
--- a/apps/web-antd/src/components/select-modal/index.ts
+++ b/apps/web-antd/src/views/system/dept/components/index.ts
@@ -1,2 +1 @@
 export { default as DeptSelectModal } from './dept-select-modal.vue';
-export { default as UserSelectModal } from './user-select-modal.vue';
diff --git a/apps/web-antd/src/views/system/user/components/index.ts b/apps/web-antd/src/views/system/user/components/index.ts
new file mode 100644
index 000000000..9cb1c93fd
--- /dev/null
+++ b/apps/web-antd/src/views/system/user/components/index.ts
@@ -0,0 +1 @@
+export { default as UserSelectModal } from './user-select-modal.vue';
diff --git a/apps/web-antd/src/components/select-modal/user-select-modal.vue b/apps/web-antd/src/views/system/user/components/user-select-modal.vue
similarity index 99%
rename from apps/web-antd/src/components/select-modal/user-select-modal.vue
rename to apps/web-antd/src/views/system/user/components/user-select-modal.vue
index 77ef98155..174dab28e 100644
--- a/apps/web-antd/src/components/select-modal/user-select-modal.vue
+++ b/apps/web-antd/src/views/system/user/components/user-select-modal.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @芋艿：是否有更好的组织形式？！
 import type { Key } from 'ant-design-vue/es/table/interface';
 
 import type { SystemDeptApi } from '#/api/system/dept';